remove pre-preloading modules code

Author: JohnC-80

src/AppRoutes.js

@@ -1,4 +1,4 @@
-import React, { useMemo, Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 import { Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
@@ -12,7 +12,6 @@ import { invokeEventHandlers } from './handlerService';
 import { packageName } from './constants';
 import { ModuleHierarchyProvider } from './components';
 import events from './events';
-import loadRemoteComponent from './loadRemoteComponent';
 
 // Process and cache "app" type modules and render the routes
 const AppRoutes = ({ modules, stripes }) => {
@@ -24,13 +23,11 @@ const AppRoutes = ({ modules, stripes }) => {
       const perm = `module.${name}.enabled`;
       if (!stripes.hasPerm(perm)) return null;
 
-      const RemoteComponent = React.lazy(() => loadRemoteComponent(module.url, module.name));
       const connect = connectFor(module.module, stripes.epics, stripes.logger);
 
       let ModuleComponent;
-
       try {
-        ModuleComponent = connect(RemoteComponent);
+        ModuleComponent = connect(module.getModule());
       } catch (error) {
         console.error(error); // eslint-disable-line
         throw Error(error);
@@ -51,41 +48,39 @@ const AppRoutes = ({ modules, stripes }) => {
   }, [modules.app, stripes]);
 
   return cachedModules.map(({ ModuleComponent, connect, module, name, moduleStripes, stripes: propsStripes, displayName }) => (
-    <Suspense fallback={<LoadingView />}>
-      <Route
-        path={module.route}
-        key={module.route}
-        render={props => {
-          const data = { displayName, name };
+    <Route
+      path={module.route}
+      key={module.route}
+      render={props => {
+        const data = { displayName, name };
 
-          // allow SELECT_MODULE handlers to intervene
-          const handlerComponents = invokeEventHandlers(events.SELECT_MODULE, moduleStripes, modules.handler, data);
-          if (handlerComponents.length) {
-            return handlerComponents.map(Handler => (<Handler stripes={propsStripes} data={data} />));
-          }
+        // allow SELECT_MODULE handlers to intervene
+        const handlerComponents = invokeEventHandlers(events.SELECT_MODULE, moduleStripes, modules.handler, data);
+        if (handlerComponents.length) {
+          return handlerComponents.map(Handler => (<Handler stripes={propsStripes} data={data} />));
+        }
 
-          return (
-            <StripesContext.Provider value={moduleStripes}>
-              <ModuleHierarchyProvider module={module.module}>
-                <div id={`${name}-module-display`} data-module={module.module} data-version={module.version}>
-                  <RouteErrorBoundary
-                    escapeRoute={module.home ?? module.route}
-                    moduleName={displayName}
-                    stripes={moduleStripes}
-                  >
-                    <TitleManager page={displayName}>
-                      <Suspense fallback={<LoadingView />}>
-                        <ModuleComponent {...props} connect={connect} stripes={moduleStripes} actAs="app" />
-                      </Suspense>
-                    </TitleManager>
-                  </RouteErrorBoundary>
-                </div>
-              </ModuleHierarchyProvider>
-            </StripesContext.Provider>
-          );
-        }}
-      />
-    </Suspense>
+        return (
+          <StripesContext.Provider value={moduleStripes}>
+            <ModuleHierarchyProvider module={module.module}>
+              <div id={`${name}-module-display`} data-module={module.module} data-version={module.version}>
+                <RouteErrorBoundary
+                  escapeRoute={module.home ?? module.route}
+                  moduleName={displayName}
+                  stripes={moduleStripes}
+                >
+                  <TitleManager page={displayName}>
+                    <Suspense fallback={<LoadingView />}>
+                      <ModuleComponent {...props} connect={connect} stripes={moduleStripes} actAs="app" />
+                    </Suspense>
+                  </TitleManager>
+                </RouteErrorBoundary>
+              </div>
+            </ModuleHierarchyProvider>
+          </StripesContext.Provider>
+        );
+      }}
+    />
   ));
 };
 

src/RootWithIntl.js

@@ -18,6 +18,7 @@ import {
   MainContainer,
   MainNav,
   ModuleContainer,
+  ModuleTranslator,
   TitledRoute,
   Front,
   OIDCRedirect,
@@ -201,8 +202,8 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
             </TitleManager>
           </EntitlementLoader>
         </ModuleTranslator>
-      </CalloutContext.Provider >
-    </StripesContext.Provider >
+      </CalloutContext.Provider>
+    </StripesContext.Provider>
   );
 };
 

src/components/EntitlementLoader.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useStripes } from '../StripesContext';
 import { ModulesContext, useModules, modulesInitialState } from '../ModulesContext';
 import { loadEntitlement } from './loadEntitlement';
+import { registerRemotes, loadRemote } from '@module-federation/runtime';
 
 /**
  * preloadModules
@@ -195,6 +196,7 @@ const EntitlementLoader = ({ children }) => {
 
         // if the signal is aborted, avoid all subsequent fetches, state updates...
         if (!signal.aborted) {
+          fetchMFStats();
           try {
             // load module assets (translations, icons)...
             remotesWithLoadedAssets = await loadAllModuleAssets(stripes, remotes);
@@ -203,7 +205,7 @@ const EntitlementLoader = ({ children }) => {
           }
 
           const remotesToRegister = remotes.map(remote => ({
-            name: remote.name, entry: remote.entry
+            name: remote.name, entry: remote.location
           }));
           registerRemotes(remotesToRegister);
 
@@ -217,7 +219,7 @@ const EntitlementLoader = ({ children }) => {
           setRemoteModules(cachedModules);
         }
       };
-      fetchMFStats();
+
       fetchRegistry();
     }
     return () => {

src/components/index.js

@@ -13,8 +13,10 @@ export { default as QueryStateUpdater } from './MainNav/QueryStateUpdater';
 export { AppOrderProvider } from './MainNav/AppOrderProvider';
 export { default as ModuleContainer } from './ModuleContainer';
 export { withModule, withModules } from './Modules';
+export { default as ModuleTranslator } from './ModuleTranslator';
 export { default as OrganizationLogo } from './OrganizationLogo';
 export { default as OverlayContainer } from './OverlayContainer';
+export { default as Root } from './Root';
 export { default as SSOLogin } from './SSOLogin';
 export { default as SystemSkeleton } from './SystemSkeleton';
 export { default as TitledRoute } from './TitledRoute';