@openmrs/esm-react-utils 10.0.1-pre.5240 → 10.0.1-pre.5251

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 53 files with swc (172.06ms)
+[0] Successfully compiled: 53 files with swc (93.12ms)
 [0] swc --strip-leading-paths src -d dist exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/useVisit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisit.d.ts","sourceRoot":"","sources":["../src/useVisit.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoC,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAKpF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B;;;OAGG;IACH,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAE3B;;;OAGG;IACH,2BAA2B,EAAE,OAAO,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,SAAmC,GAAG,eAAe,CA6EhH"}
+{"version":3,"file":"useVisit.d.ts","sourceRoot":"","sources":["../src/useVisit.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoC,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAKpF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B;;;OAGG;IACH,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC;IAE3B;;;OAGG;IACH,2BAA2B,EAAE,OAAO,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,cAAc,SAAmC,GAAG,eAAe,CAyFhH"}

package/dist/useVisit.js

@@ -26,7 +26,13 @@ dayjs.extend(isToday);
  * @param patientUuid Unique patient identifier `string`
  * @param representation The custom representation of the visit
  */ export function useVisit(patientUuid, representation = defaultVisitCustomRepresentation) {
-    const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid, setVisitContext } = useVisitContextStore();
+    // The callback we register has to exist before we read the store, but the mutate functions
+    // it calls come from SWR calls that are keyed off what the store holds. Registering a stable
+    // indirection through a ref breaks that cycle, so the store is read once per hook rather than
+    // once to get the key and again to register.
+    const mutateVisitRef = useRef(undefined);
+    const registeredMutateVisit = useCallback(()=>mutateVisitRef.current?.(), []);
+    const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid, setVisitContext } = useVisitContextStore(registeredMutateVisit);
     // Ignore the visit store data if it is not for this patient
     const retrospectiveVisitUuid = patientUuid && visitStorePatientUuid == patientUuid ? manuallySetVisitUuid : null;
     const activeVisitUrlSuffix = `?patient=${patientUuid}&v=${representation}&includeInactive=false`;
@@ -69,7 +75,11 @@ dayjs.extend(isToday);
         activeMutate,
         retroMutate
     ]);
-    useVisitContextStore(mutateVisit);
+    useEffect(()=>{
+        mutateVisitRef.current = mutateVisit;
+    }, [
+        mutateVisit
+    ]);
     const waitingForData = Boolean(!activeData || retrospectiveVisitUuid && !retroData);
     const hasRelevantError = Boolean(retrospectiveVisitUuid ? retroError : activeError);
     const isLoading = waitingForData && !hasRelevantError;

package/dist/useVisitContextStore.d.ts

@@ -1,13 +1,25 @@
-import { type Visit, type VisitStoreState } from '@openmrs/esm-emr-api';
+import { type Visit } from '@openmrs/esm-emr-api';
+/**
+ * Invokes every registered mutate callback, revalidating visit data across the application.
+ *
+ * Iterates over a copy so that a callback which registers or unregisters another does not
+ * disturb the traversal.
+ */
+declare function mutateVisit(): void;
 /**
  * A hook to return the visit context store and corresponding actions.
+ *
  * @param mutateVisitCallback An optional mutate callback to register. If provided, the
- * store action's `mutateVisit` function will invoke this callback (along with any other
- * callbacks also registered into the store)
+ * returned `mutateVisit` function will invoke this callback (along with any other
+ * callbacks registered by other components). Pass a callback with a stable identity;
+ * one that changes on every render re-registers on every render.
  * @returns
  */
