@powersync/common 1.34.0 → 1.35.0

package/lib/client/watched/GetAllQuery.d.ts

@@ -0,0 +1,32 @@
+import { CompiledQuery } from '../../types/types.js';
+import { AbstractPowerSyncDatabase } from '../AbstractPowerSyncDatabase.js';
+import { WatchCompatibleQuery } from './WatchedQuery.js';
+/**
+ * Options for {@link GetAllQuery}.
+ */
+export type GetAllQueryOptions<RowType = unknown> = {
+    sql: string;
+    parameters?: ReadonlyArray<unknown>;
+    /**
+     * Optional mapper function to convert raw rows into the desired RowType.
+     * @example
+     * ```javascript
+     * (rawRow) => ({
+     *   id: rawRow.id,
+     *   created_at: new Date(rawRow.created_at),
+     * })
+     * ```
+     */
+    mapper?: (rawRow: Record<string, unknown>) => RowType;
+};
+/**
+ * Performs a {@link AbstractPowerSyncDatabase.getAll} operation for a watched query.
+ */
+export declare class GetAllQuery<RowType = unknown> implements WatchCompatibleQuery<RowType[]> {
+    protected options: GetAllQueryOptions<RowType>;
+    constructor(options: GetAllQueryOptions<RowType>);
+    compile(): CompiledQuery;
+    execute(options: {
+        db: AbstractPowerSyncDatabase;
+    }): Promise<RowType[]>;
+}

package/lib/client/watched/GetAllQuery.js

@@ -0,0 +1,24 @@
+/**
+ * Performs a {@link AbstractPowerSyncDatabase.getAll} operation for a watched query.
+ */
+export class GetAllQuery {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    compile() {
+        return {
+            sql: this.options.sql,
+            parameters: this.options.parameters ?? []
+        };
+    }
+    async execute(options) {
+        const { db } = options;
+        const { sql, parameters = [] } = this.compile();
+        const rawResult = await db.getAll(sql, [...parameters]);
+        if (this.options.mapper) {
+            return rawResult.map(this.options.mapper);
+        }
+        return rawResult;
+    }
+}

package/lib/client/watched/WatchedQuery.d.ts

@@ -0,0 +1,98 @@
+import { CompiledQuery } from '../../types/types.js';
+import { BaseListener } from '../../utils/BaseObserver.js';
+import { MetaBaseObserverInterface } from '../../utils/MetaBaseObserver.js';
+import { AbstractPowerSyncDatabase } from '../AbstractPowerSyncDatabase.js';
+/**
+ * State for {@link WatchedQuery} instances.
+ */
+export interface WatchedQueryState<Data> {
+    /**
+     * Indicates the initial loading state (hard loading).
+     * Loading becomes false once the first set of results from the watched query is available or an error occurs.
+     */
+    readonly isLoading: boolean;
+    /**
+     * Indicates whether the query is currently fetching data, is true during the initial load
+     * and any time when the query is re-evaluating (useful for large queries).
+     */
+    readonly isFetching: boolean;
+    /**
+     * The last error that occurred while executing the query.
+     */
+    readonly error: Error | null;
+    /**
+     * The last time the query was updated.
+     */
+    readonly lastUpdated: Date | null;
+    /**
+     * The last data returned by the query.
+     */
+    readonly data: Data;
+}
+/**
+ * Options provided to the `execute` method of a {@link WatchCompatibleQuery}.
+ */
+export interface WatchExecuteOptions {
+    sql: string;
+    parameters: any[];
+    db: AbstractPowerSyncDatabase;
+}
+/**
+ * Similar to {@link CompatibleQuery}, except the `execute` method
+ * does not enforce an Array result type.
+ */
+export interface WatchCompatibleQuery<ResultType> {
+    execute(options: WatchExecuteOptions): Promise<ResultType>;
+    compile(): CompiledQuery;
+}
+export interface WatchedQueryOptions {
+    /** The minimum interval between queries. */
+    throttleMs?: number;
+    /**
+     * If true (default) the watched query will update its state to report
+     * on the fetching state of the query.
+     * Setting to false reduces the number of state changes if the fetch status
+     * is not relevant to the consumer.
+     */
+    reportFetching?: boolean;
+    /**
+     * By default, watched queries requery the database on any change to any dependent table of the query.
+     * Supplying an override here can be used to limit the tables which trigger querying the database.
+     */
+    triggerOnTables?: string[];
+}
+export declare enum WatchedQueryListenerEvent {
+    ON_DATA = "onData",
+    ON_ERROR = "onError",
+    ON_STATE_CHANGE = "onStateChange",
+    CLOSED = "closed"
+}
+export interface WatchedQueryListener<Data> extends BaseListener {
+    [WatchedQueryListenerEvent.ON_DATA]?: (data: Data) => void | Promise<void>;
+    [WatchedQueryListenerEvent.ON_ERROR]?: (error: Error) => void | Promise<void>;
+    [WatchedQueryListenerEvent.ON_STATE_CHANGE]?: (state: WatchedQueryState<Data>) => void | Promise<void>;
+    [WatchedQueryListenerEvent.CLOSED]?: () => void | Promise<void>;
+}
+export declare const DEFAULT_WATCH_THROTTLE_MS = 30;
+export declare const DEFAULT_WATCH_QUERY_OPTIONS: WatchedQueryOptions;
+export interface WatchedQuery<Data = unknown, Settings extends WatchedQueryOptions = WatchedQueryOptions, Listener extends WatchedQueryListener<Data> = WatchedQueryListener<Data>> extends MetaBaseObserverInterface<Listener> {
+    /**
+     * Current state of the watched query.
+     */
+    readonly state: WatchedQueryState<Data>;
+    readonly closed: boolean;
+    /**
+     * Subscribe to watched query events.
+     * @returns A function to unsubscribe from the events.
+     */
+    registerListener(listener: Listener): () => void;
+    /**
+     * Updates the underlying query options.
+     * This will trigger a re-evaluation of the query and update the state.
+     */
+    updateSettings(options: Settings): Promise<void>;
+    /**
+     * Close the watched query and end all subscriptions.
+     */
+    close(): Promise<void>;
+}

