STRIPES-861: Setup module federation

bootstrap.js

@@ -0,0 +1,10 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './src/App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

index.js

@@ -57,7 +57,6 @@ export { tenantLocaleConfig } from './src/loginServices';
 export { getFullLocale } from './src/loginServices';
 export * from './src/consortiaServices';
 export { default as queryLimit } from './src/queryLimit';
-export { default as init } from './src/init';
 
 /* localforage wrappers hide the session key */
 export { getOkapiSession, getTokenExpiry, setTokenExpiry } from './src/loginServices';

package.json

@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.1",
+    "@folio/stripes-shared-context": "^1.0.0",
     "classnames": "^2.2.5",
     "core-js": "^3.26.1",
     "final-form": "^4.18.2",

src/App.js

@@ -2,6 +2,7 @@ import React, { Component, StrictMode } from 'react';
 import PropTypes from 'prop-types';
 import { okapi as okapiConfig, config } from 'stripes-config';
 import merge from 'lodash/merge';
+import { modulesInitialState } from '@folio/stripes-shared-context';
 
 import AppConfigError from './components/AppConfigError';
 import connectErrorEpic from './connectErrorEpic';
@@ -11,7 +12,6 @@ import configureStore from './configureStore';
 import gatherActions from './gatherActions';
 import { destroyStore } from './mainActions';
 import { getModules } from './entitlementService';
-import { modulesInitialState } from './ModulesContext';
 import css from './components/SessionEventContainer/style.css';
 
 import Root from './components/Root';

src/AppRoutes.js

