Enable named export for async loading.

Author: Hyperkid123

README.md

@@ -543,6 +543,25 @@ const RemotelyLoadedComponent = () => {
 
 ```
 
+***importName***
+
+The `importName` prop is a string that is used to reference the module. It is a name of the exported component from the module. Should be used if other than `default` export is required.
+
+```jsx
+// Remote module definition
+export const NamedComponent = () => {
+  return (
+    <div>
+      <h2>Named component</h2>
+    </div>
+  )
+}
+
+// Consumer
+<ScalprumComponent {...props} importName="NamedComponent">
+```
+One module can have multiple exports.
+
 ***fallback***
 
 Similar to [React.Suspense](https://beta.reactjs.org/reference/react/Suspense). This component will be loaded before the module is ready.

cypress/e2e/test-app/named-export-scalprum-component.cy.js

@@ -0,0 +1,8 @@
+describe('SDK module loading', () => {
+  it('should show data from prefetch', () => {
+    cy.visit('http://localhost:8123/sdk');
+
+    // check if the component using named export is rendered
+    cy.get('#named-component').should('exist');
+  });
+});

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalprum/core",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Includes core functions for scalprum scaffolding.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/core/package.json

@@ -14,7 +14,7 @@ export interface AppsConfig<T extends {} = {}> {
 }
 
 export type PrefetchFunction<T = any> = (ScalprumApi: Record<string, any> | undefined) => Promise<T>;
-export type ExposedScalprumModule<T = any, P = any> = { default: T; prefetch?: PrefetchFunction<P> };
+export type ExposedScalprumModule<T = any, P = any> = { [importName: string]: T } & { prefetch?: PrefetchFunction<P> };
 export type ScalprumModule<T = any, P = any> = {
   cachedModule?: ExposedScalprumModule<T, P>;
   prefetchPromise?: ReturnType<PrefetchFunction>;

packages/core/src/index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@scalprum/react-core",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "React binding for @scalprum/core package.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^4.0.0",
-    "@scalprum/core": "^0.5.4",
+    "@scalprum/core": "^0.6.0",
     "lodash": "^4.17.0"
   },
   "peerDependencies": {

packages/react-core/package.json

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ScalprumComponent /> should render component with importName prop from cache 1`] = `
+<div>
+  <div
+    data-testid="named-component"
+  >
+    named export Component
+  </div>
+</div>
+`;
+
 exports[`<ScalprumComponent /> should render error component 1`] = `
 <div>
   <h1>

packages/react-core/src/__snapshots__/scalprum-component.test.tsx.snap

@@ -3,7 +3,8 @@ import { ExposedScalprumModule, getCachedModule, getScalprum, PrefetchFunction }
 
 export async function loadComponent<P = {}>(
   scope: string,
-  module: string
+  module: string,
+  importName = 'default'
 ): Promise<{ prefetch?: PrefetchFunction; component: React.ComponentType<P> }> {
   {
     const { pluginStore } = getScalprum();
@@ -15,7 +16,7 @@ export async function loadComponent<P = {}>(
     }
     return {
       prefetch: mod.prefetch,
-      component: mod.default,
+      component: mod[importName],
     };
   }
 }

packages/react-core/src/async-loader.tsx

@@ -38,6 +38,10 @@ describe('<ScalprumComponent />', () => {
       name: 'errorRepairSuccess',
       manifestLocation: '/errorRepairSuccess,js',
     },
+    testApp: {
+      name: 'testApp',
+      manifestLocation: '/testApp.js',
+    },
   };
 
   const mockInitScalpumConfigManifest: AppsConfig = {
@@ -344,4 +348,28 @@ describe('<ScalprumComponent />', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('should render component with importName prop from cache', async () => {
+    processManifestSpy.mockImplementation(() => Promise.resolve());
+    const namedModule = {
+      __esModule: true,
+      NamedExport: () => <div data-testid="named-component">named export Component</div>,
+    };
+    ScalprumCore.initialize({ appsConfig: mockInitScalprumConfig });
+    ScalprumCore.getScalprum().exposedModules[`namedModule#./test`] = namedModule;
+    await ScalprumCore.getScalprum().pluginStore.loadPlugin(testManifest);
+
+    const props: ScalprumComponentProps = {
+      scope: 'namedModule',
+      module: './test',
+      importName: 'NamedExport',
+    };
+    let container;
+    await act(async () => {
+      container = render(<ScalprumComponent {...props} />).container;
+    });
+    expect(loadComponentSpy).not.toHaveBeenCalled();
+    expect(container).toMatchSnapshot();
+    expect(screen.getAllByTestId('named-component')).toHaveLength(1);
+  });
 });

packages/react-core/src/scalprum-component.test.tsx

@@ -15,12 +15,12 @@ import DefaultErrorComponent from './default-error-component';
 import { PrefetchProvider } from './prefetch-context';
 import { useScalprum } from './use-scalprum';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export type ScalprumComponentProps<API extends Record<string, any> = {}, Props extends Record<string, any> = {}> = Props & {
   fallback?: NonNullable<React.ReactNode> | null;
   api?: API;
   scope: string;
   module: string;
+  importName?: string;
   ErrorComponent?: React.ReactElement;
   LoadingComponent?: React.ComponentType;
   innerRef?: React.Ref<unknown>;
@@ -36,6 +36,7 @@ async function setComponentFromModule(
   scope: string,
   module: string,
   isMounted: boolean,
+  importName: string,
   setComponent: React.Dispatch<
     React.SetStateAction<
       | React.ComponentType<{
@@ -45,7 +46,7 @@ async function setComponentFromModule(
     >
   >
 ): Promise<PrefetchFunction | undefined> {
-  const { prefetch, component } = await loadComponent(scope, module);
+  const { prefetch, component } = await loadComponent(scope, module, importName);
   isMounted && setComponent(() => component);
   return prefetch;
 }
@@ -58,6 +59,7 @@ const LoadModule: React.ComponentType<LoadModuleProps> = ({
   processor,
   innerRef,
   skipCache = false,
+  importName = 'default',
   ...props
 }) => {
   const { manifestLocation } = getAppData(scope);
@@ -103,7 +105,7 @@ const LoadModule: React.ComponentType<LoadModuleProps> = ({
         if (manifestLocation) {
           const processPromise = processManifest(manifestLocation, scope, module, processor)
             .then(() => {
-              pref = setComponentFromModule(scope, module, isMounted, setComponent);
+              pref = setComponentFromModule(scope, module, isMounted, importName, setComponent);
               pref.then((result) => {
                 if (result) {
                   const prefetch = getPendingPrefetch(prefetchID) || result(scalprumApi);
@@ -120,7 +122,7 @@ const LoadModule: React.ComponentType<LoadModuleProps> = ({
         }
       } else {
         try {
-          isMounted && setComponent(() => cachedModule.default);
+          isMounted && setComponent(() => cachedModule[importName]);
 
           pref = cachedModule.prefetch;
           if (pref) {
@@ -186,7 +188,7 @@ class BaseScalprumComponent extends React.Component<ScalprumComponentProps, Base
     return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state);
   }
 
-  // TODO: Use ErrorWithCause once the type is avaiable
+  // TODO: Use ErrorWithCause once the type is available
   componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
     if (this.selfRepairAttempt === true) {
       console.error('Scalprum encountered an error!', error?.cause || error.message, error);