package/lib/client/watched/WatchedQuery.js

@@ -0,0 +1,12 @@
+export var WatchedQueryListenerEvent;
+(function (WatchedQueryListenerEvent) {
+    WatchedQueryListenerEvent["ON_DATA"] = "onData";
+    WatchedQueryListenerEvent["ON_ERROR"] = "onError";
+    WatchedQueryListenerEvent["ON_STATE_CHANGE"] = "onStateChange";
+    WatchedQueryListenerEvent["CLOSED"] = "closed";
+})(WatchedQueryListenerEvent || (WatchedQueryListenerEvent = {}));
+export const DEFAULT_WATCH_THROTTLE_MS = 30;
+export const DEFAULT_WATCH_QUERY_OPTIONS = {
+    throttleMs: DEFAULT_WATCH_THROTTLE_MS,
+    reportFetching: true
+};

package/lib/client/watched/processors/AbstractQueryProcessor.d.ts

@@ -0,0 +1,67 @@
+import { AbstractPowerSyncDatabase } from '../../../client/AbstractPowerSyncDatabase.js';
+import { MetaBaseObserver } from '../../../utils/MetaBaseObserver.js';
+import { WatchedQuery, WatchedQueryListener, WatchedQueryOptions, WatchedQueryState } from '../WatchedQuery.js';
+/**
+ * @internal
+ */
+export interface AbstractQueryProcessorOptions<Data, Settings extends WatchedQueryOptions = WatchedQueryOptions> {
+    db: AbstractPowerSyncDatabase;
+    watchOptions: Settings;
+    placeholderData: Data;
+}
+/**
+ * @internal
+ */
+export interface LinkQueryOptions<Data, Settings extends WatchedQueryOptions = WatchedQueryOptions> {
+    abortSignal: AbortSignal;
+    settings: Settings;
+}
+type MutableDeep<T> = T extends ReadonlyArray<infer U> ? U[] : T;
+/**
+ * @internal Mutable version of {@link WatchedQueryState}.
+ * This is used internally to allow updates to the state.
+ */
+export type MutableWatchedQueryState<Data> = {
+    -readonly [P in keyof WatchedQueryState<Data>]: MutableDeep<WatchedQueryState<Data>[P]>;
+};
+type WatchedQueryProcessorListener<Data> = WatchedQueryListener<Data>;
+/**
+ * Performs underlying watching and yields a stream of results.
+ * @internal
+ */
+export declare abstract class AbstractQueryProcessor<Data = unknown[], Settings extends WatchedQueryOptions = WatchedQueryOptions> extends MetaBaseObserver<WatchedQueryProcessorListener<Data>> implements WatchedQuery<Data, Settings> {
+    protected options: AbstractQueryProcessorOptions<Data, Settings>;
+    readonly state: WatchedQueryState<Data>;
+    protected abortController: AbortController;
+    protected initialized: Promise<void>;
+    protected _closed: boolean;
+    protected disposeListeners: (() => void) | null;
+    get closed(): boolean;
+    constructor(options: AbstractQueryProcessorOptions<Data, Settings>);
+    protected constructInitialState(): WatchedQueryState<Data>;
+    protected get reportFetching(): boolean;
+    /**
+     * Updates the underlying query.
+     */
+    updateSettings(settings: Settings): Promise<void>;
+    /**
+     * This method is used to link a query to the subscribers of this listener class.
+     * This method should perform actual query watching and report results via {@link updateState} method.
+     */
+    protected abstract linkQuery(options: LinkQueryOptions<Data>): Promise<void>;
+    protected updateState(update: Partial<MutableWatchedQueryState<Data>>): Promise<void>;
+    /**
+     * Configures base DB listeners and links the query to listeners.
+     */
+    protected init(): Promise<void>;
+    close(): Promise<void>;
+    /**
+     * Runs a callback and reports errors to the error listeners.
+     */
+    protected runWithReporting<T>(callback: () => Promise<T>): Promise<void>;
+    /**
+     * Iterate listeners and reports errors to onError handlers.
+     */
+    protected iterateAsyncListenersWithError(callback: (listener: Partial<WatchedQueryProcessorListener<Data>>) => Promise<void> | void): Promise<void>;
+}
+export {};

