@crdt-sync/react 0.1.0 → 0.2.0

package/README.md

@@ -40,6 +40,7 @@ export function RobotDashboard() {
     {
        robot: { speed: 0, active: true } // Initial State
     }
+    // Optionally, you can pass a `{ wasmUrl }` here if your bundler needs it!
   );
 
   if (status === 'connecting') {
@@ -84,15 +85,44 @@ export function RobotDashboard() {
 
 ## API Reference
 
-### `useCrdtState<T>(url: string, initialState: T)`
+### `useCrdtState<T>(url: string, initialState: T, options?: UseCrdtStateOptions)`
 
 Accepts a TypeScript generic `T` that extends `Record<string, unknown>`.
 
 #### Parameters:
 - `url` (`string`): The WebSocket URL to connect to the backend sync service.
 - `initialState` (`T`): The default state to build the proxy structure over. 
+- `options` (`UseCrdtStateOptions`): Configuration options.
+  - `wasmUrl` (`string`, optional): A custom URL to load the `crdt_sync_bg.wasm` file from.
 
 #### Returns (`UseCrdtStateResult<T>`):
 - `state`: The plain Javascript object representation of your state. You should use `state` for reading values when rendering.
 - `proxy`: The `CrdtStateProxy` object. You **must** perform all mutations on `proxy.state`. Mutating `state` directly will not trigger network events.
 - `status`: Connective status indicator (`'connecting'` | `'open'` | `'error'`).
+
+---
+
+## Troubleshooting
+
+### `CompileError: WebAssembly.instantiate(): expected magic word...`
+
+If you are using Vite, Webpack, or a similar modern bundler, your dev server might intercept the internal WebAssembly file request and incorrectly serve your `index.html` fallback instead. 
+
+To resolve this, explicitly load the `.wasm` file using your bundler's native asset import mechanism (e.g., the `?url` suffix in Vite) and supply it to the hook:
+
+```tsx
+import { useCrdtState } from '@crdt-sync/react';
+// 1. Tell Vite to treat the WASM as a static URL asset
+import wasmUrl from '@crdt-sync/core/pkg/web/crdt_sync_bg.wasm?url';
+
+export function App() {
+  const { state } = useCrdtState(
+    'ws://localhost:8080', 
+    { count: 0 }, 
+    // 2. Explicitly provide the URL to the hook
+    { wasmUrl } 
+  );
+
+  return <div>{state.count}</div>;
+}
+```

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import { CrdtStateProxy } from '@crdt-sync/core';
+
+type CrdtStatus = 'connecting' | 'open' | 'error';
+interface UseCrdtStateResult<T> {
+    state: T;
+    proxy: CrdtStateProxy | null;
+    status: CrdtStatus;
+}
+interface UseCrdtStateOptions {
+    wasmUrl?: string;
+}
+declare function useCrdtState<T extends Record<string, unknown>>(url: string, initialState: T, options?: UseCrdtStateOptions): UseCrdtStateResult<T>;
+
+export { type CrdtStatus, type UseCrdtStateOptions, type UseCrdtStateResult, useCrdtState };

package/dist/index.d.ts

@@ -1,2 +1,14 @@
-export { useCrdtState } from './useCrdtState';
-export type { CrdtStatus, UseCrdtStateResult } from './useCrdtState';
+import { CrdtStateProxy } from '@crdt-sync/core';
+
+type CrdtStatus = 'connecting' | 'open' | 'error';
+interface UseCrdtStateResult<T> {
+    state: T;
+    proxy: CrdtStateProxy | null;
+    status: CrdtStatus;
+}
+interface UseCrdtStateOptions {
+    wasmUrl?: string;
+}
+declare function useCrdtState<T extends Record<string, unknown>>(url: string, initialState: T, options?: UseCrdtStateOptions): UseCrdtStateResult<T>;
+
+export { type CrdtStatus, type UseCrdtStateOptions, type UseCrdtStateResult, useCrdtState };

package/dist/index.js

@@ -1,5 +1,97 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCrdtState = void 0;
-var useCrdtState_1 = require("./useCrdtState");
-Object.defineProperty(exports, "useCrdtState", { enumerable: true, get: function () { return useCrdtState_1.useCrdtState; } });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useCrdtState: () => useCrdtState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useCrdtState.ts
+var import_react = require("react");
+var import_core = require("@crdt-sync/core");
+var import_crdt_sync = __toESM(require("@crdt-sync/core/pkg/web/crdt_sync.js"));
+function useCrdtState(url, initialState, options) {
+  const [proxy, setProxy] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("connecting");
+  const [, setTick] = (0, import_react.useState)(0);
+  const [initialRef] = (0, import_react.useState)(initialState);
+  (0, import_react.useEffect)(() => {
+    let active = true;
+    let manager = null;
+    let currentProxy = null;
+    async function setup() {
+      try {
+        await (0, import_crdt_sync.default)(options?.wasmUrl);
+        if (!active) return;
+        const clientId = "client-" + Math.random().toString(36).substring(2, 11);
+        const store = new import_crdt_sync.WasmStateStore(clientId);
+        currentProxy = new import_core.CrdtStateProxy(store);
+        for (const [key, value] of Object.entries(initialRef)) {
+          currentProxy.state[key] = value;
+        }
+        if (!active) return;
+        setProxy(currentProxy);
+        const ws = new WebSocket(url);
+        ws.onopen = () => {
+          if (active) setStatus("open");
+        };
+        ws.onerror = () => {
+          if (active) setStatus("error");
+        };
+        ws.onclose = () => {
+          if (active) setStatus("connecting");
+        };
+        manager = new import_core.WebSocketManager(store, currentProxy, ws);
+      } catch (err) {
+        console.error("Failed to initialize CRDT sync:", err);
+        if (active) setStatus("error");
+      }
+    }
+    setup();
+    return () => {
+      active = false;
+      if (manager) manager.disconnect();
+    };
+  }, [url, initialRef]);
+  (0, import_react.useEffect)(() => {
+    if (!proxy) return;
+    return proxy.onUpdate(() => {
+      setTick((t) => t + 1);
+    });
+  }, [proxy]);
+  const state = proxy ? proxy.state : initialRef;
+  return { state, proxy, status };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCrdtState
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useCrdtState.ts"],"sourcesContent":["export { useCrdtState } from './useCrdtState';\nexport type { CrdtStatus, UseCrdtStateResult, UseCrdtStateOptions } from './useCrdtState';\n","import { useState, useEffect } from 'react';\nimport { CrdtStateProxy, WebSocketManager } from '@crdt-sync/core';\n// @ts-ignore: Wasm module will be generated during the full build\nimport init, { WasmStateStore } from '@crdt-sync/core/pkg/web/crdt_sync.js';\n\nexport type CrdtStatus = 'connecting' | 'open' | 'error';\n\nexport interface UseCrdtStateResult<T> {\n    state: T;\n    proxy: CrdtStateProxy | null;\n    status: CrdtStatus;\n}\n\nexport interface UseCrdtStateOptions {\n    wasmUrl?: string;\n}\n\nexport function useCrdtState<T extends Record<string, unknown>>(\n    url: string,\n    initialState: T,\n    options?: UseCrdtStateOptions\n): UseCrdtStateResult<T> {\n    const [proxy, setProxy] = useState<CrdtStateProxy | null>(null);\n    const [status, setStatus] = useState<CrdtStatus>('connecting');\n    const [, setTick] = useState(0);\n\n    // Note: we're ignoring initialState updates (this behaves like useState).\n    const [initialRef] = useState(initialState);\n\n    useEffect(() => {\n        let active = true;\n        let manager: WebSocketManager | null = null;\n        let currentProxy: CrdtStateProxy | null = null;\n\n        async function setup() {\n            try {\n                await init(options?.wasmUrl);\n                if (!active) return;\n\n                // Create a unique client ID\n                const clientId = 'client-' + Math.random().toString(36).substring(2, 11);\n                const store = new WasmStateStore(clientId);\n\n                currentProxy = new CrdtStateProxy(store);\n\n                // Initialize state\n                for (const [key, value] of Object.entries(initialRef)) {\n                    currentProxy.state[key] = value;\n                }\n\n                if (!active) return;\n                setProxy(currentProxy);\n\n                const ws = new WebSocket(url);\n\n                ws.onopen = () => {\n                    if (active) setStatus('open');\n                };\n\n                ws.onerror = () => {\n                    if (active) setStatus('error');\n                };\n\n                ws.onclose = () => {\n                    if (active) setStatus('connecting');\n                };\n\n                manager = new WebSocketManager(store, currentProxy, ws as any);\n            } catch (err) {\n                console.error('Failed to initialize CRDT sync:', err);\n                if (active) setStatus('error');\n            }\n        }\n\n        setup();\n\n        return () => {\n            active = false;\n            if (manager) manager.disconnect();\n        };\n    }, [url, initialRef]);\n\n    useEffect(() => {\n        if (!proxy) return;\n\n        // Subscribe to proxy updates to trigger React re-renders.\n        return proxy.onUpdate(() => {\n            setTick(t => t + 1);\n        });\n    }, [proxy]);\n\n    const state = proxy ? (proxy.state as T) : initialRef;\n\n    return { state, proxy, status };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAoC;AACpC,kBAAiD;AAEjD,uBAAqC;AAc9B,SAAS,aACZ,KACA,cACA,SACqB;AACrB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAgC,IAAI;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAqB,YAAY;AAC7D,QAAM,CAAC,EAAE,OAAO,QAAI,uBAAS,CAAC;AAG9B,QAAM,CAAC,UAAU,QAAI,uBAAS,YAAY;AAE1C,8BAAU,MAAM;AACZ,QAAI,SAAS;AACb,QAAI,UAAmC;AACvC,QAAI,eAAsC;AAE1C,mBAAe,QAAQ;AACnB,UAAI;AACA,kBAAM,iBAAAA,SAAK,SAAS,OAAO;AAC3B,YAAI,CAAC,OAAQ;AAGb,cAAM,WAAW,YAAY,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AACvE,cAAM,QAAQ,IAAI,gCAAe,QAAQ;AAEzC,uBAAe,IAAI,2BAAe,KAAK;AAGvC,mBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,UAAU,GAAG;AACnD,uBAAa,MAAM,GAAG,IAAI;AAAA,QAC9B;AAEA,YAAI,CAAC,OAAQ;AACb,iBAAS,YAAY;AAErB,cAAM,KAAK,IAAI,UAAU,GAAG;AAE5B,WAAG,SAAS,MAAM;AACd,cAAI,OAAQ,WAAU,MAAM;AAAA,QAChC;AAEA,WAAG,UAAU,MAAM;AACf,cAAI,OAAQ,WAAU,OAAO;AAAA,QACjC;AAEA,WAAG,UAAU,MAAM;AACf,cAAI,OAAQ,WAAU,YAAY;AAAA,QACtC;AAEA,kBAAU,IAAI,6BAAiB,OAAO,cAAc,EAAS;AAAA,MACjE,SAAS,KAAK;AACV,gBAAQ,MAAM,mCAAmC,GAAG;AACpD,YAAI,OAAQ,WAAU,OAAO;AAAA,MACjC;AAAA,IACJ;AAEA,UAAM;AAEN,WAAO,MAAM;AACT,eAAS;AACT,UAAI,QAAS,SAAQ,WAAW;AAAA,IACpC;AAAA,EACJ,GAAG,CAAC,KAAK,UAAU,CAAC;AAEpB,8BAAU,MAAM;AACZ,QAAI,CAAC,MAAO;AAGZ,WAAO,MAAM,SAAS,MAAM;AACxB,cAAQ,OAAK,IAAI,CAAC;AAAA,IACtB,CAAC;AAAA,EACL,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,QAAQ,QAAS,MAAM,QAAc;AAE3C,SAAO,EAAE,OAAO,OAAO,OAAO;AAClC;","names":["init"]}

package/dist/index.mjs

@@ -0,0 +1,60 @@
+// src/useCrdtState.ts
+import { useState, useEffect } from "react";
+import { CrdtStateProxy, WebSocketManager } from "@crdt-sync/core";
+import init, { WasmStateStore } from "@crdt-sync/core/pkg/web/crdt_sync.js";
+function useCrdtState(url, initialState, options) {
+  const [proxy, setProxy] = useState(null);
+  const [status, setStatus] = useState("connecting");
+  const [, setTick] = useState(0);
+  const [initialRef] = useState(initialState);
+  useEffect(() => {
+    let active = true;
+    let manager = null;
+    let currentProxy = null;
+    async function setup() {
+      try {
+        await init(options?.wasmUrl);
+        if (!active) return;
+        const clientId = "client-" + Math.random().toString(36).substring(2, 11);
+        const store = new WasmStateStore(clientId);
+        currentProxy = new CrdtStateProxy(store);
+        for (const [key, value] of Object.entries(initialRef)) {
+          currentProxy.state[key] = value;
+        }
+        if (!active) return;
+        setProxy(currentProxy);
+        const ws = new WebSocket(url);
+        ws.onopen = () => {
+          if (active) setStatus("open");
+        };
+        ws.onerror = () => {
+          if (active) setStatus("error");
+        };
+        ws.onclose = () => {
+          if (active) setStatus("connecting");
+        };
+        manager = new WebSocketManager(store, currentProxy, ws);
+      } catch (err) {
+        console.error("Failed to initialize CRDT sync:", err);
+        if (active) setStatus("error");
+      }
+    }
+    setup();
+    return () => {
+      active = false;
+      if (manager) manager.disconnect();
+    };
+  }, [url, initialRef]);
+  useEffect(() => {
+    if (!proxy) return;
+    return proxy.onUpdate(() => {
+      setTick((t) => t + 1);
+    });
+  }, [proxy]);
+  const state = proxy ? proxy.state : initialRef;
+  return { state, proxy, status };
+}
+export {
+  useCrdtState
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useCrdtState.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { CrdtStateProxy, WebSocketManager } from '@crdt-sync/core';\n// @ts-ignore: Wasm module will be generated during the full build\nimport init, { WasmStateStore } from '@crdt-sync/core/pkg/web/crdt_sync.js';\n\nexport type CrdtStatus = 'connecting' | 'open' | 'error';\n\nexport interface UseCrdtStateResult<T> {\n    state: T;\n    proxy: CrdtStateProxy | null;\n    status: CrdtStatus;\n}\n\nexport interface UseCrdtStateOptions {\n    wasmUrl?: string;\n}\n\nexport function useCrdtState<T extends Record<string, unknown>>(\n    url: string,\n    initialState: T,\n    options?: UseCrdtStateOptions\n): UseCrdtStateResult<T> {\n    const [proxy, setProxy] = useState<CrdtStateProxy | null>(null);\n    const [status, setStatus] = useState<CrdtStatus>('connecting');\n    const [, setTick] = useState(0);\n\n    // Note: we're ignoring initialState updates (this behaves like useState).\n    const [initialRef] = useState(initialState);\n\n    useEffect(() => {\n        let active = true;\n        let manager: WebSocketManager | null = null;\n        let currentProxy: CrdtStateProxy | null = null;\n\n        async function setup() {\n            try {\n                await init(options?.wasmUrl);\n                if (!active) return;\n\n                // Create a unique client ID\n                const clientId = 'client-' + Math.random().toString(36).substring(2, 11);\n                const store = new WasmStateStore(clientId);\n\n                currentProxy = new CrdtStateProxy(store);\n\n                // Initialize state\n                for (const [key, value] of Object.entries(initialRef)) {\n                    currentProxy.state[key] = value;\n                }\n\n                if (!active) return;\n                setProxy(currentProxy);\n\n                const ws = new WebSocket(url);\n\n                ws.onopen = () => {\n                    if (active) setStatus('open');\n                };\n\n                ws.onerror = () => {\n                    if (active) setStatus('error');\n                };\n\n                ws.onclose = () => {\n                    if (active) setStatus('connecting');\n                };\n\n                manager = new WebSocketManager(store, currentProxy, ws as any);\n            } catch (err) {\n                console.error('Failed to initialize CRDT sync:', err);\n                if (active) setStatus('error');\n            }\n        }\n\n        setup();\n\n        return () => {\n            active = false;\n            if (manager) manager.disconnect();\n        };\n    }, [url, initialRef]);\n\n    useEffect(() => {\n        if (!proxy) return;\n\n        // Subscribe to proxy updates to trigger React re-renders.\n        return proxy.onUpdate(() => {\n            setTick(t => t + 1);\n        });\n    }, [proxy]);\n\n    const state = proxy ? (proxy.state as T) : initialRef;\n\n    return { state, proxy, status };\n}\n"],"mappings":";AAAA,SAAS,UAAU,iBAAiB;AACpC,SAAS,gBAAgB,wBAAwB;AAEjD,OAAO,QAAQ,sBAAsB;AAc9B,SAAS,aACZ,KACA,cACA,SACqB;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgC,IAAI;AAC9D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAqB,YAAY;AAC7D,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAG9B,QAAM,CAAC,UAAU,IAAI,SAAS,YAAY;AAE1C,YAAU,MAAM;AACZ,QAAI,SAAS;AACb,QAAI,UAAmC;AACvC,QAAI,eAAsC;AAE1C,mBAAe,QAAQ;AACnB,UAAI;AACA,cAAM,KAAK,SAAS,OAAO;AAC3B,YAAI,CAAC,OAAQ;AAGb,cAAM,WAAW,YAAY,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,GAAG,EAAE;AACvE,cAAM,QAAQ,IAAI,eAAe,QAAQ;AAEzC,uBAAe,IAAI,eAAe,KAAK;AAGvC,mBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,UAAU,GAAG;AACnD,uBAAa,MAAM,GAAG,IAAI;AAAA,QAC9B;AAEA,YAAI,CAAC,OAAQ;AACb,iBAAS,YAAY;AAErB,cAAM,KAAK,IAAI,UAAU,GAAG;AAE5B,WAAG,SAAS,MAAM;AACd,cAAI,OAAQ,WAAU,MAAM;AAAA,QAChC;AAEA,WAAG,UAAU,MAAM;AACf,cAAI,OAAQ,WAAU,OAAO;AAAA,QACjC;AAEA,WAAG,UAAU,MAAM;AACf,cAAI,OAAQ,WAAU,YAAY;AAAA,QACtC;AAEA,kBAAU,IAAI,iBAAiB,OAAO,cAAc,EAAS;AAAA,MACjE,SAAS,KAAK;AACV,gBAAQ,MAAM,mCAAmC,GAAG;AACpD,YAAI,OAAQ,WAAU,OAAO;AAAA,MACjC;AAAA,IACJ;AAEA,UAAM;AAEN,WAAO,MAAM;AACT,eAAS;AACT,UAAI,QAAS,SAAQ,WAAW;AAAA,IACpC;AAAA,EACJ,GAAG,CAAC,KAAK,UAAU,CAAC;AAEpB,YAAU,MAAM;AACZ,QAAI,CAAC,MAAO;AAGZ,WAAO,MAAM,SAAS,MAAM;AACxB,cAAQ,OAAK,IAAI,CAAC;AAAA,IACtB,CAAC;AAAA,EACL,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,QAAQ,QAAS,MAAM,QAAc;AAE3C,SAAO,EAAE,OAAO,OAAO,OAAO;AAClC;","names":[]}

package/package.json

@@ -1,26 +1,42 @@
 {
     "name": "@crdt-sync/react",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "React hook adapter for crdt-sync",
     "main": "dist/index.js",
+    "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
     "files": [
         "dist"
     ],
     "scripts": {
-        "build": "tsc"
+        "build": "tsup",
+        "test": "vitest run"
     },
     "peerDependencies": {
         "react": ">=16.8",
         "react-dom": ">=16.8"
     },
     "dependencies": {
-        "@crdt-sync/core": "*"
+        "@crdt-sync/core": "^0.2.0"
     },
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
-        "typescript": "^5.4.5"
+        "happy-dom": "^20.7.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.4.5",
+        "vitest": "^4.0.18",
+        "vitest-websocket-mock": "^0.5.0"
     },
     "license": "MIT"
 }

package/dist/useCrdtState.d.ts

@@ -1,8 +0,0 @@
-import { CrdtStateProxy } from '@crdt-sync/core';
-export type CrdtStatus = 'connecting' | 'open' | 'error';
-export interface UseCrdtStateResult<T> {
-    state: T;
-    proxy: CrdtStateProxy | null;
-    status: CrdtStatus;
-}
-export declare function useCrdtState<T extends Record<string, unknown>>(url: string, initialState: T): UseCrdtStateResult<T>;

package/dist/useCrdtState.js

@@ -1,105 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCrdtState = useCrdtState;
-const react_1 = require("react");
-const core_1 = require("@crdt-sync/core");
-// @ts-ignore: Wasm module will be generated during the full build
-const crdt_sync_js_1 = __importStar(require("@crdt-sync/core/pkg/web/crdt_sync.js"));
-function useCrdtState(url, initialState) {
-    const [proxy, setProxy] = (0, react_1.useState)(null);
-    const [status, setStatus] = (0, react_1.useState)('connecting');
-    const [, setTick] = (0, react_1.useState)(0);
-    // Note: we're ignoring initialState updates (this behaves like useState).
-    const [initialRef] = (0, react_1.useState)(initialState);
-    (0, react_1.useEffect)(() => {
-        let active = true;
-        let manager = null;
-        let currentProxy = null;
-        async function setup() {
-            try {
-                await (0, crdt_sync_js_1.default)();
-                if (!active)
-                    return;
-                // Create a unique client ID
-                const clientId = 'client-' + Math.random().toString(36).substring(2, 11);
-                const store = new crdt_sync_js_1.WasmStateStore(clientId);
-                currentProxy = new core_1.CrdtStateProxy(store);
-                // Initialize state
-                for (const [key, value] of Object.entries(initialRef)) {
-                    currentProxy.state[key] = value;
-                }
-                if (!active)
-                    return;
-                setProxy(currentProxy);
-                const ws = new WebSocket(url);
-                ws.onopen = () => {
-                    if (active)
-                        setStatus('open');
-                };
-                ws.onerror = () => {
-                    if (active)
-                        setStatus('error');
-                };
-                ws.onclose = () => {
-                    if (active)
-                        setStatus('connecting');
-                };
-                manager = new core_1.WebSocketManager(store, currentProxy, ws);
-            }
-            catch (err) {
-                console.error('Failed to initialize CRDT sync:', err);
-                if (active)
-                    setStatus('error');
-            }
-        }
-        setup();
-        return () => {
-            active = false;
-            if (manager)
-                manager.disconnect();
-        };
-    }, [url, initialRef]);
-    (0, react_1.useEffect)(() => {
-        if (!proxy)
-            return;
-        // Subscribe to proxy updates to trigger React re-renders.
-        return proxy.onUpdate(() => {
-            setTick(t => t + 1);
-        });
-    }, [proxy]);
-    const state = proxy ? proxy.state : initialRef;
-    return { state, proxy, status };
-}