@electric-sql/react 0.0.5 → 0.0.7

package/dist/react-hooks.d.ts

@@ -1,5 +1,5 @@
+import { JsonSerializable, Shape, ShapeStream, ShapeStreamOptions } from '@electric-sql/next';
 import React from 'react';
-import { Shape, ShapeStream, ShapeStreamOptions, JsonSerializable } from '@electric-sql/next';
 interface ShapeContextType {
     getShape: (shapeStream: ShapeStream) => Shape;
     getShapeStream: (options: ShapeStreamOptions) => ShapeStream;
@@ -16,9 +16,11 @@ export declare function useShapeContext(): ShapeContextType;
 interface UseShapeResult {
     /**
      * The array of rows that make up the Shape.
-     * @type {JsonSerializable}
+     * @type {{ [key: string]: JsonSerializable }[]}
      */
-    data: JsonSerializable[];
+    data: {
+        [key: string]: JsonSerializable;
+    }[];
     /**
      * The Shape instance used by this useShape
      * @type(Shape)
@@ -31,5 +33,8 @@ interface UseShapeResult {
      */
     isUpToDate: boolean;
 }
-export declare function useShape(options: ShapeStreamOptions): UseShapeResult;
+interface UseShapeOptions<Selection> extends ShapeStreamOptions {
+    selector?: (value: UseShapeResult) => Selection;
+}
+export declare function useShape<Selection = UseShapeResult>({ selector, ...options }: UseShapeOptions<Selection>): Selection;
 export {};

package/dist/react-hooks.js

@@ -33,11 +33,12 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import React, { createContext, useEffect, useContext, useState } from "react";
 import {
   Shape,
   ShapeStream
 } from "@electric-sql/next";
+import React, { createContext, useCallback, useContext, useRef } from "react";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
 const ShapesContext = createContext(null);
 const streamCache = /* @__PURE__ */ new Map();
 const shapeCache = /* @__PURE__ */ new Map();
@@ -91,31 +92,45 @@ function useShapeContext() {
   }
   return context;
 }
