Add getModule method to core.

Author: Hyperkid123

cypress/e2e/test-app/use-module-loading.cy.js

@@ -0,0 +1,6 @@
+describe('UseModule loading callback', () => {
+  it('should display SDK inbox text', () => {
+    cy.visit('http://localhost:8123/use-module');
+    cy.contains('SDK Inbox').should('exist');
+  });
+});

packages/core/src/index.ts

@@ -176,6 +176,30 @@ export const preloadModule = async (scope: string, module: string, processor?: (
   return setPendingLoading(scope, module, Promise.resolve(modulePromise));
 };
 
+export const getModule = async <T = any, P = any>(scope: string, module: string, importName = 'default'): Promise<T> => {
+  const scalprum = getScalprum();
+  const { cachedModule } = getCachedModule(scope, module);
+  let Module: ExposedScalprumModule<T, P>;
+  const manifestLocation = getAppData(scope)?.manifestLocation;
+  if (!manifestLocation) {
+    throw new Error(`Could not get module. Manifest location not found for scope ${scope}.`);
+  }
+  if (!cachedModule) {
+    try {
+      await processManifest(manifestLocation, scope, module);
+      Module = await scalprum.pluginStore.getExposedModule(scope, module);
+    } catch {
+      throw new Error(
+        `Module not initialized! Module "${module}" was not found in "${scope}" webpack scope. Make sure the remote container is loaded?`
+      );
+    }
+  } else {
+    Module = cachedModule;
+  }
+
+  return Module[importName];
+};
+
 export const initialize = <T extends Record<string, any> = Record<string, any>>({
   appsConfig,
   api,

packages/react-core/src/use-module.ts

@@ -1,29 +1,20 @@
 import { useEffect, useState, useCallback } from 'react';
-import { getCachedModule, ExposedScalprumModule, getScalprum } from '@scalprum/core';
+import { getModule } from '@scalprum/core';
 
-export function useModule(scope: string, module: string, defaultState: any): ExposedScalprumModule | undefined {
-  const [data, setData] = useState<ExposedScalprumModule>(defaultState);
-  const { pluginStore } = getScalprum();
+export function useModule<T = any, P = any>(scope: string, module: string, defaultState?: any, importName = 'default'): T {
+  const [data, setData] = useState<T>(defaultState);
   const fetchModule = useCallback(async () => {
-    const { cachedModule } = getCachedModule(scope, module);
-    let Module: ExposedScalprumModule;
-    if (!cachedModule) {
-      try {
-        Module = await pluginStore.getExposedModule(scope, module);
-      } catch {
-        console.error(
-          `Module not initialized! Module "${module}" was not found in "${scope}" webpack scope. Make sure the remote container is loaded?`
-        );
-      }
-    } else {
-      Module = cachedModule;
+    try {
+      const Module = await getModule<T, P>(scope, module, importName);
+      setData(() => Module);
+    } catch (error) {
+      console.error(error);
     }
-    setData(() => Module);
   }, [scope, module]);
 
   useEffect(() => {
     fetchModule();
-  }, [scope, module]);
+  }, [scope, module, importName]);
 
   return data;
 }

packages/test-app/src/entry.tsx

@@ -8,6 +8,7 @@ import RootRoute from './routes/RootRoute';
 import SDKModules from './routes/SDKModules';
 import NotFoundError from './routes/NotFoundError';
 import { AppsConfig } from '@scalprum/core';
+import UseModuleLoading from './routes/UseModuleLoading';
 
 const config: AppsConfig<{ assetsHost?: string }> = {
   notFound: {
@@ -62,6 +63,7 @@ const Entry = () => {
             <Route path="/not-found-error" element={<NotFoundError />} />
             <Route path="/legacy" element={<LegacyModules />} />
             <Route path="/sdk" element={<SDKModules />} />
+            <Route path="/use-module" element={<UseModuleLoading />} />
           </Route>
         </Routes>
       </BrowserRouter>

packages/test-app/src/layouts/RootLayout.tsx

@@ -33,6 +33,9 @@ function RootLayout() {
             <NavLink variant="button" color="text.primary" to="/not-found-error" sx={{ my: 1, mx: 1.5 }}>
               Manifest not found
             </NavLink>
+            <NavLink variant="button" color="text.primary" to="/use-module" sx={{ my: 1, mx: 1.5 }}>
+              Use module hook
+            </NavLink>
           </nav>
         </Toolbar>
       </AppBar>

packages/test-app/src/routes/UseModuleLoading.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { useModule } from '@scalprum/react-core';
+
+const UseModuleLoading = () => {
+  const Component = useModule<React.ComponentType>('sdk-plugin', './SDKComponent');
+
+  return (
+    <Grid container spacing={4}>
+      <Grid xs={12} md={6} item>
+        {Component ? <Component /> : 'Loading...'}
+      </Grid>
+    </Grid>
+  );
+};
+
+export default UseModuleLoading;