@linkedrecords/react 0.6.0 → 0.7.0

package/dist/index.d.mts

@@ -26,18 +26,23 @@ interface LinkedRecordsProviderProps {
 }
 declare function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
 
-interface KVValue {
-    [key: string]: KVValue | string | boolean | number | Date | undefined;
-}
-interface KVRecord extends KVValue {
+type JSONValue = string | number | boolean | null | JSONValue[] | {
+    [key: string]: JSONValue;
+};
+type KVValue = {
+    [key: string]: JSONValue | undefined;
+};
+type KVRecord<T extends object = KVValue> = T & {
     _id?: string;
     _createdAt?: Date;
-}
-declare function useKeyValueRecordsWithStatus(query: any[]): {
-    records: KVRecord[];
+};
+type CompoundRecordQuery = Parameters<LinkedRecords['Record']['subscribeToQuery']>[0];
+type RecordQueryClause = Exclude<CompoundRecordQuery[string], string>[number];
+declare function useKeyValueRecordsWithStatus<T extends object = KVValue>(query: RecordQueryClause[]): {
+    records: KVRecord<T>[];
     isLoading: boolean;
 };
-declare function useKeyValueRecords(query: any[]): KVRecord[];
+declare function useKeyValueRecords<T extends object = KVValue>(query: RecordQueryClause[]): KVRecord<T>[];
 /** @deprecated Use useKeyValueRecords instead. */
 declare const useKeyValueAttributes: typeof useKeyValueRecords;
 
@@ -57,4 +62,4 @@ declare function useUserInfo(): UserInfo | null;
 
 declare function useActorId(): string | undefined;
 
-export { type KVRecord, type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useActorId, useFacts, useKeyValueAttributes, useKeyValueRecords, useKeyValueRecordsWithStatus, useLinkedRecords, useUserInfo };
+export { type KVRecord, type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, type RecordQueryClause, useActorId, useFacts, useKeyValueAttributes, useKeyValueRecords, useKeyValueRecordsWithStatus, useLinkedRecords, useUserInfo };

package/dist/index.d.ts

@@ -26,18 +26,23 @@ interface LinkedRecordsProviderProps {
 }
 declare function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
 
-interface KVValue {
-    [key: string]: KVValue | string | boolean | number | Date | undefined;
-}
-interface KVRecord extends KVValue {
+type JSONValue = string | number | boolean | null | JSONValue[] | {
+    [key: string]: JSONValue;
+};
+type KVValue = {
+    [key: string]: JSONValue | undefined;
+};
+type KVRecord<T extends object = KVValue> = T & {
     _id?: string;
     _createdAt?: Date;
-}
-declare function useKeyValueRecordsWithStatus(query: any[]): {
-    records: KVRecord[];
+};
+type CompoundRecordQuery = Parameters<LinkedRecords['Record']['subscribeToQuery']>[0];
+type RecordQueryClause = Exclude<CompoundRecordQuery[string], string>[number];
+declare function useKeyValueRecordsWithStatus<T extends object = KVValue>(query: RecordQueryClause[]): {
+    records: KVRecord<T>[];
     isLoading: boolean;
 };
-declare function useKeyValueRecords(query: any[]): KVRecord[];
+declare function useKeyValueRecords<T extends object = KVValue>(query: RecordQueryClause[]): KVRecord<T>[];
 /** @deprecated Use useKeyValueRecords instead. */
 declare const useKeyValueAttributes: typeof useKeyValueRecords;
 
@@ -57,4 +62,4 @@ declare function useUserInfo(): UserInfo | null;
 
 declare function useActorId(): string | undefined;
 
-export { type KVRecord, type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useActorId, useFacts, useKeyValueAttributes, useKeyValueRecords, useKeyValueRecordsWithStatus, useLinkedRecords, useUserInfo };
+export { type KVRecord, type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, type RecordQueryClause, useActorId, useFacts, useKeyValueAttributes, useKeyValueRecords, useKeyValueRecordsWithStatus, useLinkedRecords, useUserInfo };

package/dist/index.js

@@ -66,11 +66,13 @@ function createClient(serverUrl, config) {
 }
 function LinkedRecordsProvider({ children, serverUrl, config }) {
   const [lr] = (0, import_react2.useState)(() => config ? createClient(serverUrl, config) : import_browser.default.getPublicClient(serverUrl));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkedRecordsContext.Provider, { value: { lr }, children });
+  const value = (0, import_react2.useMemo)(() => ({ lr }), [lr]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkedRecordsContext.Provider, { value, children });
 }
 
 // src/useRecords.ts
 var import_react4 = require("react");
+var import_browser2 = require("@linkedrecords/browser");
 
 // src/useLinkedRecords.ts
 var import_react3 = require("react");
@@ -88,7 +90,6 @@ function getQueryKey(query) {
 }
 
 // src/useRecords.ts
-var import_browser2 = require("@linkedrecords/browser");
 function useKeyValueRecordsWithStatus(query) {
   const { lr } = useLinkedRecords();
   const [records, setRecords] = (0, import_react4.useState)([]);
@@ -97,62 +98,53 @@ function useKeyValueRecordsWithStatus(query) {
   (0, import_react4.useEffect)(() => {
     setIsLoading(true);
     let cancelled = false;
-    const subscribedRecordIds = /* @__PURE__ */ new Set();
-    const unsubscribeFnPromise = new Promise((resolve) => {
-      const checkActorId = () => {
-        if (cancelled) {
-          return;
-        }
-        if (lr.actorId !== void 0) {
-          resolve();
-        } else {
-          setTimeout(checkActorId, 50);
+    const recordUnsubscribes = /* @__PURE__ */ new Map();
+    const toKVRecord = async (r) => ({
+      _id: r.id,
+      _createdAt: r.createdAt,
+      ...await r.getValue()
+    });
+    const queryUnsubscribe = lr.Record.subscribeToQuery({
+      records: [
+        ["$it", "$hasDataType", import_browser2.KeyValueRecord],
+        ...query
+      ]
+    }, async ({ records: records2 }) => {
+      const kvRecords = records2;
+      const values = await Promise.all(kvRecords.map(toKVRecord));
+      if (cancelled) {
+        return;
+      }
+      setRecords(values);
+      setIsLoading(false);
+      const ids = new Set(kvRecords.map((r) => r.id));
+      recordUnsubscribes.forEach((unsubscribe, id) => {
+        if (!ids.has(id)) {
+          recordUnsubscribes.delete(id);
+          unsubscribe.then((fn) => fn());
         }
-      };
-      checkActorId();
-    }).then(() => {
-      const queryUnsubscribe = lr.Record.subscribeToQuery({
-        records: [
-          ["$it", "$hasDataType", import_browser2.KeyValueRecord],
-          ...query
-        ]
-      }, async ({ records: records2 }) => {
-        const values = await Promise.all(records2.map(async (r) => ({
-          _id: r.id,
-          _createdAt: r.createdAt,
-          ...await r.getValue()
-        })));
-        if (cancelled) {
+      });
+      kvRecords.forEach((r) => {
+        if (recordUnsubscribes.has(r.id)) {
           return;
         }
-        setRecords(values);
-        setIsLoading(false);
-        records2.forEach((r) => {
-          if (subscribedRecordIds.has(r.id)) {
+        recordUnsubscribes.set(r.id, r.subscribe(async () => {
+          const newValue = await toKVRecord(r);
+          if (cancelled) {
             return;
           }
-          subscribedRecordIds.add(r.id);
-          r.subscribe(async () => {
-            if (cancelled) {
-              return;
-            }
-            const newValue = await r.getValue();
-            if (cancelled) {
-              return;
-            }
-            setRecords((prev) => prev.map(
-              (v) => v._id === r.id ? { _id: r.id, _createdAt: r.createdAt, ...newValue } : v
-            ));
-          });
-        });
+          setRecords((prev) => prev.map((v) => v._id === r.id ? newValue : v));
+        }));
       });
-      return () => {
-        queryUnsubscribe.then((unsubscribe) => unsubscribe());
-      };
+    });
+    queryUnsubscribe.catch((err) => {
+      console.error("useKeyValueRecords: could not subscribe to query", err);
     });
     return () => {
       cancelled = true;
-      unsubscribeFnPromise.then((fn) => fn());
+      queryUnsubscribe.then((unsubscribe) => unsubscribe(), () => {
+      });
+      recordUnsubscribes.forEach((unsubscribe) => unsubscribe.then((fn) => fn()));
     };
   }, [lr, queryKey]);
   return { records, isLoading };

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { createContext } from "react";
 var LinkedRecordsContext = createContext(void 0);
 
 // src/LinkedRecordsProvider.tsx
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import LinkedRecords from "@linkedrecords/browser";
 import { jsx } from "react/jsx-runtime";
 function createClient(serverUrl, config) {
@@ -22,11 +22,13 @@ function createClient(serverUrl, config) {
 }
 function LinkedRecordsProvider({ children, serverUrl, config }) {
   const [lr] = useState(() => config ? createClient(serverUrl, config) : LinkedRecords.getPublicClient(serverUrl));
-  return /* @__PURE__ */ jsx(LinkedRecordsContext.Provider, { value: { lr }, children });
+  const value = useMemo(() => ({ lr }), [lr]);
+  return /* @__PURE__ */ jsx(LinkedRecordsContext.Provider, { value, children });
 }
 
 // src/useRecords.ts
 import { useEffect, useState as useState2 } from "react";
+import { KeyValueRecord } from "@linkedrecords/browser";
 
 // src/useLinkedRecords.ts
 import { useContext } from "react";
@@ -44,7 +46,6 @@ function getQueryKey(query) {
 }
 
 // src/useRecords.ts
-import { KeyValueRecord } from "@linkedrecords/browser";
 function useKeyValueRecordsWithStatus(query) {
   const { lr } = useLinkedRecords();
   const [records, setRecords] = useState2([]);
@@ -53,62 +54,53 @@ function useKeyValueRecordsWithStatus(query) {
   useEffect(() => {
     setIsLoading(true);
     let cancelled = false;
-    const subscribedRecordIds = /* @__PURE__ */ new Set();
-    const unsubscribeFnPromise = new Promise((resolve) => {
-      const checkActorId = () => {
-        if (cancelled) {
-          return;
-        }
-        if (lr.actorId !== void 0) {
-          resolve();
-        } else {
-          setTimeout(checkActorId, 50);
+    const recordUnsubscribes = /* @__PURE__ */ new Map();
+    const toKVRecord = async (r) => ({
+      _id: r.id,
+      _createdAt: r.createdAt,
+      ...await r.getValue()
+    });
+    const queryUnsubscribe = lr.Record.subscribeToQuery({
+      records: [
+        ["$it", "$hasDataType", KeyValueRecord],
+        ...query
+      ]
+    }, async ({ records: records2 }) => {
+      const kvRecords = records2;
+      const values = await Promise.all(kvRecords.map(toKVRecord));
+      if (cancelled) {
+        return;
+      }
+      setRecords(values);
+      setIsLoading(false);
+      const ids = new Set(kvRecords.map((r) => r.id));
+      recordUnsubscribes.forEach((unsubscribe, id) => {
+        if (!ids.has(id)) {
+          recordUnsubscribes.delete(id);
+          unsubscribe.then((fn) => fn());
         }
-      };
-      checkActorId();
-    }).then(() => {
-      const queryUnsubscribe = lr.Record.subscribeToQuery({
-        records: [
-          ["$it", "$hasDataType", KeyValueRecord],
-          ...query
-        ]
-      }, async ({ records: records2 }) => {
-        const values = await Promise.all(records2.map(async (r) => ({
-          _id: r.id,
-          _createdAt: r.createdAt,
-          ...await r.getValue()
-        })));
-        if (cancelled) {
+      });
+      kvRecords.forEach((r) => {
+        if (recordUnsubscribes.has(r.id)) {
           return;
         }
-        setRecords(values);
-        setIsLoading(false);
-        records2.forEach((r) => {
-          if (subscribedRecordIds.has(r.id)) {
+        recordUnsubscribes.set(r.id, r.subscribe(async () => {
+          const newValue = await toKVRecord(r);
+          if (cancelled) {
             return;
           }
-          subscribedRecordIds.add(r.id);
-          r.subscribe(async () => {
-            if (cancelled) {
-              return;
-            }
-            const newValue = await r.getValue();
-            if (cancelled) {
-              return;
-            }
-            setRecords((prev) => prev.map(
-              (v) => v._id === r.id ? { _id: r.id, _createdAt: r.createdAt, ...newValue } : v
-            ));
-          });
-        });
+          setRecords((prev) => prev.map((v) => v._id === r.id ? newValue : v));
+        }));
       });
-      return () => {
-        queryUnsubscribe.then((unsubscribe) => unsubscribe());
-      };
+    });
+    queryUnsubscribe.catch((err) => {
+      console.error("useKeyValueRecords: could not subscribe to query", err);
     });
     return () => {
       cancelled = true;
-      unsubscribeFnPromise.then((fn) => fn());
+      queryUnsubscribe.then((unsubscribe) => unsubscribe(), () => {
+      });
+      recordUnsubscribes.forEach((unsubscribe) => unsubscribe.then((fn) => fn()));
     };
   }, [lr, queryKey]);
   return { records, isLoading };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkedrecords/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -25,11 +25,11 @@
   "license": "MIT",
   "description": "",
   "peerDependencies": {
-    "@linkedrecords/browser": "^0.3.0",
+    "@linkedrecords/browser": "^0.4.0",
     "react": ">=18"
   },
   "devDependencies": {
-    "@linkedrecords/browser": "^0.3.0",
+    "@linkedrecords/browser": "^0.4.0",
     "@types/react": "^19.1.12",
     "react": "^19.1.1",
     "tsup": "^8.5.0",

package/src/LinkedRecordsProvider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import LinkedRecords from '@linkedrecords/browser';
 import { LinkedRecordsContext } from './linkedRecordsContext';
 
@@ -47,9 +47,11 @@ export function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRec
   const [lr] = useState(() => (config
     ? createClient(serverUrl, config)
     : LinkedRecords.getPublicClient(serverUrl)));
+  // A new context value would re-render every consumer on each render.
+  const value = useMemo(() => ({ lr }), [lr]);
 
   return (
-    <LinkedRecordsContext.Provider value={{ lr }}>
+    <LinkedRecordsContext.Provider value={value}>
       {children}
     </LinkedRecordsContext.Provider>
   );

package/src/useRecords.ts

@@ -1,103 +1,96 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useState } from "react";
+import type LinkedRecords from '@linkedrecords/browser';
+import { KeyValueRecord } from '@linkedrecords/browser';
 import { useLinkedRecords } from "./useLinkedRecords";
 import { getQueryKey } from "./queryKey";
-import { KeyValueRecord } from '@linkedrecords/browser';
 
-interface KVValue {
-  [key: string]: KVValue | string | boolean | number | Date | undefined;
-}
+type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue };
+
+type KVValue = { [key: string]: JSONValue | undefined };
 
-export interface KVRecord extends KVValue {
+export type KVRecord<T extends object = KVValue> = T & {
   _id?: string;
   _createdAt?: Date;
-}
+};
+
+type CompoundRecordQuery = Parameters<LinkedRecords['Record']['subscribeToQuery']>[0];
 
-export function useKeyValueRecordsWithStatus(query: any[]): { records: KVRecord[], isLoading: boolean } {
+// One [subject, predicate, object] clause of a record query, e.g. ['$it', 'isA', 'Todo'].
+export type RecordQueryClause = Exclude<CompoundRecordQuery[string], string>[number];
+
+export function useKeyValueRecordsWithStatus<T extends object = KVValue>(query: RecordQueryClause[]): { records: KVRecord<T>[], isLoading: boolean } {
   const { lr } = useLinkedRecords();
-  const [ records, setRecords ] = useState<KVRecord[]>([]);
+  const [ records, setRecords ] = useState<KVRecord<T>[]>([]);
   const [ isLoading, setIsLoading ] = useState(true);
   const queryKey = getQueryKey(query);
 
   useEffect(() => {
     setIsLoading(true);
 
-    // The SDK has no way to remove a record observer, so observers registered
-    // by this effect run check this flag and become no-ops after cleanup.
+    // Values are read asynchronously; results which arrive after the query
+    // changed or the component unmounted are dropped.
     let cancelled = false;
-    // Records this effect run already observes, so repeated query results
-    // do not stack up observers on the same record.
-    const subscribedRecordIds = new Set<string | undefined>();
-
-    const unsubscribeFnPromise = new Promise<void>((resolve) => {
-      const checkActorId = () => {
-        if (cancelled) {
-          return;
+    // Record observers by record id, so each record in the result is
+    // observed once and records which leave the result are unobserved.
+    const recordUnsubscribes = new Map<string | undefined, Promise<() => void>>();
+
+    // T is the value shape declared by the caller; the hook can not check it.
+    const toKVRecord = async (r: KeyValueRecord) => ({
+      _id: r.id,
+      _createdAt: r.createdAt,
+      ...(await r.getValue()),
+    }) as KVRecord<T>;
+
+    const queryUnsubscribe = lr.Record.subscribeToQuery({
+      records: [
+        ['$it', '$hasDataType', KeyValueRecord],
+        ...query
+      ],
+    }, async ({ records }) => {
+      const kvRecords = records as KeyValueRecord[];
+      const values = await Promise.all(kvRecords.map(toKVRecord));
+
+      if (cancelled) {
+        return;
+      }
+
+      setRecords(values);
+      setIsLoading(false);
+
+      const ids = new Set(kvRecords.map((r) => r.id));
+
+      recordUnsubscribes.forEach((unsubscribe, id) => {
+        if (!ids.has(id)) {
+          recordUnsubscribes.delete(id);
+          unsubscribe.then((fn) => fn());
         }
+      });
 
-        if (lr.actorId !== undefined) {
-          resolve();
-        } else {
-          setTimeout(checkActorId, 50);
-        }
-      };
-      checkActorId();
-    }).then(() => {
-      const queryUnsubscribe = lr.Record.subscribeToQuery({
-        records: [
-          ['$it', '$hasDataType', KeyValueRecord],
-          ...query
-        ],
-      }, async ({ records }) => {
-        const values = await Promise.all(records.map(async (r) => ({
-          _id: r.id,
-          _createdAt: r.createdAt,
-          ...(await r.getValue()),
-        })));
-
-        if (cancelled) {
+      kvRecords.forEach((r) => {
+        if (recordUnsubscribes.has(r.id)) {
           return;
         }
 
-        setRecords(values);
-        setIsLoading(false);
+        recordUnsubscribes.set(r.id, r.subscribe(async () => {
+          const newValue = await toKVRecord(r);
 
-        records.forEach((r) => {
-          if (subscribedRecordIds.has(r.id)) {
+          if (cancelled) {
             return;
           }
 
-          subscribedRecordIds.add(r.id);
-
-          r.subscribe(async () => {
-            if (cancelled) {
-              return;
-            }
-
-            const newValue = await r.getValue();
-
-            if (cancelled) {
-              return;
-            }
-
-            // Use functional update to avoid stale closure
-            setRecords(prev => prev.map(v =>
-              v._id === r.id
-                ? { _id: r.id, _createdAt: r.createdAt, ...newValue }
-                : v
-            ));
-          });
-        });
+          setRecords(prev => prev.map(v => (v._id === r.id ? newValue : v)));
+        }));
       });
+    });
 
-      return () => {
-        queryUnsubscribe.then(unsubscribe => unsubscribe());
-      };
+    queryUnsubscribe.catch((err) => {
+      console.error('useKeyValueRecords: could not subscribe to query', err);
     });
 
     return () => {
       cancelled = true;
-      unsubscribeFnPromise.then(fn => fn());
+      queryUnsubscribe.then((unsubscribe) => unsubscribe(), () => {});
+      recordUnsubscribes.forEach((unsubscribe) => unsubscribe.then((fn) => fn()));
     }
     // query is represented by queryKey; depending on the array itself would
     // resubscribe on every render.
@@ -107,8 +100,8 @@ export function useKeyValueRecordsWithStatus(query: any[]): { records: KVRecord[
   return { records, isLoading };
 }
 
-export function useKeyValueRecords(query: any[]): KVRecord[] {
-  return useKeyValueRecordsWithStatus(query).records;
+export function useKeyValueRecords<T extends object = KVValue>(query: RecordQueryClause[]): KVRecord<T>[] {
+  return useKeyValueRecordsWithStatus<T>(query).records;
 }
 
 /** @deprecated Use useKeyValueRecords instead. */