@linkedrecords/react 0.4.0 → 0.5.0

package/dist/index.d.mts

@@ -8,11 +8,23 @@ interface LinkedRecordsContextType {
 }
 declare const LinkedRecordsContext: react.Context<LinkedRecordsContextType | undefined>;
 
+type OIDCConfig = NonNullable<ConstructorParameters<typeof LinkedRecords>[1]>;
+interface LinkedRecordsConfig {
+    oidcConfig?: OIDCConfig;
+    autoHandleRedirect?: boolean;
+    deferUserInfoFetching?: boolean;
+    loginHandler?: () => void;
+    connectionLostHandler?: (err?: any) => void;
+    unknownServerErrorHandler?: (response: any) => void;
+    quotaViolationErrorHandler?: (response: any) => void;
+    authorizationErrorHandler?: (response: any) => void;
+}
 interface LinkedRecordsProviderProps {
     children: ReactNode;
     serverUrl: string;
+    config?: LinkedRecordsConfig;
 }
-declare function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
+declare function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
 
 interface KVValue {
     [key: string]: KVValue | string | boolean | number | undefined;
@@ -28,4 +40,4 @@ type UserInfo = {
 };
 declare function useUserInfo(): UserInfo | null;
 
-export { LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useKeyValueRecords, useLinkedRecords, useUserInfo };
+export { type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useKeyValueRecords, useLinkedRecords, useUserInfo };

package/dist/index.d.ts

@@ -8,11 +8,23 @@ interface LinkedRecordsContextType {
 }
 declare const LinkedRecordsContext: react.Context<LinkedRecordsContextType | undefined>;
 
+type OIDCConfig = NonNullable<ConstructorParameters<typeof LinkedRecords>[1]>;
+interface LinkedRecordsConfig {
+    oidcConfig?: OIDCConfig;
+    autoHandleRedirect?: boolean;
+    deferUserInfoFetching?: boolean;
+    loginHandler?: () => void;
+    connectionLostHandler?: (err?: any) => void;
+    unknownServerErrorHandler?: (response: any) => void;
+    quotaViolationErrorHandler?: (response: any) => void;
+    authorizationErrorHandler?: (response: any) => void;
+}
 interface LinkedRecordsProviderProps {
     children: ReactNode;
     serverUrl: string;
+    config?: LinkedRecordsConfig;
 }
-declare function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
+declare function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
 
 interface KVValue {
     [key: string]: KVValue | string | boolean | number | undefined;
@@ -28,4 +40,4 @@ type UserInfo = {
 };
 declare function useUserInfo(): UserInfo | null;
 
-export { LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useKeyValueRecords, useLinkedRecords, useUserInfo };
+export { type LinkedRecordsConfig, LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useKeyValueRecords, useLinkedRecords, useUserInfo };

package/dist/index.js

@@ -47,8 +47,22 @@ var LinkedRecordsContext = (0, import_react.createContext)(void 0);
 var import_react2 = require("react");
 var import_browser = __toESM(require("@linkedrecords/browser"));
 var import_jsx_runtime = require("react/jsx-runtime");
-function LinkedRecordsProvider({ children, serverUrl }) {
-  const lr = import_browser.default.getPublicClient(serverUrl);
+function createClient(serverUrl, config) {
+  const lr = new import_browser.default(
+    new URL(serverUrl),
+    config.oidcConfig,
+    config.autoHandleRedirect,
+    config.deferUserInfoFetching
+  );
+  if (config.loginHandler) lr.setLoginHandler(config.loginHandler);
+  if (config.connectionLostHandler) lr.setConnectionLostHandler(config.connectionLostHandler);
+  if (config.unknownServerErrorHandler) lr.setUnknownServerErrorHandler(config.unknownServerErrorHandler);
+  if (config.quotaViolationErrorHandler) lr.setQuotaViolationErrorHandler(config.quotaViolationErrorHandler);
+  if (config.authorizationErrorHandler) lr.setAuthorizationErrorHandler(config.authorizationErrorHandler);
+  return lr;
+}
+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 });
 }
 
