update docs and demos.

Author: stevensJourney

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

@@ -3,15 +3,7 @@ import { AppSchema, ListRecord, LISTS_TABLE, TODOS_TABLE } from '@/library/power
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import {
-  ArrayComparator,
-  createBaseLogger,
-  GetAllQuery,
-  IncrementalWatchMode,
-  LogLevel,
-  PowerSyncDatabase,
-  WatchedQuery
-} from '@powersync/web';
+import { createBaseLogger, DifferentialWatchedQuery, LogLevel, PowerSyncDatabase } from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 
@@ -28,7 +20,7 @@ export const db = new PowerSyncDatabase({
 export type EnhancedListRecord = ListRecord & { total_tasks: number; completed_tasks: number };
 
 export type QueryStore = {
-  lists: WatchedQuery<EnhancedListRecord[]>;
+  lists: DifferentialWatchedQuery<EnhancedListRecord>;
 };
 
 const QueryStore = React.createContext<QueryStore | null>(null);
@@ -39,32 +31,26 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
   const [powerSync] = React.useState(db);
 
   const [queryStore] = React.useState<QueryStore>(() => {
-    const listsQuery = db.incrementalWatch({ mode: IncrementalWatchMode.COMPARISON }).build({
-      comparator: new ArrayComparator({
-        compareBy: (item) => JSON.stringify(item)
-      }),
-      watch: {
-        placeholderData: [],
-        query: new GetAllQuery<EnhancedListRecord>({
-          sql: /* sql */ `
-            SELECT
-              ${LISTS_TABLE}.*,
-              COUNT(${TODOS_TABLE}.id) AS total_tasks,
-              SUM(
-                CASE
-                  WHEN ${TODOS_TABLE}.completed = true THEN 1
-                  ELSE 0
-                END
-              ) as completed_tasks
-            FROM
-              ${LISTS_TABLE}
-              LEFT JOIN ${TODOS_TABLE} ON ${LISTS_TABLE}.id = ${TODOS_TABLE}.list_id
-            GROUP BY
-              ${LISTS_TABLE}.id;
-          `
-        })
-      }
-    });
+    const listsQuery = db
+      .query<EnhancedListRecord>({
+        sql: /* sql */ `
+          SELECT
+            ${LISTS_TABLE}.*,
+            COUNT(${TODOS_TABLE}.id) AS total_tasks,
+            SUM(
+              CASE
+                WHEN ${TODOS_TABLE}.completed = true THEN 1
+                ELSE 0
+              END
+            ) as completed_tasks
+          FROM
+            ${LISTS_TABLE}
+            LEFT JOIN ${TODOS_TABLE} ON ${LISTS_TABLE}.id = ${TODOS_TABLE}.list_id
+          GROUP BY
+            ${LISTS_TABLE}.id;
+        `
+      })
+      .differentialWatch();
 
     return {
       lists: listsQuery

packages/common/src/client/watched/processors/DifferentialQueryProcessor.ts

@@ -16,8 +16,8 @@ export interface WatchedQueryRowDifferential<RowType> {
 }
 
 /**
- * Represents the result of a watched query that has been differentiated.
- * {@link WatchedQueryState.data} is of the {@link WatchedQueryDifferential} form when using the {@link IncrementalWatchMode.DIFFERENTIAL} mode.
+ * Represents the result of a watched query that has been diffed.
+ * {@link DifferentialWatchedQueryState#diff} is of the {@link WatchedQueryDifferential} form.
  */
 export interface WatchedQueryDifferential<RowType> {
   readonly added: ReadonlyArray<Readonly<RowType>>;
@@ -74,7 +74,7 @@ export interface DifferentialWatchedQueryOptions<RowType> extends WatchedQueryOp
 }
 
 /**
- * Settings for incremental watched queries using the {@link IncrementalWatchMode.DIFFERENTIAL} mode.
+ * Settings for differential incremental watched queries using.
  */
 export interface DifferentialWatchedQuerySettings<RowType> extends DifferentialWatchedQueryOptions<RowType> {
   /**

packages/common/src/client/watched/processors/comparators.ts

@@ -13,7 +13,7 @@ export type ArrayComparatorOptions<ItemType> = {
 };
 
 /**
- * Compares array results of watched queries for incrementally watched queries created in the {@link IncrementalWatchMode.COMPARISON} mode.
+ * Compares array results of watched queries for incrementally watched queries created in the standard mode.
  */
 export class ArrayComparator<ItemType> implements WatchedQueryComparator<ItemType[]> {
   constructor(protected options: ArrayComparatorOptions<ItemType>) {}

packages/kysely-driver/tests/sqlite/watch.test.ts

@@ -1,4 +1,4 @@
-import { AbstractPowerSyncDatabase, column, IncrementalWatchMode, Schema, Table } from '@powersync/common';
+import { AbstractPowerSyncDatabase, column, Schema, Table } from '@powersync/common';
 import { PowerSyncDatabase } from '@powersync/web';
 import { sql } from 'kysely';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -265,18 +265,13 @@ describe('Watch Tests', () => {
   it('incremental watch should accept queries', async () => {
     const query = db.selectFrom('assets').select(db.fn.count('assets.id').as('count'));
 
-    const watch = powerSyncDb.incrementalWatch({ mode: IncrementalWatchMode.COMPARISON }).build({
-      watch: {
-        query,
-        placeholderData: []
-      }
-    });
+    const watch = powerSyncDb.customQuery(query).watch();
 
     const latestDataPromise = new Promise<Awaited<ReturnType<typeof query.execute>>>((resolve) => {
       const dispose = watch.registerListener({
         onData: (data) => {
           if (data.length > 0) {
-            resolve(data);
+            resolve([...data]);
             dispose();
           }
         }

packages/react/tests/profile.test.tsx

@@ -282,14 +282,13 @@ const testsInsertsCompare = async (options: {
   const notMemoizedDifferentialTest = async () => {
     await db.execute('DELETE FROM lists;');
 
-    const query = db.incrementalWatch({ mode: commonSdk.IncrementalWatchMode.DIFFERENTIAL }).build({
-      watch: {
-        query: new commonSdk.GetAllQuery<List>({
-          sql: 'SELECT * FROM lists ORDER BY name ASC;'
-        }),
+    const query = db
+      .query<List>({
+        sql: 'SELECT * FROM lists ORDER BY name ASC;'
+      })
+      .differentialWatch({
         reportFetching: false
-      }
-    });
+      });
 
     const times: number[] = [];
     diffSpy(query, times);
@@ -300,8 +299,8 @@ const testsInsertsCompare = async (options: {
       initialDataCount,
       useMemoize: false,
       getQueryData: () => {
-        const result = useWatchedQuerySubscription(query).data.all;
-        return result;
+        const { data } = useWatchedQuerySubscription(query);
+        return [...data];
       }
     });
 
@@ -322,14 +321,8 @@ const testsInsertsCompare = async (options: {
   // Testing Differential With Memoization
   await db.execute('DELETE FROM lists;');
 
-  // guardLog = true; // Prevents logging from TestItemWidget
-  const query = db.incrementalWatch({ mode: commonSdk.IncrementalWatchMode.DIFFERENTIAL }).build({
-    watch: {
-      query: new commonSdk.GetAllQuery<List>({
-        sql: 'SELECT * FROM lists ORDER BY name ASC;'
-      }),
-      reportFetching: false
-    }
+  const query = db.query<List>({ sql: 'SELECT * FROM lists ORDER BY name ASC;' }).differentialWatch({
+    reportFetching: false
   });
 
   const times: number[] = [];
@@ -341,8 +334,8 @@ const testsInsertsCompare = async (options: {
     initialDataCount,
     useMemoize: true,
     getQueryData: () => {
-      const result = useWatchedQuerySubscription(query).data.all;
-      return result;
+      const { data } = useWatchedQuerySubscription(query);
+      return [...data];
     }
   });
 

packages/sqljs/sql.js

@@ -0,0 +1 @@
+Subproject commit 52e5649f3a3a2a46aa4ad58a79d118c22f56cf30