Merge pull request #107 from Hyperkid123/get-module

Hyperkid123 · web-flow · commit 855e98db125e · 2023-11-10T09:56:50.000+01:00
Add getModule method to core.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -27,6 +27,7 @@
   },
   "rules": {
     "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "argsIgnorePattern": "^_", "ignoreRestSiblings": false }]
   }
 }
diff --git a/cypress/e2e/test-app/use-module-loading.cy.js b/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');
+  });
+});
diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,4 @@
-const transformIgnorePatterns = ['node_modules/(?!(@openshift|lodash-es)/)'];
+const transformIgnorePatterns = ['node_modules/(?!(uuid)/)'];
 
 /** @type {import('jest').Config} */
 module.exports = {
@@ -15,5 +15,7 @@ module.exports = {
     '^.+\\.(js|jsx)$': 'babel-jest',
   },
   transformIgnorePatterns,
+  // needs to fix the memory leak errors
+  coverageProvider: 'v8',
   setupFilesAfterEnv: ['<rootDir>/config/jest.setup.js'],
 };
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,4 @@
 {
   "npmClient": "npm",
-  "version": "independent",
-  "useWorkspaces": true
+  "version": "independent"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,39 +8,40 @@
     "packages/**"
   ],
   "devDependencies": {
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.176",
-    "@types/react": "^17.0.31",
-    "@types/react-grid-layout": "^1.3.2",
-    "@types/react-router-dom": "^5.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.1.0",
-    "@typescript-eslint/parser": "^5.1.0",
-    "babel-jest": "^27.5.1",
-    "chokidar": "^3.5.2",
-    "css-loader": "^6.7.3",
-    "cypress": "^10.6.0",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "fs-extra": "^10.0.0",
-    "glob": "^7.2.0",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.6",
+    "@types/lodash": "^4.14.200",
+    "@types/react": "^18.2.31",
+    "@types/react-grid-layout": "^1.3.4",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "babel-jest": "^29.7.0",
+    "chokidar": "^3.5.3",
+    "css-loader": "^6.8.1",
+    "cypress": "^13.3.2",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.3.10",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~27.3.1",
-    "lerna": "^6.4.1",
-    "prettier": "^2.4.1",
+    "jest": "~29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lerna": "^7.4.1",
+    "prettier": "^3.0.3",
     "process": "^0.11.10",
-    "regenerator-runtime": "^0.13.11",
-    "start-server-and-test": "^1.14.0",
-    "style-loader": "^3.3.1",
-    "ts-jest": "^27.0.7",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.4.4"
+    "regenerator-runtime": "^0.14.0",
+    "start-server-and-test": "^2.0.1",
+    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.2.2"
   },
   "scripts": {
     "start": "lerna run --parallel start:esm",
@@ -55,8 +56,6 @@
     "test:ci": "start-server-and-test start:test http-get://localhost:8123 cypress:run"
   },
   "dependencies": {
-    "install": "^0.13.0",
-    "npm": "^9.4.2",
-    "react-grid-layout": "^1.3.4"
+    "react-grid-layout": "^1.4.2"
   }
 }
diff --git a/packages/core/src/index.ts b/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,
diff --git a/packages/core/src/warnDuplicatePkg.ts b/packages/core/src/warnDuplicatePkg.ts
@@ -20,7 +20,7 @@ export const warnDuplicatePkg = (packages: Packages) => {
     const instances = Object.keys(versions);
     if (instances.length > 1) {
       console.warn(
-        `[SCALPRUM]: You have ${pkgName} package that is being loaded into browser multiple times. You might want to align your version with the chrome one.`
+        `[SCALPRUM]: You have ${pkgName} package that is being loaded into browser multiple times. You might want to align your version with the chrome one.`,
       );
       console.warn(`[SCALPRUM]: All packages instances:`, versions);
     }
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@types/history": "^4.7.9",
-    "@types/react": "^17.0.31",
+    "@types/react": "^18.0.0",
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.1"
   },
@@ -31,7 +31,7 @@
     "lodash": "^4.17.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0 || >=17.0.0",
-    "react-dom": ">=16.8.0 || >=17.0.0"
+    "react": ">=16.8.0 || >=17.0.0 || ^18.0.0",
+    "react-dom": ">=16.8.0 || >=17.0.0 || ^18.0.0"
   }
 }
