@electric-sql/react 0.5.4 → 0.6.0

package/README.md

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

package/dist/cjs/index.cjs

@@ -85,8 +85,18 @@ function preloadShape(options) {
     return shape;
   });
 }
+function sortObjectKeys(obj) {
+  if (typeof obj !== `object` || obj === null) return obj;
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys);
+  }
+  return Object.keys(obj).sort().reduce((sorted, key) => {
+    sorted[key] = sortObjectKeys(obj[key]);
+    return sorted;
+  }, {});
+}
 function sortedOptionsHash(options) {
-  return JSON.stringify(options, Object.keys(options).sort());
+  return JSON.stringify(sortObjectKeys(options));
 }
 function getShapeStream(options) {
   var _a;

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.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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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,CAAC,OAAO,SAAS,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACpD,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,QAAI,CAAC,YAAY,SAAS,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AAC9D,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,EAnIb,IAkIE,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\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sortObjectKeys(obj: any): any {\n  if (typeof obj !== `object` || obj === null) return obj\n\n  if (Array.isArray(obj)) {\n    return obj.map(sortObjectKeys)\n  }\n\n  return (\n    Object.keys(obj)\n      .sort()\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .reduce<Record<string, any>>((sorted, key) => {\n        sorted[key] = sortObjectKeys(obj[key])\n        return sorted\n      }, {})\n  )\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(sortObjectKeys(options))\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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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":"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","names":["React"]}

package/dist/index.browser.mjs

@@ -1,2 +1,2 @@
-var h=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var w=(e,n)=>{var t={};for(var o in e)f.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&h)for(var o of h(e))n.indexOf(o)<0&&k.call(e,o)&&(t[o]=e[o]);return t};var l=(e,n,t)=>new Promise((o,r)=>{var s=a=>{try{S(t.next(a))}catch(p){r(p)}},c=a=>{try{S(t.throw(a))}catch(p){r(p)}},S=a=>a.done?o(a.value):Promise.resolve(a.value).then(s,c);S((t=t.apply(e,n)).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 i=new Map,u=new Map;function H(e){return l(this,null,function*(){let n=m(e),t=x(n);return yield t.rows,t})}function d(e){return JSON.stringify(e,Object.keys(e).sort())}function m(e){var o;let n=d(e);if(i.has(n)){let r=i.get(n);if(!r.error&&!((o=r.options.signal)!=null&&o.aborted))return r;i.delete(n),u.delete(r)}let t=new g(e);return i.set(n,t),t}function x(e){var t;if(u.has(e)){if(!e.error&&!((t=e.options.signal)!=null&&t.aborted))return u.get(e);i.delete(d(e.options)),u.delete(e)}let n=new b(e);return u.set(e,n),n}function O(e,n){let t=e.subscribe(n);return()=>{t()}}function T(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(t){var o=t,{selector:e=y}=o,n=w(o,["selector"]);let r=m(n),s=x(r);return D.useMemo(()=>{let S=T(s),a=()=>S,p=R=>O(s,()=>{S=T(s),R()});return()=>U(p,a,a,e)},[s,e])()}export{x as getShape,m as getShapeStream,H as preloadShape,d as sortedOptionsHash,j as useShape};
+var w=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var l=(e,n)=>{var t={};for(var a in e)y.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&w)for(var a of w(e))n.indexOf(a)<0&&g.call(e,a)&&(t[a]=e[a]);return t};var d=(e,n,t)=>new Promise((a,r)=>{var s=o=>{try{S(t.next(o))}catch(i){r(i)}},h=o=>{try{S(t.throw(o))}catch(i){r(i)}},S=o=>o.done?a(o.value):Promise.resolve(o.value).then(s,h);S((t=t.apply(e,n)).next())});import{Shape as k,ShapeStream as D}from"@electric-sql/client";import O from"react";import{useSyncExternalStoreWithSelector as U}from"use-sync-external-store/with-selector.js";var p=new Map,u=new Map;function J(e){return d(this,null,function*(){let n=m(e),t=x(n);return yield t.rows,t})}function c(e){return typeof e!="object"||e===null?e:Array.isArray(e)?e.map(c):Object.keys(e).sort().reduce((n,t)=>(n[t]=c(e[t]),n),{})}function f(e){return JSON.stringify(c(e))}function m(e){var a;let n=f(e);if(p.has(n)){let r=p.get(n);if(!r.error&&!((a=r.options.signal)!=null&&a.aborted))return r;p.delete(n),u.delete(r)}let t=new D(e);return p.set(n,t),t}function x(e){var t;if(u.has(e)){if(!e.error&&!((t=e.options.signal)!=null&&t.aborted))return u.get(e);p.delete(f(e.options)),u.delete(e)}let n=new k(e);return u.set(e,n),n}function b(e,n){let t=e.subscribe(n);return()=>{t()}}function T(e){return{data:e.currentRows,isLoading:e.isLoading(),lastSyncedAt:e.lastSyncedAt(),isError:e.error!==!1,shape:e,error:e.error}}function E(e){return e}function K(t){var a=t,{selector:e=E}=a,n=l(a,["selector"]);let r=m(n),s=x(r);return O.useMemo(()=>{let S=T(s),o=()=>S,i=R=>b(s,()=>{S=T(s),R()});return()=>U(i,o,o,e)},[s,e])()}export{x as getShape,m as getShapeStream,J as preloadShape,f as sortedOptionsHash,K 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.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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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,GAAI,CAACC,EAAO,OAAS,GAACF,EAAAE,EAAO,QAAQ,SAAf,MAAAF,EAAuB,SAC3C,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,GAAI,CAACA,EAAY,OAAS,GAACK,EAAAL,EAAY,QAAQ,SAApB,MAAAK,EAA4B,SACrD,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,CAnIb,EAkIEG,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"]}
+{"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\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sortObjectKeys(obj: any): any {\n  if (typeof obj !== `object` || obj === null) return obj\n\n  if (Array.isArray(obj)) {\n    return obj.map(sortObjectKeys)\n  }\n\n  return (\n    Object.keys(obj)\n      .sort()\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .reduce<Record<string, any>>((sorted, key) => {\n        sorted[key] = sortObjectKeys(obj[key])\n        return sorted\n      }, {})\n  )\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(sortObjectKeys(options))\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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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,GAGA,SAASE,EAAeC,EAAe,CACrC,OAAI,OAAOA,GAAQ,UAAYA,IAAQ,KAAaA,EAEhD,MAAM,QAAQA,CAAG,EACZA,EAAI,IAAID,CAAc,EAI7B,OAAO,KAAKC,CAAG,EACZ,KAAK,EAEL,OAA4B,CAACC,EAAQC,KACpCD,EAAOC,CAAG,EAAIH,EAAeC,EAAIE,CAAG,CAAC,EAC9BD,GACN,CAAC,CAAC,CAEX,CAEO,SAASE,EAAqBV,EAAwC,CAC3E,OAAO,KAAK,UAAUM,EAAeN,CAAO,CAAC,CAC/C,CAEO,SAASG,EACdH,EACgB,CAlDlB,IAAAW,EAmDE,IAAMC,EAAYF,EAAkBV,CAAO,EAG3C,GAAIH,EAAY,IAAIe,CAAS,EAAG,CAC9B,IAAMC,EAAShB,EAAY,IAAIe,CAAS,EACxC,GAAI,CAACC,EAAO,OAAS,GAACF,EAAAE,EAAO,QAAQ,SAAf,MAAAF,EAAuB,SAC3C,OAAOE,EAIThB,EAAY,OAAOe,CAAS,EAC5Bd,EAAW,OAAOe,CAAM,CAC1B,CAEA,IAAMC,EAAiB,IAAIC,EAAef,CAAO,EAEjD,OAAAH,EAAY,IAAIe,EAAWE,CAAc,EAGlCA,CACT,CAEO,SAAST,EACdH,EACU,CA3EZ,IAAAS,EA6EE,GAAIb,EAAW,IAAII,CAAW,EAAG,CAC/B,GAAI,CAACA,EAAY,OAAS,GAACS,EAAAT,EAAY,QAAQ,SAApB,MAAAS,EAA4B,SACrD,OAAOb,EAAW,IAAII,CAAW,EAInCL,EAAY,OAAOa,EAAkBR,EAAY,OAAO,CAAC,EACzDJ,EAAW,OAAOI,CAAW,CAC/B,CAEA,IAAMc,EAAW,IAAIC,EAASf,CAAW,EAEzC,OAAAJ,EAAW,IAAII,EAAac,CAAQ,EAG7BA,CACT,CAqBA,SAASE,EACPd,EACAe,EACA,CACA,IAAMC,EAAchB,EAAM,UAAUe,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EACPjB,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,SAASkB,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAOO,SAASC,EAGdb,EAGoD,CAHpD,IAAAc,EAAAd,EACA,UAAAe,EAAWJ,CAtJb,EAqJEG,EAEGzB,EAAA2B,EAFHF,EAEG,CADH,aAGA,IAAMvB,EAAcC,EAClBH,CACF,EACMI,EAAQC,EAAqBH,CAAW,EAqB9C,OAnBqB0B,EAAM,QAAQ,IAAM,CACvC,IAAIC,EAAkBR,EAAejB,CAAK,EACpC0B,EAAc,IAAMD,EACpBE,EAAaC,GACjBd,EAAed,EAAO,IAAM,CAC1ByB,EAAkBR,EAAejB,CAAK,EACtC4B,EAAc,CAChB,CAAC,EAEH,MAAO,IACEC,EACLF,EACAD,EACAA,EACAJ,CACF,CAEJ,EAAG,CAACtB,EAAOsB,CAAQ,CAAC,EAEA,CACtB","names":["Shape","ShapeStream","React","useSyncExternalStoreWithSelector","streamCache","shapeCache","preloadShape","options","__async","shapeStream","getShapeStream","shape","getShape","sortObjectKeys","obj","sorted","key","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

@@ -29,8 +29,18 @@ async function preloadShape(options) {
   await shape.rows;
   return shape;
 }
+function sortObjectKeys(obj) {
+  if (typeof obj !== `object` || obj === null) return obj;
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys);
+  }
+  return Object.keys(obj).sort().reduce((sorted, key) => {
+    sorted[key] = sortObjectKeys(obj[key]);
+    return sorted;
+  }, {});
+}
 function sortedOptionsHash(options) {
-  return JSON.stringify(options, Object.keys(options).sort());
+  return JSON.stringify(sortObjectKeys(options));
 }
 function getShapeStream(options) {
   var _a;

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.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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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,CAAC,OAAO,SAAS,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACpD,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,QAAI,CAAC,YAAY,SAAS,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AAC9D,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,EAnIb,IAkIE,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\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sortObjectKeys(obj: any): any {\n  if (typeof obj !== `object` || obj === null) return obj\n\n  if (Array.isArray(obj)) {\n    return obj.map(sortObjectKeys)\n  }\n\n  return (\n    Object.keys(obj)\n      .sort()\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .reduce<Record<string, any>>((sorted, key) => {\n        sorted[key] = sortObjectKeys(obj[key])\n        return sorted\n      }, {})\n  )\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(sortObjectKeys(options))\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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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;AAGA,SAAS,eAAe,KAAe;AACrC,MAAI,OAAO,QAAQ,YAAY,QAAQ,KAAM,QAAO;AAEpD,MAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,WAAO,IAAI,IAAI,cAAc;AAAA,EAC/B;AAEA,SACE,OAAO,KAAK,GAAG,EACZ,KAAK,EAEL,OAA4B,CAAC,QAAQ,QAAQ;AAC5C,WAAO,GAAG,IAAI,eAAe,IAAI,GAAG,CAAC;AACrC,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEX;AAEO,SAAS,kBAAqB,SAAwC;AAC3E,SAAO,KAAK,UAAU,eAAe,OAAO,CAAC;AAC/C;AAEO,SAAS,eACd,SACgB;AAlDlB;AAmDE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAC9B,UAAM,SAAS,YAAY,IAAI,SAAS;AACxC,QAAI,CAAC,OAAO,SAAS,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACpD,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;AA3EZ;AA6EE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QAAI,CAAC,YAAY,SAAS,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AAC9D,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,EAtJb,IAqJE,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

@@ -51,8 +51,18 @@ function preloadShape(options) {
     return shape;
   });
 }
+function sortObjectKeys(obj) {
+  if (typeof obj !== `object` || obj === null) return obj;
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys);
+  }
+  return Object.keys(obj).sort().reduce((sorted, key) => {
+    sorted[key] = sortObjectKeys(obj[key]);
+    return sorted;
+  }, {});
+}
 function sortedOptionsHash(options) {
-  return JSON.stringify(options, Object.keys(options).sort());
+  return JSON.stringify(sortObjectKeys(options));
 }
 function getShapeStream(options) {
   var _a;

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.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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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,CAAC,OAAO,SAAS,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACpD,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,QAAI,CAAC,YAAY,SAAS,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AAC9D,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,EAnIb,IAkIE,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\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sortObjectKeys(obj: any): any {\n  if (typeof obj !== `object` || obj === null) return obj\n\n  if (Array.isArray(obj)) {\n    return obj.map(sortObjectKeys)\n  }\n\n  return (\n    Object.keys(obj)\n      .sort()\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .reduce<Record<string, any>>((sorted, key) => {\n        sorted[key] = sortObjectKeys(obj[key])\n        return sorted\n      }, {})\n  )\n}\n\nexport function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {\n  return JSON.stringify(sortObjectKeys(options))\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 && !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 (!shapeStream.error && !shapeStream.options.signal?.aborted) {\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":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/react",
-  "version": "0.5.4",
+  "version": "0.6.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.8.0"
+    "@electric-sql/client": "0.9.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",

package/src/react-hooks.tsx

@@ -23,8 +23,27 @@ export async function preloadShape<T extends Row<unknown> = Row>(
   return shape
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function sortObjectKeys(obj: any): any {
+  if (typeof obj !== `object` || obj === null) return obj
+
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys)
+  }
+
+  return (
+    Object.keys(obj)
+      .sort()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .reduce<Record<string, any>>((sorted, key) => {
+        sorted[key] = sortObjectKeys(obj[key])
+        return sorted
+      }, {})
+  )
+}
+
 export function sortedOptionsHash<T>(options: ShapeStreamOptions<T>): string {
-  return JSON.stringify(options, Object.keys(options).sort())
+  return JSON.stringify(sortObjectKeys(options))
 }
 
 export function getShapeStream<T extends Row<unknown>>(