package/lib/client/watched/processors/AbstractQueryProcessor.js

@@ -0,0 +1,135 @@
+import { MetaBaseObserver } from '../../../utils/MetaBaseObserver.js';
+/**
+ * Performs underlying watching and yields a stream of results.
+ * @internal
+ */
+export class AbstractQueryProcessor extends MetaBaseObserver {
+    options;
+    state;
+    abortController;
+    initialized;
+    _closed;
+    disposeListeners;
+    get closed() {
+        return this._closed;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+        this.abortController = new AbortController();
+        this._closed = false;
+        this.state = this.constructInitialState();
+        this.disposeListeners = null;
+        this.initialized = this.init();
+    }
+    constructInitialState() {
+        return {
+            isLoading: true,
+            isFetching: this.reportFetching, // Only set to true if we will report updates in future
+            error: null,
+            lastUpdated: null,
+            data: this.options.placeholderData
+        };
+    }
+    get reportFetching() {
+        return this.options.watchOptions.reportFetching ?? true;
+    }
+    /**
+     * Updates the underlying query.
+     */
+    async updateSettings(settings) {
+        await this.initialized;
+        if (!this.state.isFetching && this.reportFetching) {
+            await this.updateState({
+                isFetching: true
+            });
+        }
+        this.options.watchOptions = settings;
+        this.abortController.abort();
+        this.abortController = new AbortController();
+        await this.runWithReporting(() => this.linkQuery({
+            abortSignal: this.abortController.signal,
+            settings
+        }));
+    }
+    async updateState(update) {
+        if (typeof update.error !== 'undefined') {
+            await this.iterateAsyncListenersWithError(async (l) => l.onError?.(update.error));
+            // An error always stops for the current fetching state
+            update.isFetching = false;
+            update.isLoading = false;
+        }
+        Object.assign(this.state, { lastUpdated: new Date() }, update);
+        if (typeof update.data !== 'undefined') {
+            await this.iterateAsyncListenersWithError(async (l) => l.onData?.(this.state.data));
+        }
+        await this.iterateAsyncListenersWithError(async (l) => l.onStateChange?.(this.state));
+    }
+    /**
+     * Configures base DB listeners and links the query to listeners.
+     */
+    async init() {
+        const { db } = this.options;
+        const disposeCloseListener = db.registerListener({
+            closing: async () => {
+                await this.close();
+            }
+        });
+        // Wait for the schema to be set before listening to changes
+        await db.waitForReady();
+        const disposeSchemaListener = db.registerListener({
+            schemaChanged: async () => {
+                await this.runWithReporting(async () => {
+                    await this.updateSettings(this.options.watchOptions);
+                });
+            }
+        });
+        this.disposeListeners = () => {
+            disposeCloseListener();
+            disposeSchemaListener();
+        };
+        // Initial setup
+        this.runWithReporting(async () => {
+            await this.updateSettings(this.options.watchOptions);
+        });
+    }
+    async close() {
+        await this.initialized;
+        this.abortController.abort();
+        this.disposeListeners?.();
+        this.disposeListeners = null;
+        this._closed = true;
+        this.iterateListeners((l) => l.closed?.());
+        this.listeners.clear();
+    }
+    /**
+     * Runs a callback and reports errors to the error listeners.
+     */
+    async runWithReporting(callback) {
+        try {
+            await callback();
+        }
+        catch (error) {
+            // This will update the error on the state and iterate error listeners
+            await this.updateState({ error });
+        }
+    }
+    /**
+     * Iterate listeners and reports errors to onError handlers.
+     */
+    async iterateAsyncListenersWithError(callback) {
+        try {
+            await this.iterateAsyncListeners(async (l) => callback(l));
+        }
+        catch (error) {
+            try {
+                await this.iterateAsyncListeners(async (l) => l.onError?.(error));
+            }
+            catch (error) {
+                // Errors here are ignored
+                // since we are already in an error state
+                this.options.db.logger.error('Watched query error handler threw an Error', error);
+            }
+        }
+    }
+}