-function useShape(options) {
-  const { getShape: getShape2, getShapeStream: getShapeStream2 } = useShapeContext();
-  const shapeStream = getShapeStream2(options);
-  const shape = getShape2(shapeStream);
-  const [shapeData, setShapeData] = useState({
+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
-  });
-  useEffect(() => {
-    const unsubscribe = shape.subscribe((map) => {
-      setShapeData({
-        data: [...map.values()],
-        isUpToDate: shape.isUpToDate,
-        isError: shape.error !== false,
-        shape,
-        error: shape.error
-      });
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
+  };
+}
+const 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 {

package/dist/react-hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react-hooks.tsx"],"sourcesContent":["import React, { createContext, useEffect, useContext, useState } from 'react'\nimport {\n  Shape,\n  ShapeStream,\n  ShapeStreamOptions,\n  JsonSerializable,\n} from '@electric-sql/next'\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 {JsonSerializable}\n   */\n  data: 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\nexport function useShape(options: ShapeStreamOptions): UseShapeResult {\n  const { getShape, getShapeStream } = useShapeContext()\n  const shapeStream = getShapeStream(options)\n  const shape = getShape(shapeStream)\n  const [shapeData, setShapeData] = useState<UseShapeResult>({\n    data: [...shape.valueSync.values()],\n    isUpToDate: shape.isUpToDate,\n    isError: shape.error !== false,\n    shape,\n    error: shape.error,\n  })\n\n  useEffect(() => {\n    // Subscribe to updates.\n    const unsubscribe = shape.subscribe((map) => {\n      setShapeData({\n        data: [...map.values()],\n        isUpToDate: shape.isUpToDate,\n        isError: shape.error !== false,\n        shape,\n        error: shape.error,\n      })\n    })\n\n    return () => {\n      unsubscribe()\n    }\n  }, [])\n\n  return shapeData\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS,eAAe,WAAW,YAAY,gBAAgB;AACtE;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAQP,MAAM,gBAAgB,cAAuC,IAAI;AAEjE,MAAM,cAAc,oBAAI,IAAyB;AACjD,MAAM,aAAa,oBAAI,IAAwB;AAE/C,SAAsB,aACpB,SACgB;AAAA;AAChB,UAAM,cAAc,eAAe,OAAO;AAC1C,UAAM,QAAQ,SAAS,WAAW;AAClC,UAAM,MAAM;AACZ,WAAO;AAAA,EACT;AAAA;AAEO,SAAS,kBAAkB,SAAqC;AACrE,QAAM,WAAW,KAAK;AAAA,IACpB,QAAQ;AAAA,IACR,OAAO,KAAK,QAAQ,KAAK,EAAE,KAAK;AAAA,EAClC;AAEA,QAA6C,cAArC,QAlCV,IAkC+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;AAqBO,SAAS,SAAS,SAA6C;AACpE,QAAM,EAAE,UAAAA,WAAU,gBAAAC,gBAAe,IAAI,gBAAgB;AACrD,QAAM,cAAcA,gBAAe,OAAO;AAC1C,QAAM,QAAQD,UAAS,WAAW;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyB;AAAA,IACzD,MAAM,CAAC,GAAG,MAAM,UAAU,OAAO,CAAC;AAAA,IAClC,YAAY,MAAM;AAAA,IAClB,SAAS,MAAM,UAAU;AAAA,IACzB;AAAA,IACA,OAAO,MAAM;AAAA,EACf,CAAC;AAED,YAAU,MAAM;AAEd,UAAM,cAAc,MAAM,UAAU,CAAC,QAAQ;AAC3C,mBAAa;AAAA,QACX,MAAM,CAAC,GAAG,IAAI,OAAO,CAAC;AAAA,QACtB,YAAY,MAAM;AAAA,QAClB,SAAS,MAAM,UAAU;AAAA,QACzB;AAAA,QACA,OAAO,MAAM;AAAA,MACf,CAAC;AAAA,IACH,CAAC;AAED,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":["getShape","getShapeStream"]}
+{"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'\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/dist/react-hooks.jsx

@@ -18,8 +18,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { createContext, useEffect, useContext, useState } from 'react';
 import { Shape, ShapeStream, } from '@electric-sql/next';
+import React, { createContext, useCallback, useContext, useRef } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
 // Create a Context
 const ShapesContext = createContext(null);
 const streamCache = new Map();
@@ -81,31 +82,32 @@ export function useShapeContext() {
     }
     return context;
 }
-export function useShape(options) {
-    const { getShape, getShapeStream } = useShapeContext();
-    const shapeStream = getShapeStream(options);
-    const shape = getShape(shapeStream);
-    const [shapeData, setShapeData] = useState({
+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,
-    });
-    useEffect(() => {
-        // Subscribe to updates.
-        const unsubscribe = shape.subscribe((map) => {
-            setShapeData({
-                data: [...map.values()],
-                isUpToDate: shape.isUpToDate,
-                isError: shape.error !== false,
-                shape,
-                error: shape.error,
-            });
-        });
-        return () => {
-            unsubscribe();
-        };
-    }, []);
+    };
+}
+const identity = (arg) => arg;
+export function useShape(_a) {
+    var { selector = identity } = _a, options = __rest(_a, ["selector"]);
+    const { getShape, getShapeStream } = useShapeContext();
+    const shapeStream = getShapeStream(options);
+    const shape = getShape(shapeStream);
+    const latestShapeData = useRef(parseShapeData(shape));
+    const getSnapshot = React.useCallback(() => latestShapeData.current, []);
+    const shapeData = useSyncExternalStoreWithSelector(useCallback((onStoreChange) => shapeSubscribe(shape, () => {
+        latestShapeData.current = parseShapeData(shape);
+        onStoreChange();
+    }), [shape]), getSnapshot, getSnapshot, selector);
     return shapeData;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electric-sql/react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "React hooks for ElectricSQL",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,12 +18,14 @@
   },
   "homepage": "https://next.electric-sql.com",
   "dependencies": {
-    "@electric-sql/next": "0.0.5"
+    "use-sync-external-store": "^1.2.2",
+    "@electric-sql/next": "0.0.7"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
     "@types/pg": "^8.11.6",
     "@types/react": "^18.3.3",
+    "@types/use-sync-external-store": "^0.0.6",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",