Merge pull request #53 from powersync-community/staging

chore: Add OPFS & Rust Sync Client

Author: michaelbarnes

README.md

@@ -4,6 +4,8 @@
 
 A templated Vite, TS, React, PowerSync and Supabase project to get you started quickly with building offline-first applications with PowerSync and Supabase.
 
+🚀 [Live Demo](https://vite-react-ts-powersync-supabase.up.railway.app/) 🚀
+
 # Usage
 
 ## Install dependencies

eslint.config.js

@@ -3,21 +3,28 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default tseslint.config([
+export default defineConfig([
   globalIgnores(['dist']),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
   },
 ])

package-lock.json

@@ -13,9 +13,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@journeyapps/wa-sqlite": "^1.3.2",
-    "@powersync/react": "^1.8.1",
-    "@powersync/web": "^1.27.1",
+    "@journeyapps/wa-sqlite": "^1.3.3",
+    "@powersync/react": "^1.8.2",
+    "@powersync/web": "^1.29.0",
     "@supabase/supabase-js": "^2.76.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package.json

@@ -2,6 +2,9 @@ import {
   createBaseLogger,
   LogLevel,
   PowerSyncDatabase,
+  SyncClientImplementation,
+  WASQLiteOpenFactory,
+  WASQLiteVFS
 } from "@powersync/web";
 import { AppSchema } from "./AppSchema";
 import { connector } from "./SupabaseConnector";
@@ -11,17 +14,17 @@ logger.useDefaults();
 logger.setLevel(LogLevel.DEBUG);
 
 /**
- * Default configuration - uses IndexedDB storage
+ * Default configuration AccessHandlePoolVFS - uses IndexedDB
  * ✅ Use this for: Simple setup, most browsers
  * ❌ Avoid if: You need Safari support or have stability issues
  */
-export const powerSync = new PowerSyncDatabase({
-  schema: AppSchema,
-  database: {
-    dbFilename: 'example.db'
-  },
-  logger: logger
-});
+// export const powerSync = new PowerSyncDatabase({
+//   schema: AppSchema,
+//   database: {
+//     dbFilename: 'example.db'
+//   },
+//   logger: logger
+// });
 
 /**
  * Alternative configuration with OPFS storage (Origin Private File System)
@@ -41,20 +44,20 @@ export const powerSync = new PowerSyncDatabase({
  * 
  * 📚 Learn more: https://docs.powersync.com/client-sdk-references/javascript-web#sqlite-virtual-file-systems
  */
-// export const powerSync = new PowerSyncDatabase({
-//   database: new WASQLiteOpenFactory({
-//     dbFilename: "exampleVFS.db",
-//     vfs: WASQLiteVFS.OPFSCoopSyncVFS, // Use AccessHandlePoolVFS for single-tab only
-//     flags: {
-//       enableMultiTabs: typeof SharedWorker !== "undefined",
-//     },
-//   }),
-//   flags: {
-//     enableMultiTabs: typeof SharedWorker !== "undefined",
-//   },
-//   schema: AppSchema,
-//   logger: logger,
-// });
+export const powerSync = new PowerSyncDatabase({
+  database: new WASQLiteOpenFactory({
+    dbFilename: "exampleVFS.db",
+    vfs: WASQLiteVFS.OPFSCoopSyncVFS, // Use AccessHandlePoolVFS for single-tab only
+    flags: {
+      enableMultiTabs: typeof SharedWorker !== "undefined",
+    },
+  }),
+  flags: {
+    enableMultiTabs: typeof SharedWorker !== "undefined",
+  },
+  schema: AppSchema,
+  logger: logger,
+});
 
 /**
  * Quick Decision Guide:
@@ -69,4 +72,8 @@ export const powerSync = new PowerSyncDatabase({
 await connector.signInAnonymously();
 
 // Establish connection between PowerSync and the Supabase connector
-powerSync.connect(connector);
+powerSync.connect(connector, { 
+  // Rust based implementation is more efficient and faster than the JavaScript implementation
+  clientImplementation: SyncClientImplementation.RUST, 
+  crudUploadThrottleMs: 5000 
+});