wip

demos/react-native-supabase-todolist/app/_layout.tsx

@@ -1,7 +1,7 @@
 import { Stack } from 'expo-router';
 import React, { useMemo } from 'react';
 import { useSystem } from '../library/powersync/system';
-import { PowerSyncContext } from '@powersync/react-native';
+import { PowerSyncContext } from '@powersync/react';
 
 /**
  * This App uses a nested navigation stack.

demos/react-native-supabase-todolist/app/views/console.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import { Table, Row } from 'react-native-reanimated-table';
-import { QueryResult } from '@powersync/react-native';
+import { QueryResult } from '@powersync/common';
 import { useSystem } from '../../library/powersync/system';
 import { ScrollView, TextInput } from 'react-native-gesture-handler';
 

demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx

@@ -1,5 +1,5 @@
 import { ATTACHMENT_TABLE, AttachmentRecord } from '@powersync/attachments';
-import { usePowerSync, useQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react';
 import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
 import * as React from 'react';

demos/react-native-supabase-todolist/app/views/todos/lists.tsx

@@ -7,7 +7,7 @@ import prompt from 'react-native-prompt-android';
 import { router, Stack } from 'expo-router';
 import { LIST_TABLE, TODO_TABLE, ListRecord } from '../../../library/powersync/AppSchema';
 import { useSystem } from '../../../library/powersync/system';
-import { useQuery, useStatus } from '@powersync/react-native';
+import { useQuery, useStatus } from '@powersync/react';
 import { ListItemWidget } from '../../../library/widgets/ListItemWidget';
 
 const description = (total: number, completed: number = 0) => {

demos/react-native-supabase-todolist/library/powersync/AppSchema.ts

@@ -1,5 +1,5 @@
 import { AttachmentTable } from '@powersync/attachments';
-import { Column, ColumnType, Index, IndexedColumn, Schema, Table } from '@powersync/react-native';
+import { Column, ColumnType, Index, IndexedColumn, Schema, Table } from '@powersync/common';
 
 export const TODO_TABLE = 'todos';
 export const LIST_TABLE = 'lists';

demos/react-native-supabase-todolist/library/powersync/system.ts

@@ -1,7 +1,9 @@
 import '@azure/core-asynciterator-polyfill';
 
 import React from 'react';
-import { PowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseNative } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseWeb } from '@powersync/web';
+import { AbstractPowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/common';
 import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
 import { AppSchema } from './AppSchema';
@@ -18,19 +20,28 @@ export class System {
   kvStorage: KVStorage;
   storage: SupabaseStorageAdapter;
   supabaseConnector: SupabaseConnector;
-  powersync: PowerSyncDatabase;
+  powersync: AbstractPowerSyncDatabase;
   attachmentQueue: PhotoAttachmentQueue | undefined = undefined;
 
   constructor() {
     this.kvStorage = new KVStorage();
     this.supabaseConnector = new SupabaseConnector(this);
     this.storage = this.supabaseConnector.storage;
-    this.powersync = new PowerSyncDatabase({
-      schema: AppSchema,
-      database: {
-        dbFilename: 'sqlite.db'
-      }
-    });
+    if (PowerSyncDatabaseNative) {
+      this.powersync = new PowerSyncDatabaseNative({
+        schema: AppSchema,
+        database: {
+          dbFilename: 'sqlite.db'
+        }
+      });
+    } else {
+      this.powersync = new PowerSyncDatabaseWeb({
+        schema: AppSchema,
+        database: {
+          dbFilename: 'sqlite.db'
+        },
+      });
+    }
 
     if (AppConfig.supabaseBucket) {
       this.attachmentQueue = new PhotoAttachmentQueue({
@@ -53,6 +64,7 @@ export class System {
     await this.powersync.init();
     await this.powersync.connect(this.supabaseConnector, { connectionMethod: SyncStreamConnectionMethod.WEB_SOCKET });
 
+    console.log("connected")
     if (this.attachmentQueue) {
       await this.attachmentQueue.init();
     }

demos/react-native-supabase-todolist/library/supabase/SupabaseConnector.ts

@@ -1,4 +1,4 @@
-import { AbstractPowerSyncDatabase, CrudEntry, PowerSyncBackendConnector, UpdateType } from '@powersync/react-native';
+import { AbstractPowerSyncDatabase, CrudEntry, PowerSyncBackendConnector, UpdateType } from '@powersync/common';
 
 import { SupabaseClient, createClient } from '@supabase/supabase-js';
 import { AppConfig } from './AppConfig';

demos/react-native-supabase-todolist/metro.config.js

@@ -19,4 +19,28 @@ config.resolver.nodeModulesPaths = [
 config.resolver.disableHierarchicalLookup = true;
 config.resolver.unstable_enableSymlinks = true;
 
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (platform === 'web') {
+    if (['react-native-prompt-android', '@powersync/react-native'].includes(moduleName)) {
+      return {
+        type: 'empty'
+      };
+    }
+    const mapping = { 'react-native': 'react-native-web', '@powersync/web':'@powersync/web/dist/index.umd.js' };
+    if (mapping[moduleName]) {
+      console.log('remapping', moduleName);
+      return context.resolveRequest(context, mapping[moduleName], platform);
+    }
+  } else {
+    if (['@powersync/web'].includes(moduleName)) {
+      return {
+        type: 'empty'
+      };
+    }
+  }
+
+  // Ensure you call the default resolver.
+  return context.resolveRequest(context, moduleName, platform);
+};
+
 module.exports = config;

demos/react-native-supabase-todolist/package.json

@@ -10,8 +10,10 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@expo/vector-icons": "^14.0.0",
+    "@expo/metro-runtime": "^3.2.1",
     "@journeyapps/react-native-quick-sqlite": "^1.1.7",
     "@powersync/attachments": "workspace:*",
+    "@powersync/web": "workspace:*",
     "@powersync/common": "workspace:*",
     "@powersync/react": "workspace:*",
     "@powersync/react-native": "workspace:*",
@@ -46,6 +48,7 @@
     "react-native-safe-area-view": "^1.1.1",
     "react-native-screens": "~3.31.1",
     "react-native-vector-icons": "^10.0.0",
+    "react-native-web": "^0.19.12",
     "react-navigation-stack": "^2.10.4"
   },
   "devDependencies": {

packages/web/package.json

@@ -19,7 +19,7 @@
   },
   "homepage": "https://docs.powersync.com",
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build && webpack",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "watch": "tsc --build -w",
     "test": "pnpm build && vitest"
@@ -54,14 +54,21 @@
     "@types/lodash": "^4.14.200",
     "@types/uuid": "^9.0.6",
     "@vitest/browser": "^1.3.1",
+    "crypto-browserify": "^3.12.0",
     "p-defer": "^4.0.1",
     "rollup": "4.14.3",
+    "stream-browserify": "^3.0.0",
+    "terser-webpack-plugin": "^5.3.9",
     "typescript": "^5.5.3",
     "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"
+    "vm-browserify": "^1.1.2",
+    "webdriverio": "^8.32.3",
+    "webpack": "^5.90.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-node-externals": "^3.0.0"
   }
 }

packages/web/webpack.config.js

@@ -0,0 +1,43 @@
+const production = process.env.NODE_ENV === 'production';
+const TerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+module.exports = () => {
+  return {
+    entry: path.join(__dirname, './lib/src/index.js'),
+    output: {
+      filename: 'index.umd.js',
+      path: path.join(__dirname, 'dist'),
+      // libraryTarget: 'commonjs',
+      library: {
+        name: 'sdk_web',
+        type: 'umd'
+      }
+      /**
+       * Disables webpack top-level function wrapping (appears to be different in Webpack 4 -> 5)
+       */
+      // iife: false
+    },
+    module: {
+      rules: [
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          loader: 'source-map-loader'
+        }
+      ]
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      fallback: {
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify'),
+        vm: require.resolve('vm-browserify')
+      }
+    },
+    devtool: production ? 'source-map' : 'cheap-module-source-map',
+    mode: production ? 'production' : 'development',
+    optimization: {
+      minimizer: [new TerserPlugin()]
+    }
+  };
+};