@electric-sql/react 0.3.2 → 0.3.3

package/dist/cjs/index.cjs

@@ -133,21 +133,23 @@ function useShape(_a) {
   ]);
   const shapeStream = getShapeStream(options);
   const shape = getShape(shapeStream);
-  const latestShapeData = (0, import_react.useRef)(parseShapeData(shape));
-  const getSnapshot = import_react.default.useCallback(() => latestShapeData.current, []);
-  const shapeData = (0, import_with_selector.useSyncExternalStoreWithSelector)(
-    (0, import_react.useCallback)(
-      (onStoreChange) => shapeSubscribe(shape, () => {
-        latestShapeData.current = parseShapeData(shape);
-        onStoreChange();
-      }),
-      [shape]
-    ),
-    getSnapshot,
-    getSnapshot,
-    selector
-  );
-  return shapeData;
+  const useShapeData = import_react.default.useMemo(() => {
+    let latestShapeData = parseShapeData(shape);
+    const getSnapshot = () => latestShapeData;
+    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
+      latestShapeData = parseShapeData(shape);
+      onStoreChange();
+    });
+    return () => {
+      return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+        subscribe,
+        getSnapshot,
+        getSnapshot,
+        selector
+      );
+    };
+  }, [shape, selector]);
+  return useShapeData();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/react-hooks.tsx"],"sourcesContent":["export * from './react-hooks'\n","import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React, { useCallback, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,mBAA2C;AAC3C,2BAAiD;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,SAAsB,aACpB,SACgB;AAAA;AAChB,UAAM,cAAc,eAAe,OAAO;AAC1C,UAAM,QAAQ,SAAS,WAAW;AAClC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,0BAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,oBAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,sBAAkB,qBAAO,eAAe,KAAK,CAAC;AACpD,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM,gBAAgB,SAAS,CAAC,CAAC;AACvE,QAAM,gBAAY;AAAA,QAChB;AAAA,MACE,CAAC,kBACC,eAAe,OAAO,MAAM;AAC1B,wBAAgB,UAAU,eAAe,KAAK;AAC9C,sBAAc;AAAA,MAChB,CAAC;AAAA,MACH,CAAC,KAAK;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AACT;","names":["React"]}
+{"version":3,"sources":["../../src/index.ts","../../src/react-hooks.tsx"],"sourcesContent":["export * from './react-hooks'\n","import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const useShapeData = React.useMemo(() => {\n    let latestShapeData = parseShapeData(shape)\n    const getSnapshot = () => latestShapeData\n    const subscribe = (onStoreChange: () => void) =>\n      shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\n\n    return () => {\n      return useSyncExternalStoreWithSelector(\n        subscribe,\n        getSnapshot,\n        getSnapshot,\n        selector\n      )\n    }\n  }, [shape, selector])\n\n  return useShapeData()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,mBAAkB;AAClB,2BAAiD;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,SAAsB,aACpB,SACgB;AAAA;AAChB,UAAM,cAAc,eAAe,OAAO;AAC1C,UAAM,QAAQ,SAAS,WAAW;AAClC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,0BAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,oBAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,eAAe,aAAAA,QAAM,QAAQ,MAAM;AACvC,QAAI,kBAAkB,eAAe,KAAK;AAC1C,UAAM,cAAc,MAAM;AAC1B,UAAM,YAAY,CAAC,kBACjB,eAAe,OAAO,MAAM;AAC1B,wBAAkB,eAAe,KAAK;AACtC,oBAAc;AAAA,IAChB,CAAC;AAEH,WAAO,MAAM;AACX,iBAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,aAAa;AACtB;","names":["React"]}

package/dist/index.browser.mjs

@@ -1,2 +1,2 @@
-var u=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var l=(e,t)=>{var a={};for(var r in e)g.call(e,r)&&t.indexOf(r)<0&&(a[r]=e[r]);if(e!=null&&u)for(var r of u(e))t.indexOf(r)<0&&U.call(e,r)&&(a[r]=e[r]);return a};var m=(e,t,a)=>new Promise((r,S)=>{var n=s=>{try{o(a.next(s))}catch(p){S(p)}},i=s=>{try{o(a.throw(s))}catch(p){S(p)}},o=s=>s.done?r(s.value):Promise.resolve(s.value).then(n,i);o((a=a.apply(e,t)).next())});import{Shape as x,ShapeStream as d}from"@electric-sql/client";import w,{useCallback as y,useRef as D}from"react";import{useSyncExternalStoreWithSelector as R}from"use-sync-external-store/with-selector.js";var c=new Map,h=new Map;function J(e){return m(this,null,function*(){let t=b(e),a=O(t);return yield a.value,a})}function T(e){return JSON.stringify(e,Object.keys(e).sort())}function b(e){let t=T(e);if(c.has(t))return c.get(t);{let a=new d(e);return c.set(t,a),a}}function O(e){if(h.has(e))return h.get(e);{let t=new x(e);return h.set(e,t),t}}function v(e,t){let a=e.subscribe(t);return()=>{a()}}function f(e){return{data:[...e.valueSync.values()],isUpToDate:e.isUpToDate,isError:e.error!==!1,shape:e,error:e.error}}function k(e){return e}function N(a){var r=a,{selector:e=k}=r,t=l(r,["selector"]);let S=b(t),n=O(S),i=D(f(n)),o=w.useCallback(()=>i.current,[]);return R(y(p=>v(n,()=>{i.current=f(n),p()}),[n]),o,o,e)}export{O as getShape,b as getShapeStream,J as preloadShape,T as sortedOptionsHash,N as useShape};
+var u=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var l=(e,t)=>{var a={};for(var r in e)U.call(e,r)&&t.indexOf(r)<0&&(a[r]=e[r]);if(e!=null&&u)for(var r of u(e))t.indexOf(r)<0&&x.call(e,r)&&(a[r]=e[r]);return a};var m=(e,t,a)=>new Promise((r,S)=>{var s=n=>{try{o(a.next(n))}catch(p){S(p)}},c=n=>{try{o(a.throw(n))}catch(p){S(p)}},o=n=>n.done?r(n.value):Promise.resolve(n.value).then(s,c);o((a=a.apply(e,t)).next())});import{Shape as d,ShapeStream as w}from"@electric-sql/client";import y from"react";import{useSyncExternalStoreWithSelector as D}from"use-sync-external-store/with-selector.js";var i=new Map,h=new Map;function j(e){return m(this,null,function*(){let t=b(e),a=O(t);return yield a.value,a})}function v(e){return JSON.stringify(e,Object.keys(e).sort())}function b(e){let t=v(e);if(i.has(t))return i.get(t);{let a=new w(e);return i.set(t,a),a}}function O(e){if(h.has(e))return h.get(e);{let t=new d(e);return h.set(e,t),t}}function R(e,t){let a=e.subscribe(t);return()=>{a()}}function f(e){return{data:[...e.valueSync.values()],isUpToDate:e.isUpToDate,isError:e.error!==!1,shape:e,error:e.error}}function T(e){return e}function J(a){var r=a,{selector:e=T}=r,t=l(r,["selector"]);let S=b(t),s=O(S);return y.useMemo(()=>{let o=f(s),n=()=>o,p=g=>R(s,()=>{o=f(s),g()});return()=>D(p,n,n,e)},[s,e])()}export{O as getShape,b as getShapeStream,j as preloadShape,v as sortedOptionsHash,J as useShape};
 //# sourceMappingURL=index.browser.mjs.map

package/dist/index.browser.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React, { useCallback, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":"geAAA,OAEE,SAAAA,EACA,eAAAC,MAEK,uBACP,OAAOC,GAAS,eAAAC,EAAa,UAAAC,MAAc,QAC3C,OAAS,oCAAAC,MAAwC,2CAEjD,IAAMC,EAAc,IAAI,IAClBC,EAAa,IAAI,IAEvB,SAAsBC,EACpBC,EACgB,QAAAC,EAAA,sBAChB,IAAMC,EAAcC,EAAeH,CAAO,EACpCI,EAAQC,EAASH,CAAW,EAClC,aAAME,EAAM,MACLA,CACT,GAEO,SAASE,EAAkBN,EAAqC,CACrE,OAAO,KAAK,UAAUA,EAAS,OAAO,KAAKA,CAAO,EAAE,KAAK,CAAC,CAC5D,CAEO,SAASG,EAAeH,EAA0C,CACvE,IAAMO,EAAYD,EAAkBN,CAAO,EAG3C,GAAIH,EAAY,IAAIU,CAAS,EAE3B,OAAOV,EAAY,IAAIU,CAAS,EAC3B,CACL,IAAMC,EAAiB,IAAIC,EAAYT,CAAO,EAE9C,OAAAH,EAAY,IAAIU,EAAWC,CAAc,EAGlCA,CACT,CACF,CAEO,SAASH,EAASH,EAAiC,CAExD,GAAIJ,EAAW,IAAII,CAAW,EAE5B,OAAOJ,EAAW,IAAII,CAAW,EAC5B,CACL,IAAMQ,EAAW,IAAIC,EAAMT,CAAW,EAEtC,OAAAJ,EAAW,IAAII,EAAaQ,CAAQ,EAG7BA,CACT,CACF,CAqBA,SAASE,EAAeR,EAAcS,EAAsB,CAC1D,IAAMC,EAAcV,EAAM,UAAUS,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EAAeX,EAA8B,CACpD,MAAO,CACL,KAAM,CAAC,GAAGA,EAAM,UAAU,OAAO,CAAC,EAClC,WAAYA,EAAM,WAClB,QAASA,EAAM,QAAU,GACzB,MAAAA,EACA,MAAOA,EAAM,KACf,CACF,CAEA,SAASY,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAMO,SAASC,EAAqCC,EAGX,CAHW,IAAAC,EAAAD,EACnD,UAAAE,EAAWL,CAtGb,EAqGqDI,EAEhDpB,EAAAsB,EAFgDF,EAEhD,CADH,aAGA,IAAMlB,EAAcC,EAAeH,CAA6B,EAC1DI,EAAQC,EAASH,CAAW,EAE5BqB,EAAkBC,EAAOT,EAAeX,CAAK,CAAC,EAC9CqB,EAAcC,EAAM,YAAY,IAAMH,EAAgB,QAAS,CAAC,CAAC,EAevE,OAdkBI,EAChBC,EACGC,GACCjB,EAAeR,EAAO,IAAM,CAC1BmB,EAAgB,QAAUR,EAAeX,CAAK,EAC9CyB,EAAc,CAChB,CAAC,EACH,CAACzB,CAAK,CACR,EACAqB,EACAA,EACAJ,CACF,CAGF","names":["Shape","ShapeStream","React","useCallback","useRef","useSyncExternalStoreWithSelector","streamCache","shapeCache","preloadShape","options","__async","shapeStream","getShapeStream","shape","getShape","sortedOptionsHash","shapeHash","newShapeStream","ShapeStream","newShape","Shape","shapeSubscribe","callback","unsubscribe","parseShapeData","identity","arg","useShape","_a","_b","selector","__objRest","latestShapeData","useRef","getSnapshot","React","useSyncExternalStoreWithSelector","useCallback","onStoreChange"]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const useShapeData = React.useMemo(() => {\n    let latestShapeData = parseShapeData(shape)\n    const getSnapshot = () => latestShapeData\n    const subscribe = (onStoreChange: () => void) =>\n      shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\n\n    return () => {\n      return useSyncExternalStoreWithSelector(\n        subscribe,\n        getSnapshot,\n        getSnapshot,\n        selector\n      )\n    }\n  }, [shape, selector])\n\n  return useShapeData()\n}\n"],"mappings":"geAAA,OAEE,SAAAA,EACA,eAAAC,MAEK,uBACP,OAAOC,MAAW,QAClB,OAAS,oCAAAC,MAAwC,2CAEjD,IAAMC,EAAc,IAAI,IAClBC,EAAa,IAAI,IAEvB,SAAsBC,EACpBC,EACgB,QAAAC,EAAA,sBAChB,IAAMC,EAAcC,EAAeH,CAAO,EACpCI,EAAQC,EAASH,CAAW,EAClC,aAAME,EAAM,MACLA,CACT,GAEO,SAASE,EAAkBN,EAAqC,CACrE,OAAO,KAAK,UAAUA,EAAS,OAAO,KAAKA,CAAO,EAAE,KAAK,CAAC,CAC5D,CAEO,SAASG,EAAeH,EAA0C,CACvE,IAAMO,EAAYD,EAAkBN,CAAO,EAG3C,GAAIH,EAAY,IAAIU,CAAS,EAE3B,OAAOV,EAAY,IAAIU,CAAS,EAC3B,CACL,IAAMC,EAAiB,IAAIC,EAAYT,CAAO,EAE9C,OAAAH,EAAY,IAAIU,EAAWC,CAAc,EAGlCA,CACT,CACF,CAEO,SAASH,EAASH,EAAiC,CAExD,GAAIJ,EAAW,IAAII,CAAW,EAE5B,OAAOJ,EAAW,IAAII,CAAW,EAC5B,CACL,IAAMQ,EAAW,IAAIC,EAAMT,CAAW,EAEtC,OAAAJ,EAAW,IAAII,EAAaQ,CAAQ,EAG7BA,CACT,CACF,CAqBA,SAASE,EAAeR,EAAcS,EAAsB,CAC1D,IAAMC,EAAcV,EAAM,UAAUS,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EAAeX,EAA8B,CACpD,MAAO,CACL,KAAM,CAAC,GAAGA,EAAM,UAAU,OAAO,CAAC,EAClC,WAAYA,EAAM,WAClB,QAASA,EAAM,QAAU,GACzB,MAAAA,EACA,MAAOA,EAAM,KACf,CACF,CAEA,SAASY,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAMO,SAASC,EAAqCC,EAGX,CAHW,IAAAC,EAAAD,EACnD,UAAAE,EAAWL,CAtGb,EAqGqDI,EAEhDpB,EAAAsB,EAFgDF,EAEhD,CADH,aAGA,IAAMlB,EAAcC,EAAeH,CAA6B,EAC1DI,EAAQC,EAASH,CAAW,EAqBlC,OAnBqBqB,EAAM,QAAQ,IAAM,CACvC,IAAIC,EAAkBT,EAAeX,CAAK,EACpCqB,EAAc,IAAMD,EACpBE,EAAaC,GACjBf,EAAeR,EAAO,IAAM,CAC1BoB,EAAkBT,EAAeX,CAAK,EACtCuB,EAAc,CAChB,CAAC,EAEH,MAAO,IACEC,EACLF,EACAD,EACAA,EACAJ,CACF,CAEJ,EAAG,CAACjB,EAAOiB,CAAQ,CAAC,EAEA,CACtB","names":["Shape","ShapeStream","React","useSyncExternalStoreWithSelector","streamCache","shapeCache","preloadShape","options","__async","shapeStream","getShapeStream","shape","getShape","sortedOptionsHash","shapeHash","newShapeStream","ShapeStream","newShape","Shape","shapeSubscribe","callback","unsubscribe","parseShapeData","identity","arg","useShape","_a","_b","selector","__objRest","React","latestShapeData","getSnapshot","subscribe","onStoreChange","useSyncExternalStoreWithSelector"]}

package/dist/index.legacy-esm.js

@@ -19,7 +19,7 @@ import {
   Shape,
   ShapeStream
 } from "@electric-sql/client";
-import React, { useCallback, useRef } from "react";
+import React from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
 var streamCache = /* @__PURE__ */ new Map();
 var shapeCache = /* @__PURE__ */ new Map();
@@ -77,21 +77,23 @@ function useShape(_a) {
   ]);
   const shapeStream = getShapeStream(options);
   const shape = getShape(shapeStream);