package/lib/client/watched/processors/DifferentialQueryProcessor.d.ts

@@ -0,0 +1,121 @@
+import { WatchCompatibleQuery, WatchedQuery, WatchedQueryListener, WatchedQueryOptions } from '../WatchedQuery.js';
+import { AbstractQueryProcessor, AbstractQueryProcessorOptions, LinkQueryOptions } from './AbstractQueryProcessor.js';
+/**
+ * Represents an updated row in a differential watched query.
+ * It contains both the current and previous state of the row.
+ */
+export interface WatchedQueryRowDifferential<RowType> {
+    readonly current: RowType;
+    readonly previous: RowType;
+}
+/**
+ * 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>>;
+    /**
+     * The entire current result set.
+     * Array item object references are preserved between updates if the item is unchanged.
+     *
+     * e.g. In the query
+     * ```sql
+     *  SELECT name, make FROM assets ORDER BY make ASC;
+     * ```
+     *
+     * If a previous result set contains an item (A) `{name: 'pc', make: 'Cool PC'}` and
+     * an update has been made which adds another item (B) to the result set (the item A is unchanged) - then
+     * the updated result set will be contain the same object reference, to item A, as the previous result set.
+     * This is regardless of the item A's position in the updated result set.
+     */
+    readonly all: ReadonlyArray<Readonly<RowType>>;
+    readonly removed: ReadonlyArray<Readonly<RowType>>;
+    readonly updated: ReadonlyArray<WatchedQueryRowDifferential<Readonly<RowType>>>;
+    readonly unchanged: ReadonlyArray<Readonly<RowType>>;
+}
+/**
+ * Row comparator for differentially watched queries which keys and compares items in the result set.
+ */
+export interface DifferentialWatchedQueryComparator<RowType> {
+    /**
+     * Generates a unique key for the item.
+     */
+    keyBy: (item: RowType) => string;
+    /**
+     * Generates a token for comparing items with matching keys.
+     */
+    compareBy: (item: RowType) => string;
+}
+/**
+ * Options for building a differential watched query with the {@link Query} builder.
+ */
+export interface DifferentialWatchedQueryOptions<RowType> extends WatchedQueryOptions {
+    /**
+     * Initial result data which is presented while the initial loading is executing.
+     */
+    placeholderData?: RowType[];
+    /**
+     * Row comparator used to identify and compare rows in the result set.
+     * If not provided, the default comparator will be used which keys items by their `id` property if available,
+     * otherwise it uses JSON stringification of the entire item for keying and comparison.
+     * @defaultValue {@link DEFAULT_ROW_COMPARATOR}
+     */
+    rowComparator?: DifferentialWatchedQueryComparator<RowType>;
+}
+/**
+ * Settings for differential incremental watched queries using.
+ */
+export interface DifferentialWatchedQuerySettings<RowType> extends DifferentialWatchedQueryOptions<RowType> {
+    /**
+     * The query here must return an array of items that can be differentiated.
+     */
+    query: WatchCompatibleQuery<RowType[]>;
+}
+export interface DifferentialWatchedQueryListener<RowType> extends WatchedQueryListener<ReadonlyArray<Readonly<RowType>>> {
+    onDiff?: (diff: WatchedQueryDifferential<RowType>) => void | Promise<void>;
+}
+export type DifferentialWatchedQuery<RowType> = WatchedQuery<ReadonlyArray<Readonly<RowType>>, DifferentialWatchedQuerySettings<RowType>, DifferentialWatchedQueryListener<RowType>>;
+/**
+ * @internal
+ */
+export interface DifferentialQueryProcessorOptions<RowType> extends AbstractQueryProcessorOptions<RowType[], DifferentialWatchedQuerySettings<RowType>> {
+    rowComparator?: DifferentialWatchedQueryComparator<RowType>;
+}
+type DataHashMap<RowType> = Map<string, {
+    hash: string;
+    item: RowType;
+}>;
+/**
+ * An empty differential result set.
+ * This is used as the initial state for differential incrementally watched queries.
+ */
+export declare const EMPTY_DIFFERENTIAL: {
+    added: never[];
+    all: never[];
+    removed: never[];
+    updated: never[];
+    unchanged: never[];
+};
+/**
+ * Default implementation of the {@link DifferentialWatchedQueryComparator} for watched queries.
+ * It keys items by their `id` property if available, alternatively it uses JSON stringification
+ * of the entire item for the key and comparison.
+ */
+export declare const DEFAULT_ROW_COMPARATOR: DifferentialWatchedQueryComparator<any>;
+/**
+ * Uses the PowerSync onChange event to trigger watched queries.
+ * Results are emitted on every change of the relevant tables.
+ * @internal
+ */
+export declare class DifferentialQueryProcessor<RowType> extends AbstractQueryProcessor<ReadonlyArray<Readonly<RowType>>, DifferentialWatchedQuerySettings<RowType>> implements DifferentialWatchedQuery<RowType> {
+    protected options: DifferentialQueryProcessorOptions<RowType>;
+    protected comparator: DifferentialWatchedQueryComparator<RowType>;
+    constructor(options: DifferentialQueryProcessorOptions<RowType>);
+    protected differentiate(current: RowType[], previousMap: DataHashMap<RowType>): {
+        diff: WatchedQueryDifferential<RowType>;
+        map: DataHashMap<RowType>;
+        hasChanged: boolean;
+    };
+    protected linkQuery(options: LinkQueryOptions<WatchedQueryDifferential<RowType>>): Promise<void>;
+}
+export {};

