@electric-sql/react 0.4.6 → 0.5.0

package/README.md

@@ -21,7 +21,8 @@ import { useShape } from "@electric-sql/react"
 
 export default function MyComponent () {
   const { isLoading, data } = useShape({
-    url: "http://my-api.com/shape/foo",
+    url: "http://my-api.com/shape",
+    table: `foo`,
   })
 
   if (isLoading) {

package/dist/cjs/index.cjs

@@ -81,7 +81,7 @@ function preloadShape(options) {
   return __async(this, null, function* () {
     const shapeStream = getShapeStream(options);
     const shape = getShape(shapeStream);
-    yield shape.value;
+    yield shape.rows;
     return shape;
   });
 }
@@ -89,23 +89,32 @@ function sortedOptionsHash(options) {
   return JSON.stringify(options, Object.keys(options).sort());
 }
 function getShapeStream(options) {
+  var _a;
   const shapeHash = sortedOptionsHash(options);
   if (streamCache.has(shapeHash)) {
-    return streamCache.get(shapeHash);
-  } else {
-    const newShapeStream = new import_client.ShapeStream(options);
-    streamCache.set(shapeHash, newShapeStream);
-    return newShapeStream;
+    const stream = streamCache.get(shapeHash);
+    if (stream.error === void 0 && !((_a = stream.options.signal) == null ? void 0 : _a.aborted)) {
+      return stream;
+    }
+    streamCache.delete(shapeHash);
+    shapeCache.delete(stream);
   }
+  const newShapeStream = new import_client.ShapeStream(options);
+  streamCache.set(shapeHash, newShapeStream);
+  return newShapeStream;
 }
 function getShape(shapeStream) {
+  var _a;
   if (shapeCache.has(shapeStream)) {
-    return shapeCache.get(shapeStream);
-  } else {
-    const newShape = new import_client.Shape(shapeStream);
-    shapeCache.set(shapeStream, newShape);
-    return newShape;
+    if (shapeStream.error === void 0 && !((_a = shapeStream.options.signal) == null ? void 0 : _a.aborted)) {
+      return shapeCache.get(shapeStream);
+    }
+    streamCache.delete(sortedOptionsHash(shapeStream.options));
+    shapeCache.delete(shapeStream);
   }
+  const newShape = new import_client.Shape(shapeStream);
+  shapeCache.set(shapeStream, newShape);
+  return newShape;
 }
 function shapeSubscribe(shape, callback) {
   const unsubscribe = shape.subscribe(callback);
@@ -115,7 +124,7 @@ function shapeSubscribe(shape, callback) {
 }
 function parseShapeData(shape) {
   return {
-    data: [...shape.valueSync.values()],
+    data: shape.currentRows,
     isLoading: shape.isLoading(),
     lastSyncedAt: shape.lastSyncedAt(),
     isError: shape.error !== false,

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  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\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)! as ShapeStream<T>\n  } else {\n    const newShapeStream = new ShapeStream<T>(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)! as Shape<T>\n  } else {\n    const newShape = new Shape<T>(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: [...shape.valueSync.values()],\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,oBAMO;AACP,mBAAkB;AAClB,2BAAiD;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,SAAsB,aACpB,SACmB;AAAA;AACnB,UAAM,cAAc,eAAkB,OAAO;AAC7C,UAAM,QAAQ,SAAY,WAAW;AACrC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AAChB,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,0BAAe,OAAO;AAEjD,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SACd,aACU;AAEV,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,oBAAS,WAAW;AAEzC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAxHb,IAuHE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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"]}
+{"version":3,"sources":["../../src/index.ts","../../src/react-hooks.tsx"],"sourcesContent":["export * from './react-hooks'\n","import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.rows\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return it if valid\n  if (streamCache.has(shapeHash)) {\n    const stream = streamCache.get(shapeHash)! as ShapeStream<T>\n    if (stream.error === undefined && !stream.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\n\n  streamCache.set(shapeHash, newShapeStream)\n\n  // Return the created shape\n  return newShapeStream\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return it if valid\n  if (shapeCache.has(shapeStream)) {\n    if (\n      shapeStream.error === undefined &&\n      !shapeStream.options.signal?.aborted\n    ) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(sortedOptionsHash(shapeStream.options))\n    shapeCache.delete(shapeStream)\n  }\n\n  const newShape = new Shape<T>(shapeStream)\n\n  shapeCache.set(shapeStream, newShape)\n\n  // Return the created shape\n  return newShape\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: shape.currentRows,\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,oBAMO;AACP,mBAAkB;AAClB,2BAAiD;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,SAAsB,aACpB,SACmB;AAAA;AACnB,UAAM,cAAc,eAAkB,OAAO;AAC7C,UAAM,QAAQ,SAAY,WAAW;AACrC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AA/BlB;AAgCE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAC9B,UAAM,SAAS,YAAY,IAAI,SAAS;AACxC,QAAI,OAAO,UAAU,UAAa,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACjE,aAAO;AAAA,IACT;AAGA,gBAAY,OAAO,SAAS;AAC5B,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEA,QAAM,iBAAiB,IAAI,0BAAe,OAAO;AAEjD,cAAY,IAAI,WAAW,cAAc;AAGzC,SAAO;AACT;AAEO,SAAS,SACd,aACU;AAxDZ;AA0DE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QACE,YAAY,UAAU,UACtB,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAC7B;AACA,aAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAGA,gBAAY,OAAO,kBAAkB,YAAY,OAAO,CAAC;AACzD,eAAW,OAAO,WAAW;AAAA,EAC/B;AAEA,QAAM,WAAW,IAAI,oBAAS,WAAW;AAEzC,aAAW,IAAI,aAAa,QAAQ;AAGpC,SAAO;AACT;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAtIb,IAqIE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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 h=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var w=(e,t)=>{var n={};for(var a in e)R.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(e!=null&&h)for(var a of h(e))t.indexOf(a)<0&&f.call(e,a)&&(n[a]=e[a]);return n};var T=(e,t,n)=>new Promise((a,p)=>{var r=o=>{try{s(n.next(o))}catch(S){p(S)}},c=o=>{try{s(n.throw(o))}catch(S){p(S)}},s=o=>o.done?a(o.value):Promise.resolve(o.value).then(r,c);s((n=n.apply(e,t)).next())});import{Shape as k,ShapeStream as D}from"@electric-sql/client";import b from"react";import{useSyncExternalStoreWithSelector as g}from"use-sync-external-store/with-selector.js";var u=new Map,i=new Map;function H(e){return T(this,null,function*(){let t=m(e),n=d(t);return yield n.value,n})}function U(e){return JSON.stringify(e,Object.keys(e).sort())}function m(e){let t=U(e);if(u.has(t))return u.get(t);{let n=new D(e);return u.set(t,n),n}}function d(e){if(i.has(e))return i.get(e);{let t=new k(e);return i.set(e,t),t}}function y(e,t){let n=e.subscribe(t);return()=>{n()}}function l(e){return{data:[...e.valueSync.values()],isLoading:e.isLoading(),lastSyncedAt:e.lastSyncedAt(),isError:e.error!==!1,shape:e,error:e.error}}function O(e){return e}function j(n){var a=n,{selector:e=O}=a,t=w(a,["selector"]);let p=m(t),r=d(p);return b.useMemo(()=>{let s=l(r),o=()=>s,S=x=>y(r,()=>{s=l(r),x()});return()=>g(S,o,o,e)},[r,e])()}export{d as getShape,m as getShapeStream,H as preloadShape,U as sortedOptionsHash,j as useShape};
+var h=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var w=(e,t)=>{var n={};for(var o in e)R.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&h)for(var o of h(e))t.indexOf(o)<0&&k.call(e,o)&&(n[o]=e[o]);return n};var d=(e,t,n)=>new Promise((o,r)=>{var s=a=>{try{S(n.next(a))}catch(i){r(i)}},c=a=>{try{S(n.throw(a))}catch(i){r(i)}},S=a=>a.done?o(a.value):Promise.resolve(a.value).then(s,c);S((n=n.apply(e,t)).next())});import{Shape as b,ShapeStream as g}from"@electric-sql/client";import D from"react";import{useSyncExternalStoreWithSelector as U}from"use-sync-external-store/with-selector.js";var p=new Map,u=new Map;function H(e){return d(this,null,function*(){let t=m(e),n=f(t);return yield n.rows,n})}function T(e){return JSON.stringify(e,Object.keys(e).sort())}function m(e){var o;let t=T(e);if(p.has(t)){let r=p.get(t);if(r.error===void 0&&!((o=r.options.signal)!=null&&o.aborted))return r;p.delete(t),u.delete(r)}let n=new g(e);return p.set(t,n),n}function f(e){var n;if(u.has(e)){if(e.error===void 0&&!((n=e.options.signal)!=null&&n.aborted))return u.get(e);p.delete(T(e.options)),u.delete(e)}let t=new b(e);return u.set(e,t),t}function O(e,t){let n=e.subscribe(t);return()=>{n()}}function l(e){return{data:e.currentRows,isLoading:e.isLoading(),lastSyncedAt:e.lastSyncedAt(),isError:e.error!==!1,shape:e,error:e.error}}function y(e){return e}function j(n){var o=n,{selector:e=y}=o,t=w(o,["selector"]);let r=m(t),s=f(r);return D.useMemo(()=>{let S=l(s),a=()=>S,i=x=>O(s,()=>{S=l(s),x()});return()=>U(i,a,a,e)},[s,e])()}export{f as getShape,m as getShapeStream,H as preloadShape,T 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  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\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)! as ShapeStream<T>\n  } else {\n    const newShapeStream = new ShapeStream<T>(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)! as Shape<T>\n  } else {\n    const newShape = new Shape<T>(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: [...shape.valueSync.values()],\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,OACE,SAAAA,EACA,eAAAC,MAIK,uBACP,OAAOC,MAAW,QAClB,OAAS,oCAAAC,MAAwC,2CAKjD,IAAMC,EAAc,IAAI,IAClBC,EAAa,IAAI,IAEvB,SAAsBC,EACpBC,EACmB,QAAAC,EAAA,sBACnB,IAAMC,EAAcC,EAAkBH,CAAO,EACvCI,EAAQC,EAAYH,CAAW,EACrC,aAAME,EAAM,MACLA,CACT,GAEO,SAASE,EAAqBN,EAAwC,CAC3E,OAAO,KAAK,UAAUA,EAAS,OAAO,KAAKA,CAAO,EAAE,KAAK,CAAC,CAC5D,CAEO,SAASG,EACdH,EACgB,CAChB,IAAMO,EAAYD,EAAkBN,CAAO,EAG3C,GAAIH,EAAY,IAAIU,CAAS,EAE3B,OAAOV,EAAY,IAAIU,CAAS,EAC3B,CACL,IAAMC,EAAiB,IAAIC,EAAeT,CAAO,EAEjD,OAAAH,EAAY,IAAIU,EAAWC,CAAc,EAGlCA,CACT,CACF,CAEO,SAASH,EACdH,EACU,CAEV,GAAIJ,EAAW,IAAII,CAAW,EAE5B,OAAOJ,EAAW,IAAII,CAAW,EAC5B,CACL,IAAMQ,EAAW,IAAIC,EAAST,CAAW,EAEzC,OAAAJ,EAAW,IAAII,EAAaQ,CAAQ,EAG7BA,CACT,CACF,CAqBA,SAASE,EACPR,EACAS,EACA,CACA,IAAMC,EAAcV,EAAM,UAAUS,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EACPX,EACmB,CACnB,MAAO,CACL,KAAM,CAAC,GAAGA,EAAM,UAAU,OAAO,CAAC,EAClC,UAAWA,EAAM,UAAU,EAC3B,aAAcA,EAAM,aAAa,EACjC,QAASA,EAAM,QAAU,GACzB,MAAAA,EACA,MAAOA,EAAM,KACf,CACF,CAEA,SAASY,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAOO,SAASC,EAGdC,EAGoD,CAHpD,IAAAC,EAAAD,EACA,UAAAE,EAAWL,CAxHb,EAuHEI,EAEGpB,EAAAsB,EAFHF,EAEG,CADH,aAGA,IAAMlB,EAAcC,EAClBH,CACF,EACMI,EAAQC,EAAqBH,CAAW,EAqB9C,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"]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.rows\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return it if valid\n  if (streamCache.has(shapeHash)) {\n    const stream = streamCache.get(shapeHash)! as ShapeStream<T>\n    if (stream.error === undefined && !stream.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\n\n  streamCache.set(shapeHash, newShapeStream)\n\n  // Return the created shape\n  return newShapeStream\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return it if valid\n  if (shapeCache.has(shapeStream)) {\n    if (\n      shapeStream.error === undefined &&\n      !shapeStream.options.signal?.aborted\n    ) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(sortedOptionsHash(shapeStream.options))\n    shapeCache.delete(shapeStream)\n  }\n\n  const newShape = new Shape<T>(shapeStream)\n\n  shapeCache.set(shapeStream, newShape)\n\n  // Return the created shape\n  return newShape\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: shape.currentRows,\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,OACE,SAAAA,EACA,eAAAC,MAIK,uBACP,OAAOC,MAAW,QAClB,OAAS,oCAAAC,MAAwC,2CAKjD,IAAMC,EAAc,IAAI,IAClBC,EAAa,IAAI,IAEvB,SAAsBC,EACpBC,EACmB,QAAAC,EAAA,sBACnB,IAAMC,EAAcC,EAAkBH,CAAO,EACvCI,EAAQC,EAAYH,CAAW,EACrC,aAAME,EAAM,KACLA,CACT,GAEO,SAASE,EAAqBN,EAAwC,CAC3E,OAAO,KAAK,UAAUA,EAAS,OAAO,KAAKA,CAAO,EAAE,KAAK,CAAC,CAC5D,CAEO,SAASG,EACdH,EACgB,CA/BlB,IAAAO,EAgCE,IAAMC,EAAYF,EAAkBN,CAAO,EAG3C,GAAIH,EAAY,IAAIW,CAAS,EAAG,CAC9B,IAAMC,EAASZ,EAAY,IAAIW,CAAS,EACxC,GAAIC,EAAO,QAAU,QAAa,GAACF,EAAAE,EAAO,QAAQ,SAAf,MAAAF,EAAuB,SACxD,OAAOE,EAITZ,EAAY,OAAOW,CAAS,EAC5BV,EAAW,OAAOW,CAAM,CAC1B,CAEA,IAAMC,EAAiB,IAAIC,EAAeX,CAAO,EAEjD,OAAAH,EAAY,IAAIW,EAAWE,CAAc,EAGlCA,CACT,CAEO,SAASL,EACdH,EACU,CAxDZ,IAAAK,EA0DE,GAAIT,EAAW,IAAII,CAAW,EAAG,CAC/B,GACEA,EAAY,QAAU,QACtB,GAACK,EAAAL,EAAY,QAAQ,SAApB,MAAAK,EAA4B,SAE7B,OAAOT,EAAW,IAAII,CAAW,EAInCL,EAAY,OAAOS,EAAkBJ,EAAY,OAAO,CAAC,EACzDJ,EAAW,OAAOI,CAAW,CAC/B,CAEA,IAAMU,EAAW,IAAIC,EAASX,CAAW,EAEzC,OAAAJ,EAAW,IAAII,EAAaU,CAAQ,EAG7BA,CACT,CAqBA,SAASE,EACPV,EACAW,EACA,CACA,IAAMC,EAAcZ,EAAM,UAAUW,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EACPb,EACmB,CACnB,MAAO,CACL,KAAMA,EAAM,YACZ,UAAWA,EAAM,UAAU,EAC3B,aAAcA,EAAM,aAAa,EACjC,QAASA,EAAM,QAAU,GACzB,MAAAA,EACA,MAAOA,EAAM,KACf,CACF,CAEA,SAASc,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAOO,SAASC,EAGdb,EAGoD,CAHpD,IAAAc,EAAAd,EACA,UAAAe,EAAWJ,CAtIb,EAqIEG,EAEGrB,EAAAuB,EAFHF,EAEG,CADH,aAGA,IAAMnB,EAAcC,EAClBH,CACF,EACMI,EAAQC,EAAqBH,CAAW,EAqB9C,OAnBqBsB,EAAM,QAAQ,IAAM,CACvC,IAAIC,EAAkBR,EAAeb,CAAK,EACpCsB,EAAc,IAAMD,EACpBE,EAAaC,GACjBd,EAAeV,EAAO,IAAM,CAC1BqB,EAAkBR,EAAeb,CAAK,EACtCwB,EAAc,CAChB,CAAC,EAEH,MAAO,IACEC,EACLF,EACAD,EACAA,EACAJ,CACF,CAEJ,EAAG,CAAClB,EAAOkB,CAAQ,CAAC,EAEA,CACtB","names":["Shape","ShapeStream","React","useSyncExternalStoreWithSelector","streamCache","shapeCache","preloadShape","options","__async","shapeStream","getShapeStream","shape","getShape","sortedOptionsHash","_a","shapeHash","stream","newShapeStream","ShapeStream","newShape","Shape","shapeSubscribe","callback","unsubscribe","parseShapeData","identity","arg","useShape","_b","selector","__objRest","React","latestShapeData","getSnapshot","subscribe","onStoreChange","useSyncExternalStoreWithSelector"]}

package/dist/index.legacy-esm.js

@@ -26,30 +26,39 @@ var shapeCache = /* @__PURE__ */ new Map();
 async function preloadShape(options) {
   const shapeStream = getShapeStream(options);
   const shape = getShape(shapeStream);
-  await shape.value;
+  await shape.rows;
   return shape;
 }
 function sortedOptionsHash(options) {
   return JSON.stringify(options, Object.keys(options).sort());
 }
 function getShapeStream(options) {
+  var _a;
   const shapeHash = sortedOptionsHash(options);
   if (streamCache.has(shapeHash)) {
-    return streamCache.get(shapeHash);
-  } else {
-    const newShapeStream = new ShapeStream(options);
-    streamCache.set(shapeHash, newShapeStream);
-    return newShapeStream;
+    const stream = streamCache.get(shapeHash);
+    if (stream.error === void 0 && !((_a = stream.options.signal) == null ? void 0 : _a.aborted)) {
+      return stream;
+    }
+    streamCache.delete(shapeHash);
+    shapeCache.delete(stream);
   }
+  const newShapeStream = new ShapeStream(options);
+  streamCache.set(shapeHash, newShapeStream);
+  return newShapeStream;
 }
 function getShape(shapeStream) {
+  var _a;
   if (shapeCache.has(shapeStream)) {
-    return shapeCache.get(shapeStream);
-  } else {
-    const newShape = new Shape(shapeStream);
-    shapeCache.set(shapeStream, newShape);
-    return newShape;
+    if (shapeStream.error === void 0 && !((_a = shapeStream.options.signal) == null ? void 0 : _a.aborted)) {
+      return shapeCache.get(shapeStream);
+    }
+    streamCache.delete(sortedOptionsHash(shapeStream.options));
+    shapeCache.delete(shapeStream);
   }
+  const newShape = new Shape(shapeStream);
+  shapeCache.set(shapeStream, newShape);
+  return newShape;
 }
 function shapeSubscribe(shape, callback) {
   const unsubscribe = shape.subscribe(callback);
@@ -59,7 +68,7 @@ function shapeSubscribe(shape, callback) {
 }
 function parseShapeData(shape) {
   return {
-    data: [...shape.valueSync.values()],
+    data: shape.currentRows,
     isLoading: shape.isLoading(),
     lastSyncedAt: shape.lastSyncedAt(),
     isError: shape.error !== false,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\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)! as ShapeStream<T>\n  } else {\n    const newShapeStream = new ShapeStream<T>(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)! as Shape<T>\n  } else {\n    const newShape = new Shape<T>(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: [...shape.valueSync.values()],\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,EACE;AAAA,EACA;AAAA,OAIK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,eAAsB,aACpB,SACmB;AACnB,QAAM,cAAc,eAAkB,OAAO;AAC7C,QAAM,QAAQ,SAAY,WAAW;AACrC,QAAM,MAAM;AACZ,SAAO;AACT;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AAChB,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAe,OAAO;AAEjD,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SACd,aACU;AAEV,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAS,WAAW;AAEzC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAxHb,IAuHE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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":[]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.rows\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return it if valid\n  if (streamCache.has(shapeHash)) {\n    const stream = streamCache.get(shapeHash)! as ShapeStream<T>\n    if (stream.error === undefined && !stream.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\n\n  streamCache.set(shapeHash, newShapeStream)\n\n  // Return the created shape\n  return newShapeStream\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return it if valid\n  if (shapeCache.has(shapeStream)) {\n    if (\n      shapeStream.error === undefined &&\n      !shapeStream.options.signal?.aborted\n    ) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(sortedOptionsHash(shapeStream.options))\n    shapeCache.delete(shapeStream)\n  }\n\n  const newShape = new Shape<T>(shapeStream)\n\n  shapeCache.set(shapeStream, newShape)\n\n  // Return the created shape\n  return newShape\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: shape.currentRows,\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,EACE;AAAA,EACA;AAAA,OAIK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,eAAsB,aACpB,SACmB;AACnB,QAAM,cAAc,eAAkB,OAAO;AAC7C,QAAM,QAAQ,SAAY,WAAW;AACrC,QAAM,MAAM;AACZ,SAAO;AACT;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AA/BlB;AAgCE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAC9B,UAAM,SAAS,YAAY,IAAI,SAAS;AACxC,QAAI,OAAO,UAAU,UAAa,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACjE,aAAO;AAAA,IACT;AAGA,gBAAY,OAAO,SAAS;AAC5B,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEA,QAAM,iBAAiB,IAAI,YAAe,OAAO;AAEjD,cAAY,IAAI,WAAW,cAAc;AAGzC,SAAO;AACT;AAEO,SAAS,SACd,aACU;AAxDZ;AA0DE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QACE,YAAY,UAAU,UACtB,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAC7B;AACA,aAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAGA,gBAAY,OAAO,kBAAkB,YAAY,OAAO,CAAC;AACzD,eAAW,OAAO,WAAW;AAAA,EAC/B;AAEA,QAAM,WAAW,IAAI,MAAS,WAAW;AAEzC,aAAW,IAAI,aAAa,QAAQ;AAGpC,SAAO;AACT;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAtIb,IAqIE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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

@@ -47,7 +47,7 @@ function preloadShape(options) {
   return __async(this, null, function* () {
     const shapeStream = getShapeStream(options);
     const shape = getShape(shapeStream);
-    yield shape.value;
+    yield shape.rows;
     return shape;
   });
 }
@@ -55,23 +55,32 @@ function sortedOptionsHash(options) {
   return JSON.stringify(options, Object.keys(options).sort());
 }
 function getShapeStream(options) {
+  var _a;
   const shapeHash = sortedOptionsHash(options);
   if (streamCache.has(shapeHash)) {
-    return streamCache.get(shapeHash);
-  } else {
-    const newShapeStream = new ShapeStream(options);
-    streamCache.set(shapeHash, newShapeStream);
-    return newShapeStream;
+    const stream = streamCache.get(shapeHash);
+    if (stream.error === void 0 && !((_a = stream.options.signal) == null ? void 0 : _a.aborted)) {
+      return stream;
+    }
+    streamCache.delete(shapeHash);
+    shapeCache.delete(stream);
   }
+  const newShapeStream = new ShapeStream(options);
+  streamCache.set(shapeHash, newShapeStream);
+  return newShapeStream;
 }
 function getShape(shapeStream) {
+  var _a;
   if (shapeCache.has(shapeStream)) {
-    return shapeCache.get(shapeStream);
-  } else {
-    const newShape = new Shape(shapeStream);
-    shapeCache.set(shapeStream, newShape);
-    return newShape;
+    if (shapeStream.error === void 0 && !((_a = shapeStream.options.signal) == null ? void 0 : _a.aborted)) {
+      return shapeCache.get(shapeStream);
+    }
+    streamCache.delete(sortedOptionsHash(shapeStream.options));
+    shapeCache.delete(shapeStream);
   }
+  const newShape = new Shape(shapeStream);
+  shapeCache.set(shapeStream, newShape);
+  return newShape;
 }
 function shapeSubscribe(shape, callback) {
   const unsubscribe = shape.subscribe(callback);
@@ -81,7 +90,7 @@ function shapeSubscribe(shape, callback) {
 }
 function parseShapeData(shape) {
   return {
-    data: [...shape.valueSync.values()],
+    data: shape.currentRows,
     isLoading: shape.isLoading(),
     lastSyncedAt: shape.lastSyncedAt(),
     isError: shape.error !== false,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\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)! as ShapeStream<T>\n  } else {\n    const newShapeStream = new ShapeStream<T>(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)! as Shape<T>\n  } else {\n    const newShape = new Shape<T>(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: [...shape.valueSync.values()],\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,EACE;AAAA,EACA;AAAA,OAIK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,SAAsB,aACpB,SACmB;AAAA;AACnB,UAAM,cAAc,eAAkB,OAAO;AAC7C,UAAM,QAAQ,SAAY,WAAW;AACrC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AAChB,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAe,OAAO;AAEjD,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SACd,aACU;AAEV,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAS,WAAW;AAEzC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAxHb,IAuHE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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":[]}
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  Row,\n  GetExtensions,\n} from '@electric-sql/client'\nimport React from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ntype UnknownShape = Shape<Row<unknown>>\ntype UnknownShapeStream = ShapeStream<Row<unknown>>\n\nconst streamCache = new Map<string, UnknownShapeStream>()\nconst shapeCache = new Map<UnknownShapeStream, UnknownShape>()\n\nexport async function preloadShape<T extends Row<unknown> = Row>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): Promise<Shape<T>> {\n  const shapeStream = getShapeStream<T>(options)\n  const shape = getShape<T>(shapeStream)\n  await shape.rows\n  return shape\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(options, Object.keys(options).sort())\n}\n\nexport function getShapeStream<T extends Row<unknown>>(\n  options: ShapeStreamOptions<GetExtensions<T>>\n): ShapeStream<T> {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return it if valid\n  if (streamCache.has(shapeHash)) {\n    const stream = streamCache.get(shapeHash)! as ShapeStream<T>\n    if (stream.error === undefined && !stream.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\n\n  streamCache.set(shapeHash, newShapeStream)\n\n  // Return the created shape\n  return newShapeStream\n}\n\nexport function getShape<T extends Row<unknown>>(\n  shapeStream: ShapeStream<T>\n): Shape<T> {\n  // If the stream is already cached, return it if valid\n  if (shapeCache.has(shapeStream)) {\n    if (\n      shapeStream.error === undefined &&\n      !shapeStream.options.signal?.aborted\n    ) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is cached but errored/aborted, remove it and related shapes\n    streamCache.delete(sortedOptionsHash(shapeStream.options))\n    shapeCache.delete(shapeStream)\n  }\n\n  const newShape = new Shape<T>(shapeStream)\n\n  shapeCache.set(shapeStream, newShape)\n\n  // Return the created shape\n  return newShape\n}\n\nexport interface UseShapeResult<T extends Row<unknown> = Row> {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {T[]}\n   */\n  data: T[]\n  /**\n   * The Shape instance used by this useShape\n   * @type {Shape<T>}\n   */\n  shape: Shape<T>\n  /** True during initial fetch. False afterwise. */\n  isLoading: boolean\n  /** Unix time at which we last synced. Undefined when `isLoading` is true. */\n  lastSyncedAt?: number\n  error: Shape<T>[`error`]\n  isError: boolean\n}\n\nfunction shapeSubscribe<T extends Row<unknown>>(\n  shape: Shape<T>,\n  callback: () => void\n) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData<T extends Row<unknown>>(\n  shape: Shape<T>\n): UseShapeResult<T> {\n  return {\n    data: shape.currentRows,\n    isLoading: shape.isLoading(),\n    lastSyncedAt: shape.lastSyncedAt(),\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<SourceData extends Row<unknown>, Selection>\n  extends ShapeStreamOptions<GetExtensions<SourceData>> {\n  selector?: (value: UseShapeResult<SourceData>) => Selection\n}\n\nexport function useShape<\n  SourceData extends Row<unknown> = Row,\n  Selection = UseShapeResult<SourceData>,\n>({\n  selector = identity as (arg: UseShapeResult<SourceData>) => Selection,\n  ...options\n}: UseShapeOptions<SourceData, Selection>): Selection {\n  const shapeStream = getShapeStream<SourceData>(\n    options as ShapeStreamOptions<GetExtensions<SourceData>>\n  )\n  const shape = getShape<SourceData>(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,EACE;AAAA,EACA;AAAA,OAIK;AACP,OAAO,WAAW;AAClB,SAAS,wCAAwC;AAKjD,IAAM,cAAc,oBAAI,IAAgC;AACxD,IAAM,aAAa,oBAAI,IAAsC;AAE7D,SAAsB,aACpB,SACmB;AAAA;AACnB,UAAM,cAAc,eAAkB,OAAO;AAC7C,UAAM,QAAQ,SAAY,WAAW;AACrC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,SAAS,OAAO,KAAK,OAAO,EAAE,KAAK,CAAC;AAC5D;AAEO,SAAS,eACd,SACgB;AA/BlB;AAgCE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAC9B,UAAM,SAAS,YAAY,IAAI,SAAS;AACxC,QAAI,OAAO,UAAU,UAAa,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACjE,aAAO;AAAA,IACT;AAGA,gBAAY,OAAO,SAAS;AAC5B,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEA,QAAM,iBAAiB,IAAI,YAAe,OAAO;AAEjD,cAAY,IAAI,WAAW,cAAc;AAGzC,SAAO;AACT;AAEO,SAAS,SACd,aACU;AAxDZ;AA0DE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QACE,YAAY,UAAU,UACtB,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAC7B;AACA,aAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAGA,gBAAY,OAAO,kBAAkB,YAAY,OAAO,CAAC;AACzD,eAAW,OAAO,WAAW;AAAA,EAC/B;AAEA,QAAM,WAAW,IAAI,MAAS,WAAW;AAEzC,aAAW,IAAI,aAAa,QAAQ;AAGpC,SAAO;AACT;AAqBA,SAAS,eACP,OACA,UACA;AACA,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eACP,OACmB;AACnB,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ,WAAW,MAAM,UAAU;AAAA,IAC3B,cAAc,MAAM,aAAa;AAAA,IACjC,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAtIb,IAqIE,IAEG,oBAFH,IAEG;AAAA,IADH;AAAA;AAGA,QAAM,cAAc;AAAA,IAClB;AAAA,EACF;AACA,QAAM,QAAQ,SAAqB,WAAW;AAE9C,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.4.6",
+  "version": "0.5.0",
   "description": "React hooks for ElectricSQL",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -31,7 +31,7 @@
   "homepage": "https://electric-sql.com",
   "dependencies": {
     "use-sync-external-store": "^1.2.2",
-    "@electric-sql/client": "0.6.4"
+    "@electric-sql/client": "0.7.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",

package/src/react-hooks.tsx

@@ -19,7 +19,7 @@ export async function preloadShape<T extends Row<unknown> = Row>(
 ): Promise<Shape<T>> {
   const shapeStream = getShapeStream<T>(options)
   const shape = getShape<T>(shapeStream)
-  await shape.value
+  await shape.rows
   return shape
 }
 
@@ -32,35 +32,49 @@ export function getShapeStream<T extends Row<unknown>>(
 ): ShapeStream<T> {
   const shapeHash = sortedOptionsHash(options)
 
-  // If the stream is already cached, return
+  // If the stream is already cached, return it if valid
   if (streamCache.has(shapeHash)) {
-    // Return the ShapeStream
-    return streamCache.get(shapeHash)! as ShapeStream<T>
-  } else {
-    const newShapeStream = new ShapeStream<T>(options)
-
-    streamCache.set(shapeHash, newShapeStream)
+    const stream = streamCache.get(shapeHash)! as ShapeStream<T>
+    if (stream.error === undefined && !stream.options.signal?.aborted) {
+      return stream
+    }
 
-    // Return the created shape
-    return newShapeStream
+    // if stream is cached but errored/aborted, remove it and related shapes
+    streamCache.delete(shapeHash)
+    shapeCache.delete(stream)
   }
+
+  const newShapeStream = new ShapeStream<T>(options)
+
+  streamCache.set(shapeHash, newShapeStream)
+
+  // Return the created shape
+  return newShapeStream
 }
 
 export function getShape<T extends Row<unknown>>(
   shapeStream: ShapeStream<T>
 ): Shape<T> {
-  // If the stream is already cached, return
+  // If the stream is already cached, return it if valid
   if (shapeCache.has(shapeStream)) {
-    // Return the ShapeStream
-    return shapeCache.get(shapeStream)! as Shape<T>
-  } else {
-    const newShape = new Shape<T>(shapeStream)
-
-    shapeCache.set(shapeStream, newShape)
+    if (
+      shapeStream.error === undefined &&
+      !shapeStream.options.signal?.aborted
+    ) {
+      return shapeCache.get(shapeStream)! as Shape<T>
+    }
 
-    // Return the created shape
-    return newShape
+    // if stream is cached but errored/aborted, remove it and related shapes
+    streamCache.delete(sortedOptionsHash(shapeStream.options))
+    shapeCache.delete(shapeStream)
   }
+
+  const newShape = new Shape<T>(shapeStream)
+
+  shapeCache.set(shapeStream, newShape)
+
+  // Return the created shape
+  return newShape
 }
 
 export interface UseShapeResult<T extends Row<unknown> = Row> {
@@ -96,7 +110,7 @@ function parseShapeData<T extends Row<unknown>>(
   shape: Shape<T>
 ): UseShapeResult<T> {
   return {
-    data: [...shape.valueSync.values()],
+    data: shape.currentRows,
     isLoading: shape.isLoading(),
     lastSyncedAt: shape.lastSyncedAt(),
     isError: shape.error !== false,