Bundle powersync loadable

Author: simolus3

demos/example-electron-node/forge.config.ts

@@ -1,3 +1,5 @@
+import OS from 'node:os';
+import path from 'node:path';
 import { createRequire } from 'node:module';
 
 import type { ForgeConfig } from '@electron-forge/shared-types';
@@ -9,10 +11,12 @@ import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-nati
 import { WebpackPlugin } from '@electron-forge/plugin-webpack';
 import type { Configuration, ModuleOptions } from 'webpack';
 import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import type ICopyPlugin from 'copy-webpack-plugin';
 
 const require = createRequire(import.meta.url);
 
 const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const CopyPlugin: typeof ICopyPlugin = require('copy-webpack-plugin');
 
 const webpackPlugins = [
   new ForkTsCheckerWebpackPlugin({
@@ -52,6 +56,18 @@ const defaultWebpackRules: () => Required<ModuleOptions>['rules'] = () => {
   ];
 };
 
+const platform = OS.platform();
+let extensionPath: string;
+if (platform === 'win32') {
+  extensionPath = 'powersync.dll';
+} else if (platform === 'linux') {
+  extensionPath = 'libpowersync.so';
+} else if (platform === 'darwin') {
+  extensionPath = 'libpowersync.dylib';
+} else {
+  throw 'Unknown platform, PowerSync for Node.js currently supports Windows, Linux and macOS.';
+}
+
 const mainConfig: Configuration = {
   /**
    * This is the main entry point for your application, it's the first file
@@ -62,7 +78,15 @@ const mainConfig: Configuration = {
   module: {
     rules: defaultWebpackRules(),
   },
-  plugins: webpackPlugins,
+  plugins: [
+    ...webpackPlugins,
+    new CopyPlugin({
+      patterns: [{
+        from: path.resolve(require.resolve('@powersync/node/package.json'), `../lib/${extensionPath}`),
+        to: extensionPath,
+      }],
+    }),
+  ],
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
   }

demos/example-electron-node/package.json

@@ -24,6 +24,7 @@
     "@electron-forge/plugin-auto-unpack-natives": "^7.7.0",
     "@electron-forge/plugin-webpack": "^7.7.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
+    "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^6.11.0",
     "electron": "30.0.2",
     "electron-rebuild": "^3.2.9",

demos/example-electron-node/src/main/index.ts

@@ -8,13 +8,18 @@ import { default as Logger } from 'js-logger';
 const logger = Logger.get('PowerSyncDemo');
 Logger.useDefaults({ defaultLevel: logger.WARN });
 
+// Handle creating/removing shortcuts on Windows when installing/uninstalling.
+if (require('electron-squirrel-startup')) {
+  app.quit();
+}
+
 const database = new PowerSyncDatabase({
   schema: AppSchema,
   database: {
     dbFilename: 'test.db',
     openWorker(_, options) {
       return new Worker(new URL('./worker.ts', import.meta.url), options);
-    },
+    }
   },
   logger
 });
@@ -25,11 +30,6 @@ const database = new PowerSyncDatabase({
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require('electron-squirrel-startup')) {
-  app.quit();
-}
-
 const createWindow = (): void => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -54,6 +54,9 @@ app.whenReady().then(() => {
   ipcMain.handle('get', async (_, sql: string, args: any[]) => {
     return await database.get(sql, args);
   });
+  ipcMain.handle('getAll', async (_, sql: string, args: any[]) => {
+    return await database.getAll(sql, args);
+  });
   createWindow();
 });
 

demos/example-electron-node/src/main/worker.ts

@@ -1,3 +1,24 @@
+import * as path from 'node:path';
+import OS from 'node:os';
+
 import { startPowerSyncWorker } from '@powersync/node/worker.js';
 
-startPowerSyncWorker();
+function resolvePowerSyncCoreExtension() {
+  const platform = OS.platform();
+  let extensionPath: string;
+  if (platform === 'win32') {
+    extensionPath = 'powersync.dll';
+  } else if (platform === 'linux') {
+    extensionPath = 'libpowersync.so';
+  } else if (platform === 'darwin') {
+    extensionPath = 'libpowersync.dylib';
+  } else {
+    throw 'Unknown platform, PowerSync for Node.js currently supports Windows, Linux and macOS.';
+  }
+
+  // This example uses copy-webpack-plugin to copy the prebuilt library over. This ensures that it is
+  // available in packaged release builds.
+  return path.resolve(__dirname, extensionPath);
+}
+
+startPowerSyncWorker({ extensionPath: resolvePowerSyncCoreExtension });

demos/example-electron-node/src/render/index.html

@@ -2,10 +2,15 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Hello World!</title>
+    <title>PowerSync Node demo!</title>
   </head>
   <body>
-    <h1>Hello World!</h1>
-    <p>Welcome to your Electron application.</p>
+    <h1>PowerSync demo</h1>
+    <p>
+      This electron app has a PowerSync database running in its main process.
+      This database is exposed to web content through an IPC channel. To try it out,
+      enter <code>await powersync.get('SELECT powersync_rs_version()');</code>
+      in the DevTools console.
+    </p>
   </body>
 </html>

demos/example-electron-node/src/render/main.ts

@@ -1,29 +1 @@
-/**
- * This file will automatically be loaded by webpack and run in the "renderer" context.
- * To learn more about the differences between the "main" and the "renderer" context in
- * Electron, visit:
- *
- * https://electronjs.org/docs/latest/tutorial/process-model
- *
- * By default, Node.js integration in this file is disabled. When enabling Node.js integration
- * in a renderer process, please be aware of potential security implications. You can read
- * more about security risks here:
- *
- * https://electronjs.org/docs/tutorial/security
- *
- * To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
- * flag:
- *
- * ```
- *  // Create the browser window.
- *  mainWindow = new BrowserWindow({
- *    width: 800,
- *    height: 600,
- *    webPreferences: {
- *      nodeIntegration: true
- *    }
- *  });
- * ```
- */
-
 console.log('👋 This message is being logged by "renderer.js", included via webpack');

demos/example-electron-node/src/render/preload.ts

@@ -1,5 +1,5 @@
 import { contextBridge, ipcRenderer } from 'electron';
 
 contextBridge.exposeInMainWorld('powersync', {
-  get: (sql: string, variables: any[]) => ipcRenderer.invoke('get', sql, variables),    
+  get: (sql: string, variables: any[]) => ipcRenderer.invoke('get', sql, variables)
 });

packages/node/package.json

@@ -30,7 +30,8 @@
       "import": "./lib/worker.js",
       "require": "./dist/worker.cjs",
       "types": "./lib/worker.d.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "repository": {
     "type": "git",