@stratasync/react 0.2.0

package/dist/provider.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SyncBacklogContext, SyncClientContext, SyncContext, SyncStatusContext, } from "./context.js";
+/**
+ * Provider component for the sync client
+ */
+export const SyncProvider = ({ client, children, autoStart = true, autoStop = true, }) => {
+    const [state, setState] = useState(client.state);
+    const [connectionState, setConnectionState] = useState(client.connectionState);
+    const lastSyncIdRef = useRef(client.lastSyncId);
+    const [backlog, setBacklog] = useState(0);
+    const [error, setError] = useState(client.lastError ?? null);
+    useEffect(() => {
+        let mounted = true;
+        // Subscribe to state changes
+        const unsubState = client.onStateChange((nextState) => {
+            if (mounted) {
+                setState(nextState);
+            }
+        });
+        const unsubConnection = client.onConnectionStateChange((nextState) => {
+            if (mounted) {
+                setConnectionState(nextState);
+            }
+        });
+        const unsubEvents = client.onEvent((event) => {
+            if (!mounted) {
+                return;
+            }
+            switch (event.type) {
+                case "syncComplete": {
+                    lastSyncIdRef.current = event.lastSyncId;
+                    break;
+                }
+                case "stateChange": {
+                    if (event.state !== "error") {
+                        setError(null);
+                    }
+                    break;
+                }
+                case "syncError": {
+                    setError(event.error);
+                    break;
+                }
+                case "outboxChange": {
+                    setBacklog(event.pendingCount);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        });
+        // Sync initial state
+        setState(client.state);
+        setConnectionState(client.connectionState);
+        lastSyncIdRef.current = client.lastSyncId;
+        setError(client.lastError ?? null);
+        (async () => {
+            try {
+                const count = await client.getPendingCount();
+                if (mounted) {
+                    setBacklog(count);
+                }
+            }
+            catch {
+                // Storage may not be open yet; backlog will update via outboxChange event
+            }
+        })();
+        if (autoStart) {
+            const startClient = async () => {
+                try {
+                    await client.start();
+                }
+                catch (startError) {
+                    if (mounted) {
+                        setError(startError instanceof Error
+                            ? startError
+                            : new Error(String(startError)));
+                    }
+                }
+            };
+            startClient();
+        }
+        return () => {
+            mounted = false;
+            unsubState();
+            unsubConnection();
+            unsubEvents();
+            if (autoStop) {
+                // oxlint-disable-next-line prefer-await-to-then -- fire-and-forget pattern
+                client.stop().catch(() => {
+                    /* noop */
+                });
+            }
+        };
+    }, [client, autoStart, autoStop]);
+    const statusValue = useMemo(() => ({
+        clientId: client.clientId,
+        connectionState,
+        error,
+        isOffline: connectionState === "disconnected",
+        isReady: state === "syncing",
+        isSyncing: state === "syncing" || state === "bootstrapping",
+        get lastSyncId() {
+            return lastSyncIdRef.current;
+        },
+        state,
+    }), [state, connectionState, error, client.clientId]);
+    const value = useMemo(() => ({
+        backlog,
+        client,
+        ...statusValue,
+    }), [client, backlog, statusValue]);
+    return (_jsx(SyncClientContext.Provider, { value: client, children: _jsx(SyncStatusContext.Provider, { value: statusValue, children: _jsx(SyncBacklogContext.Provider, { value: backlog, children: _jsx(SyncContext.Provider, { value: value, children: children }) }) }) }));
+};
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAOtB;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,QAAQ,GAAG,IAAI,GACG,EAAa,EAAE;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,MAAM,CAAC,eAAe,CACvB,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,CAAS,MAAM,CAAC,UAAU,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,6BAA6B;QAC7B,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,EAAE,EAAE;YACpD,IAAI,OAAO,EAAE,CAAC;gBACZ,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACH,MAAM,eAAe,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC,SAAS,EAAE,EAAE;YACnE,IAAI,OAAO,EAAE,CAAC;gBACZ,kBAAkB,CAAC,SAAS,CAAC,CAAC;YAChC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YACD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;gBACnB,KAAK,cAAc,CAAC,CAAC,CAAC;oBACpB,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;oBACzC,MAAM;gBACR,CAAC;gBACD,KAAK,aAAa,CAAC,CAAC,CAAC;oBACnB,IAAI,KAAK,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;wBAC5B,QAAQ,CAAC,IAAI,CAAC,CAAC;oBACjB,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBACtB,MAAM;gBACR,CAAC;gBACD,KAAK,cAAc,CAAC,CAAC,CAAC;oBACpB,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;oBAC/B,MAAM;gBACR,CAAC;gBACD,OAAO,CAAC,CAAC,CAAC;oBACR,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,qBAAqB;QACrB,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,kBAAkB,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3C,aAAa,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;QAC1C,QAAQ,CAAC,MAAM,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC;QACnC,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,eAAe,EAAE,CAAC;gBAC7C,IAAI,OAAO,EAAE,CAAC;oBACZ,UAAU,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,0EAA0E;YAC5E,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;gBAC7B,IAAI,CAAC;oBACH,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;gBACvB,CAAC;gBAAC,OAAO,UAAU,EAAE,CAAC;oBACpB,IAAI,OAAO,EAAE,CAAC;wBACZ,QAAQ,CACN,UAAU,YAAY,KAAK;4BACzB,CAAC,CAAC,UAAU;4BACZ,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAClC,CAAC;oBACJ,CAAC;gBACH,CAAC;YACH,CAAC,CAAC;YAEF,WAAW,EAAE,CAAC;QAChB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,UAAU,EAAE,CAAC;YACb,eAAe,EAAE,CAAC;YAClB,WAAW,EAAE,CAAC;YACd,IAAI,QAAQ,EAAE,CAAC;gBACb,2EAA2E;gBAC3E,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;oBACvB,UAAU;gBACZ,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,eAAe;QACf,KAAK;QACL,SAAS,EAAE,eAAe,KAAK,cAAc;QAC7C,OAAO,EAAE,KAAK,KAAK,SAAS;QAC5B,SAAS,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,eAAe;QAC3D,IAAI,UAAU;YACZ,OAAO,aAAa,CAAC,OAAO,CAAC;QAC/B,CAAC;QACD,KAAK;KACN,CAAC,EACF,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,CACjD,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO;QACP,MAAM;QACN,GAAG,WAAW;KACf,CAAC,EACF,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,CAC/B,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YACvC,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACzC,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAwB,GACzC,GACH,GACF,CAC9B,CAAC;AACJ,CAAC,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,107 @@
+import type { QueryOptions, SyncClient } from "@stratasync/client";
+import type { ConnectionState, SyncClientState, SyncId } from "@stratasync/core";
+/**
+ * Sync provider props
+ */
+export interface SyncProviderProps {
+    /** Sync client instance */
+    client: SyncClient;
+    /** Children to render */
+    children: React.ReactNode;
+    /** Automatically start the client */
+    autoStart?: boolean;
+    /** Automatically stop the client on unmount */
+    autoStop?: boolean;
+}
+/**
+ * Sync status context value (excluding pending backlog)
+ */
+export interface SyncStatusContextValue {
+    /** Current sync state */
+    state: SyncClientState;
+    /** Current connection state */
+    connectionState: ConnectionState;
+    /** Last sync ID received */
+    lastSyncId: SyncId;
+    /** Last sync error */
+    error: Error | null;
+    /** Whether the client is ready */
+    isReady: boolean;
+    /** Whether the client is syncing */
+    isSyncing: boolean;
+    /** Whether the client is offline */
+    isOffline: boolean;
+    /** Client ID */
+    clientId: string;
+}
+/**
+ * Full sync context value
+ */
+export interface SyncContextValue extends SyncStatusContextValue {
+    /** Sync client instance */
+    client: SyncClient;
+    /** Count of pending transactions */
+    backlog: number;
+}
+/**
+ * Use model hook result
+ */
+export interface UseModelResult<T> {
+    /** Model data */
+    data: T | null;
+    /** Whether the model is loading */
+    isLoading: boolean;
+    /** Whether the model was found */
+    isFound: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Refresh the model */
+    refresh: () => Promise<void>;
+}
+/**
+ * Use query hook options
+ */
+export interface UseQueryOptions<T> extends QueryOptions<T> {
+    /** Skip the query (useful for conditional fetching) */
+    skip?: boolean;
+}
+/**
+ * Use query hook result
+ */
+export interface UseQueryResult<T> {
+    /** Query results */
+    data: T[];
+    /** Whether the query is loading */
+    isLoading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Total count (if available) */
+    totalCount?: number;
+    /** Whether more results are available */
+    hasMore: boolean;
+    /** Refresh the query */
+    refresh: () => Promise<void>;
+}
+/**
+ * Use connection state hook result
+ */
+export interface UseConnectionStateResult {
+    /** Current sync status */
+    status: SyncClientState;
+    /** Last sync ID received */
+    lastSyncId: SyncId;
+    /** Pending outbox count */
+    backlog: number;
+    /** Last sync error */
+    error: Error | null;
+}
+/**
+ * Use pending count hook result
+ */
+export interface UsePendingCountResult {
+    /** Number of pending transactions */
+    count: number;
+    /** Whether there are pending transactions */
+    hasPending: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,MAAM,EACP,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,yBAAyB;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,+BAA+B;IAC/B,eAAe,EAAE,eAAe,CAAC;IACjC,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kCAAkC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,2BAA2B;IAC3B,MAAM,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,iBAAiB;IACjB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,8BAA8B;IAC9B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,wBAAwB;IACxB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IACzD,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,oBAAoB;IACpB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,OAAO,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,MAAM,EAAE,eAAe,CAAC;IACxB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@stratasync/react",
+  "version": "0.2.0",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc --watch -p tsconfig.build.json",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
+    "format": "oxfmt --write .",
+    "format:check": "oxfmt --check .",
+    "check-types": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@stratasync/client": "*",
+    "@stratasync/core": "*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.0.0",
+    "lefthook": "^2.1.4",
+    "mobx": "^6.15.0",
+    "mobx-react-lite": "^4.1.1",
+    "oxfmt": "^0.41.0",
+    "oxlint": "^1.56.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "ultracite": "^7.3.2",
+    "vitest": "^4.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "yjs": "^13.6.0"
+  }
+}