diff --git a/demos/react-supabase-todolist/package.json b/demos/react-supabase-todolist/package.json index 62feb516e..4b327e869 100644 --- a/demos/react-supabase-todolist/package.json +++ b/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", diff --git a/demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx b/demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx index 8a3f3c209..28ddf5a99 100644 --- a/demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx +++ b/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(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(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; diff --git a/demos/react-supabase-todolist/src/library/powersync/AppSchema.ts b/demos/react-supabase-todolist/src/library/powersync/AppSchema.ts index b2d12ebae..c9a0a7989 100644 --- a/demos/react-supabase-todolist/src/library/powersync/AppSchema.ts +++ b/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: diff --git a/packages/common/rollup.config.mjs b/packages/common/rollup.config.mjs index 792ba7838..950c2eacd 100644 --- a/packages/common/rollup.config.mjs +++ b/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: [ diff --git a/packages/common/src/client/sync/bucket/SqliteBucketStorage.ts b/packages/common/src/client/sync/bucket/SqliteBucketStorage.ts index 4615db6e5..42ddb3852 100644 --- a/packages/common/src/client/sync/bucket/SqliteBucketStorage.ts +++ b/packages/common/src/client/sync/bucket/SqliteBucketStorage.ts @@ -282,7 +282,7 @@ export class SqliteBucketStorage extends BaseObserver 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.