-  const latestShapeData = useRef(parseShapeData(shape));
-  const getSnapshot = React.useCallback(() => latestShapeData.current, []);
-  const shapeData = useSyncExternalStoreWithSelector(
-    useCallback(
-      (onStoreChange) => shapeSubscribe(shape, () => {
-        latestShapeData.current = parseShapeData(shape);
-        onStoreChange();
-      }),
-      [shape]
-    ),
-    getSnapshot,
-    getSnapshot,
-    selector
-  );
-  return shapeData;
+  const useShapeData = React.useMemo(() => {
+    let latestShapeData = parseShapeData(shape);
+    const getSnapshot = () => latestShapeData;
+    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
+      latestShapeData = parseShapeData(shape);
+      onStoreChange();
+    });
+    return () => {
+      return useSyncExternalStoreWithSelector(
+        subscribe,
+        getSnapshot,
+        getSnapshot,
+        selector
+      );
+    };
+  }, [shape, selector]);
+  return useShapeData();
 }
 export {
   getShape,

package/dist/index.legacy-esm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React, { useCallback, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,SAAS,aAAa,cAAc;AAC3C,SAAS,wCAAwC;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,eAAsB,aACpB,SACgB;AAChB,QAAM,cAAc,eAAe,OAAO;AAC1C,QAAM,QAAQ,SAAS,WAAW;AAClC,QAAM,MAAM;AACZ,SAAO;AACT;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AACpD,QAAM,cAAc,MAAM,YAAY,MAAM,gBAAgB,SAAS,CAAC,CAAC;AACvE,QAAM,YAAY;AAAA,IAChB;AAAA,MACE,CAAC,kBACC,eAAe,OAAO,MAAM;AAC1B,wBAAgB,UAAU,eAAe,KAAK;AAC9C,sBAAc;AAAA,MAChB,CAAC;AAAA,MACH,CAAC,KAAK;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const useShapeData = React.useMemo(() => {\n    let latestShapeData = parseShapeData(shape)\n    const getSnapshot = () => latestShapeData\n    const subscribe = (onStoreChange: () => void) =>\n      shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\n\n    return () => {\n      return useSyncExternalStoreWithSelector(\n        subscribe,\n        getSnapshot,\n        getSnapshot,\n        selector\n      )\n    }\n  }, [shape, selector])\n\n  return useShapeData()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,eAAsB,aACpB,SACgB;AAChB,QAAM,cAAc,eAAe,OAAO;AAC1C,QAAM,QAAQ,SAAS,WAAW;AAClC,QAAM,MAAM;AACZ,SAAO;AACT;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,QAAI,kBAAkB,eAAe,KAAK;AAC1C,UAAM,cAAc,MAAM;AAC1B,UAAM,YAAY,CAAC,kBACjB,eAAe,OAAO,MAAM;AAC1B,wBAAkB,eAAe,KAAK;AACtC,oBAAc;AAAA,IAChB,CAAC;AAEH,WAAO,MAAM;AACX,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,aAAa;AACtB;","names":[]}

package/dist/index.mjs

@@ -39,7 +39,7 @@ import {
   Shape,
   ShapeStream
 } from "@electric-sql/client";
-import React, { useCallback, useRef } from "react";
+import React from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
 var streamCache = /* @__PURE__ */ new Map();
 var shapeCache = /* @__PURE__ */ new Map();
@@ -99,21 +99,23 @@ function useShape(_a) {
   ]);
   const shapeStream = getShapeStream(options);
   const shape = getShape(shapeStream);
-  const latestShapeData = useRef(parseShapeData(shape));
-  const getSnapshot = React.useCallback(() => latestShapeData.current, []);
-  const shapeData = useSyncExternalStoreWithSelector(
-    useCallback(
-      (onStoreChange) => shapeSubscribe(shape, () => {
-        latestShapeData.current = parseShapeData(shape);
-        onStoreChange();
-      }),
-      [shape]
-    ),
-    getSnapshot,
-    getSnapshot,
-    selector
-  );
-  return shapeData;
+  const useShapeData = React.useMemo(() => {
+    let latestShapeData = parseShapeData(shape);
+    const getSnapshot = () => latestShapeData;
+    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
+      latestShapeData = parseShapeData(shape);
+      onStoreChange();
+    });
+    return () => {
+      return useSyncExternalStoreWithSelector(
+        subscribe,
+        getSnapshot,
+        getSnapshot,
+        selector
+      );
+    };
+  }, [shape, selector]);
+  return useShapeData();
 }
 export {
   getShape,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React, { useCallback, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,SAAS,aAAa,cAAc;AAC3C,SAAS,wCAAwC;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,SAAsB,aACpB,SACgB;AAAA;AAChB,UAAM,cAAc,eAAe,OAAO;AAC1C,UAAM,QAAQ,SAAS,WAAW;AAClC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AACpD,QAAM,cAAc,MAAM,YAAY,MAAM,gBAAgB,SAAS,CAAC,CAAC;AACvE,QAAM,YAAY;AAAA,IAChB;AAAA,MACE,CAAC,kBACC,eAAe,OAAO,MAAM;AAC1B,wBAAgB,UAAU,eAAe,KAAK;AAC9C,sBAAc;AAAA,MAChB,CAAC;AAAA,MACH,CAAC,KAAK;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Value,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: Value }[]}\n   */\n  data: { [key: string]: Value }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nfunction identity<T>(arg: T): T {\n  return arg\n}\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as (arg: UseShapeResult) => Selection,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const useShapeData = React.useMemo(() => {\n    let latestShapeData = parseShapeData(shape)\n    const getSnapshot = () => latestShapeData\n    const subscribe = (onStoreChange: () => void) =>\n      shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\n\n    return () => {\n      return useSyncExternalStoreWithSelector(\n        subscribe,\n        getSnapshot,\n        getSnapshot,\n        selector\n      )\n    }\n  }, [shape, selector])\n\n  return useShapeData()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAEjD,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,SAAsB,aACpB,SACgB;AAAA;AAChB,UAAM,cAAc,eAAe,OAAO;AAC1C,UAAM,QAAQ,SAAS,WAAW;AAClC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAkB,SAAqC;AACrE,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAMO,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EAtGb,IAqGqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,cAAc,eAAe,OAA6B;AAChE,QAAM,QAAQ,SAAS,WAAW;AAElC,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,QAAI,kBAAkB,eAAe,KAAK;AAC1C,UAAM,cAAc,MAAM;AAC1B,UAAM,YAAY,CAAC,kBACjB,eAAe,OAAO,MAAM;AAC1B,wBAAkB,eAAe,KAAK;AACtC,oBAAc;AAAA,IAChB,CAAC;AAEH,WAAO,MAAM;AACX,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,SAAO,aAAa;AACtB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/react",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "React hooks for ElectricSQL",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -46,7 +46,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "glob": "^10.3.10",