@@ -67,12 +81,21 @@ function useLinkedRecords() {
 
 // src/useRecords.ts
 var import_browser2 = require("@linkedrecords/browser");
+function getQueryKey(query) {
+  return JSON.stringify(query, (_, v) => typeof v === "function" ? `fn:${v.name}` : v);
+}
 function useKeyValueRecords(query) {
   const { lr } = useLinkedRecords();
   const [records, setRecords] = (0, import_react4.useState)([]);
+  const queryKey = getQueryKey(query);
   (0, import_react4.useEffect)(() => {
+    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 {
@@ -91,10 +114,23 @@ function useKeyValueRecords(query) {
           _id: r.id,
           ...await r.getValue()
         })));
+        if (cancelled) {
+          return;
+        }
         setRecords(values);
         records2.forEach((r) => {
+          if (subscribedRecordIds.has(r.id)) {
+            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, ...newValue } : v
             ));
@@ -106,9 +142,10 @@ function useKeyValueRecords(query) {
       };
     });
     return () => {
+      cancelled = true;
       unsubscribeFnPromise.then((fn) => fn());
     };
-  }, [lr.Record, setRecords]);
+  }, [lr, queryKey]);
   return records;
 }
 var useKeyValueAttributes = useKeyValueRecords;

package/dist/index.mjs

@@ -3,16 +3,30 @@ import { createContext } from "react";
 var LinkedRecordsContext = createContext(void 0);
 
 // src/LinkedRecordsProvider.tsx
-import "react";
+import { useState } from "react";
 import LinkedRecords from "@linkedrecords/browser";
 import { jsx } from "react/jsx-runtime";
-function LinkedRecordsProvider({ children, serverUrl }) {
-  const lr = LinkedRecords.getPublicClient(serverUrl);
+function createClient(serverUrl, config) {
+  const lr = new LinkedRecords(
+    new URL(serverUrl),
+    config.oidcConfig,
+    config.autoHandleRedirect,
+    config.deferUserInfoFetching
+  );
+  if (config.loginHandler) lr.setLoginHandler(config.loginHandler);
+  if (config.connectionLostHandler) lr.setConnectionLostHandler(config.connectionLostHandler);
+  if (config.unknownServerErrorHandler) lr.setUnknownServerErrorHandler(config.unknownServerErrorHandler);
+  if (config.quotaViolationErrorHandler) lr.setQuotaViolationErrorHandler(config.quotaViolationErrorHandler);
+  if (config.authorizationErrorHandler) lr.setAuthorizationErrorHandler(config.authorizationErrorHandler);
+  return lr;
+}
+function LinkedRecordsProvider({ children, serverUrl, config }) {
+  const [lr] = useState(() => config ? createClient(serverUrl, config) : LinkedRecords.getPublicClient(serverUrl));
   return /* @__PURE__ */ jsx(LinkedRecordsContext.Provider, { value: { lr }, children });
 }
 
 // src/useRecords.ts
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 
 // src/useLinkedRecords.ts
 import { useContext } from "react";
@@ -26,12 +40,21 @@ function useLinkedRecords() {
 
 // src/useRecords.ts
 import { KeyValueRecord } from "@linkedrecords/browser";
+function getQueryKey(query) {
+  return JSON.stringify(query, (_, v) => typeof v === "function" ? `fn:${v.name}` : v);
+}
 function useKeyValueRecords(query) {
   const { lr } = useLinkedRecords();
-  const [records, setRecords] = useState([]);
+  const [records, setRecords] = useState2([]);
+  const queryKey = getQueryKey(query);
   useEffect(() => {
+    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 {
@@ -50,10 +73,23 @@ function useKeyValueRecords(query) {
           _id: r.id,
           ...await r.getValue()
         })));
+        if (cancelled) {
+          return;
+        }
         setRecords(values);
         records2.forEach((r) => {
+          if (subscribedRecordIds.has(r.id)) {
+            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, ...newValue } : v
             ));
@@ -65,18 +101,19 @@ function useKeyValueRecords(query) {
       };
     });
     return () => {
+      cancelled = true;
       unsubscribeFnPromise.then((fn) => fn());
     };
-  }, [lr.Record, setRecords]);
+  }, [lr, queryKey]);
   return records;
 }
 var useKeyValueAttributes = useKeyValueRecords;
 
 // src/useUserInfo.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 function useUserInfo() {
   const { lr } = useLinkedRecords();