package/lib/client/watched/processors/DifferentialQueryProcessor.js

@@ -0,0 +1,166 @@
+import { AbstractQueryProcessor } from './AbstractQueryProcessor.js';
+/**
+ * An empty differential result set.
+ * This is used as the initial state for differential incrementally watched queries.
+ */
+export const EMPTY_DIFFERENTIAL = {
+    added: [],
+    all: [],
+    removed: [],
+    updated: [],
+    unchanged: []
+};
+/**
+ * Default implementation of the {@link DifferentialWatchedQueryComparator} for watched queries.
+ * It keys items by their `id` property if available, alternatively it uses JSON stringification
+ * of the entire item for the key and comparison.
+ */
+export const DEFAULT_ROW_COMPARATOR = {
+    keyBy: (item) => {
+        if (item && typeof item == 'object' && typeof item['id'] == 'string') {
+            return item['id'];
+        }
+        return JSON.stringify(item);
+    },
+    compareBy: (item) => JSON.stringify(item)
+};
+/**
+ * Uses the PowerSync onChange event to trigger watched queries.
+ * Results are emitted on every change of the relevant tables.
+ * @internal
+ */
+export class DifferentialQueryProcessor extends AbstractQueryProcessor {
+    options;
+    comparator;
+    constructor(options) {
+        super(options);
+        this.options = options;
+        this.comparator = options.rowComparator ?? DEFAULT_ROW_COMPARATOR;
+    }
+    /*
+     * @returns If the sets are equal
+     */
+    differentiate(current, previousMap) {
+        const { keyBy, compareBy } = this.comparator;
+        let hasChanged = false;
+        const currentMap = new Map();
+        const removedTracker = new Set(previousMap.keys());
+        // Allow mutating to populate the data temporarily.
+        const diff = {
+            all: [],
+            added: [],
+            removed: [],
+            updated: [],
+            unchanged: []
+        };
+        /**
+         * Looping over the current result set array is important to preserve
+         * the ordering of the result set.
+         * We can replace items in the current array with previous object references if they are equal.
+         */
+        for (const item of current) {
+            const key = keyBy(item);
+            const hash = compareBy(item);
+            currentMap.set(key, { hash, item });
+            const previousItem = previousMap.get(key);
+            if (!previousItem) {
+                // New item
+                hasChanged = true;
+                diff.added.push(item);
+                diff.all.push(item);
+            }
+            else {
+                // Existing item
+                if (hash == previousItem.hash) {
+                    diff.unchanged.push(previousItem.item);
+                    // Use the previous object reference
+                    diff.all.push(previousItem.item);
+                    // update the map to preserve the reference
+                    currentMap.set(key, previousItem);
+                }
+                else {
+                    hasChanged = true;
+                    diff.updated.push({ current: item, previous: previousItem.item });
+                    // Use the new reference
+                    diff.all.push(item);
+                }
+            }
+            // The item is present, we don't consider it removed
+            removedTracker.delete(key);
+        }
+        diff.removed = Array.from(removedTracker).map((key) => previousMap.get(key).item);
+        hasChanged = hasChanged || diff.removed.length > 0;
+        return {
+            diff,
+            hasChanged,
+            map: currentMap
+        };
+    }
+    async linkQuery(options) {
+        const { db, watchOptions } = this.options;
+        const { abortSignal } = options;
+        const compiledQuery = watchOptions.query.compile();
+        const tables = await db.resolveTables(compiledQuery.sql, compiledQuery.parameters, {
+            tables: options.settings.triggerOnTables
+        });
+        let currentMap = new Map();
+        // populate the currentMap from the placeholder data
+        this.state.data.forEach((item) => {
+            currentMap.set(this.comparator.keyBy(item), {
+                hash: this.comparator.compareBy(item),
+                item
+            });
+        });
+        db.onChangeWithCallback({
+            onChange: async () => {
+                if (this.closed) {
+                    return;
+                }
+                // This fires for each change of the relevant tables
+                try {
+                    if (this.reportFetching && !this.state.isFetching) {
+                        await this.updateState({ isFetching: true });
+                    }
+                    const partialStateUpdate = {};
+                    // Always run the query if an underlying table has changed
+                    const result = await watchOptions.query.execute({
+                        sql: compiledQuery.sql,
+                        // Allows casting from ReadOnlyArray[unknown] to Array<unknown>
+                        // This allows simpler compatibility with PowerSync queries
+                        parameters: [...compiledQuery.parameters],
+                        db: this.options.db
+                    });
+                    if (this.reportFetching) {
+                        partialStateUpdate.isFetching = false;
+                    }
+                    if (this.state.isLoading) {
+                        partialStateUpdate.isLoading = false;
+                    }
+                    const { diff, hasChanged, map } = this.differentiate(result, currentMap);
+                    // Update for future comparisons
+                    currentMap = map;
+                    if (hasChanged) {
+                        await this.iterateAsyncListenersWithError((l) => l.onDiff?.(diff));
+                        Object.assign(partialStateUpdate, {
+                            data: diff.all
+                        });
+                    }
+                    if (Object.keys(partialStateUpdate).length > 0) {
+                        await this.updateState(partialStateUpdate);
+                    }
+                }
+                catch (error) {
+                    await this.updateState({ error });
+                }
+            },
+            onError: async (error) => {
+                await this.updateState({ error });
+            }
+        }, {
+            signal: abortSignal,
+            tables,
+            throttleMs: watchOptions.throttleMs,
+            triggerImmediate: true // used to emit the initial state
+        });
+    }
+}