-    "global-jsdom": "24.0.0",
+    "jsdom": "^25.0.0",
     "pg": "^8.12.0",
     "prettier": "^3.3.2",
     "react": "^18.3.1",

package/src/react-hooks.tsx

@@ -4,7 +4,7 @@ import {
   ShapeStream,
   ShapeStreamOptions,
 } from '@electric-sql/client'
-import React, { useCallback, useRef } from 'react'
+import React from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
 
 const streamCache = new Map<string, ShapeStream>()
@@ -106,21 +106,24 @@ export function useShape<Selection = UseShapeResult>({
   const shapeStream = getShapeStream(options as ShapeStreamOptions)
   const shape = getShape(shapeStream)
 
-  const latestShapeData = useRef(parseShapeData(shape))
-  const getSnapshot = React.useCallback(() => latestShapeData.current, [])
-  const shapeData = useSyncExternalStoreWithSelector(
-    useCallback(
-      (onStoreChange) =>
-        shapeSubscribe(shape, () => {
-          latestShapeData.current = parseShapeData(shape)
-          onStoreChange()
-        }),
-      [shape]
-    ),
-    getSnapshot,
-    getSnapshot,
-    selector
-  )
-
-  return shapeData
+  const useShapeData = React.useMemo(() => {
+    let latestShapeData = parseShapeData(shape)
+    const getSnapshot = () => latestShapeData
+    const subscribe = (onStoreChange: () => void) =>
+      shapeSubscribe(shape, () => {
+        latestShapeData = parseShapeData(shape)
+        onStoreChange()
+      })
+
+    return () => {
+      return useSyncExternalStoreWithSelector(
+        subscribe,
+        getSnapshot,
+        getSnapshot,
+        selector
+      )
+    }
+  }, [shape, selector])
+
+  return useShapeData()
 }