Attempt to reproduce #674

Author: simolus3

demos/react-supabase-todolist/package.json

@@ -9,14 +9,15 @@
     "start": "pnpm build && pnpm preview"
   },
   "dependencies": {
-    "@powersync/react": "workspace:*",
-    "@powersync/web": "workspace:*",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@journeyapps/wa-sqlite": "^1.2.0",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",
+    "@powersync/drizzle-driver": "^0.4.0",
+    "@powersync/react": "workspace:*",
+    "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.39.7",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",

demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx

@@ -1,11 +1,26 @@
 import { configureFts } from '@/app/utils/fts_setup';
-import { AppSchema, ListRecord, LISTS_TABLE, TODOS_TABLE } from '@/library/powersync/AppSchema';
+import {
+  AppSchema,
+  drizzleSchema,
+  drizzleTodos,
+  ListRecord,
+  LISTS_TABLE,
+  TODOS_TABLE
+} from '@/library/powersync/AppSchema';
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import { createBaseLogger, DifferentialWatchedQuery, LogLevel, PowerSyncDatabase } from '@powersync/web';
+import {
+  createBaseLogger,
+  DifferentialWatchedQuery,
+  LogLevel,
+  PowerSyncDatabase,
+  SyncClientImplementation
+} from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
+import { wrapPowerSyncWithDrizzle } from '@powersync/drizzle-driver';
+import { inArray, sql } from 'drizzle-orm';
 
 const SupabaseContext = React.createContext<SupabaseConnector | null>(null);
 export const useSupabase = () => React.useContext(SupabaseContext);
@@ -17,6 +32,8 @@ export const db = new PowerSyncDatabase({
   }
 });
 
+export const drizzleDb = wrapPowerSyncWithDrizzle(db, { schema: drizzleSchema });
+
 export type EnhancedListRecord = ListRecord & { total_tasks: number; completed_tasks: number };
 
 export type QueryStore = {
@@ -26,6 +43,13 @@ export type QueryStore = {
 const QueryStore = React.createContext<QueryStore | null>(null);
 export const useQueryStore = () => React.useContext(QueryStore);
 
+export async function markItemsAsCompleted(ids: string[]) {
+  await drizzleDb
+    .update(drizzleTodos)
+    .set({ completed: 1, completed_at: sql`datetime ('now')` })
+    .where(inArray(drizzleTodos.id, ids));
+}
+
 export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
   const [connector] = React.useState(() => new SupabaseConnector());
   const [powerSync] = React.useState(db);
@@ -68,7 +92,7 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
     const l = connector.registerListener({
       initialized: () => {},
       sessionStarted: () => {
-        powerSync.connect(connector);
+        powerSync.connect(connector, { clientImplementation: SyncClientImplementation.RUST });
       }
     });
 
@@ -94,4 +118,6 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
+(window as any).markItemsAsCompleted = markItemsAsCompleted;
+
 export default SystemProvider;

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

@@ -1,4 +1,5 @@
 import { column, Schema, Table } from '@powersync/web';
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
 
 export const LISTS_TABLE = 'lists';
 export const TODOS_TABLE = 'todos';
@@ -27,6 +28,16 @@ export const AppSchema = new Schema({
   lists
 });
 
+export const drizzleTodos = sqliteTable('todos', {
+  id: text('id').primaryKey().notNull(),
+  created_at: text('created_at'),
+  completed_at: text('completed_at'),
+  description: text('name'),
+  completed: integer('completed')
+});
+
+export const drizzleSchema = { drizzleTodos };
+
 export type Database = (typeof AppSchema)['types'];
 export type TodoRecord = Database['todos'];
 // OR:

packages/common/rollup.config.mjs

@@ -36,8 +36,8 @@ export default (commandLineArgs) => {
         ReadableStream: ['web-streams-polyfill/ponyfill', 'ReadableStream'],
         // Used by can-ndjson-stream
         TextDecoder: ['text-encoding', 'TextDecoder']
-      }),
-      terser({ sourceMap })
+      })
+      //      terser({ sourceMap })
     ],
     // This makes life easier
     external: [

packages/common/src/client/sync/bucket/SqliteBucketStorage.ts

@@ -282,7 +282,7 @@ export class SqliteBucketStorage extends BaseObserver<BucketStorageListener> imp
       const seqAfter: number = rs.rows?.item(0)['seq'];
       if (seqAfter != seqBefore) {
         this.logger.debug(
-          `New data uploaded since write checpoint ${opId} - need new write checkpoint (sequence updated)`
+          `New data uploaded since write checkpoint ${opId} - need new write checkpoint (sequence updated)`
         );
 
         // New crud data may have been uploaded since we got the checkpoint. Abort.