-  const [userInfo, setUserInfo] = useState2(null);
+  const [userInfo, setUserInfo] = useState3(null);
   useEffect2(() => {
     lr.getCurrentUserEmail().then((email) => setUserInfo({ email })).catch(() => setUserInfo(null));
   }, [lr]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkedrecords/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/LinkedRecordsProvider.tsx

@@ -1,14 +1,52 @@
-import { type ReactNode } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ReactNode, useState } from 'react';
 import LinkedRecords from '@linkedrecords/browser';
 import { LinkedRecordsContext } from './linkedRecordsContext';
 
+type OIDCConfig = NonNullable<ConstructorParameters<typeof LinkedRecords>[1]>;
+
+export interface LinkedRecordsConfig {
+  // Omit to use cookie based auth, where the LinkedRecords server handles the login.
+  oidcConfig?: OIDCConfig;
+  autoHandleRedirect?: boolean;
+  deferUserInfoFetching?: boolean;
+  loginHandler?: () => void;
+  connectionLostHandler?: (err?: any) => void;
+  unknownServerErrorHandler?: (response: any) => void;
+  quotaViolationErrorHandler?: (response: any) => void;
+  authorizationErrorHandler?: (response: any) => void;
+}
+
 interface LinkedRecordsProviderProps {
   children: ReactNode;
   serverUrl: string;
+  // Read once on mount. Without it, the shared public client for serverUrl is used.
+  config?: LinkedRecordsConfig;
+}
+
+function createClient(serverUrl: string, config: LinkedRecordsConfig): LinkedRecords {
+  const lr = new LinkedRecords(
+    new URL(serverUrl),
+    config.oidcConfig,
+    config.autoHandleRedirect,
+    config.deferUserInfoFetching,
+  );
+
+  // Handlers are installed before any child renders, so the first
+  // requests made by child components already go through them.
+  if (config.loginHandler) lr.setLoginHandler(config.loginHandler);
+  if (config.connectionLostHandler) lr.setConnectionLostHandler(config.connectionLostHandler);
+  if (config.unknownServerErrorHandler) lr.setUnknownServerErrorHandler(config.unknownServerErrorHandler);
+  if (config.quotaViolationErrorHandler) lr.setQuotaViolationErrorHandler(config.quotaViolationErrorHandler);
+  if (config.authorizationErrorHandler) lr.setAuthorizationErrorHandler(config.authorizationErrorHandler);
+
+  return lr;
 }
 
-export function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps) {
-  const lr = LinkedRecords.getPublicClient(serverUrl);
+export function LinkedRecordsProvider({ children, serverUrl, config }: LinkedRecordsProviderProps) {
+  const [lr] = useState(() => (config
+    ? createClient(serverUrl, config)
+    : LinkedRecords.getPublicClient(serverUrl)));
 
   return (
     <LinkedRecordsContext.Provider value={{ lr }}>

package/src/useRecords.ts

@@ -7,13 +7,32 @@ interface KVValue {
   [key: string]: KVValue | string | boolean | number | undefined;
 }
 
+// Callers usually pass a new query array on every render, so the effect
+// depends on a serialized key instead of the array identity. Functions
+// (e.g. record classes) would serialize to null, so they are keyed by name.
+function getQueryKey(query: any[]): string {
+  return JSON.stringify(query, (_, v) => (typeof v === 'function' ? `fn:${v.name}` : v));
+}
+
 export function useKeyValueRecords(query: any[]): KVValue[]  {
   const { lr } = useLinkedRecords();
   const [ records, setRecords ] = useState<KVValue[]>([]);
+  const queryKey = getQueryKey(query);
 
   useEffect(() => {
+    // 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.
+    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;
+        }
+
         if (lr.actorId !== undefined) {
           resolve();
         } else {
@@ -33,12 +52,30 @@ export function useKeyValueRecords(query: any[]): KVValue[]  {
           ...(await r.getValue()),
         })));
 
+        if (cancelled) {
+          return;
+        }
+
         setRecords(values);
 
         records.forEach((r) => {
+          if (subscribedRecordIds.has(r.id)) {
+            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
@@ -55,9 +92,13 @@ export function useKeyValueRecords(query: any[]): KVValue[]  {
     });
 
     return () => {
+      cancelled = true;
       unsubscribeFnPromise.then(fn => fn());
     }
-  }, [ lr.Record, setRecords ]);
+    // query is represented by queryKey; depending on the array itself would
+    // resubscribe on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ lr, queryKey ]);
 
   return records;
 }