@openmrs/esm-react-utils 10.0.1-pre.5738 → 10.0.1-pre.5741

package/.turbo/turbo-build.log

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

package/dist/useConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfig.d.ts","sourceRoot":"","sources":["../src/useConfig.ts"],"names":[],"mappings":"AAqIA,MAAM,WAAW,gBAAgB;IAC/B;gGAC4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAqB1D,CAAC,CACnB"}
+{"version":3,"file":"useConfig.d.ts","sourceRoot":"","sources":["../src/useConfig.ts"],"names":[],"mappings":"AAqJA,MAAM,WAAW,gBAAgB;IAC/B;gGAC4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAqB1D,CAAC,CACnB"}

package/dist/useConfig.js

@@ -26,26 +26,39 @@ function readInitialExtensionConfig(store, extension) {
     }
     return null;
 }
-function createConfigPromise(store) {
-    return new Promise((resolve)=>{
+/**
+ * The promise a suspended `useConfig()` throws, so every component waiting on the same config waits on
+ * one promise and a re-render throws the same one rather than starting again.
+ *
+ * The entry is dropped once it settles: an extension's config exists only while that extension is
+ * mounted, so the same id can have to wait a second time and a settled promise cannot describe that.
+ */ function whenConfigReady(cacheId, store, read) {
+    const cached = promises[cacheId];
+    if (cached) {
+        return cached;
+    }
+    const promise = new Promise((resolve)=>{
+        const current = read(store.getState());
+        if (current) {
+            resolve(current);
+            return;
+        }
         const unsubscribe = store.subscribe((state)=>{
-            if (state.loaded && state.config) {
-                resolve(state.config);
+            const config = read(state);
+            if (config) {
                 unsubscribe();
+                resolve(config);
             }
         });
     });
-}
-function createExtensionConfigPromise(store, extension) {
-    return new Promise((resolve)=>{
-        const unsubscribe = store.subscribe((state)=>{
-            const extConfig = getExtensionConfigFromStore(state, extension.extensionSlotName, extension.extensionId);
-            if (extConfig.loaded && extConfig.config) {
-                resolve(extConfig.config);
-                unsubscribe();
-            }
-        });
+    promises[cacheId] = promise;
+    void promise.then(()=>{
+        // Guarded so that a later wait under the same id, started after this one settled, is left alone.
+        if (promises[cacheId] === promise) {
+            delete promises[cacheId];
+        }
     });
+    return promise;
 }
 function useConfigStore(store) {
     const [state, setState] = useState(readInitialConfig(store));
@@ -82,12 +95,11 @@ function useExtensionConfig(extension) {
     const store = useMemo(getExtensionsConfigStore, []);
     const state = useExtensionConfigStore(store, extension);
     if (!state && extension) {
-        const cacheId = `${extension.extensionSlotName}-${extension.extensionId}`;
-        if (!promises[cacheId] && store) {
-            promises[cacheId] = createExtensionConfigPromise(store, extension);
-        }
         // React will prevent the client component from rendering until the promise resolves
-        throw promises[cacheId];
+        throw whenConfigReady(`${extension.extensionSlotName}-${extension.extensionId}`, store, (storeState)=>{
+            const extConfig = getExtensionConfigFromStore(storeState, extension.extensionSlotName, extension.extensionId);
+            return extConfig.loaded ? extConfig.config : null;
+        });
     }
     return state || {};
 }
@@ -95,14 +107,10 @@ function useNormalConfig(moduleName) {
     const store = useMemo(()=>getConfigStore(moduleName), [
         moduleName
     ]);
-    const cacheId = moduleName;
     const state = useConfigStore(store);
     if (!state) {
-        if (!promises[cacheId]) {
-            promises[cacheId] = createConfigPromise(store);
-        }
         // React will prevent the client component from rendering until the promise resolves
-        throw promises[cacheId];
+        throw whenConfigReady(moduleName, store, (storeState)=>storeState.loaded ? storeState.config : null);
     }
     return state;
 }

package/package.json

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

package/src/useConfig.suspense.test.tsx

@@ -0,0 +1,226 @@
+import React, { Suspense } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import {
+  configExtensionStore,
+  configInternalStore,
+  defineConfigSchema,
+  getConfigStore,
+  getExtensionsConfigStore,
+} from '@openmrs/esm-config';
+import { ComponentContext } from './ComponentContext';
+import { useConfig } from './useConfig';
+
+const slotName = 'test-slot';
+const slotModuleName = 'slot-module';
+const extensionId = 'thing#instance';
+const extensionModuleName = 'ext-module';
+
+/** How many times `ShowConfig` has started rendering, including attempts that suspended. */
+let renders = 0;
+
+function ShowConfig() {
+  renders++;
+  const config = useConfig<{ thing: string }>();
+  return <div>{config.thing}</div>;
+}
+
+function renderExtension() {
+  return render(
+    <Suspense fallback={<div>suspended</div>}>
+      <ComponentContext.Provider
+        value={{
+          moduleName: extensionModuleName,
+          featureName: 'ext-feature',
+          extension: { extensionSlotName: slotName, extensionSlotModuleName: slotModuleName, extensionId },
+        }}
+      >
+        <ShowConfig />
+      </ComponentContext.Provider>
+    </Suspense>,
+  );
+}
+
+/**
+ * Lets a suspended component sit for a while and returns how many times it tried to render meanwhile.
+ * Re-throwing a promise that has already settled makes React retry at once, over and over, rather
+ * than wait, which is how a stale cached promise shows up.
+ */
+async function rendersWhileWaiting() {
+  renders = 0;
+  await act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+  return renders;
+}
+
+function renderModule(moduleName: string) {
+  return render(
+    <Suspense fallback={<div>suspended</div>}>
+      <ComponentContext.Provider value={{ moduleName, featureName: 'f' }}>
+        <ShowConfig />
+      </ComponentContext.Provider>
+    </Suspense>,
+  );
+}
+
+/**
+ * Counts the subscriptions on `store` made from now on that are still live, so a leak shows up as a
+ * non-zero count. The config system's own subscriptions, made before this is called, are not counted.
+ */
+function countSubscriptions(store: { subscribe: (listener: any) => () => void }) {
+  const realSubscribe = store.subscribe.bind(store);
+  const counter = { live: 0 };
+
+  store.subscribe = (listener) => {
+    counter.live++;
+    const unsubscribe = realSubscribe(listener);
+
+    return () => {
+      counter.live--;
+      unsubscribe();
+    };
+  };
+
+  return counter;
+}
+
+/** Registers the extension as mounted, which is what drives the config system to derive its config. */
+function mountExtension() {
+  act(() => {
+    configExtensionStore.setState({
+      mountedExtensions: [{ slotName, slotModuleName, extensionId, extensionModuleName }],
+    });
+  });
+}
+
+/** Unregisters it, which drops its entry from the extensions config store. */
+function unmountExtension() {
+  act(() => {
+    configExtensionStore.setState({ mountedExtensions: [] });
+  });
+}
+
+afterEach(() => {
+  configExtensionStore.setState({ mountedExtensions: [] });
+  configInternalStore.setState({ ...configInternalStore.getState(), providedConfigs: [] });
+});
+
+describe('useConfig suspense', () => {
+  it('renders an extension whose config arrives after the first render', async () => {
+    defineConfigSchema(extensionModuleName, { thing: { _default: 'the thing' } });
+
+    renderExtension();
+    expect(screen.getByText('suspended')).toBeInTheDocument();
+
+    mountExtension();
+
+    expect(await screen.findByText('the thing')).toBeInTheDocument();
+  });
+
+  it('renders an extension that mounts, unmounts and mounts again', async () => {
+    defineConfigSchema(extensionModuleName, { thing: { _default: 'the thing' } });
+
+    // First cycle: suspends, config arrives, renders.
+    const view = renderExtension();
+    mountExtension();
+    expect(await screen.findByText('the thing')).toBeInTheDocument();
+
+    // The extension goes away, taking its config store entry with it.
+    view.unmount();
+    unmountExtension();
+
+    // Second cycle: the same extension in the same slot waits under the same cache id as the first.
+    renderExtension();
+    expect(screen.getByText('suspended')).toBeInTheDocument();
+    expect(await rendersWhileWaiting()).toBeLessThanOrEqual(2);
+
+    mountExtension();
+
+    expect(await screen.findByText('the thing')).toBeInTheDocument();
+  });
+
+  it('renders a module whose config store loads while it is suspended', async () => {
+    const moduleName = 'preloaded-module';
+    defineConfigSchema(moduleName, { thing: { _default: 'preloaded thing' } });
+
+    const store = getConfigStore(moduleName);
+    const loaded = store.getState();
+
+    act(() => store.setState({ ...loaded, loaded: false, config: null }));
+
+    renderModule(moduleName);
+    expect(screen.getByText('suspended')).toBeInTheDocument();
+
+    act(() => store.setState(loaded));
+
+    expect(await screen.findByText('preloaded thing')).toBeInTheDocument();
+  });
+
+  it('renders a module whose config has already loaded without suspending', () => {
+    defineConfigSchema('loaded-module', { thing: { _default: 'already there' } });
+
+    renderModule('loaded-module');
+
+    expect(screen.getByText('already there')).toBeInTheDocument();
+  });
+
+  it('renders an extension whose config has already loaded without suspending', () => {
+    defineConfigSchema(extensionModuleName, { thing: { _default: 'the thing' } });
+    mountExtension();
+
+    renderExtension();
+
+    expect(screen.getByText('the thing')).toBeInTheDocument();
+  });
+
+  it('renders a module that suspends again after an earlier wait for it settled', async () => {
+    const moduleName = 'reloaded-module';
+    defineConfigSchema(moduleName, { thing: { _default: 'first' } });
+
+    const store = getConfigStore(moduleName);
+    const first = store.getState();
+
+    act(() => store.setState({ ...first, loaded: false, config: null }));
+    const view = renderModule(moduleName);
+    act(() => store.setState(first));
+    expect(await screen.findByText('first')).toBeInTheDocument();
+    view.unmount();
+
+    act(() => store.setState({ ...first, loaded: false, config: null }));
+    renderModule(moduleName);
+    expect(screen.getByText('suspended')).toBeInTheDocument();
+    expect(await rendersWhileWaiting()).toBeLessThanOrEqual(2);
+
+    act(() => store.setState({ ...first, config: { ...first.config, thing: 'second' } }));
+
+    expect(await screen.findByText('second')).toBeInTheDocument();
+  });
+
+  it('leaves no subscription on a module store once its wait settles and the component unmounts', async () => {
+    const moduleName = 'counted-module';
+    defineConfigSchema(moduleName, { thing: { _default: 'counted' } });
+
+    const store = getConfigStore(moduleName);
+    const loaded = store.getState();
+    act(() => store.setState({ ...loaded, loaded: false, config: null }));
+    const subscriptions = countSubscriptions(store);
+
+    const view = renderModule(moduleName);
+    act(() => store.setState(loaded));
+    expect(await screen.findByText('counted')).toBeInTheDocument();
+    view.unmount();
+
+    expect(subscriptions.live).toBe(0);
+  });
+
+  it('leaves no subscription on the extensions store once its wait settles and the component unmounts', async () => {
+    defineConfigSchema(extensionModuleName, { thing: { _default: 'the thing' } });
+    const subscriptions = countSubscriptions(getExtensionsConfigStore());
+
+    const view = renderExtension();
+    mountExtension();
+    expect(await screen.findByText('the thing')).toBeInTheDocument();
+    view.unmount();
+
+    expect(subscriptions.live).toBe(0);
+  });
+});

package/src/useConfig.ts

@@ -42,27 +42,51 @@ function readInitialExtensionConfig(store: StoreApi<ExtensionsConfigStore>, exte
   return null;
 }
 
-function createConfigPromise(store: StoreApi<ConfigStore>) {
-  return new Promise<ConfigObject>((resolve) => {
+/**
+ * The promise a suspended `useConfig()` throws, so every component waiting on the same config waits on
+ * one promise and a re-render throws the same one rather than starting again.
+ *
+ * The entry is dropped once it settles: an extension's config exists only while that extension is
+ * mounted, so the same id can have to wait a second time and a settled promise cannot describe that.
+ */
+function whenConfigReady<S>(
+  cacheId: string,
+  store: StoreApi<S>,
+  read: (state: S) => ConfigObject | null | undefined,
+): Promise<ConfigObject> {
+  const cached = promises[cacheId];
+
+  if (cached) {
+    return cached;
+  }
+
+  const promise = new Promise<ConfigObject>((resolve) => {
+    const current = read(store.getState());
+
+    if (current) {
+      resolve(current);
+      return;
+    }
+
     const unsubscribe = store.subscribe((state) => {
-      if (state.loaded && state.config) {
-        resolve(state.config);
+      const config = read(state);
+
+      if (config) {
         unsubscribe();
+        resolve(config);
       }
     });
   });
-}
 
-function createExtensionConfigPromise(store: StoreApi<ExtensionsConfigStore>, extension: ExtensionData) {
-  return new Promise<ConfigObject>((resolve) => {
-    const unsubscribe = store.subscribe((state) => {
-      const extConfig = getExtensionConfigFromStore(state, extension.extensionSlotName, extension.extensionId);
-      if (extConfig.loaded && extConfig.config) {
-        resolve(extConfig.config);
-        unsubscribe();
-      }
-    });
+  promises[cacheId] = promise;
+  void promise.then(() => {
+    // Guarded so that a later wait under the same id, started after this one settled, is left alone.
+    if (promises[cacheId] === promise) {
+      delete promises[cacheId];
+    }
   });
+
+  return promise;
 }
 
 function useConfigStore(store: StoreApi<ConfigStore>) {
@@ -101,14 +125,11 @@ function useExtensionConfig(extension: ExtensionData | undefined) {
   const state = useExtensionConfigStore(store, extension);
 
   if (!state && extension) {
-    const cacheId = `${extension.extensionSlotName}-${extension.extensionId}`;
-
-    if (!promises[cacheId] && store) {
-      promises[cacheId] = createExtensionConfigPromise(store, extension);
-    }
-
     // React will prevent the client component from rendering until the promise resolves
-    throw promises[cacheId];
+    throw whenConfigReady(`${extension.extensionSlotName}-${extension.extensionId}`, store, (storeState) => {
+      const extConfig = getExtensionConfigFromStore(storeState, extension.extensionSlotName, extension.extensionId);
+      return extConfig.loaded ? extConfig.config : null;
+    });
   }
 
   return state || {};
@@ -116,16 +137,11 @@ function useExtensionConfig(extension: ExtensionData | undefined) {
 
 function useNormalConfig(moduleName: string) {
   const store = useMemo(() => getConfigStore(moduleName), [moduleName]);
-  const cacheId = moduleName;
   const state = useConfigStore(store);
 
   if (!state) {
-    if (!promises[cacheId]) {
-      promises[cacheId] = createConfigPromise(store);
-    }
-
     // React will prevent the client component from rendering until the promise resolves
-    throw promises[cacheId];
+    throw whenConfigReady(moduleName, store, (storeState) => (storeState.loaded ? storeState.config : null));
   }
 
   return state;

package/src/useLayoutType.test.tsx

@@ -99,9 +99,7 @@ describe('isDesktop', () => {
   });
 
   it('identifies non-desktop layouts correctly', () => {
-    const nonDesktopLayouts = LAYOUT_CASES.map(([, layout]) => layout).filter(
-      (layout) => !isDesktop(layout),
-    );
+    const nonDesktopLayouts = LAYOUT_CASES.map(([, layout]) => layout).filter((layout) => !isDesktop(layout));
     expect(nonDesktopLayouts).toEqual(['phone']);
   });
 });