@@ -1,4 +1,4 @@
-import { Suspense, useMemo } from 'react';
+import React, { useMemo, Suspense } from 'react';
 import { Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
@@ -12,6 +12,7 @@ import { getEventHandlers } 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 }) => {
@@ -23,11 +24,13 @@ 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(module.getModule());
+        ModuleComponent = connect(RemoteComponent);
       } catch (error) {
         console.error(error); // eslint-disable-line
         throw Error(error);
@@ -48,39 +51,41 @@ const AppRoutes = ({ modules, stripes }) => {
   }, [modules.app, stripes]);
 
   return cachedModules.map(({ ModuleComponent, connect, module, name, moduleStripes, stripes: propsStripes, displayName }) => (
-    <Route
-      path={module.route}
-      key={module.route}
-      render={props => {
-        const data = { displayName, name };
+    <Suspense fallback={<LoadingView />}>
+      <Route
+        path={module.route}
+        key={module.route}
+        render={props => {
+          const data = { displayName, name };
 
-        // allow SELECT_MODULE handlers to intervene
-        const handlerComponents = getEventHandlers(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 = getEventHandlers(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>
-        );
-      }}
-    />
+          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>
   ));
 };
 

src/CalloutContext.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 
-export const CalloutContext = React.createContext();
+import { CalloutContext } from '@folio/stripes-shared-context';
+
+export { CalloutContext };
 
 export const useCallout = () => {
   return useContext(CalloutContext);

src/ModulesContext.js

@@ -1,12 +1,5 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
+import { ModulesContext } from '@folio/stripes-shared-context';
 
-export const modulesInitialState = {
-  app: [],
-  handler: [],
-  plugin: [],
-  settings: [],
-};
-
-export const ModulesContext = React.createContext(modulesInitialState);
-export default ModulesContext;
 export const useModules = () => useContext(ModulesContext);
+export { ModulesContext, modulesInitialValue } from '@folio/stripes-shared-context';

src/RootWithIntl.js

@@ -18,7 +18,6 @@ import {
   MainContainer,
   MainNav,
   ModuleContainer,
-  ModuleTranslator,
   TitledRoute,
   Front,
   OIDCRedirect,
@@ -43,6 +42,7 @@ import StaleBundleWarning from './components/StaleBundleWarning';
 import { StripesContext } from './StripesContext';
 import { CalloutContext } from './CalloutContext';
 import AuthnLogin from './components/AuthnLogin';
+import RegistryLoader from './components/RegistryLoader';
 
 const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAuth, history = {}, queryClient }) => {
   const connect = connectFor('@folio/core', stripes.epics, stripes.logger);
@@ -71,7 +71,7 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
   return (
     <StripesContext.Provider value={connectedStripes}>
       <CalloutContext.Provider value={callout}>
-        <ModuleTranslator>
+        <RegistryLoader stripes={connectedStripes}>
           <TitleManager>
             <HotKeys
               keyMap={connectedStripes.bindings}
@@ -198,7 +198,7 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
               </Provider>
             </HotKeys>
           </TitleManager>
-        </ModuleTranslator>
+        </RegistryLoader>
       </CalloutContext.Provider>
     </StripesContext.Provider>
   );

src/StripesContext.js

@@ -2,7 +2,9 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
-export const StripesContext = React.createContext();
+import { StripesContext } from '@folio/stripes-shared-context';
+
+export { StripesContext };
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';

src/components/About/WarningBanner.js

@@ -48,7 +48,7 @@ const WarningBanner = ({
       <MessageBanner
         type="warning"
         show={!!missingModulesCount}
-        dismissable
+        dismissible
         ref={bannerRef}
       >
         <Headline>{missingModulesMsg}</Headline>
@@ -61,7 +61,7 @@ const WarningBanner = ({
       <MessageBanner
         type="warning"
         show={!!incompatibleModulesCount}
-        dismissable
+        dismissible
         ref={bannerRef}
       >
         <Headline>{incompatibleModuleMsg}</Headline>

src/components/LastVisited/LastVisitedContext.js

@@ -1,3 +1,3 @@
-import React from 'react';
+import { LastVisitedContext } from '@folio/stripes-shared-context';
 
-export default React.createContext({});
+export default LastVisitedContext;

src/components/MainNav/AppOrderProvider.js

@@ -2,10 +2,11 @@ import { createContext, useContext, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
+import isArray from 'lodash/isArray';
 
+import { LastVisitedContext } from '@folio/stripes-shared-context';
 import { useStripes } from '../../StripesContext';
 import { useModules } from '../../ModulesContext';
-import { LastVisitedContext } from '../LastVisited';
 import usePreferences from '../../hooks/usePreferences';
 import { packageName } from '../../constants';
 import settingsIcon from './settings.svg';
@@ -39,11 +40,11 @@ export const AppOrderContext = createContext({
    * Function to update the preference. Accepts an list of objects with shape:
    * { name: string - the module package name, sans scope and `ui-` prefix }
    */
-  updateList: () => {},
+  updateList: () => { },
   /**
    * Function to delete any the app order preference and reset the list.
   */
-  reset: () => {},
+  reset: () => { },
 });
 
 // hook for AppOrderContext consumption.
@@ -103,6 +104,13 @@ function getAllowedApps(appModules, stripes, pathname, lastVisited, formatMessag
       route: SETTINGS_ROUTE
     });
   }
+
+  // use translated displayName rather that ast object;
+  apps.forEach((app) => {
+    if (isArray(app.displayName)) {
+      app.displayName = app.displayName[0].value;
+    }
+  });
   return apps.toSorted((a, b) => a.displayName.localeCompare(b.displayName));
 }
 

src/components/MainNav/CurrentApp/AppCtxMenuContext.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { AppCtxMenuContext } from '@folio/stripes-shared-context';
 
-export const AppCtxMenuContext = React.createContext();
+export { AppCtxMenuContext };
 
 export function withAppCtxMenu(Component) {
   const WrappedComponent = (props) => {

src/components/ModuleHierarchy/ModuleHierarchyContext.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
-const ModuleHierarchyContext = React.createContext();
+import { ModuleHierarchyContext } from '@folio/stripes-shared-context';
 
 export default ModuleHierarchyContext;