Testing inline vite webworker syntax.

powersync-ja · Jul 12, 2024 · e410da0 · e410da0
1 parent d749c68
commit e410da0
Show file tree

Hide file tree

Showing 8 changed files with 15,550 additions and 19,811 deletions.
diff --git a/demos/react-supabase-todolist/vite.config.mts b/demos/react-supabase-todolist/vite.config.mts
@@ -4,7 +4,7 @@ import { fileURLToPath, URL } from 'url';
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { VitePWA } from 'vite-plugin-pwa';
+// import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -24,57 +24,57 @@ export default defineConfig({
   optimizeDeps: {
     // Don't optimize these packages as they contain web workers and WASM files.
     // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
-    exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-    include: [
-      '@powersync/web > event-iterator',
-      '@powersync/web > js-logger',
-      '@powersync/web > lodash/throttle',
-      '@powersync/web > can-ndjson-stream',
-      '@powersync/web > buffer',
-      '@powersync/web > rsocket-core',
-      '@powersync/web > rsocket-websocket-client',
-      '@powersync/web > cross-fetch'
-    ]
+    exclude: ['@journeyapps/wa-sqlite']
+    // include: [
+    //   '@powersync/web > event-iterator',
+    //   '@powersync/web > js-logger',
+    //   '@powersync/web > lodash/throttle',
+    //   '@powersync/web > can-ndjson-stream',
+    //   '@powersync/web > buffer',
+    //   '@powersync/web > rsocket-core',
+    //   '@powersync/web > rsocket-websocket-client',
+    //   '@powersync/web > cross-fetch'
+    // ]
   },
   plugins: [
     wasm(),
     topLevelAwait(),
-    react(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
-      manifest: {
-        theme_color: '#c44eff',
-        background_color: '#c44eff',
-        display: 'standalone',
-        scope: '/',
-        start_url: '/',
-        name: 'PowerSync React Demo',
-        short_name: 'PowerSync React',
-        icons: [
-          {
-            src: '/icons/icon-192x192.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: '/icons/icon-256x256.png',
-            sizes: '256x256',
-            type: 'image/png'
-          },
-          {
-            src: '/icons/icon-384x384.png',
-            sizes: '384x384',
-            type: 'image/png'
-          },
-          {
-            src: '/icons/icon-512x512.png',
-            sizes: '512x512',
-            type: 'image/png'
-          }
-        ]
-      }
-    })
+    react()
+    // VitePWA({
+    //   registerType: 'autoUpdate',
+    //   includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
+    //   manifest: {
+    //     theme_color: '#c44eff',
+    //     background_color: '#c44eff',
+    //     display: 'standalone',
+    //     scope: '/',
+    //     start_url: '/',
+    //     name: 'PowerSync React Demo',
+    //     short_name: 'PowerSync React',
+    //     icons: [
+    //       {
+    //         src: '/icons/icon-192x192.png',
+    //         sizes: '192x192',
+    //         type: 'image/png'
+    //       },
+    //       {
+    //         src: '/icons/icon-256x256.png',
+    //         sizes: '256x256',
+    //         type: 'image/png'
+    //       },
+    //       {
+    //         src: '/icons/icon-384x384.png',
+    //         sizes: '384x384',
+    //         type: 'image/png'
+    //       },
+    //       {
+    //         src: '/icons/icon-512x512.png',
+    //         sizes: '512x512',
+    //         type: 'image/png'
+    //       }
+    //     ]
+    //   }
+    // })
   ],
   worker: {
     format: 'es',

diff --git a/packages/common/rollup.config.mjs b/packages/common/rollup.config.mjs
@@ -9,52 +9,30 @@ export default (commandLineArgs) => {
   // Clears rollup CLI warning https://github.com/rollup/rollup/issues/2694
   delete commandLineArgs.sourceMap;
 
-  return [
-    {
-      input: 'lib/index.js',
-      output: {
-        file: 'dist/index.js',
-        format: 'esm',
-        sourcemap: sourcemap
-      },
-      plugins: [
-        json(),
-        nodeResolve({ preferBuiltins: false, browser: true }),
-        commonjs({}),
-        inject({
-          Buffer: ['buffer', 'Buffer'],
-          ReadableStream: ['web-streams-polyfill', 'ReadableStream' ],
-          // Used by can-ndjson-stream
-          TextDecoder: ['text-encoding', 'TextDecoder']
-        })
-      ],
-      // This makes life easier 
-      external: [
-        // This has dynamic logic - makes bundling hard
-        'cross-fetch',
-        // TODO: make the useDefaults logic better. Currently need access to this package directly
-         'js-logger'
-      ]
+  return {
+    input: 'lib/index.js',
+    output: {
+      file: 'dist/index.js',
+      format: 'esm',
+      sourcemap: sourcemap
     },
-    // Todo: This was just to have a copy of what I tried for react-native.
-    // It's likely that we need to produce separate builds for web and react-native. This output isn't currently targeted by the rn package
-    {
-      input: 'lib/index.js',
-      output: {
-        file: 'dist/index.rn.cjs',
-        format: 'cjs',
-        exports: 'named',
-        sourcemap: sourcemap
-      },
-      plugins: [
-        json(),
-        nodeResolve({ preferBuiltins: false, browser: true }),
-        commonjs({}),
-        inject({
-          Buffer: ['buffer', 'Buffer'],
-
-        })
-      ],
-    }
-  ];
+    plugins: [
+      json(),
+      nodeResolve({ preferBuiltins: false, browser: true }),
+      commonjs({}),
+      inject({
+        Buffer: ['buffer', 'Buffer'],
+        ReadableStream: ['web-streams-polyfill', 'ReadableStream'],
+        // Used by can-ndjson-stream
+        TextDecoder: ['text-encoding', 'TextDecoder']
+      })
+    ],
+    // This makes life easier
+    external: [
+      // This has dynamic logic - makes bundling hard
+      'cross-fetch',
+      // TODO: make the useDefaults logic better. Currently need access to this package directly
+      'js-logger'
+    ]
+  };
 };
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,11 +2,12 @@
   "name": "@powersync/web",
   "version": "1.2.0",
   "description": "A Web SDK for JourneyApps PowerSync",
-  "main": "lib/src/index.js",
+  "main": "dist/index.js",
   "types": "lib/src/index.d.ts",
   "files": [
     "lib",
-    "!lib/tests"
+    "!lib/tests",
+    "dist"
   ],
   "repository": "https://github.com/powersync-ja/powersync-js",
   "bugs": {
@@ -18,7 +19,7 @@
   },
   "homepage": "https://docs.powersync.com",
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build && vite build",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "watch": "tsc --build -w",
     "test": "pnpm build && vitest"
@@ -39,23 +40,30 @@
   "dependencies": {
     "@powersync/common": "workspace:*",
     "async-mutex": "^0.4.0",
-    "buffer": "^6.0.3",
     "bson": "^6.6.0",
+    "buffer": "^6.0.3",
     "comlink": "^4.4.1",
     "js-logger": "^1.6.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@journeyapps/wa-sqlite": "~0.2.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-inject": "^5.0.5",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "15.2.3",
     "@types/lodash": "^4.14.200",
     "@types/uuid": "^9.0.6",
     "@vitest/browser": "^1.3.1",
+    "rollup": "4.14.3",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
+    "rollup-plugin-workers": "^2.1.1",
     "typescript": "^5.2.2",
+    "uuid": "^9.0.1",
     "vite": "^5.1.1",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.3.1",
-    "webdriverio": "^8.32.3",
-    "uuid": "^9.0.1"
+    "webdriverio": "^8.32.3"
   }
 }
diff --git a/packages/web/src/db/sync/SharedWebStreamingSyncImplementation.ts b/packages/web/src/db/sync/SharedWebStreamingSyncImplementation.ts
@@ -11,6 +11,7 @@ import {
 import { AbstractSharedSyncClientProvider } from '../../worker/sync/AbstractSharedSyncClientProvider';
 import { PowerSyncConnectionOptions, PowerSyncCredentials, SyncStatus, SyncStatusOptions } from '@powersync/common';
 import { openWorkerDatabasePort } from '../../worker/db/open-worker-database';
+import SharedSyncImplementationWorker from '../../worker/sync/SharedSyncImplementation.worker?sharedworker&inline';
 
 /**
  * The shared worker will trigger methods on this side of the message port
@@ -93,14 +94,13 @@ export class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplem
      * Configure or connect to the shared sync worker.
      * This worker will manage all syncing operations remotely.
      */
-    const syncWorker = new SharedWorker(
-      new URL('../../worker/sync/SharedSyncImplementation.worker.js', import.meta.url),
-      {
-        /* @vite-ignore */
-        name: `shared-sync-${this.webOptions.identifier}`,
-        type: 'module'
-      }
-    );
+    const syncWorker = new SharedSyncImplementationWorker({ name: `shared-sync-${this.webOptions.identifier}` });
+
+    // new SharedWorker(new URL('../../worker/sync/SharedSyncImplementation.worker.js', import.meta.url), {
+    //   /* @vite-ignore */
+    //   name: `shared-sync-${this.webOptions.identifier}`,
+    //   type: 'module'
+    // });
     this.messagePort = syncWorker.port;
     this.syncManager = Comlink.wrap<SharedSyncImplementation>(this.messagePort);
     this.triggerCrudUpload = this.syncManager.triggerCrudUpload;
@@ -112,7 +112,7 @@ export class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplem
      * sync worker.
      */
     const { crudUploadThrottleMs, identifier, retryDelayMs } = this.options;
-    const dbOpenerPort = openWorkerDatabasePort(this.options.identifier!, true) as MessagePort;
+    const dbOpenerPort = openWorkerDatabasePort(this.options.identifier!, true) as any;
     this.isInitialized = this.syncManager.init(Comlink.transfer(dbOpenerPort, [dbOpenerPort]), {
       dbName: this.options.identifier!,
       streamOptions: {

diff --git a/packages/web/src/worker/db/open-worker-database.ts b/packages/web/src/worker/db/open-worker-database.ts
@@ -1,5 +1,6 @@
 import * as Comlink from 'comlink';
 import type { OpenDB } from '../../shared/types';
+import SharedPsWorker from './SharedWASQLiteDB.worker?sharedworker&inline';
 
 /**
  * Opens a shared or dedicated worker which exposes opening of database connections
@@ -11,17 +12,18 @@ export function openWorkerDatabasePort(workerIdentifier: string, multipleTabs =
    *  This enables multi tab support by default, but falls back if SharedWorker is not available
    *  (in the case of Android)
    */
-  return multipleTabs
-    ? new SharedWorker(new URL('./SharedWASQLiteDB.worker.js', import.meta.url), {
-        /* @vite-ignore */
-        name: `shared-DB-worker-${workerIdentifier}`,
-        type: 'module'
-      }).port
-    : new Worker(new URL('./WASQLiteDB.worker.js', import.meta.url), {
-        /* @vite-ignore */
-        name: `DB-worker-${workerIdentifier}`,
-        type: 'module'
-      });
+  return new SharedPsWorker({ name: `shared-DB-worker-${workerIdentifier}` }).port;
+  // return multipleTabs
+  //   ? new SharedWorker(new URL('./SharedWASQLiteDB.worker.js', import.meta.url), {
+  //       /* @vite-ignore */
+  //       name: `shared-DB-worker-${workerIdentifier}`,
+  //       type: 'module'
+  //     }).port
+  //   : new Worker(new URL('./WASQLiteDB.worker.js', import.meta.url), {
+  //       /* @vite-ignore */
+  //       name: `DB-worker-${workerIdentifier}`,
+  //       type: 'module'
+  //     });
 }
 
 /**

diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
@@ -1,17 +1,18 @@
 {
   "extends": "../../tsconfig.base",
   "compilerOptions": {
+    "types": ["vite/client"],
     "paths": {
       "@powersync/web": ["src/index.ts"]
     },
     "baseUrl": "./",
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
-    "lib": ["DOM", "ES2020", "WebWorker"] /* Specify library files to be included in the compilation. */,
-    "module": "es2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": ["DOM", "ESNext", "WebWorker"] /* Specify library files to be included in the compilation. */,
+    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     "outDir": "./lib" /* Redirect output structure to the directory. */,
     "strict": true /* Enable all strict type-checking options. */,
-    "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
     "strictNullChecks": true
   },
   "references": [

diff --git a/packages/web/vite.config.mts b/packages/web/vite.config.mts
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+export default defineConfig({
+  //   optimizeDeps: {
+  //     exclude: ['shared-DB-worker']
+  //   },
+
+  build: {
+    target: 'es2020',
+    lib: {
+      entry: 'lib/src/index.js', // The entry point for your library
+      fileName: (_format) => `index.js`, // Output file naming convention
+      formats: ['es']
+    },
+    rollupOptions: {
+      // Ensure to externalize dependencies that shouldn't be bundled into your library
+      external: [],
+      output: {}
+    }
+  },
+  plugins: [],
+  worker: {
+    format: 'es',
+    plugins: () => [wasm(), topLevelAwait()]
+  }
+});