@syncular/client-react 0.0.1-60

package/dist/createSyncularReact.js

@@ -0,0 +1,775 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createMutationsApi, createOutboxCommit, createQueryContext, enqueueOutboxCommit, FingerprintCollector, resolveConflict as resolveConflictDb, SyncEngine, } from '@syncular/client';
+import { sql } from 'kysely';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isExecutableQuery(value) {
+    if (!isRecord(value))
+        return false;
+    return typeof value.execute === 'function';
+}
+export function createSyncularReact() {
+    const SyncContext = createContext(null);
+    function SyncProvider({ db, transport, shapes, actorId, clientId, subscriptions = [], limitCommits, limitSnapshotRows, maxSnapshotPages, stateId, pollIntervalMs, maxRetries, migrate, onMigrationError, realtimeEnabled, realtimeFallbackPollMs, onError, onConflict, onDataChange, plugins, autoStart = true, renderWhileStarting = true, children, }) {
+        const config = useMemo(() => ({
+            db,
+            transport,
+            shapes,
+            actorId,
+            clientId,
+            subscriptions,
+            limitCommits,
+            limitSnapshotRows,
+            maxSnapshotPages,
+            stateId,
+            pollIntervalMs,
+            maxRetries,
+            migrate,
+            onMigrationError,
+            realtimeEnabled,
+            realtimeFallbackPollMs,
+            onError,
+            onConflict,
+            onDataChange,
+            plugins,
+        }), [
+            db,
+            transport,
+            shapes,
+            actorId,
+            clientId,
+            subscriptions,
+            limitCommits,
+            limitSnapshotRows,
+            maxSnapshotPages,
+            stateId,
+            pollIntervalMs,
+            maxRetries,
+            migrate,
+            onMigrationError,
+            realtimeEnabled,
+            realtimeFallbackPollMs,
+            onError,
+            onConflict,
+            onDataChange,
+            plugins,
+        ]);
+        const [engine] = useState(() => new SyncEngine(config));
+        const [initialProps] = useState(() => ({
+            actorId,
+            clientId,
+            db,
+            transport,
+            shapes,
+        }));
+        useEffect(() => {
+            const changedProps = [];
+            if (actorId !== initialProps.actorId)
+                changedProps.push('actorId');
+            if (clientId !== initialProps.clientId)
+                changedProps.push('clientId');
+            if (db !== initialProps.db)
+                changedProps.push('db');
+            if (transport !== initialProps.transport)
+                changedProps.push('transport');
+            if (shapes !== initialProps.shapes)
+                changedProps.push('shapes');
+            if (changedProps.length > 0) {
+                const message = `[SyncProvider] Critical props changed after mount: ${changedProps.join(', ')}. ` +
+                    'This is not supported and may cause undefined behavior. ' +
+                    'Use a React key prop to force remount, e.g., ' +
+                    `<SyncProvider key={userId} ...> or <SyncProvider key={actorId + ':' + clientId} ...>`;
+                console.error(message);
+                if (process.env.NODE_ENV === 'development') {
+                    console.warn('[SyncProvider] In development, consider using React StrictMode ' +
+                        'to help detect these issues early.');
+                }
+            }
+        }, [actorId, clientId, db, transport, shapes, initialProps]);
+        const [isReady, setIsReady] = useState(false);
+        useEffect(() => {
+            let cancelled = false;
+            if (!autoStart) {
+                setIsReady(true);
+                return () => {
+                    cancelled = true;
+                    engine.stop();
+                };
+            }
+            engine
+                .start()
+                .then(() => {
+                if (!cancelled)
+                    setIsReady(true);
+            })
+                .catch((err) => {
+                console.error('[SyncProvider] Engine start failed:', err);
+                if (!cancelled)
+                    setIsReady(true);
+            });
+            return () => {
+                cancelled = true;
+                engine.stop();
+            };
+        }, [engine, autoStart]);
+        useEffect(() => {
+            if (isReady && subscriptions.length > 0) {
+                engine.updateSubscriptions(subscriptions);
+            }
+        }, [engine, isReady, subscriptions]);
+        const value = useMemo(() => ({
+            engine,
+            db,
+            transport,
+            shapes,
+        }), [engine, db, transport, shapes]);
+        if (!isReady && renderWhileStarting === false) {
+            return null;
+        }
+        return (_jsx(SyncContext.Provider, { value: value, children: children }));
+    }
+    function useSyncContext() {
+        const context = useContext(SyncContext);
+        if (!context) {
+            throw new Error('useSyncContext must be used within a SyncProvider');
+        }
+        return context;
+    }
+    function useEngine() {
+        return useSyncContext().engine;
+    }
+    function useSyncEngine() {
+        const engine = useEngine();
+        const state = useSyncExternalStore(useCallback((callback) => engine.subscribe(callback), [engine]), useCallback(() => engine.getState(), [engine]), useCallback(() => engine.getState(), [engine]));
+        const sync = useCallback(() => engine.sync(), [engine]);
+        const reconnect = useCallback(() => engine.reconnect(), [engine]);
+        const disconnect = useCallback(() => engine.disconnect(), [engine]);
+        const start = useCallback(() => engine.start(), [engine]);
+        const resetLocalState = useCallback(() => engine.resetLocalState(), [engine]);
+        return {
+            state,
+            sync,
+            reconnect,
+            disconnect,
+            start,
+            resetLocalState,
+        };
+    }
+    function useSyncStatus() {
+        const engine = useEngine();
+        const state = useSyncExternalStore(useCallback((callback) => engine.subscribe(callback), [engine]), useCallback(() => engine.getState(), [engine]), useCallback(() => engine.getState(), [engine]));
+        return useMemo(() => ({
+            enabled: state.enabled,
+            isOnline: state.connectionState === 'connected',
+            isSyncing: state.isSyncing,
+            lastSyncAt: state.lastSyncAt,
+            pendingCount: state.pendingCount,
+            error: state.error,
+            isRetrying: state.isRetrying,
+            retryCount: state.retryCount,
+        }), [state]);
+    }
+    function useSyncConnection() {
+        const engine = useEngine();
+        const engineState = useSyncExternalStore(useCallback((callback) => engine.subscribe(callback), [engine]), useCallback(() => engine.getState(), [engine]), useCallback(() => engine.getState(), [engine]));
+        const reconnect = useCallback(() => engine.reconnect(), [engine]);
+        const disconnect = useCallback(() => engine.disconnect(), [engine]);
+        return useMemo(() => ({
+            state: engineState.connectionState,
+            mode: engineState.transportMode,
+            isConnected: engineState.connectionState === 'connected',
+            isReconnecting: engineState.connectionState === 'reconnecting',
+            reconnect,
+            disconnect,
+        }), [
+            engineState.connectionState,
+            engineState.transportMode,
+            reconnect,
+            disconnect,
+        ]);
+    }
+    function useConflicts() {
+        const engine = useEngine();
+        const [conflicts, setConflicts] = useState([]);
+        const [isLoading, setIsLoading] = useState(true);
+        const refresh = useCallback(async () => {
+            try {
+                setIsLoading(true);
+                const result = await engine.getConflicts();
+                setConflicts(result);
+            }
+            catch (err) {
+                console.error('[useConflicts] Failed to refresh:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }, [engine]);
+        useEffect(() => {
+            refresh();
+        }, [refresh]);
+        useEffect(() => {
+            const unsubscribe = engine.on('sync:complete', () => {
+                refresh();
+            });
+            return unsubscribe;
+        }, [engine, refresh]);
+        useEffect(() => {
+            const unsubscribe = engine.on('sync:error', () => {
+                refresh();
+            });
+            return unsubscribe;
+        }, [engine, refresh]);
+        return useMemo(() => ({
+            conflicts,
+            count: conflicts.length,
+            hasConflicts: conflicts.length > 0,
+            isLoading,
+            refresh,
+        }), [conflicts, isLoading, refresh]);
+    }
+    function useResolveConflict(options = {}) {
+        const { onSuccess, onError, syncAfterResolve = true } = options;
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const [isPending, setIsPending] = useState(false);
+        const [error, setError] = useState(null);
+        const resolve = useCallback(async (conflictId, resolution, mergedData) => {
+            setIsPending(true);
+            setError(null);
+            try {
+                let resolutionStr;
+                if (resolution === 'merge' && mergedData) {
+                    resolutionStr = `merge:${JSON.stringify(mergedData)}`;
+                }
+                else {
+                    resolutionStr = resolution;
+                }
+                await resolveConflictDb(db, {
+                    id: conflictId,
+                    resolution: resolutionStr,
+                });
+                onSuccess?.(conflictId);
+                if (syncAfterResolve) {
+                    engine.sync().catch((err) => {
+                        console.warn('[useResolveConflict] Sync after resolve failed:', err);
+                    });
+                }
+            }
+            catch (err) {
+                const e = err instanceof Error ? err : new Error(String(err));
+                setError(e);
+                onError?.(e);
+                throw e;
+            }
+            finally {
+                setIsPending(false);
+            }
+        }, [db, engine, syncAfterResolve, onSuccess, onError]);
+        const reset = useCallback(() => {
+            setError(null);
+        }, []);
+        return useMemo(() => ({
+            resolve,
+            isPending,
+            error,
+            reset,
+        }), [resolve, isPending, error, reset]);
+    }
+    function useSyncQuery(queryFn, options = {}) {
+        const { enabled = true, deps = [], keyField = 'id' } = options;
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const queryFnRef = useRef(queryFn);
+        queryFnRef.current = queryFn;
+        const [data, setData] = useState(undefined);
+        const [isLoading, setIsLoading] = useState(true);
+        const [error, setError] = useState(null);
+        const versionRef = useRef(0);
+        const watchedScopesRef = useRef(new Set());
+        const fingerprintCollectorRef = useRef(new FingerprintCollector());
+        const previousFingerprintRef = useRef('');
+        const hasLoadedRef = useRef(false);
+        const executeQuery = useCallback(async () => {
+            if (!enabled) {
+                if (previousFingerprintRef.current !== 'disabled') {
+                    previousFingerprintRef.current = 'disabled';
+                    setData(undefined);
+                }
+                setIsLoading(false);
+                hasLoadedRef.current = true;
+                return;
+            }
+            const version = ++versionRef.current;
+            try {
+                if (!hasLoadedRef.current) {
+                    setIsLoading(true);
+                }
+                fingerprintCollectorRef.current.clear();
+                const scopeCollector = new Set();
+                const ctx = createQueryContext(db, scopeCollector, fingerprintCollectorRef.current, engine, keyField);
+                const fnResult = queryFnRef.current(ctx);
+                const result = isExecutableQuery(fnResult)
+                    ? await fnResult.execute()
+                    : await fnResult;
+                if (version === versionRef.current) {
+                    watchedScopesRef.current = scopeCollector;
+                    const fingerprint = fingerprintCollectorRef.current.getCombined();
+                    if (fingerprint !== previousFingerprintRef.current ||
+                        fingerprint === '') {
+                        previousFingerprintRef.current = fingerprint;
+                        setData(result);
+                    }
+                    setError(null);
+                }
+            }
+            catch (err) {
+                if (version === versionRef.current) {
+                    setError(err instanceof Error ? err : new Error(String(err)));
+                }
+            }
+            finally {
+                if (version === versionRef.current) {
+                    setIsLoading(false);
+                    hasLoadedRef.current = true;
+                }
+            }
+        }, [db, enabled, engine, keyField]);
+        useEffect(() => {
+            executeQuery();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [executeQuery, ...deps]);
+        useEffect(() => {
+            if (!enabled)
+                return;
+            const unsubscribe = engine.on('sync:complete', () => {
+                executeQuery();
+            });
+            return unsubscribe;
+        }, [engine, enabled, executeQuery]);
+        useEffect(() => {
+            if (!enabled)
+                return;
+            const unsubscribe = engine.on('data:change', (event) => {
+                const changedScopes = event.scopes || [];
+                const watchedScopes = watchedScopesRef.current;
+                if (watchedScopes.size > 0) {
+                    const hasWatchedScope = changedScopes.some((s) => watchedScopes.has(s));
+                    if (!hasWatchedScope)
+                        return;
+                }
+                executeQuery();
+            });
+            return unsubscribe;
+        }, [engine, enabled, executeQuery]);
+        const refetch = useCallback(async () => {
+            await executeQuery();
+        }, [executeQuery]);
+        return useMemo(() => ({
+            data,
+            isLoading,
+            error,
+            refetch,
+        }), [data, isLoading, error, refetch]);
+    }
+    function useQuery(queryFn, options = {}) {
+        const { enabled = true, deps = [], keyField = 'id' } = options;
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const queryFnRef = useRef(queryFn);
+        queryFnRef.current = queryFn;
+        const [data, setData] = useState(undefined);
+        const [isLoading, setIsLoading] = useState(true);
+        const [error, setError] = useState(null);
+        const versionRef = useRef(0);
+        const fingerprintCollectorRef = useRef(new FingerprintCollector());
+        const previousFingerprintRef = useRef('');
+        const executeQuery = useCallback(async () => {
+            if (!enabled) {
+                setData(undefined);
+                setIsLoading(false);
+                return;
+            }
+            const version = ++versionRef.current;
+            try {
+                setIsLoading(true);
+                fingerprintCollectorRef.current.clear();
+                const scopeCollector = new Set();
+                const ctx = createQueryContext(db, scopeCollector, fingerprintCollectorRef.current, engine, keyField);
+                const fnResult = queryFnRef.current(ctx);
+                const result = isExecutableQuery(fnResult)
+                    ? await fnResult.execute()
+                    : await fnResult;
+                if (version === versionRef.current) {
+                    const fingerprint = fingerprintCollectorRef.current.getCombined();
+                    if (fingerprint !== previousFingerprintRef.current ||
+                        fingerprint === '') {
+                        previousFingerprintRef.current = fingerprint;
+                        setData(result);
+                    }
+                    setError(null);
+                }
+            }
+            catch (err) {
+                if (version === versionRef.current) {
+                    setError(err instanceof Error ? err : new Error(String(err)));
+                }
+            }
+            finally {
+                if (version === versionRef.current) {
+                    setIsLoading(false);
+                }
+            }
+        }, [db, enabled, engine, keyField]);
+        useEffect(() => {
+            executeQuery();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [executeQuery, ...deps]);
+        const refetch = useCallback(async () => {
+            await executeQuery();
+        }, [executeQuery]);
+        return useMemo(() => ({
+            data,
+            isLoading,
+            error,
+            refetch,
+        }), [data, isLoading, error, refetch]);
+    }
+    function useMutation(options) {
+        const { table, syncImmediately = true, onSuccess, onError } = options;
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const [isPending, setIsPending] = useState(false);
+        const [error, setError] = useState(null);
+        const enqueue = useCallback(async (inputs) => {
+            setIsPending(true);
+            setError(null);
+            try {
+                for (const input of inputs) {
+                    if (input.table !== undefined && input.table !== table) {
+                        throw new Error(`[useMutation] MutationInput.table must match hook table "${table}" (got "${input.table}")`);
+                    }
+                }
+                const operations = inputs.map((input) => ({
+                    scope: table,
+                    table: table,
+                    row_id: input.rowId,
+                    op: input.op,
+                    payload: input.op === 'delete' ? null : (input.payload ?? null),
+                    base_version: input.baseVersion ?? null,
+                }));
+                const result = await enqueueOutboxCommit(db, { operations });
+                const mutationResult = {
+                    commitId: result.id,
+                    clientCommitId: result.clientCommitId,
+                };
+                await engine.applyLocalMutation(inputs.map((input) => ({
+                    table,
+                    rowId: input.rowId,
+                    op: input.op,
+                    payload: input.op === 'delete' ? null : (input.payload ?? null),
+                })));
+                onSuccess?.(mutationResult);
+                if (syncImmediately) {
+                    engine.sync().catch((err) => {
+                        console.warn('[useMutation] Background sync failed:', err);
+                    });
+                }
+                return mutationResult;
+            }
+            catch (err) {
+                const e = err instanceof Error ? err : new Error(String(err));
+                setError(e);
+                onError?.(e);
+                throw e;
+            }
+            finally {
+                setIsPending(false);
+            }
+        }, [db, engine, table, syncImmediately, onSuccess, onError]);
+        const mutateLegacy = useCallback(async (input) => {
+            return enqueue([input]);
+        }, [enqueue]);
+        const upsert = useCallback(async (rowId, payload, opts) => {
+            return enqueue([
+                {
+                    table,
+                    rowId,
+                    op: 'upsert',
+                    payload,
+                    baseVersion: opts?.baseVersion,
+                },
+            ]);
+        }, [enqueue, table]);
+        const deleteRow = useCallback(async (rowId, opts) => {
+            return enqueue([
+                {
+                    table,
+                    rowId,
+                    op: 'delete',
+                    baseVersion: opts?.baseVersion,
+                },
+            ]);
+        }, [enqueue, table]);
+        const mutate = useMemo(() => {
+            const fn = mutateLegacy;
+            fn.upsert = upsert;
+            fn.delete = deleteRow;
+            return fn;
+        }, [mutateLegacy, upsert, deleteRow]);
+        const reset = useCallback(() => {
+            setError(null);
+        }, []);
+        return useMemo(() => ({
+            mutate,
+            mutateMany: enqueue,
+            isPending,
+            error,
+            reset,
+        }), [mutate, enqueue, isPending, error, reset]);
+    }
+    function useMutations(options = {}) {
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const [isPending, setIsPending] = useState(false);
+        const [error, setError] = useState(null);
+        const reset = useCallback(() => {
+            setError(null);
+        }, []);
+        const versionColumn = options.versionColumn ?? 'server_version';
+        const defaultSync = options.sync ?? 'background';
+        const onSuccess = options.onSuccess;
+        const onError = options.onError;
+        const baseCommit = useMemo(() => createOutboxCommit({
+            db,
+            versionColumn,
+        }), [db, versionColumn]);
+        const commit = useCallback(async (fn, commitOptions) => {
+            setIsPending(true);
+            setError(null);
+            try {
+                const { result, receipt, meta } = await baseCommit(fn);
+                engine.recordLocalMutations(meta.localMutations);
+                void engine.refreshOutboxStats();
+                onSuccess?.({
+                    commitId: receipt.commitId,
+                    clientCommitId: receipt.clientCommitId,
+                    opCount: meta.operations.length,
+                });
+                const syncMode = commitOptions?.sync ?? defaultSync;
+                if (syncMode) {
+                    const syncPromise = engine.sync();
+                    if (syncMode === 'await') {
+                        await syncPromise;
+                    }
+                    else {
+                        syncPromise.catch((err) => {
+                            console.warn('[useMutations] Background sync failed:', err);
+                        });
+                    }
+                }
+                return { result, receipt, meta };
+            }
+            catch (err) {
+                const e = err instanceof Error ? err : new Error(String(err));
+                setError(e);
+                onError?.(e);
+                throw e;
+            }
+            finally {
+                setIsPending(false);
+            }
+        }, [baseCommit, defaultSync, engine, onError, onSuccess]);
+        const api = useMemo(() => createMutationsApi(commit), [commit]);
+        return useMemo(() => Object.assign(api, {
+            $isPending: isPending,
+            $error: error,
+            $reset: reset,
+        }), [api, error, isPending, reset]);
+    }
+    function useOutbox() {
+        const { db } = useSyncContext();
+        const engine = useEngine();
+        const [stats, setStats] = useState({
+            pending: 0,
+            sending: 0,
+            failed: 0,
+            acked: 0,
+            total: 0,
+        });
+        const [pending, setPending] = useState([]);
+        const [failed, setFailed] = useState([]);
+        const [isLoading, setIsLoading] = useState(true);
+        const refresh = useCallback(async () => {
+            try {
+                setIsLoading(true);
+                const newStats = await engine.refreshOutboxStats({ emit: false });
+                setStats(newStats);
+                const rowsResult = await sql `
+	          select
+	            ${sql.ref('id')},
+	            ${sql.ref('client_commit_id')},
+	            ${sql.ref('status')},
+	            ${sql.ref('operations_json')},
+	            ${sql.ref('error')},
+	            ${sql.ref('created_at')},
+	            ${sql.ref('updated_at')},
+	            ${sql.ref('attempt_count')}
+	          from ${sql.table('sync_outbox_commits')}
+	          where ${sql.ref('status')} in (${sql.join([
+                    sql.val('pending'),
+                    sql.val('failed'),
+                ])})
+	          order by ${sql.ref('created_at')} asc
+	        `.execute(db);
+                const rows = rowsResult.rows;
+                const commits = rows.map((row) => {
+                    let operationsCount = 0;
+                    try {
+                        const ops = typeof row.operations_json === 'string'
+                            ? JSON.parse(row.operations_json)
+                            : row.operations_json;
+                        operationsCount = Array.isArray(ops) ? ops.length : 0;
+                    }
+                    catch {
+                        operationsCount = 0;
+                    }
+                    return {
+                        id: row.id,
+                        clientCommitId: row.client_commit_id,
+                        status: row.status,
+                        operationsCount,
+                        error: row.error,
+                        createdAt: row.created_at,
+                        updatedAt: row.updated_at,
+                        attemptCount: Number(row.attempt_count),
+                    };
+                });
+                setPending(commits.filter((c) => c.status === 'pending'));
+                setFailed(commits.filter((c) => c.status === 'failed'));
+            }
+            catch (err) {
+                console.error('[useOutbox] Failed to refresh:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }, [db, engine]);
+        useEffect(() => {
+            refresh();
+        }, [refresh]);
+        useEffect(() => {
+            const unsubscribe = engine.on('outbox:change', () => {
+                refresh();
+            });
+            return unsubscribe;
+        }, [engine, refresh]);
+        useEffect(() => {
+            const unsubscribe = engine.on('sync:complete', () => {
+                refresh();
+            });
+            return unsubscribe;
+        }, [engine, refresh]);
+        const hasUnsent = stats.pending > 0 || stats.failed > 0;
+        const clearFailed = useCallback(async () => {
+            const count = await engine.clearFailedCommits();
+            await refresh();
+            return count;
+        }, [engine, refresh]);
+        const clearAll = useCallback(async () => {
+            const count = await engine.clearAllCommits();
+            await refresh();
+            return count;
+        }, [engine, refresh]);
+        return useMemo(() => ({
+            stats,
+            pending,
+            failed,
+            hasUnsent,
+            isLoading,
+            refresh,
+            clearFailed,
+            clearAll,
+        }), [
+            stats,
+            pending,
+            failed,
+            hasUnsent,
+            isLoading,
+            refresh,
+            clearFailed,
+            clearAll,
+        ]);
+    }
+    function usePresence(scopeKey) {
+        const engine = useEngine();
+        const [presence, setPresence] = useState([]);
+        const [isLoading, setIsLoading] = useState(true);
+        useEffect(() => {
+            const initial = engine.getPresence(scopeKey);
+            setPresence(initial);
+            setIsLoading(false);
+            const unsubscribe = engine.on('presence:change', (event) => {
+                if (event.scopeKey === scopeKey) {
+                    setPresence(event.presence);
+                }
+            });
+            return unsubscribe;
+        }, [engine, scopeKey]);
+        return { presence, isLoading };
+    }
+    function usePresenceWithJoin(scopeKey, options = {}) {
+        const { metadata: initialMetadata, autoJoin = true } = options;
+        const engine = useEngine();
+        const { presence, isLoading } = usePresence(scopeKey);
+        const [isJoined, setIsJoined] = useState(false);
+        const join = useCallback((metadata) => {
+            engine.joinPresence(scopeKey, metadata);
+            setIsJoined(true);
+        }, [engine, scopeKey]);
+        const leave = useCallback(() => {
+            engine.leavePresence(scopeKey);
+            setIsJoined(false);
+        }, [engine, scopeKey]);
+        const updateMetadata = useCallback((metadata) => {
+            engine.updatePresenceMetadata(scopeKey, metadata);
+        }, [engine, scopeKey]);
+        useEffect(() => {
+            if (autoJoin) {
+                join(initialMetadata);
+            }
+            return () => {
+                leave();
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [autoJoin, initialMetadata, join, leave]);
+        return {
+            presence,
+            isLoading,
+            updateMetadata,
+            join,
+            leave,
+            isJoined,
+        };
+    }
+    return {
+        SyncProvider,
+        useSyncContext,
+        useEngine,
+        useSyncEngine,
+        useSyncStatus,
+        useSyncConnection,
+        useSyncQuery,
+        useQuery,
+        useMutation,
+        useMutations,
+        useOutbox,
+        useConflicts,
+        useResolveConflict,
+        usePresence,
+        usePresenceWithJoin,
+    };
+}
+//# sourceMappingURL=createSyncularReact.js.map