@electric-sql/react 0.0.9 → 0.0.10

package/dist/cjs/index.cjs

@@ -0,0 +1,184 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ShapesProvider: () => ShapesProvider,
+  getShape: () => getShape,
+  getShapeStream: () => getShapeStream,
+  preloadShape: () => preloadShape,
+  sortedOptionsHash: () => sortedOptionsHash,
+  useShape: () => useShape,
+  useShapeContext: () => useShapeContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/react-hooks.tsx
+var import_next = require("@electric-sql/next");
+var import_react = __toESM(require("react"), 1);
+var import_with_selector = require("use-sync-external-store/with-selector.js");
+var ShapesContext = (0, import_react.createContext)(null);
+var streamCache = /* @__PURE__ */ new Map();
+var shapeCache = /* @__PURE__ */ new Map();
+function preloadShape(options) {
+  return __async(this, null, function* () {
+    const shapeStream = getShapeStream(options);
+    const shape = getShape(shapeStream);
+    yield shape.value;
+    return shape;
+  });
+}
+function sortedOptionsHash(options) {
+  const shapeDef = JSON.stringify(
+    options.shape,
+    Object.keys(options.shape).sort()
+  );
+  const _a = options, { shape } = _a, optionsWithoutShapeDef = __objRest(_a, ["shape"]);
+  const allOptions = JSON.stringify(
+    optionsWithoutShapeDef,
+    Object.keys(options).sort()
+  );
+  const shapeHash = shapeDef + allOptions;
+  return shapeHash;
+}
+function getShapeStream(options) {
+  const shapeHash = sortedOptionsHash(options);
+  if (streamCache.has(shapeHash)) {
+    return streamCache.get(shapeHash);
+  } else {
+    const newShapeStream = new import_next.ShapeStream(options);
+    streamCache.set(shapeHash, newShapeStream);
+    return newShapeStream;
+  }
+}
+function getShape(shapeStream) {
+  if (shapeCache.has(shapeStream)) {
+    return shapeCache.get(shapeStream);
+  } else {
+    const newShape = new import_next.Shape(shapeStream);
+    shapeCache.set(shapeStream, newShape);
+    return newShape;
+  }
+}
+function ShapesProvider({ children }) {
+  return /* @__PURE__ */ import_react.default.createElement(ShapesContext.Provider, { value: { getShape, getShapeStream } }, children);
+}
+function useShapeContext() {
+  const context = (0, import_react.useContext)(ShapesContext);
+  if (!context) {
+    throw new Error(`useShapeContext must be used within a ShapeProvider`);
+  }
+  return context;
+}
+function shapeSubscribe(shape, callback) {
+  const unsubscribe = shape.subscribe(callback);
+  return () => {
+    unsubscribe();
+  };
+}
+function parseShapeData(shape) {
+  return {
+    data: [...shape.valueSync.values()],
+    isUpToDate: shape.isUpToDate,
+    isError: shape.error !== false,
+    shape,
+    error: shape.error
+  };
+}
+var identity = (arg) => arg;
+function useShape(_a) {
+  var _b = _a, {
+    selector = identity
+  } = _b, options = __objRest(_b, [
+    "selector"
+  ]);
+  const { getShape: getShape2, getShapeStream: getShapeStream2 } = useShapeContext();
+  const shapeStream = getShapeStream2(options);
+  const shape = getShape2(shapeStream);
+  const latestShapeData = (0, import_react.useRef)(parseShapeData(shape));
+  const getSnapshot = import_react.default.useCallback(() => latestShapeData.current, []);
+  const shapeData = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    (0, import_react.useCallback)(
+      (onStoreChange) => shapeSubscribe(shape, () => {
+        latestShapeData.current = parseShapeData(shape);
+        onStoreChange();
+      }),
+      [shape]
+    ),
+    getSnapshot,
+    getSnapshot,
+    selector
+  );
+  return shapeData;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShapesProvider,
+  getShape,
+  getShapeStream,
+  preloadShape,
+  sortedOptionsHash,
+  useShape,
+  useShapeContext
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/react-hooks.tsx"],"sourcesContent":["export * from './react-hooks'\n","import {\n  JsonSerializable,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/next'\nimport React, { createContext, useCallback, useContext, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ninterface ShapeContextType {\n  getShape: (shapeStream: ShapeStream) => Shape\n  getShapeStream: (options: ShapeStreamOptions) => ShapeStream\n}\n\n// Create a Context\nconst ShapesContext = createContext<ShapeContextType | null>(null)\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  const shapeDef = JSON.stringify(\n    options.shape,\n    Object.keys(options.shape).sort()\n  )\n  // eslint-disable-next-line\n  const { shape, ...optionsWithoutShapeDef } = options\n  const allOptions = JSON.stringify(\n    optionsWithoutShapeDef,\n    Object.keys(options).sort()\n  )\n  const shapeHash = shapeDef + allOptions\n\n  return shapeHash\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\ninterface ShapeProviderProps {\n  children: React.ReactNode\n}\n\n// Shapes Provider Component\nexport function ShapesProvider({ children }: ShapeProviderProps): JSX.Element {\n  // Provide the context value\n  return (\n    <ShapesContext.Provider value={{ getShape, getShapeStream }}>\n      {children}\n    </ShapesContext.Provider>\n  )\n}\n\nexport function useShapeContext() {\n  const context = useContext(ShapesContext)\n  if (!context) {\n    throw new Error(`useShapeContext must be used within a ShapeProvider`)\n  }\n  return context\n}\n\ninterface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: JsonSerializable }[]}\n   */\n  data: { [key: string]: JsonSerializable }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nconst identity = (arg: unknown) => arg\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as never,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const { getShape, getShapeStream } = useShapeContext()\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":"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","names":["React","getShape","getShapeStream"]}

package/dist/index.browser.mjs

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

package/dist/index.browser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  JsonSerializable,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/next'\nimport React, { createContext, useCallback, useContext, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ninterface ShapeContextType {\n  getShape: (shapeStream: ShapeStream) => Shape\n  getShapeStream: (options: ShapeStreamOptions) => ShapeStream\n}\n\n// Create a Context\nconst ShapesContext = createContext<ShapeContextType | null>(null)\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  const shapeDef = JSON.stringify(\n    options.shape,\n    Object.keys(options.shape).sort()\n  )\n  // eslint-disable-next-line\n  const { shape, ...optionsWithoutShapeDef } = options\n  const allOptions = JSON.stringify(\n    optionsWithoutShapeDef,\n    Object.keys(options).sort()\n  )\n  const shapeHash = shapeDef + allOptions\n\n  return shapeHash\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\ninterface ShapeProviderProps {\n  children: React.ReactNode\n}\n\n// Shapes Provider Component\nexport function ShapesProvider({ children }: ShapeProviderProps): JSX.Element {\n  // Provide the context value\n  return (\n    <ShapesContext.Provider value={{ getShape, getShapeStream }}>\n      {children}\n    </ShapesContext.Provider>\n  )\n}\n\nexport function useShapeContext() {\n  const context = useContext(ShapesContext)\n  if (!context) {\n    throw new Error(`useShapeContext must be used within a ShapeProvider`)\n  }\n  return context\n}\n\ninterface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: JsonSerializable }[]}\n   */\n  data: { [key: string]: JsonSerializable }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nconst identity = (arg: unknown) => arg\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as never,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const { getShape, getShapeStream } = useShapeContext()\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":"geAAA,OAEE,SAAAA,EACA,eAAAC,MAEK,qBACP,OAAOC,GAAS,iBAAAC,EAAe,eAAAC,EAAa,cAAAC,EAAY,UAAAC,MAAc,QACtE,OAAS,oCAAAC,MAAwC,2CAQjD,IAAMC,EAAgBC,EAAuC,IAAI,EAE3DC,EAAc,IAAI,IAClBC,EAAa,IAAI,IAEvB,SAAsBC,EACpBC,EACgB,QAAAC,EAAA,sBAChB,IAAMC,EAAcC,EAAeH,CAAO,EACpCI,EAAQC,EAASH,CAAW,EAClC,aAAME,EAAM,MACLA,CACT,GAEO,SAASE,EAAkBN,EAAqC,CACrE,IAAMO,EAAW,KAAK,UACpBP,EAAQ,MACR,OAAO,KAAKA,EAAQ,KAAK,EAAE,KAAK,CAClC,EAE6CQ,EAAAR,EAArC,OAAAI,CAnCV,EAmC+CI,EAA3BC,EAAAC,EAA2BF,EAA3B,CAAV,UACFG,EAAa,KAAK,UACtBF,EACA,OAAO,KAAKT,CAAO,EAAE,KAAK,CAC5B,EAGA,OAFkBO,EAAWI,CAG/B,CAEO,SAASR,EAAeH,EAA0C,CACvE,IAAMY,EAAYN,EAAkBN,CAAO,EAG3C,GAAIH,EAAY,IAAIe,CAAS,EAE3B,OAAOf,EAAY,IAAIe,CAAS,EAC3B,CACL,IAAMC,EAAiB,IAAIC,EAAYd,CAAO,EAE9C,OAAAH,EAAY,IAAIe,EAAWC,CAAc,EAGlCA,CACT,CACF,CAEO,SAASR,EAASH,EAAiC,CAExD,GAAIJ,EAAW,IAAII,CAAW,EAE5B,OAAOJ,EAAW,IAAII,CAAW,EAC5B,CACL,IAAMa,EAAW,IAAIC,EAAMd,CAAW,EAEtC,OAAAJ,EAAW,IAAII,EAAaa,CAAQ,EAG7BA,CACT,CACF,CAOO,SAASE,EAAe,CAAE,SAAAC,CAAS,EAAoC,CAE5E,OACEC,EAAA,cAACxB,EAAc,SAAd,CAAuB,MAAO,CAAE,SAAAU,EAAU,eAAAF,CAAe,GACvDe,CACH,CAEJ,CAEO,SAASE,GAAkB,CAChC,IAAMC,EAAUC,EAAW3B,CAAa,EACxC,GAAI,CAAC0B,EACH,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOA,CACT,CAqBA,SAASE,EAAenB,EAAcoB,EAAsB,CAC1D,IAAMC,EAAcrB,EAAM,UAAUoB,CAAQ,EAC5C,MAAO,IAAM,CACXC,EAAY,CACd,CACF,CAEA,SAASC,EAAetB,EAA8B,CACpD,MAAO,CACL,KAAM,CAAC,GAAGA,EAAM,UAAU,OAAO,CAAC,EAClC,WAAYA,EAAM,WAClB,QAASA,EAAM,QAAU,GACzB,MAAAA,EACA,MAAOA,EAAM,KACf,CACF,CAEA,IAAMuB,EAAYC,GAAiBA,EAM5B,SAASC,EAAqCrB,EAGX,CAHW,IAAAsB,EAAAtB,EACnD,UAAAuB,EAAWJ,CA9Ib,EA6IqDG,EAEhD9B,EAAAU,EAFgDoB,EAEhD,CADH,aAGA,GAAM,CAAE,SAAAzB,EAAU,eAAAF,CAAe,EAAIiB,EAAgB,EAC/ClB,EAAcC,EAAeH,CAA6B,EAC1DI,EAAQC,EAASH,CAAW,EAE5B8B,EAAkBC,EAAOP,EAAetB,CAAK,CAAC,EAC9C8B,EAAcf,EAAM,YAAY,IAAMa,EAAgB,QAAS,CAAC,CAAC,EAevE,OAdkBG,EAChBC,EACGC,GACCd,EAAenB,EAAO,IAAM,CAC1B4B,EAAgB,QAAUN,EAAetB,CAAK,EAC9CiC,EAAc,CAChB,CAAC,EACH,CAACjC,CAAK,CACR,EACA8B,EACAA,EACAH,CACF,CAGF","names":["Shape","ShapeStream","React","createContext","useCallback","useContext","useRef","useSyncExternalStoreWithSelector","ShapesContext","createContext","streamCache","shapeCache","preloadShape","options","__async","shapeStream","getShapeStream","shape","getShape","sortedOptionsHash","shapeDef","_a","optionsWithoutShapeDef","__objRest","allOptions","shapeHash","newShapeStream","ShapeStream","newShape","Shape","ShapesProvider","children","React","useShapeContext","context","useContext","shapeSubscribe","callback","unsubscribe","parseShapeData","identity","arg","useShape","_b","selector","latestShapeData","useRef","getSnapshot","useSyncExternalStoreWithSelector","useCallback","onStoreChange"]}

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { ShapeStreamOptions, Shape, ShapeStream, JsonSerializable } from '@electric-sql/next';
+import React from 'react';
+
+interface ShapeContextType {
+    getShape: (shapeStream: ShapeStream) => Shape;
+    getShapeStream: (options: ShapeStreamOptions) => ShapeStream;
+}
+declare function preloadShape(options: ShapeStreamOptions): Promise<Shape>;
+declare function sortedOptionsHash(options: ShapeStreamOptions): string;
+declare function getShapeStream(options: ShapeStreamOptions): ShapeStream;
+declare function getShape(shapeStream: ShapeStream): Shape;
+interface ShapeProviderProps {
+    children: React.ReactNode;
+}
+declare function ShapesProvider({ children }: ShapeProviderProps): JSX.Element;
+declare function useShapeContext(): ShapeContextType;
+interface UseShapeResult {
+    /**
+     * The array of rows that make up the Shape.
+     * @type {{ [key: string]: JsonSerializable }[]}
+     */
+    data: {
+        [key: string]: JsonSerializable;
+    }[];
+    /**
+     * The Shape instance used by this useShape
+     * @type(Shape)
+     */
+    shape: Shape;
+    error: Shape[`error`];
+    isError: boolean;
+    /**
+     * Has the ShapeStream caught up with the replication log from Postgres.
+     */
+    isUpToDate: boolean;
+}
+interface UseShapeOptions<Selection> extends ShapeStreamOptions {
+    selector?: (value: UseShapeResult) => Selection;
+}
+declare function useShape<Selection = UseShapeResult>({ selector, ...options }: UseShapeOptions<Selection>): Selection;
+
+export { ShapesProvider, getShape, getShapeStream, preloadShape, sortedOptionsHash, useShape, useShapeContext };

package/dist/index.legacy-esm.js

@@ -0,0 +1,125 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/react-hooks.tsx
+import {
+  Shape,
+  ShapeStream
+} from "@electric-sql/next";
+import React, { createContext, useCallback, useContext, useRef } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+var ShapesContext = createContext(null);
+var streamCache = /* @__PURE__ */ new Map();
+var shapeCache = /* @__PURE__ */ new Map();
+async function preloadShape(options) {
+  const shapeStream = getShapeStream(options);
+  const shape = getShape(shapeStream);
+  await shape.value;
+  return shape;
+}
+function sortedOptionsHash(options) {
+  const shapeDef = JSON.stringify(
+    options.shape,
+    Object.keys(options.shape).sort()
+  );
+  const _a = options, { shape } = _a, optionsWithoutShapeDef = __objRest(_a, ["shape"]);
+  const allOptions = JSON.stringify(
+    optionsWithoutShapeDef,
+    Object.keys(options).sort()
+  );
+  const shapeHash = shapeDef + allOptions;
+  return shapeHash;
+}
+function getShapeStream(options) {
+  const shapeHash = sortedOptionsHash(options);
+  if (streamCache.has(shapeHash)) {
+    return streamCache.get(shapeHash);
+  } else {
+    const newShapeStream = new ShapeStream(options);
+    streamCache.set(shapeHash, newShapeStream);
+    return newShapeStream;
+  }
+}
+function getShape(shapeStream) {
+  if (shapeCache.has(shapeStream)) {
+    return shapeCache.get(shapeStream);
+  } else {
+    const newShape = new Shape(shapeStream);
+    shapeCache.set(shapeStream, newShape);
+    return newShape;
+  }
+}
+function ShapesProvider({ children }) {
+  return /* @__PURE__ */ React.createElement(ShapesContext.Provider, { value: { getShape, getShapeStream } }, children);
+}
+function useShapeContext() {
+  const context = useContext(ShapesContext);
+  if (!context) {
+    throw new Error(`useShapeContext must be used within a ShapeProvider`);
+  }
+  return context;
+}
+function shapeSubscribe(shape, callback) {
+  const unsubscribe = shape.subscribe(callback);
+  return () => {
+    unsubscribe();
+  };
+}
+function parseShapeData(shape) {
+  return {
+    data: [...shape.valueSync.values()],
+    isUpToDate: shape.isUpToDate,
+    isError: shape.error !== false,
+    shape,
+    error: shape.error
+  };
+}
+var identity = (arg) => arg;
+function useShape(_a) {
+  var _b = _a, {
+    selector = identity
+  } = _b, options = __objRest(_b, [
+    "selector"
+  ]);
+  const { getShape: getShape2, getShapeStream: getShapeStream2 } = useShapeContext();
+  const shapeStream = getShapeStream2(options);
+  const shape = getShape2(shapeStream);
+  const latestShapeData = useRef(parseShapeData(shape));
+  const getSnapshot = React.useCallback(() => latestShapeData.current, []);
+  const shapeData = useSyncExternalStoreWithSelector(
+    useCallback(
+      (onStoreChange) => shapeSubscribe(shape, () => {
+        latestShapeData.current = parseShapeData(shape);
+        onStoreChange();
+      }),
+      [shape]
+    ),
+    getSnapshot,
+    getSnapshot,
+    selector
+  );
+  return shapeData;
+}
+export {
+  ShapesProvider,
+  getShape,
+  getShapeStream,
+  preloadShape,
+  sortedOptionsHash,
+  useShape,
+  useShapeContext
+};
+//# sourceMappingURL=index.legacy-esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  JsonSerializable,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/next'\nimport React, { createContext, useCallback, useContext, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ninterface ShapeContextType {\n  getShape: (shapeStream: ShapeStream) => Shape\n  getShapeStream: (options: ShapeStreamOptions) => ShapeStream\n}\n\n// Create a Context\nconst ShapesContext = createContext<ShapeContextType | null>(null)\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  const shapeDef = JSON.stringify(\n    options.shape,\n    Object.keys(options.shape).sort()\n  )\n  // eslint-disable-next-line\n  const { shape, ...optionsWithoutShapeDef } = options\n  const allOptions = JSON.stringify(\n    optionsWithoutShapeDef,\n    Object.keys(options).sort()\n  )\n  const shapeHash = shapeDef + allOptions\n\n  return shapeHash\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\ninterface ShapeProviderProps {\n  children: React.ReactNode\n}\n\n// Shapes Provider Component\nexport function ShapesProvider({ children }: ShapeProviderProps): JSX.Element {\n  // Provide the context value\n  return (\n    <ShapesContext.Provider value={{ getShape, getShapeStream }}>\n      {children}\n    </ShapesContext.Provider>\n  )\n}\n\nexport function useShapeContext() {\n  const context = useContext(ShapesContext)\n  if (!context) {\n    throw new Error(`useShapeContext must be used within a ShapeProvider`)\n  }\n  return context\n}\n\ninterface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: JsonSerializable }[]}\n   */\n  data: { [key: string]: JsonSerializable }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nconst identity = (arg: unknown) => arg\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as never,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const { getShape, getShapeStream } = useShapeContext()\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AACP,OAAO,SAAS,eAAe,aAAa,YAAY,cAAc;AACtE,SAAS,wCAAwC;AAQjD,IAAM,gBAAgB,cAAuC,IAAI;AAEjE,IAAM,cAAc,oBAAI,IAAyB;AACjD,IAAM,aAAa,oBAAI,IAAwB;AAE/C,eAAsB,aACpB,SACgB;AAChB,QAAM,cAAc,eAAe,OAAO;AAC1C,QAAM,QAAQ,SAAS,WAAW;AAClC,QAAM,MAAM;AACZ,SAAO;AACT;AAEO,SAAS,kBAAkB,SAAqC;AACrE,QAAM,WAAW,KAAK;AAAA,IACpB,QAAQ;AAAA,IACR,OAAO,KAAK,QAAQ,KAAK,EAAE,KAAK;AAAA,EAClC;AAEA,QAA6C,cAArC,QAnCV,IAmC+C,IAA3B,mCAA2B,IAA3B,CAAV;AACR,QAAM,aAAa,KAAK;AAAA,IACtB;AAAA,IACA,OAAO,KAAK,OAAO,EAAE,KAAK;AAAA,EAC5B;AACA,QAAM,YAAY,WAAW;AAE7B,SAAO;AACT;AAEO,SAAS,eAAe,SAA0C;AACvE,QAAM,YAAY,kBAAkB,OAAO;AAG3C,MAAI,YAAY,IAAI,SAAS,GAAG;AAE9B,WAAO,YAAY,IAAI,SAAS;AAAA,EAClC,OAAO;AACL,UAAM,iBAAiB,IAAI,YAAY,OAAO;AAE9C,gBAAY,IAAI,WAAW,cAAc;AAGzC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,SAAS,aAAiC;AAExD,MAAI,WAAW,IAAI,WAAW,GAAG;AAE/B,WAAO,WAAW,IAAI,WAAW;AAAA,EACnC,OAAO;AACL,UAAM,WAAW,IAAI,MAAM,WAAW;AAEtC,eAAW,IAAI,aAAa,QAAQ;AAGpC,WAAO;AAAA,EACT;AACF;AAOO,SAAS,eAAe,EAAE,SAAS,GAAoC;AAE5E,SACE,oCAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,UAAU,eAAe,KACvD,QACH;AAEJ;AAEO,SAAS,kBAAkB;AAChC,QAAM,UAAU,WAAW,aAAa;AACxC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;AAqBA,SAAS,eAAe,OAAc,UAAsB;AAC1D,QAAM,cAAc,MAAM,UAAU,QAAQ;AAC5C,SAAO,MAAM;AACX,gBAAY;AAAA,EACd;AACF;AAEA,SAAS,eAAe,OAA8B;AACpD,SAAO;AAAA,IACL,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAM,WAAW,CAAC,QAAiB;AAM5B,SAAS,SAAqC,IAGX;AAHW,eACnD;AAAA,eAAW;AAAA,EA9Ib,IA6IqD,IAEhD,oBAFgD,IAEhD;AAAA,IADH;AAAA;AAGA,QAAM,EAAE,UAAAA,WAAU,gBAAAC,gBAAe,IAAI,gBAAgB;AACrD,QAAM,cAAcA,gBAAe,OAA6B;AAChE,QAAM,QAAQD,UAAS,WAAW;AAElC,QAAM,kBAAkB,OAAO,eAAe,KAAK,CAAC;AACpD,QAAM,cAAc,MAAM,YAAY,MAAM,gBAAgB,SAAS,CAAC,CAAC;AACvE,QAAM,YAAY;AAAA,IAChB;AAAA,MACE,CAAC,kBACC,eAAe,OAAO,MAAM;AAC1B,wBAAgB,UAAU,eAAe,KAAK;AAC9C,sBAAc;AAAA,MAChB,CAAC;AAAA,MACH,CAAC,KAAK;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AACT;","names":["getShape","getShapeStream"]}

package/dist/index.mjs

@@ -0,0 +1,147 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/react-hooks.tsx
+import {
+  Shape,
+  ShapeStream
+} from "@electric-sql/next";
+import React, { createContext, useCallback, useContext, useRef } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+var ShapesContext = createContext(null);
+var streamCache = /* @__PURE__ */ new Map();
+var shapeCache = /* @__PURE__ */ new Map();
+function preloadShape(options) {
+  return __async(this, null, function* () {
+    const shapeStream = getShapeStream(options);
+    const shape = getShape(shapeStream);
+    yield shape.value;
+    return shape;
+  });
+}
+function sortedOptionsHash(options) {
+  const shapeDef = JSON.stringify(
+    options.shape,
+    Object.keys(options.shape).sort()
+  );
+  const _a = options, { shape } = _a, optionsWithoutShapeDef = __objRest(_a, ["shape"]);
+  const allOptions = JSON.stringify(
+    optionsWithoutShapeDef,
+    Object.keys(options).sort()
+  );
+  const shapeHash = shapeDef + allOptions;
+  return shapeHash;
+}
+function getShapeStream(options) {
+  const shapeHash = sortedOptionsHash(options);
+  if (streamCache.has(shapeHash)) {
+    return streamCache.get(shapeHash);
+  } else {
+    const newShapeStream = new ShapeStream(options);
+    streamCache.set(shapeHash, newShapeStream);
+    return newShapeStream;
+  }
+}
+function getShape(shapeStream) {
+  if (shapeCache.has(shapeStream)) {
+    return shapeCache.get(shapeStream);
+  } else {
+    const newShape = new Shape(shapeStream);
+    shapeCache.set(shapeStream, newShape);
+    return newShape;
+  }
+}
+function ShapesProvider({ children }) {
+  return /* @__PURE__ */ React.createElement(ShapesContext.Provider, { value: { getShape, getShapeStream } }, children);
+}
+function useShapeContext() {
+  const context = useContext(ShapesContext);
+  if (!context) {
+    throw new Error(`useShapeContext must be used within a ShapeProvider`);
+  }
+  return context;
+}
+function shapeSubscribe(shape, callback) {
+  const unsubscribe = shape.subscribe(callback);
+  return () => {
+    unsubscribe();
+  };
+}
+function parseShapeData(shape) {
+  return {
+    data: [...shape.valueSync.values()],
+    isUpToDate: shape.isUpToDate,
+    isError: shape.error !== false,
+    shape,
+    error: shape.error
+  };
+}
+var identity = (arg) => arg;
+function useShape(_a) {
+  var _b = _a, {
+    selector = identity
+  } = _b, options = __objRest(_b, [
+    "selector"
+  ]);
+  const { getShape: getShape2, getShapeStream: getShapeStream2 } = useShapeContext();
+  const shapeStream = getShapeStream2(options);
+  const shape = getShape2(shapeStream);
+  const latestShapeData = useRef(parseShapeData(shape));
+  const getSnapshot = React.useCallback(() => latestShapeData.current, []);
+  const shapeData = useSyncExternalStoreWithSelector(
+    useCallback(
+      (onStoreChange) => shapeSubscribe(shape, () => {
+        latestShapeData.current = parseShapeData(shape);
+        onStoreChange();
+      }),
+      [shape]
+    ),
+    getSnapshot,
+    getSnapshot,
+    selector
+  );
+  return shapeData;
+}
+export {
+  ShapesProvider,
+  getShape,
+  getShapeStream,
+  preloadShape,
+  sortedOptionsHash,
+  useShape,
+  useShapeContext
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import {\n  JsonSerializable,\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n} from '@electric-sql/next'\nimport React, { createContext, useCallback, useContext, useRef } from 'react'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'\n\ninterface ShapeContextType {\n  getShape: (shapeStream: ShapeStream) => Shape\n  getShapeStream: (options: ShapeStreamOptions) => ShapeStream\n}\n\n// Create a Context\nconst ShapesContext = createContext<ShapeContextType | null>(null)\n\nconst streamCache = new Map<string, ShapeStream>()\nconst shapeCache = new Map<ShapeStream, Shape>()\n\nexport async function preloadShape(\n  options: ShapeStreamOptions\n): Promise<Shape> {\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  await shape.value\n  return shape\n}\n\nexport function sortedOptionsHash(options: ShapeStreamOptions): string {\n  const shapeDef = JSON.stringify(\n    options.shape,\n    Object.keys(options.shape).sort()\n  )\n  // eslint-disable-next-line\n  const { shape, ...optionsWithoutShapeDef } = options\n  const allOptions = JSON.stringify(\n    optionsWithoutShapeDef,\n    Object.keys(options).sort()\n  )\n  const shapeHash = shapeDef + allOptions\n\n  return shapeHash\n}\n\nexport function getShapeStream(options: ShapeStreamOptions): ShapeStream {\n  const shapeHash = sortedOptionsHash(options)\n\n  // If the stream is already cached, return\n  if (streamCache.has(shapeHash)) {\n    // Return the ShapeStream\n    return streamCache.get(shapeHash)!\n  } else {\n    const newShapeStream = new ShapeStream(options)\n\n    streamCache.set(shapeHash, newShapeStream)\n\n    // Return the created shape\n    return newShapeStream\n  }\n}\n\nexport function getShape(shapeStream: ShapeStream): Shape {\n  // If the stream is already cached, return\n  if (shapeCache.has(shapeStream)) {\n    // Return the ShapeStream\n    return shapeCache.get(shapeStream)!\n  } else {\n    const newShape = new Shape(shapeStream)\n\n    shapeCache.set(shapeStream, newShape)\n\n    // Return the created shape\n    return newShape\n  }\n}\n\ninterface ShapeProviderProps {\n  children: React.ReactNode\n}\n\n// Shapes Provider Component\nexport function ShapesProvider({ children }: ShapeProviderProps): JSX.Element {\n  // Provide the context value\n  return (\n    <ShapesContext.Provider value={{ getShape, getShapeStream }}>\n      {children}\n    </ShapesContext.Provider>\n  )\n}\n\nexport function useShapeContext() {\n  const context = useContext(ShapesContext)\n  if (!context) {\n    throw new Error(`useShapeContext must be used within a ShapeProvider`)\n  }\n  return context\n}\n\ninterface UseShapeResult {\n  /**\n   * The array of rows that make up the Shape.\n   * @type {{ [key: string]: JsonSerializable }[]}\n   */\n  data: { [key: string]: JsonSerializable }[]\n  /**\n   * The Shape instance used by this useShape\n   * @type(Shape)\n   */\n  shape: Shape\n  error: Shape[`error`]\n  isError: boolean\n  /**\n   * Has the ShapeStream caught up with the replication log from Postgres.\n   */\n  isUpToDate: boolean\n}\n\nfunction shapeSubscribe(shape: Shape, callback: () => void) {\n  const unsubscribe = shape.subscribe(callback)\n  return () => {\n    unsubscribe()\n  }\n}\n\nfunction parseShapeData(shape: Shape): UseShapeResult {\n  return {\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  }\n}\n\nconst identity = (arg: unknown) => arg\n\ninterface UseShapeOptions<Selection> extends ShapeStreamOptions {\n  selector?: (value: UseShapeResult) => Selection\n}\n\nexport function useShape<Selection = UseShapeResult>({\n  selector = identity as never,\n  ...options\n}: UseShapeOptions<Selection>): Selection {\n  const { getShape, getShapeStream } = useShapeContext()\n  const shapeStream = getShapeStream(options as ShapeStreamOptions)\n  const shape = getShape(shapeStream)\n\n  const latestShapeData = useRef(parseShapeData(shape))\n  const getSnapshot = React.useCallback(() => latestShapeData.current, [])\n  const shapeData = useSyncExternalStoreWithSelector(\n    useCallback(\n      (onStoreChange) =>\n        shapeSubscribe(shape, () => {\n          latestShapeData.current = parseShapeData(shape)\n          onStoreChange()\n        }),\n      [shape]\n    ),\n    getSnapshot,\n    getSnapshot,\n    selector\n  )\n\n  return shapeData\n}\n"],"mappings":"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","names":["getShape","getShapeStream"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/react",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "React hooks for ElectricSQL",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -31,7 +31,7 @@
   "homepage": "https://next.electric-sql.com",
   "dependencies": {
     "use-sync-external-store": "^1.2.2",
-    "@electric-sql/next": "0.1.0"
+    "@electric-sql/next": "0.1.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
@@ -72,7 +72,7 @@
     }
   },
   "scripts": {
-    "test": "npx vitest",
+    "test": "pnpm exec vitest",
     "typecheck": "tsc -p tsconfig.json",
     "build": "shx rm -rf dist && concurrently \"tsup\" \"tsc -p tsconfig.build.json\"",
     "stylecheck": "eslint . --quiet",

package/src/react-hooks.tsx

@@ -5,7 +5,7 @@ import {
   ShapeStreamOptions,
 } from '@electric-sql/next'
 import React, { createContext, useCallback, useContext, useRef } from 'react'
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'
 
 interface ShapeContextType {
   getShape: (shapeStream: ShapeStream) => Shape