[Demo] Vite Example (#78)

Author: stevensJourney

demos/example-vite/package.json

@@ -13,6 +13,8 @@
     "@journeyapps/powersync-sdk-web": "workspace:*"
   },
   "devDependencies": {
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
   }
 }

demos/example-vite/src/index.js

@@ -6,6 +6,22 @@ import {
   Table
 } from '@journeyapps/powersync-sdk-web';
 
+/**
+ * A placeholder connector which doesn't do anything.
+ * This is just used to verify that the sync workers can be loaded
+ * when connecting.
+ */
+class DummyConnector {
+  async fetchCredentials() {
+    return {
+      endpoint: '',
+      token: ''
+    };
+  }
+
+  async uploadData(database) {}
+}
+
 export const AppSchema = new Schema([
   new Table({ name: 'customers', columns: [new Column({ name: 'name', type: ColumnType.TEXT })] })
 ]);
@@ -29,6 +45,19 @@ const openDatabase = async () => {
 
   const result = await PowerSync.getAll('SELECT * FROM customers');
   console.log('contents of customers: ', result);
+
+  console.log(
+    `Attempting to connect in order to verify web workers are correctly loaded.
+    This doesn't use any actual network credentials. 
+    Network errors will be shown: these can be ignored.`
+  );
+
+  /**
+   * Try and connect, this will setup shared sync workers
+   * This will fail due to not having a valid endpoint,
+   * but it will try - which is all that matters.
+   */
+  await PowerSync.connect(new DummyConnector());
 };
 
 document.addEventListener('DOMContentLoaded', (event) => {

demos/example-vite/vite.config.ts

@@ -1,3 +1,6 @@
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
@@ -9,7 +12,15 @@ export default defineConfig({
       input: 'src/index.html'
     }
   },
+  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', '@journeyapps/powersync-sdk-web'],
+    include: ['object-hash', 'uuid', 'event-iterator', 'js-logger', 'lodash', 'can-ndjson-stream']
+  },
+  plugins: [wasm(), topLevelAwait()],
   worker: {
-    format: 'es'
+    format: 'es',
+    plugins: () => [wasm(), topLevelAwait()]
   }
 });