@openmrs/esm-react-utils 5.1.1-pre.956 → 5.1.1-pre.977

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "5.1.1-pre.956",
+  "version": "5.1.1-pre.977",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -56,12 +56,12 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^5.1.1-pre.956",
-    "@openmrs/esm-config": "^5.1.1-pre.956",
-    "@openmrs/esm-error-handling": "^5.1.1-pre.956",
-    "@openmrs/esm-extensions": "^5.1.1-pre.956",
-    "@openmrs/esm-feature-flags": "^5.1.1-pre.956",
-    "@openmrs/esm-globals": "^5.1.1-pre.956",
+    "@openmrs/esm-api": "^5.1.1-pre.977",
+    "@openmrs/esm-config": "^5.1.1-pre.977",
+    "@openmrs/esm-error-handling": "^5.1.1-pre.977",
+    "@openmrs/esm-extensions": "^5.1.1-pre.977",
+    "@openmrs/esm-feature-flags": "^5.1.1-pre.977",
+    "@openmrs/esm-globals": "^5.1.1-pre.977",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
     "react": "^18.1.0",
@@ -70,5 +70,5 @@
     "rxjs": "^6.5.3",
     "webpack": "^5.88.0"
   },
-  "gitHead": "927a57eaf6b330bc5c009f9a2f4436133ea8ffc5"
+  "gitHead": "2f86869e3d798182626597f57691400b1bdbca11"
 }

package/src/useConfig.test.tsx

@@ -20,6 +20,12 @@ function RenderConfig(props) {
   return <button>{config[props.configKey]}</button>;
 }
 
+function RenderExternalConfig(props) {
+  const config = useConfig({ externalModuleName: props.externalModuleName });
+
+  return <button>{config[props.configKey]}</button>;
+}
+
 function clearConfig() {
   mockConfigInternalStore.resetMock();
 }
@@ -297,4 +303,40 @@ describe(`useConfig in an extension`, () => {
       expect(screen.findByText("Yet another thing")).toBeTruthy()
     );
   });
+
+  it("can optionally load an external module's configuration", async () => {
+    defineConfigSchema("first-module", {
+      thing: {
+        _default: "first thing",
+      },
+    });
+
+    defineConfigSchema("second-module", {
+      thing: {
+        _default: "second thing",
+      },
+    });
+
+    render(
+      <React.Suspense fallback={<div>Suspense!</div>}>
+        <ComponentContext.Provider
+          value={{
+            moduleName: "first-module",
+            extension: {
+              extensionSlotName: "fooSlot",
+              extensionSlotModuleName: "slot-mod",
+              extensionId: "fooExt#id1",
+            },
+          }}
+        >
+          <RenderExternalConfig
+            externalModuleName="second-module"
+            configKey="thing"
+          />
+        </ComponentContext.Provider>
+      </React.Suspense>
+    );
+
+    await waitFor(() => expect(screen.findByText("second thing")).toBeTruthy());
+  });
 });

package/src/useConfig.ts

@@ -157,16 +157,24 @@ function useNormalConfig(moduleName: string) {
   return state;
 }
 
+interface UseConfigOptions {
+  /** An external module to load the configuration from. This option should only be used if
+      absolutely necessary as it can end up making frontend modules coupled to one another. */
+  externalModuleName?: string;
+}
+
 /**
  * Use this React Hook to obtain your module's configuration.
+ *
+ * @param options Additional options that can be passed to useConfig()
  */
-export function useConfig<
-  T = Omit<ConfigObject, "Display conditions" | "Translation overrides">
->() {
+export function useConfig<T = Record<string, any>>(options?: UseConfigOptions) {
   // This hook uses the config of the MF defining the component.
   // If the component is used in an extension slot then the slot
   // may override (part of) its configuration.
-  const { moduleName, extension } = useContext(ComponentContext);
+  const { moduleName: contextModuleName, extension } =
+    useContext(ComponentContext);
+  const moduleName = options?.externalModuleName ?? contextModuleName;
 
   if (!moduleName && !extension) {
     throw Error(errorMessage);
@@ -175,11 +183,11 @@ export function useConfig<
   const normalConfig = useNormalConfig(moduleName);
   const extensionConfig = useExtensionConfig(extension);
   const config = useMemo(
-    () => ({
-      ...normalConfig,
-      ...extensionConfig,
-    }),
-    [normalConfig, extensionConfig]
+    () =>
+      options?.externalModuleName && moduleName === options.externalModuleName
+        ? { ...normalConfig }
+        : { ...normalConfig, ...extensionConfig },
+    [moduleName, options?.externalModuleName, normalConfig, extensionConfig]
   );
 
   return config as T;