-export declare function useVisitContextStore(mutateVisitCallback?: () => void): VisitStoreState & {
+export declare function useVisitContextStore(mutateVisitCallback?: () => void): {
+    mutateVisit: typeof mutateVisit;
+    patientUuid: string | null;
+    manuallySetVisitUuid: string | null;
     setVisitContext: (newSelectedVisit: Visit | null) => void;
-    mutateVisit: () => void;
 };
+export {};
 //# sourceMappingURL=useVisitContextStore.d.ts.map

package/dist/useVisitContextStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisitContextStore.d.ts","sourceRoot":"","sources":["../src/useVisitContextStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAqBvF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI;;;EA2BpE"}
+{"version":3,"file":"useVisitContextStore.d.ts","sourceRoot":"","sources":["../src/useVisitContextStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,KAAK,EAAwB,MAAM,sBAAsB,CAAC;AASvF;;;;;GAKG;AACH,iBAAS,WAAW,SAInB;AAcD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI;;;;;EAiBpE"}

package/dist/useVisitContextStore.js

@@ -1,6 +1,20 @@
 import { useEffect, useId } from "react";
 import { getVisitStore } from "@openmrs/esm-emr-api";
 import { useStoreWithActions } from "./useStore.js";
+/**
+ * The mutate callbacks to invoke when visit data changes, keyed by the `useId()` of the
+ * component that registered each one.
+ */ const mutateVisitCallbacks = new Map();
+/**
+ * Invokes every registered mutate callback, revalidating visit data across the application.
+ *
+ * Iterates over a copy so that a callback which registers or unregisters another does not
+ * disturb the traversal.
+ */ function mutateVisit() {
+    for (const mutateCallback of Array.from(mutateVisitCallbacks.values())){
+        mutateCallback();
+    }
+}
 const visitContextStoreActions = {
     setVisitContext (_, newSelectedVisit) {
         if (newSelectedVisit == null) {
@@ -12,48 +26,33 @@ const visitContextStoreActions = {
             manuallySetVisitUuid: newSelectedVisit.uuid,
             patientUuid: newSelectedVisit.patient?.uuid
         };
-    },
-    mutateVisit (currState) {
-        for (const mutateCallback of Object.values(currState.mutateVisitCallbacks ?? {})){
-            mutateCallback();
-        }
-        return {};
     }
 };
 /**
  * A hook to return the visit context store and corresponding actions.
+ *
  * @param mutateVisitCallback An optional mutate callback to register. If provided, the
- * store action's `mutateVisit` function will invoke this callback (along with any other
- * callbacks also registered into the store)
+ * returned `mutateVisit` function will invoke this callback (along with any other
+ * callbacks registered by other components). Pass a callback with a stable identity;
+ * one that changes on every render re-registers on every render.
  * @returns
  */ export function useVisitContextStore(mutateVisitCallback) {
     const id = useId();
     useEffect(()=>{
-        const visitStore = getVisitStore();
-        // register the callback if it exists
-        if (mutateVisitCallback) {
-            visitStore.setState({
-                mutateVisitCallbacks: {
-                    ...visitStore.getState().mutateVisitCallbacks,
-                    [id]: mutateVisitCallback
-                }
-            });
+        if (!mutateVisitCallback) {
+            return;
         }
-        // deregister the callback on unmount, if it exists
+        mutateVisitCallbacks.set(id, mutateVisitCallback);
         return ()=>{
-            if (mutateVisitCallback) {
-                const mutateVisitCallbacks = {
-                    ...visitStore.getState().mutateVisitCallbacks
-                };
-                delete mutateVisitCallbacks[id];
-                visitStore.setState({
-                    mutateVisitCallbacks
-                });
-            }
+            mutateVisitCallbacks.delete(id);
         };
     }, [
         id,
         mutateVisitCallback
     ]);
-    return useStoreWithActions(getVisitStore(), visitContextStoreActions);
+    const visitContextStore = useStoreWithActions(getVisitStore(), visitContextStoreActions);
+    return {
+        ...visitContextStore,
+        mutateVisit
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "10.0.1-pre.5240",
+  "version": "10.0.1-pre.5251",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "type": "module",
@@ -59,17 +59,17 @@
     "single-spa-react": "^6.0.2"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "^10.0.1-pre.5240",
-    "@openmrs/esm-config": "^10.0.1-pre.5240",
-    "@openmrs/esm-context": "^10.0.1-pre.5240",
-    "@openmrs/esm-emr-api": "^10.0.1-pre.5240",
-    "@openmrs/esm-error-handling": "^10.0.1-pre.5240",
-    "@openmrs/esm-extensions": "^10.0.1-pre.5240",
-    "@openmrs/esm-feature-flags": "^10.0.1-pre.5240",
-    "@openmrs/esm-globals": "^10.0.1-pre.5240",
-    "@openmrs/esm-navigation": "^10.0.1-pre.5240",
-    "@openmrs/esm-state": "^10.0.1-pre.5240",
-    "@openmrs/esm-utils": "^10.0.1-pre.5240",
+    "@openmrs/esm-api": "^10.0.1-pre.5251",
+    "@openmrs/esm-config": "^10.0.1-pre.5251",
+    "@openmrs/esm-context": "^10.0.1-pre.5251",
+    "@openmrs/esm-emr-api": "^10.0.1-pre.5251",
+    "@openmrs/esm-error-handling": "^10.0.1-pre.5251",
+    "@openmrs/esm-extensions": "^10.0.1-pre.5251",
+    "@openmrs/esm-feature-flags": "^10.0.1-pre.5251",
+    "@openmrs/esm-globals": "^10.0.1-pre.5251",
+    "@openmrs/esm-navigation": "^10.0.1-pre.5251",
+    "@openmrs/esm-state": "^10.0.1-pre.5251",
+    "@openmrs/esm-utils": "^10.0.1-pre.5251",
     "dayjs": "1.x",
     "i18next": "25.x",
     "react": "18.x",
@@ -79,17 +79,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "10.0.1-pre.5240",
-    "@openmrs/esm-config": "10.0.1-pre.5240",
-    "@openmrs/esm-context": "10.0.1-pre.5240",
-    "@openmrs/esm-emr-api": "10.0.1-pre.5240",
-    "@openmrs/esm-error-handling": "10.0.1-pre.5240",
-    "@openmrs/esm-extensions": "10.0.1-pre.5240",
-    "@openmrs/esm-feature-flags": "10.0.1-pre.5240",
-    "@openmrs/esm-globals": "10.0.1-pre.5240",
-    "@openmrs/esm-navigation": "10.0.1-pre.5240",
-    "@openmrs/esm-state": "10.0.1-pre.5240",
-    "@openmrs/esm-utils": "10.0.1-pre.5240",
+    "@openmrs/esm-api": "10.0.1-pre.5251",
+    "@openmrs/esm-config": "10.0.1-pre.5251",
+    "@openmrs/esm-context": "10.0.1-pre.5251",
+    "@openmrs/esm-emr-api": "10.0.1-pre.5251",
+    "@openmrs/esm-error-handling": "10.0.1-pre.5251",
+    "@openmrs/esm-extensions": "10.0.1-pre.5251",
+    "@openmrs/esm-feature-flags": "10.0.1-pre.5251",
+    "@openmrs/esm-globals": "10.0.1-pre.5251",
+    "@openmrs/esm-navigation": "10.0.1-pre.5251",
+    "@openmrs/esm-state": "10.0.1-pre.5251",
+    "@openmrs/esm-utils": "10.0.1-pre.5251",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@vitest/coverage-v8": "^4.1.2",

package/src/useVisit.ts

@@ -50,7 +50,17 @@ export interface VisitReturnType {
  * @param representation The custom representation of the visit
  */
 export function useVisit(patientUuid: string, representation = defaultVisitCustomRepresentation): VisitReturnType {
-  const { patientUuid: visitStorePatientUuid, manuallySetVisitUuid, setVisitContext } = useVisitContextStore();
+  // The callback we register has to exist before we read the store, but the mutate functions
+  // it calls come from SWR calls that are keyed off what the store holds. Registering a stable
+  // indirection through a ref breaks that cycle, so the store is read once per hook rather than
+  // once to get the key and again to register.
+  const mutateVisitRef = useRef<() => void>(undefined);
+  const registeredMutateVisit = useCallback(() => mutateVisitRef.current?.(), []);
+  const {
+    patientUuid: visitStorePatientUuid,
+    manuallySetVisitUuid,
+    setVisitContext,
+  } = useVisitContextStore(registeredMutateVisit);
   // Ignore the visit store data if it is not for this patient
   const retrospectiveVisitUuid = patientUuid && visitStorePatientUuid == patientUuid ? manuallySetVisitUuid : null;
   const activeVisitUrlSuffix = `?patient=${patientUuid}&v=${representation}&includeInactive=false`;
@@ -111,7 +121,9 @@ export function useVisit(patientUuid: string, representation = defaultVisitCusto
     retroMutate();
   }, [activeMutate, retroMutate]);
 
-  useVisitContextStore(mutateVisit);
+  useEffect(() => {
+    mutateVisitRef.current = mutateVisit;
+  }, [mutateVisit]);
 
   const waitingForData = Boolean(!activeData || (retrospectiveVisitUuid && !retroData));
   const hasRelevantError = Boolean(retrospectiveVisitUuid ? retroError : activeError);

package/src/useVisitContextStore.test.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { act, render, renderHook } from '@testing-library/react';
+import { getVisitStore } from '@openmrs/esm-emr-api';
+import { useVisitContextStore } from './useVisitContextStore';
+
+/** Counts calls to `setState` on the visit store for the duration of `run`. */
+function countStoreWrites(run: () => void) {
+  const store = getVisitStore();
+  const setState = store.setState;
+  let writes = 0;
+  store.setState = ((...args: Parameters<typeof setState>) => {
+    writes++;
+    return setState(...args);
+  }) as typeof setState;
+
+  try {
+    run();
+  } finally {
+    store.setState = setState;
+  }
+
+  return writes;
+}
+
+describe('useVisitContextStore', () => {
+  it('invokes every registered callback when mutateVisit is called', () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { result } = renderHook(() => useVisitContextStore(first));
+    renderHook(() => useVisitContextStore(second));
+
+    act(() => result.current.mutateVisit());
+
+    expect(first).toHaveBeenCalledTimes(1);
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it('stops invoking a callback once its component unmounts', () => {
+    const callback = vi.fn();
+
+    const { result } = renderHook(() => useVisitContextStore());
+    const { unmount } = renderHook(() => useVisitContextStore(callback));
+
+    act(() => result.current.mutateVisit());
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    unmount();
+    act(() => result.current.mutateVisit());
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not write to the store when registering or unregistering a callback', () => {
+    let unmount = () => {};
+
+    const mountWrites = countStoreWrites(() => {
+      unmount = renderHook(() => useVisitContextStore(() => {})).unmount;
+    });
+    expect(mountWrites).toBe(0);
+
+    expect(countStoreWrites(unmount)).toBe(0);
+  });
+
+  it('does not write to the store when mutateVisit is called', () => {
+    const { result } = renderHook(() => useVisitContextStore(() => {}));
+
+    expect(countStoreWrites(() => act(() => result.current.mutateVisit()))).toBe(0);
+  });
+
+  it('keeps mutate callbacks out of the persisted store state', () => {
+    renderHook(() => useVisitContextStore(() => {}));
+
+    act(() => {
+      getVisitStore().setState({ patientUuid: 'patient-123' });
+    });
+
+    const persisted = JSON.parse(window.sessionStorage.getItem('openmrs:visitStoreState') ?? '{}');
+    expect(persisted).toEqual({ patientUuid: 'patient-123', manuallySetVisitUuid: null });
+  });
+
+  it('does not re-render already-mounted consumers as more consumers mount', () => {
+    const renderCounts: Array<number> = [];
+
+    // Memoized so that re-rendering the parent to add a row does not itself re-render the
+    // existing rows; anything counted here came from the store notifying its subscribers.
+    const Row = React.memo(function Row({ index }: { index: number }) {
+      renderCounts[index] = (renderCounts[index] ?? 0) + 1;
+      const mutate = useCallback(() => {}, []);
+      useVisitContextStore(mutate);
+      return null;
+    });
+
+    function Screen({ count }: { count: number }) {
+      return (
+        <>
+          {Array.from({ length: count }, (_, index) => (
+            <Row index={index} key={index} />
+          ))}
+        </>
+      );
+    }
+
+    const rows = 15;
+    const { rerender } = render(<Screen count={0} />);
+    for (let count = 1; count <= rows; count++) {
+      rerender(<Screen count={count} />);
+    }
+
+    // Each row should have rendered exactly once: mounting a row must not notify the rows
+    // already on screen, or filling a screen of N rows costs O(N²) renders.
+    expect(renderCounts).toEqual(Array.from({ length: rows }, () => 1));
+  });
+
+  it('re-renders consumers when the visit context itself changes', () => {
+    const { result } = renderHook(() => useVisitContextStore());
+
+    act(() => {
+      result.current.setVisitContext({
+        uuid: 'visit-1',
+        patient: { uuid: 'patient-123' },
+      } as Parameters<typeof result.current.setVisitContext>[0]);
+    });
+
+    expect(result.current.manuallySetVisitUuid).toBe('visit-1');
+    expect(result.current.patientUuid).toBe('patient-123');
+  });
+});

package/src/useVisitContextStore.ts

@@ -2,6 +2,24 @@ import { useEffect, useId } from 'react';
 import { getVisitStore, type Visit, type VisitStoreState } from '@openmrs/esm-emr-api';
 import { type Actions, useStoreWithActions } from './useStore';
 
+/**
+ * The mutate callbacks to invoke when visit data changes, keyed by the `useId()` of the
+ * component that registered each one.
+ */
+const mutateVisitCallbacks = new Map<string, () => void>();
+
+/**
+ * Invokes every registered mutate callback, revalidating visit data across the application.
+ *
+ * Iterates over a copy so that a callback which registers or unregisters another does not
+ * disturb the traversal.
+ */
+function mutateVisit() {
+  for (const mutateCallback of Array.from(mutateVisitCallbacks.values())) {
+    mutateCallback();
+  }
+}
+
 const visitContextStoreActions = {
   setVisitContext(_: VisitStoreState, newSelectedVisit: Visit | null) {
     if (newSelectedVisit == null) {
@@ -12,46 +30,32 @@ const visitContextStoreActions = {
       patientUuid: newSelectedVisit.patient?.uuid,
     };
   },
-  mutateVisit(currState: VisitStoreState) {
-    for (const mutateCallback of Object.values(currState.mutateVisitCallbacks ?? {})) {
-      mutateCallback();
-    }
-    return {};
-  },
 } satisfies Actions<VisitStoreState>;
 
 /**
  * A hook to return the visit context store and corresponding actions.
+ *
  * @param mutateVisitCallback An optional mutate callback to register. If provided, the
- * store action's `mutateVisit` function will invoke this callback (along with any other
- * callbacks also registered into the store)
+ * returned `mutateVisit` function will invoke this callback (along with any other
+ * callbacks registered by other components). Pass a callback with a stable identity;
+ * one that changes on every render re-registers on every render.
  * @returns
  */
 export function useVisitContextStore(mutateVisitCallback?: () => void) {
   const id = useId();
 
   useEffect(() => {
-    const visitStore = getVisitStore();
-
-    // register the callback if it exists
-    if (mutateVisitCallback) {
-      visitStore.setState({
-        mutateVisitCallbacks: {
-          ...visitStore.getState().mutateVisitCallbacks,
-          [id]: mutateVisitCallback,
-        },
-      });
+    if (!mutateVisitCallback) {
+      return;
     }
 
-    // deregister the callback on unmount, if it exists
+    mutateVisitCallbacks.set(id, mutateVisitCallback);
     return () => {
-      if (mutateVisitCallback) {
-        const mutateVisitCallbacks = { ...visitStore.getState().mutateVisitCallbacks };
-        delete mutateVisitCallbacks[id];
-        visitStore.setState({ mutateVisitCallbacks });
-      }
+      mutateVisitCallbacks.delete(id);
     };
   }, [id, mutateVisitCallback]);
 
-  return useStoreWithActions(getVisitStore(), visitContextStoreActions);
+  const visitContextStore = useStoreWithActions(getVisitStore(), visitContextStoreActions);
+
+  return { ...visitContextStore, mutateVisit };
 }