diff --git a/packages/react-core/src/__snapshots__/scalprum-component.test.tsx.snap b/packages/react-core/src/__snapshots__/scalprum-component.test.tsx.snap
@@ -43,12 +43,6 @@ exports[`<ScalprumComponent /> should render fallback component 2`] = `
 `;
 
 exports[`<ScalprumComponent /> should render test component 1`] = `
-<div>
-  loading
-</div>
-`;
-
-exports[`<ScalprumComponent /> should render test component 2`] = `
 <div>
   <span>
     Test
diff --git a/packages/react-core/src/async-loader.tsx b/packages/react-core/src/async-loader.tsx
@@ -4,7 +4,7 @@ import { ExposedScalprumModule, getCachedModule, getScalprum, PrefetchFunction }
 export async function loadComponent<P = {}>(
   scope: string,
   module: string,
-  importName = 'default'
+  importName = 'default',
 ): Promise<{ prefetch?: PrefetchFunction; component: React.ComponentType<P> }> {
   {
     const { pluginStore } = getScalprum();
diff --git a/packages/react-core/src/default-error-component.tsx b/packages/react-core/src/default-error-component.tsx
@@ -33,7 +33,7 @@ const DefaultErrorComponent = ({
     <div>
       <h2>Error loading component</h2>
       {typeof error === 'string' && <p>{error}</p>}
-      {error?.cause && <p>{error.cause}</p>}
+      {error?.cause && typeof error?.cause !== 'object' && <p>{error.cause}</p>}
       {error?.message && <p>{error.message}</p>}
       {errorInfo?.componentStack ? <pre>{errorInfo?.componentStack}</pre> : error?.stack && <pre>{error.stack}</pre>}
     </div>
diff --git a/packages/react-core/src/prefetch-context.tsx b/packages/react-core/src/prefetch-context.tsx
@@ -9,6 +9,6 @@ export interface PrefetchState {
 
 export const PrefetchContext = createContext<Promise<any> | undefined>(undefined);
 
-export const PrefetchProvider: React.FC<{ prefetchPromise: Promise<any> | undefined }> = ({ children, prefetchPromise }) => {
+export const PrefetchProvider: React.FC<React.PropsWithChildren<{ prefetchPromise: Promise<any> | undefined }>> = ({ children, prefetchPromise }) => {
   return <PrefetchContext.Provider value={prefetchPromise}>{children}</PrefetchContext.Provider>;
 };
diff --git a/packages/react-core/src/scalprum-component.test.tsx b/packages/react-core/src/scalprum-component.test.tsx
@@ -155,7 +155,6 @@ describe('<ScalprumComponent />', () => {
     };
     await act(async () => {
       container = render(<ScalprumComponent {...props} />)?.container;
-      expect(container).toMatchSnapshot();
     });
 
     expect(loadComponentSpy).toHaveBeenCalled();
@@ -201,15 +200,15 @@ describe('<ScalprumComponent />', () => {
                 }),
             } as unknown as Promise<Response>);
           }, 500);
-        })
+        }),
     );
     jest.useFakeTimers();
     /**
      * We need the async component "hang" to render the fallback
      */
 
     const componentPromise = new Promise<{ prefetch: (() => Promise<any>) | undefined; component: ComponentType<any> }>((res) =>
-      setTimeout(() => res({ prefetch: undefined, component: TestComponent }), 500)
+      setTimeout(() => res({ prefetch: undefined, component: TestComponent }), 500),
     );
     jest.spyOn(asyncComponent, 'loadComponent').mockReturnValueOnce(componentPromise);
     ScalprumCore.initialize({ appsConfig: mockInitScalprumConfig });
@@ -237,24 +236,14 @@ describe('<ScalprumComponent />', () => {
   test('should render error component', async () => {
     processManifestSpy.mockImplementation(() => Promise.resolve());
     const componentPromise = Promise.resolve({ prefetch: undefined, component: TestComponent });
-    const asyncComponentSpy = jest
-      .spyOn(asyncComponent, 'loadComponent')
-      .mockReturnValueOnce(
-        componentPromise.then(() => ({
-          prefetch: undefined,
-          component: () => {
-            throw 'should render error component';
-          },
-        }))
-      )
-      .mockReturnValueOnce(
-        componentPromise.then(() => ({
-          prefetch: undefined,
-          component: () => {
-            throw 'should render error component';
-          },
-        }))
-      );
+    const asyncComponentSpy = jest.spyOn(asyncComponent, 'loadComponent').mockReturnValue(
+      componentPromise.then(() => ({
+        prefetch: undefined,
+        component: () => {
+          throw 'should render error component';
+        },
+      })),
+    );
     ScalprumCore.initialize({ appsConfig: mockInitScalprumConfig });
 
     const props: ScalprumComponentProps = {
@@ -304,7 +293,7 @@ describe('<ScalprumComponent />', () => {
         component: () => {
           throw 're-render initial error';
         },
-      }))
+      })),
     );
     ScalprumCore.initialize({ appsConfig: mockInitScalprumConfig });
 
@@ -338,7 +327,7 @@ describe('<ScalprumComponent />', () => {
           return <div>Mocked testing component</div>;
         },
         prefetch: () => Promise.resolve(),
-      }))
+      })),
     );
     ScalprumCore.initialize({ appsConfig: mockInitScalprumConfig });
     let container;
diff --git a/packages/react-core/src/scalprum-component.tsx b/packages/react-core/src/scalprum-component.tsx
@@ -44,7 +44,7 @@ async function setComponentFromModule(
         }>
       | undefined
     >
-  >
+  >,
 ): Promise<PrefetchFunction | undefined> {
   const { prefetch, component } = await loadComponent(scope, module, importName);
   isMounted && setComponent(() => component);
diff --git a/packages/react-core/src/scalprum-provider.tsx b/packages/react-core/src/scalprum-provider.tsx
@@ -38,7 +38,7 @@ export function ScalprumProvider<T extends Record<string, any> = Record<string,
         },
         ...pluginSDKOptions,
       }),
-    []
+    [],
   );
 
   return (
diff --git a/packages/react-core/src/use-load-module.ts b/packages/react-core/src/use-load-module.ts
@@ -9,7 +9,7 @@ export type ModuleDefinition = {
 
 export function useLoadModule(
   { scope, module, processor }: ModuleDefinition,
-  defaultState: any
+  defaultState: any,
 ): [ExposedScalprumModule | undefined, Error | undefined] {
   const { manifestLocation } = getAppData(scope);
   const [data, setData] = useState<ExposedScalprumModule>(defaultState);
diff --git a/packages/react-core/src/use-module.ts b/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;
 }
diff --git a/packages/react-test-utils/src/index.tsx b/packages/react-test-utils/src/index.tsx
@@ -22,6 +22,8 @@ export function mockWebpackShareScope() {
 
 export function mockFetch() {
   if (!globalThis.fetch) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     globalThis.fetch = fetchPolyfill;
   }
 }
@@ -99,7 +101,7 @@ export function mockPluginData(
     moduleMock?: ModuleMock;
     config?: AppsConfig;
   } = {},
-  api: ScalprumProviderProps['api'] = {}
+  api: ScalprumProviderProps['api'] = {},
 ) {
   const response: Response = {
     blob: () => Promise.resolve(new Blob()),
diff --git a/packages/test-app/package.json b/packages/test-app/package.json
@@ -16,7 +16,7 @@
     "@scalprum/react-core": "*",
     "@scalprum/react-test-utils": "*",
     "@types/history": "^4.7.9",
-    "@types/react": "^17.0.31",
+    "@types/react": "^18.0.0",
     "@types/react-dom": "^17.0.10",
     "@types/react-router-dom": "^5.3.1",
     "html-webpack-plugin": "^5.5.0",
@@ -30,8 +30,8 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.8",
     "history": "^4.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0"
   }
 }
diff --git a/packages/test-app/src/entry.tsx b/packages/test-app/src/entry.tsx
diff --git a/packages/test-app/src/layouts/RootLayout.tsx b/packages/test-app/src/layouts/RootLayout.tsx
diff --git a/packages/test-app/src/routes/LegacyModules.tsx b/packages/test-app/src/routes/LegacyModules.tsx
diff --git a/packages/test-app/src/routes/UseModuleLoading.tsx b/packages/test-app/src/routes/UseModuleLoading.tsx
diff --git a/packages/test-app/src/test-utils-specs/scalprum-provider-rendering.test.jsx b/packages/test-app/src/test-utils-specs/scalprum-provider-rendering.test.jsx
diff --git a/scripts/create-typings.js b/scripts/create-typings.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@`
`27`	`27`	`},`
`28`	`28`	`"rules": {`
`29`	`29`	`"@typescript-eslint/ban-types": "off",`
	`30`	`+ "@typescript-eslint/no-explicit-any": "warn",`
`30`	`31`	`"@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "argsIgnorePattern": "^_", "ignoreRestSiblings": false }]`
`31`	`32`	`}`
`32`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`{`
`2`	`2`	`"npmClient": "npm",`
`3`		`- "version": "independent",`
`4`		`- "useWorkspaces": true`
	`3`	`+ "version": "independent"`
`5`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export const warnDuplicatePkg = (packages: Packages) => {`
`20`	`20`	`const instances = Object.keys(versions);`
`21`	`21`	`if (instances.length > 1) {`
`22`	`22`	`console.warn(`
`23`		- `[SCALPRUM]: You have ${pkgName} package that is being loaded into browser multiple times. You might want to align your version with the chrome one.`
	`23`	+ `[SCALPRUM]: You have ${pkgName} package that is being loaded into browser multiple times. You might want to align your version with the chrome one.`,
`24`	`24`	`);`
`25`	`25`	console.warn(`[SCALPRUM]: All packages instances:`, versions);
`26`	`26`	`}`