(fix) Notify config system when app is fully loaded

packages/framework/esm-config/src/module-config/module-config.ts

@@ -185,10 +185,25 @@ export function defineConfigSchema(moduleName: string, schema: ConfigSchema) {
  * @param moduleName
  */
 export function registerModuleWithConfigSystem(moduleName: string) {
-  const state = configInternalStore.getState();
-  configInternalStore.setState({
+  configInternalStore.setState((state) => ({
+    ...state,
     schemas: { ...state.schemas, [moduleName]: implicitConfigSchema },
-  });
+  }));
+}
+
+/**
+ * This alerts the configuration system that a module has been loaded.
+ *
+ * This should only be used in esm-app-shell.
+ *
+ * @internal
+ * @param moduleName
+ */
+export function registerModuleLoad(moduleName: string) {
+  configInternalStore.setState((state) => ({
+    ...state,
+    moduleLoaded: { ...state.moduleLoaded, [moduleName]: true },
+  }));
 }
 
 /**
@@ -201,10 +216,10 @@ export function registerModuleWithConfigSystem(moduleName: string) {
  * @param namespace
  */
 export function registerTranslationNamespace(namespace: string) {
-  const state = configInternalStore.getState();
-  configInternalStore.setState({
+  configInternalStore.setState((state) => ({
+    ...state,
     schemas: { ...state.schemas, [namespace]: translationOverridesSchema },
-  });
+  }));
 }
 
 /**
@@ -235,9 +250,10 @@ export function defineExtensionConfigSchema(extensionName: string, schema: Confi
     );
   }
 
-  configInternalStore.setState({
+  configInternalStore.setState((state) => ({
+    ...state,
     schemas: { ...state.schemas, [extensionName]: enhancedSchema },
-  });
+  }));
 }
 
 export function provide(config: Config, sourceName = 'provided') {

packages/framework/esm-framework/docs/API.md

@@ -1736,7 +1736,7 @@ ___
 
 • `Const` **MaybeIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<{ `fallback?`: `ReactNode` ; `icon`: `string`  } & [`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
 
-This is a utility component that takes an `icon` and render it if the sprite for the icon
+This is a utility component that takes an `icon` and renders it if the sprite for the icon
 is available. The goal is to make it easier to conditionally render configuration-specified icons.
 
 **`example`**
@@ -1754,12 +1754,12 @@ ___
 
 • `Const` **MaybePictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<{ `fallback?`: `ReactNode` ; `pictogram`: `string`  } & [`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
 
-This is a utility component that takes an `icon` and render it if the sprite for the icon
-is available. The goal is to make it easier to conditionally render configuration-specified icons.
+This is a utility component that takes an `pictogram` and render it if the sprite for the pictogram
+is available. The goal is to make it easier to conditionally render configuration-specified pictograms.
 
 **`example`**
 ```tsx
-  <MaybeIcon icon='omrs-icon-baby' className={styles.myIconStyles} />
+  <MaybePictogram pictogram='omrs-icon-baby' className={styles.myPictogramStyles} />
 ```
 
 #### Defined in
@@ -3391,7 +3391,7 @@ for more information about defining a config schema.
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:227](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L227)
+[packages/framework/esm-config/src/module-config/module-config.ts:242](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L242)
 
 ___
 
@@ -3423,7 +3423,7 @@ of the execution of a function.
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:259](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L259)
+[packages/framework/esm-config/src/module-config/module-config.ts:275](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L275)
 
 ___
 
@@ -3444,7 +3444,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-config/src/module-config/module-config.ts:243](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L243)
+[packages/framework/esm-config/src/module-config/module-config.ts:259](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-config/src/module-config/module-config.ts#L259)
 
 ___
 

packages/framework/esm-framework/src/integration-tests/extension-config.test.tsx

@@ -14,6 +14,7 @@ import {
   defineConfigSchema,
   provide,
   Type,
+  registerModuleLoad,
   temporaryConfigStore,
   configInternalStore,
   getExtensionSlotsConfigStore,
@@ -46,6 +47,7 @@ describe('Interaction between configuration and extension systems', () => {
     attach('A slot', 'Fred');
     attach('A slot', 'Wilma');
     defineConfigSchema('esm-flintstone', {});
+    registerModuleLoad('esm-flintstone');
 
     provide({
       'esm-flintstone': {
@@ -87,6 +89,8 @@ describe('Interaction between configuration and extension systems', () => {
     defineConfigSchema('esm-flintstone', {
       town: { _type: Type.String, _default: 'Bedrock' },
     });
+    registerModuleLoad('esm-flintstone');
+
     attach('Flintstone slot', 'Pebbles');
     attach('Future slot', 'Pebbles');
     provide({
@@ -136,6 +140,8 @@ describe('Interaction between configuration and extension systems', () => {
     defineConfigSchema('esm-characters', {
       name: { _type: Type.String, _default: '(no-name)' },
     });
+    registerModuleLoad('esm-characters');
+
     attach('Flintstone slot', 'pet#Dino');
     attach('Flintstone slot', 'pet#BabyPuss');
     provide({
@@ -183,6 +189,7 @@ describe('Interaction between configuration and extension systems', () => {
     registerSimpleExtension('Pearl', 'esm-slaghoople');
     attach('A slot', 'Pearl');
     defineConfigSchema('esm-slaghoople', {});
+    registerModuleLoad('esm-flintstone');
 
     const App = openmrsComponentDecorator({
       moduleName: 'esm-slaghoople',
@@ -218,6 +225,7 @@ describe('Interaction between configuration and extension systems', () => {
     registerSimpleExtension('Mr. Slate', 'esm-flintstone', true);
     attach('A slot', 'Mr. Slate');
     defineConfigSchema('esm-flintstone', { tie: { _default: 'green' } });
+    registerModuleLoad('esm-flintstone');
 
     const App = openmrsComponentDecorator({
       moduleName: 'esm-quarry',
@@ -256,6 +264,8 @@ describe('Interaction between configuration and extension systems', () => {
     registerSimpleExtension('Bamm-Bamm', 'esm-flintstone', false);
     attach('A slot', 'Bamm-Bamm');
     defineConfigSchema('esm-flintstone', { clothes: { _default: 'leopard' } });
+    registerModuleLoad('esm-flintstone');
+
     function RootComponent() {
       const store = useExtensionStore();
       return (
@@ -329,6 +339,8 @@ describe('Interaction between configuration and extension systems', () => {
     attach('A slot', 'Wilma');
     defineConfigSchema('esm-bedrock', {});
     defineConfigSchema('esm-flintstones', {});
+    registerModuleLoad('esm-bedrock');
+    registerModuleLoad('esm-flintstones');
     provide({
       'esm-bedrock': {
         'Display conditions': {
@@ -389,6 +401,7 @@ describe('Interaction between configuration and extension systems', () => {
     registerSimpleExtension('Schmoo', 'esm-bedrock', true);
     attach('A slot', 'Schmoo');
     defineConfigSchema('esm-bedrock', {});
+    registerModuleLoad('esm-bedrock');
     provide({
       'esm-bedrock': {
         'Display conditions': {
@@ -448,6 +461,8 @@ describe('Interaction between configuration and extension systems', () => {
     attach('A slot', 'Wilma');
     defineConfigSchema('esm-bedrock', {});
     defineConfigSchema('esm-flintstones', {});
+    registerModuleLoad('esm-bedrock');
+    registerModuleLoad('esm-flintstones');
     provide({ 'esm-bedrock': {} });
     provide({ 'esm-flintstones': {} });
 

packages/framework/esm-routes/src/loaders/app.ts

@@ -1,4 +1,5 @@
 import { importDynamic } from '@openmrs/esm-dynamic-loading';
+import { registerModuleLoad } from '@openmrs/esm-config';
 import { type LifeCycles } from 'single-spa';
 import { emptyLifecycle } from './helpers';
 
@@ -68,10 +69,16 @@ export async function initializeApp(appName: string, module?: Module) {
       if (Object.hasOwn(_module, 'startupApp')) {
         const startup = _module['startupApp'];
         if (typeof startup === 'function') {
-          return Promise.resolve(startup()).then(resolve).catch(reject);
+          return Promise.resolve(startup())
+            .then(() => {
+              registerModuleLoad(appName);
+              resolve(null);
+            })
+            .catch(reject);
         }
       }
 
+      registerModuleLoad(appName);
       resolve(null);
     }));
   } else {