Merge pull request #141 from scalprum/api-updates

fix(core): ensure scalprum instance receives configuration updates

Author: Hyperkid123

examples/test-app-e2e/src/e2e/test-app/scalprum-api.cy.ts

@@ -0,0 +1,17 @@
+describe('Scalprum API', () => {
+  beforeEach(() => {
+    cy.handleMetaError();
+  });
+
+  it('should display values from scalprum API', () => {
+    cy.visit('http://localhost:4200/api');
+    cy.contains('API consumer isBeta: false').should('exist');
+  });
+
+  it('should update isBeta value', () => {
+    cy.visit('http://localhost:4200/api');
+    cy.contains('API consumer isBeta: false').should('exist');
+    cy.contains('Toggle isBeta').click();
+    cy.contains('API consumer isBeta: true').should('exist');
+  });
+});

examples/test-app/src/entry.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ScalprumProvider } from '@scalprum/react-core';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import RuntimeErrorRoute from './routes/RuntimeErrorRoute';
@@ -9,6 +9,7 @@ import SDKModules from './routes/SDKModules';
 import NotFoundError from './routes/NotFoundError';
 import { AppsConfig } from '@scalprum/core';
 import UseModuleLoading from './routes/UseModuleLoading';
+import ApiUpdates from './routes/ApiUpdates';
 
 const config: AppsConfig<{ assetsHost?: string }> = {
   notFound: {
@@ -36,6 +37,15 @@ const config: AppsConfig<{ assetsHost?: string }> = {
 };
 
 const Entry = () => {
+  const [isBeta, setIsBeta] = React.useState(false);
+  const chromeApi = useMemo(
+    () => ({
+      foo: 'bar',
+      isBeta: () => isBeta,
+      setIsBeta,
+    }),
+    [isBeta, setIsBeta],
+  );
   return (
     <ScalprumProvider
       pluginSDKOptions={{
@@ -56,10 +66,7 @@ const Entry = () => {
         },
       }}
       api={{
-        chrome: {
-          foo: 'bar',
-          isBeta: () => true,
-        },
+        chrome: chromeApi,
       }}
       config={config}
     >
@@ -72,6 +79,7 @@ const Entry = () => {
             <Route path="/legacy" element={<LegacyModules />} />
             <Route path="/sdk" element={<SDKModules />} />
             <Route path="/use-module" element={<UseModuleLoading />} />
+            <Route path="/api" element={<ApiUpdates />} />
           </Route>
         </Routes>
       </BrowserRouter>

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

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

examples/test-app/src/routes/ApiUpdates.tsx

@@ -0,0 +1,20 @@
+import { Box, Typography } from '@mui/material';
+import { ScalprumComponent } from '@scalprum/react-core';
+
+const ApiUpdates = () => {
+  return (
+    <Box>
+      <Typography variant="h4">API Updates</Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Box>
+          <ScalprumComponent module="./ApiModule" scope="sdk-plugin" importName="ApiConsumer" />
+        </Box>
+        <Box>
+          <ScalprumComponent module="./ApiModule" scope="sdk-plugin" importName="ApiChanger" />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ApiUpdates;

federation-cdn-mock/src/modules/apiModule.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useScalprum } from '@scalprum/react-core';
+
+export const ApiConsumer = () => {
+    const { api } = useScalprum();
+    return <div>API consumer isBeta: {`${api.chrome.isBeta()}`}</div>;
+}
+
+export const ApiChanger = () => {
+    const { api } = useScalprum();
+    return <div>API changer: <button onClick={() => api.chrome.setIsBeta((prev) => !prev)}>Toggle isBeta</button></div>;
+}

federation-cdn-mock/webpack.config.js

@@ -49,6 +49,7 @@ const TestSDKPlugin = new DynamicRemotePlugin({
       './ModuleThree': resolve(__dirname, './src/modules/moduleThree.tsx'),
       './ModuleFour': resolve(__dirname, './src/modules/moduleFour.tsx'),
       './SDKComponent': resolve(__dirname, './src/modules/SDKComponent.tsx'),
+      './ApiModule': resolve(__dirname, './src/modules/apiModule.tsx'),
     },
   },
 });

packages/core/src/index.ts

@@ -217,6 +217,13 @@ export const initialize = <T extends Record<string, any> = Record<string, any>>(
   pluginStoreOptions?: PluginStoreOptions;
 }): Scalprum<T> => {
   if (scalprum) {
+    scalprum.api = api || {};
+    scalprum.appsConfig = appsConfig;
+    scalprum.scalprumOptions = {
+      ...scalprum.scalprumOptions,
+      ...options,
+    };
+    scalprum.pluginStore.setFeatureFlags(pluginStoreFeatureFlags);
     return scalprum as Scalprum<T>;
   }
   const defaultOptions: ScalprumOptions = {

packages/react-core/src/scalprum-provider.tsx

@@ -68,7 +68,9 @@ export function ScalprumProvider<T extends Record<string, any> = Record<string,
         transformPluginManifest: internalTransformPluginManifest,
       },
     });
-  }, []);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+  }, [props.api, props.config, props.scalprum]);
 
   return (
     <ScalprumContext.Provider