@electric-sql/react 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/cjs/index.cjs

@@ -144,6 +144,9 @@ function parseShapeData(shape) {
     error: shape.error
   };
 }
+function shapeResultChanged(oldRes, newRes) {
+  return !oldRes || oldRes.isLoading !== newRes.isLoading || oldRes.lastSyncedAt !== newRes.lastSyncedAt || oldRes.isError !== newRes.isError || oldRes.error !== newRes.error || oldRes.shape.lastOffset !== newRes.shape.lastOffset || oldRes.shape.handle !== newRes.shape.handle;
+}
 function identity(arg) {
   return arg;
 }
@@ -158,12 +161,22 @@ function useShape(_a) {
   );
   const shape = getShape(shapeStream);
   const useShapeData = import_react.default.useMemo(() => {
-    let latestShapeData = parseShapeData(shape);
-    const getSnapshot = () => latestShapeData;
-    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
-      latestShapeData = parseShapeData(shape);
-      onStoreChange();
-    });
+    let latestShapeData;
+    const getSnapshot = () => {
+      latestShapeData != null ? latestShapeData : latestShapeData = parseShapeData(shape);
+      return latestShapeData;
+    };
+    const subscribe = (onStoreChange) => {
+      const newShapeData = parseShapeData(shape);
+      if (shapeResultChanged(latestShapeData, newShapeData)) {
+        latestShapeData = newShapeData;
+        onStoreChange();
+      }
+      return shapeSubscribe(shape, () => {
+        latestShapeData = parseShapeData(shape);
+        onStoreChange();
+      });
+    };
     return () => {
       return (0, import_with_selector.useSyncExternalStoreWithSelector)(
         subscribe,

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\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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\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"]}
+{"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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\n    error: shape.error,\n  }\n}\n\nfunction shapeResultChanged<T extends Row<unknown>>(\n  oldRes: UseShapeResult<T> | undefined,\n  newRes: UseShapeResult<T>\n): boolean {\n  return (\n    !oldRes ||\n    oldRes.isLoading !== newRes.isLoading ||\n    oldRes.lastSyncedAt !== newRes.lastSyncedAt ||\n    oldRes.isError !== newRes.isError ||\n    oldRes.error !== newRes.error ||\n    oldRes.shape.lastOffset !== newRes.shape.lastOffset ||\n    oldRes.shape.handle !== newRes.shape.handle\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: UseShapeResult<SourceData> | undefined\n\n    const getSnapshot = () => {\n      latestShapeData ??= parseShapeData(shape)\n      return latestShapeData\n    }\n\n    const subscribe = (onStoreChange: () => void) => {\n      // check if shape has changed between the initial snapshot\n      // and subscribing, as there are no guarantees that the\n      // two will occur synchronously with each other\n      const newShapeData = parseShapeData(shape)\n      if (shapeResultChanged(latestShapeData, newShapeData)) {\n        latestShapeData = newShapeData\n        onStoreChange()\n      }\n\n      return shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\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 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 T=(e,n,t)=>new Promise((a,o)=>{var s=r=>{try{S(t.next(r))}catch(p){o(p)}},h=r=>{try{S(t.throw(r))}catch(p){o(p)}},S=r=>r.done?a(r.value):Promise.resolve(r.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 i=new Map,u=new Map;function J(e){return T(this,null,function*(){let n=f(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 d(e){return JSON.stringify(c(e))}function f(e){var a;let n=d(e);if(i.has(n)){let o=i.get(n);if(!((a=o.options.signal)!=null&&a.aborted))return o;i.delete(n),u.delete(o)}let t=new D(e);return i.set(n,t),t}function x(e){var t;if(u.has(e)){if(!((t=e.options.signal)!=null&&t.aborted))return u.get(e);i.delete(d(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 m(e){return{data:e.currentRows,isLoading:e.isLoading(),lastSyncedAt:e.lastSyncedAt(),isError:e.error!==!1,shape:e,stream:e.stream,error:e.error}}function E(e){return e}function K(t){var a=t,{selector:e=E}=a,n=l(a,["selector"]);let o=f(n),s=x(o);return O.useMemo(()=>{let S=m(s),r=()=>S,p=R=>b(s,()=>{S=m(s),R()});return()=>U(p,r,r,e)},[s,e])()}export{x as getShape,f as getShapeStream,J as preloadShape,d as sortedOptionsHash,K as useShape};
+var T=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var f=(e,t)=>{var n={};for(var a in e)k.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(e!=null&&T)for(var a of T(e))t.indexOf(a)<0&&R.call(e,a)&&(n[a]=e[a]);return n};var m=(e,t,n)=>new Promise((a,s)=>{var S=o=>{try{r(n.next(o))}catch(i){s(i)}},w=o=>{try{r(n.throw(o))}catch(i){s(i)}},r=o=>o.done?a(o.value):Promise.resolve(o.value).then(S,w);r((n=n.apply(e,t)).next())});import{Shape as U,ShapeStream as D}from"@electric-sql/client";import O from"react";import{useSyncExternalStoreWithSelector as b}from"use-sync-external-store/with-selector.js";var p=new Map,u=new Map;function N(e){return m(this,null,function*(){let t=y(e),n=g(t);return yield n.rows,n})}function h(e){return typeof e!="object"||e===null?e:Array.isArray(e)?e.map(h):Object.keys(e).sort().reduce((t,n)=>(t[n]=h(e[n]),t),{})}function x(e){return JSON.stringify(h(e))}function y(e){var a;let t=x(e);if(p.has(t)){let s=p.get(t);if(!((a=s.options.signal)!=null&&a.aborted))return s;p.delete(t),u.delete(s)}let n=new D(e);return p.set(t,n),n}function g(e){var n;if(u.has(e)){if(!((n=e.options.signal)!=null&&n.aborted))return u.get(e);p.delete(x(e.options)),u.delete(e)}let t=new U(e);return u.set(e,t),t}function E(e,t){let n=e.subscribe(t);return()=>{n()}}function c(e){return{data:e.currentRows,isLoading:e.isLoading(),lastSyncedAt:e.lastSyncedAt(),isError:e.error!==!1,shape:e,stream:e.stream,error:e.error}}function A(e,t){return!e||e.isLoading!==t.isLoading||e.lastSyncedAt!==t.lastSyncedAt||e.isError!==t.isError||e.error!==t.error||e.shape.lastOffset!==t.shape.lastOffset||e.shape.handle!==t.shape.handle}function G(e){return e}function P(n){var a=n,{selector:e=G}=a,t=f(a,["selector"]);let s=y(t),S=g(s);return O.useMemo(()=>{let r,o=()=>(r!=null||(r=c(S)),r),i=d=>{let l=c(S);return A(r,l)&&(r=l,d()),E(S,()=>{r=c(S),d()})};return()=>b(i,o,o,e)},[S,e])()}export{g as getShape,y as getShapeStream,N as preloadShape,x as sortedOptionsHash,P 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\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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\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,GAACD,EAAAE,EAAO,QAAQ,SAAf,MAAAF,EAAuB,SAC1B,OAAOE,EAIThB,EAAY,OAAOe,CAAS,EAC5Bd,EAAW,OAAOe,CAAM,CAC1B,CAEA,IAAMC,EAAiB,IAAIC,EAAef,CAAO,EACjD,OAAAH,EAAY,IAAIe,EAAWE,CAAc,EAGlCA,CACT,CAEO,SAAST,EACdH,EACU,CA1EZ,IAAAS,EA4EE,GAAIb,EAAW,IAAII,CAAW,EAAG,CAC/B,GAAI,GAACS,EAAAT,EAAY,QAAQ,SAApB,MAAAS,EAA4B,SAC/B,OAAOb,EAAW,IAAII,CAAW,EAInCL,EAAY,OAAOa,EAAkBR,EAAY,OAAO,CAAC,EACzDJ,EAAW,OAAOI,CAAW,CAC/B,CAEA,IAAMc,EAAW,IAAIC,EAASf,CAAW,EACzC,OAAAJ,EAAW,IAAII,EAAac,CAAQ,EAG7BA,CACT,CA0BA,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,OAAQA,EAAM,OACd,MAAOA,EAAM,KACf,CACF,CAEA,SAASkB,EAAYC,EAAW,CAC9B,OAAOA,CACT,CAOO,SAASC,EAGdb,EAGoD,CAHpD,IAAAc,EAAAd,EACA,UAAAe,EAAWJ,CA1Jb,EAyJEG,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"]}
+{"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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\n    error: shape.error,\n  }\n}\n\nfunction shapeResultChanged<T extends Row<unknown>>(\n  oldRes: UseShapeResult<T> | undefined,\n  newRes: UseShapeResult<T>\n): boolean {\n  return (\n    !oldRes ||\n    oldRes.isLoading !== newRes.isLoading ||\n    oldRes.lastSyncedAt !== newRes.lastSyncedAt ||\n    oldRes.isError !== newRes.isError ||\n    oldRes.error !== newRes.error ||\n    oldRes.shape.lastOffset !== newRes.shape.lastOffset ||\n    oldRes.shape.handle !== newRes.shape.handle\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: UseShapeResult<SourceData> | undefined\n\n    const getSnapshot = () => {\n      latestShapeData ??= parseShapeData(shape)\n      return latestShapeData\n    }\n\n    const subscribe = (onStoreChange: () => void) => {\n      // check if shape has changed between the initial snapshot\n      // and subscribing, as there are no guarantees that the\n      // two will occur synchronously with each other\n      const newShapeData = parseShapeData(shape)\n      if (shapeResultChanged(latestShapeData, newShapeData)) {\n        latestShapeData = newShapeData\n        onStoreChange()\n      }\n\n      return shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\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":["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","shapeResultChanged","oldRes","newRes","identity","arg","useShape","_b","selector","__objRest","React","latestShapeData","getSnapshot","subscribe","onStoreChange","newShapeData","useSyncExternalStoreWithSelector"]}

package/dist/index.legacy-esm.js

@@ -87,6 +87,9 @@ function parseShapeData(shape) {
     error: shape.error
   };
 }
+function shapeResultChanged(oldRes, newRes) {
+  return !oldRes || oldRes.isLoading !== newRes.isLoading || oldRes.lastSyncedAt !== newRes.lastSyncedAt || oldRes.isError !== newRes.isError || oldRes.error !== newRes.error || oldRes.shape.lastOffset !== newRes.shape.lastOffset || oldRes.shape.handle !== newRes.shape.handle;
+}
 function identity(arg) {
   return arg;
 }
@@ -101,12 +104,22 @@ function useShape(_a) {
   );
   const shape = getShape(shapeStream);
   const useShapeData = React.useMemo(() => {
-    let latestShapeData = parseShapeData(shape);
-    const getSnapshot = () => latestShapeData;
-    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
-      latestShapeData = parseShapeData(shape);
-      onStoreChange();
-    });
+    let latestShapeData;
+    const getSnapshot = () => {
+      latestShapeData != null ? latestShapeData : latestShapeData = parseShapeData(shape);
+      return latestShapeData;
+    };
+    const subscribe = (onStoreChange) => {
+      const newShapeData = parseShapeData(shape);
+      if (shapeResultChanged(latestShapeData, newShapeData)) {
+        latestShapeData = newShapeData;
+        onStoreChange();
+      }
+      return shapeSubscribe(shape, () => {
+        latestShapeData = parseShapeData(shape);
+        onStoreChange();
+      });
+    };
     return () => {
       return useSyncExternalStoreWithSelector(
         subscribe,

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\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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\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,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACnC,aAAO;AAAA,IACT;AAGA,gBAAY,OAAO,SAAS;AAC5B,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEA,QAAM,iBAAiB,IAAI,YAAe,OAAO;AACjD,cAAY,IAAI,WAAW,cAAc;AAGzC,SAAO;AACT;AAEO,SAAS,SACd,aACU;AA1EZ;AA4EE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QAAI,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AACxC,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;AACzC,aAAW,IAAI,aAAa,QAAQ;AAGpC,SAAO;AACT;AA0BA,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,QAAQ,MAAM;AAAA,IACd,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EA1Jb,IAyJE,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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\n    error: shape.error,\n  }\n}\n\nfunction shapeResultChanged<T extends Row<unknown>>(\n  oldRes: UseShapeResult<T> | undefined,\n  newRes: UseShapeResult<T>\n): boolean {\n  return (\n    !oldRes ||\n    oldRes.isLoading !== newRes.isLoading ||\n    oldRes.lastSyncedAt !== newRes.lastSyncedAt ||\n    oldRes.isError !== newRes.isError ||\n    oldRes.error !== newRes.error ||\n    oldRes.shape.lastOffset !== newRes.shape.lastOffset ||\n    oldRes.shape.handle !== newRes.shape.handle\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: UseShapeResult<SourceData> | undefined\n\n    const getSnapshot = () => {\n      latestShapeData ??= parseShapeData(shape)\n      return latestShapeData\n    }\n\n    const subscribe = (onStoreChange: () => void) => {\n      // check if shape has changed between the initial snapshot\n      // and subscribing, as there are no guarantees that the\n      // two will occur synchronously with each other\n      const newShapeData = parseShapeData(shape)\n      if (shapeResultChanged(latestShapeData, newShapeData)) {\n        latestShapeData = newShapeData\n        onStoreChange()\n      }\n\n      return shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\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,GAAC,YAAO,QAAQ,WAAf,mBAAuB,UAAS;AACnC,aAAO;AAAA,IACT;AAGA,gBAAY,OAAO,SAAS;AAC5B,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEA,QAAM,iBAAiB,IAAI,YAAe,OAAO;AACjD,cAAY,IAAI,WAAW,cAAc;AAGzC,SAAO;AACT;AAEO,SAAS,SACd,aACU;AA1EZ;AA4EE,MAAI,WAAW,IAAI,WAAW,GAAG;AAC/B,QAAI,GAAC,iBAAY,QAAQ,WAApB,mBAA4B,UAAS;AACxC,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;AACzC,aAAW,IAAI,aAAa,QAAQ;AAGpC,SAAO;AACT;AA0BA,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,QAAQ,MAAM;AAAA,IACd,OAAO,MAAM;AAAA,EACf;AACF;AAEA,SAAS,mBACP,QACA,QACS;AACT,SACE,CAAC,UACD,OAAO,cAAc,OAAO,aAC5B,OAAO,iBAAiB,OAAO,gBAC/B,OAAO,YAAY,OAAO,WAC1B,OAAO,UAAU,OAAO,SACxB,OAAO,MAAM,eAAe,OAAO,MAAM,cACzC,OAAO,MAAM,WAAW,OAAO,MAAM;AAEzC;AAEA,SAAS,SAAY,KAAW;AAC9B,SAAO;AACT;AAOO,SAAS,SAGd,IAGoD;AAHpD,eACA;AAAA,eAAW;AAAA,EAzKb,IAwKE,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;AAEJ,UAAM,cAAc,MAAM;AACxB,oEAAoB,eAAe,KAAK;AACxC,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,CAAC,kBAA8B;AAI/C,YAAM,eAAe,eAAe,KAAK;AACzC,UAAI,mBAAmB,iBAAiB,YAAY,GAAG;AACrD,0BAAkB;AAClB,sBAAc;AAAA,MAChB;AAEA,aAAO,eAAe,OAAO,MAAM;AACjC,0BAAkB,eAAe,KAAK;AACtC,sBAAc;AAAA,MAChB,CAAC;AAAA,IACH;AAEA,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

@@ -109,6 +109,9 @@ function parseShapeData(shape) {
     error: shape.error
   };
 }
+function shapeResultChanged(oldRes, newRes) {
+  return !oldRes || oldRes.isLoading !== newRes.isLoading || oldRes.lastSyncedAt !== newRes.lastSyncedAt || oldRes.isError !== newRes.isError || oldRes.error !== newRes.error || oldRes.shape.lastOffset !== newRes.shape.lastOffset || oldRes.shape.handle !== newRes.shape.handle;
+}
 function identity(arg) {
   return arg;
 }
@@ -123,12 +126,22 @@ function useShape(_a) {
   );
   const shape = getShape(shapeStream);
   const useShapeData = React.useMemo(() => {
-    let latestShapeData = parseShapeData(shape);
-    const getSnapshot = () => latestShapeData;
-    const subscribe = (onStoreChange) => shapeSubscribe(shape, () => {
-      latestShapeData = parseShapeData(shape);
-      onStoreChange();
-    });
+    let latestShapeData;
+    const getSnapshot = () => {
+      latestShapeData != null ? latestShapeData : latestShapeData = parseShapeData(shape);
+      return latestShapeData;
+    };
+    const subscribe = (onStoreChange) => {
+      const newShapeData = parseShapeData(shape);
+      if (shapeResultChanged(latestShapeData, newShapeData)) {
+        latestShapeData = newShapeData;
+        onStoreChange();
+      }
+      return shapeSubscribe(shape, () => {
+        latestShapeData = parseShapeData(shape);
+        onStoreChange();
+      });
+    };
     return () => {
       return useSyncExternalStoreWithSelector(
         subscribe,

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\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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\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":[]}
+{"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.options.signal?.aborted) {\n      return stream\n    }\n\n    // if stream is aborted, remove it and related shapes\n    streamCache.delete(shapeHash)\n    shapeCache.delete(stream)\n  }\n\n  const newShapeStream = new ShapeStream<T>(options)\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.options.signal?.aborted) {\n      return shapeCache.get(shapeStream)! as Shape<T>\n    }\n\n    // if stream is 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  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  /**\n   * The ShapeStream instance used by this Shape\n   * @type {ShapeStream<T>}\n   */\n  stream: ShapeStream<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    stream: shape.stream as ShapeStream<T>,\n    error: shape.error,\n  }\n}\n\nfunction shapeResultChanged<T extends Row<unknown>>(\n  oldRes: UseShapeResult<T> | undefined,\n  newRes: UseShapeResult<T>\n): boolean {\n  return (\n    !oldRes ||\n    oldRes.isLoading !== newRes.isLoading ||\n    oldRes.lastSyncedAt !== newRes.lastSyncedAt ||\n    oldRes.isError !== newRes.isError ||\n    oldRes.error !== newRes.error ||\n    oldRes.shape.lastOffset !== newRes.shape.lastOffset ||\n    oldRes.shape.handle !== newRes.shape.handle\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: UseShapeResult<SourceData> | undefined\n\n    const getSnapshot = () => {\n      latestShapeData ??= parseShapeData(shape)\n      return latestShapeData\n    }\n\n    const subscribe = (onStoreChange: () => void) => {\n      // check if shape has changed between the initial snapshot\n      // and subscribing, as there are no guarantees that the\n      // two will occur synchronously with each other\n      const newShapeData = parseShapeData(shape)\n      if (shapeResultChanged(latestShapeData, newShapeData)) {\n        latestShapeData = newShapeData\n        onStoreChange()\n      }\n\n      return shapeSubscribe(shape, () => {\n        latestShapeData = parseShapeData(shape)\n        onStoreChange()\n      })\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,14 +1,14 @@
 {
   "name": "@electric-sql/react",
   "description": "React hooks for ElectricSQL",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "author": "ElectricSQL team and contributors.",
   "bugs": {
     "url": "https://github.com/electric-sql/electric/issues"
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.2",
-    "@electric-sql/client": "1.0.0-beta.4"
+    "@electric-sql/client": "1.0.0-beta.5"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",

package/src/react-hooks.tsx

@@ -139,6 +139,21 @@ function parseShapeData<T extends Row<unknown>>(
   }
 }
 
+function shapeResultChanged<T extends Row<unknown>>(
+  oldRes: UseShapeResult<T> | undefined,
+  newRes: UseShapeResult<T>
+): boolean {
+  return (
+    !oldRes ||
+    oldRes.isLoading !== newRes.isLoading ||
+    oldRes.lastSyncedAt !== newRes.lastSyncedAt ||
+    oldRes.isError !== newRes.isError ||
+    oldRes.error !== newRes.error ||
+    oldRes.shape.lastOffset !== newRes.shape.lastOffset ||
+    oldRes.shape.handle !== newRes.shape.handle
+  )
+}
+
 function identity<T>(arg: T): T {
   return arg
 }
@@ -161,13 +176,28 @@ export function useShape<
   const shape = getShape<SourceData>(shapeStream)
 
   const useShapeData = React.useMemo(() => {
-    let latestShapeData = parseShapeData(shape)
-    const getSnapshot = () => latestShapeData
-    const subscribe = (onStoreChange: () => void) =>
-      shapeSubscribe(shape, () => {
+    let latestShapeData: UseShapeResult<SourceData> | undefined
+
+    const getSnapshot = () => {
+      latestShapeData ??= parseShapeData(shape)
+      return latestShapeData
+    }
+
+    const subscribe = (onStoreChange: () => void) => {
+      // check if shape has changed between the initial snapshot
+      // and subscribing, as there are no guarantees that the
+      // two will occur synchronously with each other
+      const newShapeData = parseShapeData(shape)
+      if (shapeResultChanged(latestShapeData, newShapeData)) {
+        latestShapeData = newShapeData
+        onStoreChange()
+      }
+
+      return shapeSubscribe(shape, () => {
         latestShapeData = parseShapeData(shape)
         onStoreChange()
       })
+    }
 
     return () => {
       return useSyncExternalStoreWithSelector(