chore: adjust example app to use new build tools

scalprum · Apr 9, 2024 · 4cc9ad7 · 4cc9ad7
1 parent 7de0df0
commit 4cc9ad7
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 62 deletions.
diff --git a/examples/test-app/src/assets/testPath/pre-load-module-fed-mods.json b/examples/test-app/src/assets/testPath/pre-load-module-fed-mods.json
diff --git a/examples/test-app/src/assets/testPath/test-app-fed-mods.json b/examples/test-app/src/assets/testPath/test-app-fed-mods.json
diff --git a/examples/test-app/src/assets/testPath/test-module-fed-mods.json b/examples/test-app/src/assets/testPath/test-module-fed-mods.json
diff --git a/examples/test-app/src/entry.tsx b/examples/test-app/src/entry.tsx
@@ -16,21 +16,10 @@ const config: AppsConfig<{ assetsHost?: string }> = {
     manifestLocation: '/assets/testPath/foo/bar/nonsense.json',
     assetsHost: 'http://localhost:8888',
   },
-  testApp: {
-    name: 'testApp',
-    manifestLocation: '/assets/testPath/test-app-fed-mods.json',
-  },
-  testModule: {
-    name: 'testModule',
-    manifestLocation: '/assets/testPath/test-module-fed-mods.json',
-  },
-  preLoad: {
-    name: 'preLoad',
-    manifestLocation: '/assets/testPath/pre-load-module-fed-mods.json',
-  },
   'sdk-plugin': {
     name: 'sdk-plugin',
-    manifestLocation: '/plugin-manifest.json',
+    assetsHost: 'http://localhost:8001',
+    manifestLocation: 'http://localhost:8001/plugin-manifest.json',
   },
 };
 
@@ -40,6 +29,13 @@ const Entry = () => {
       pluginSDKOptions={{
         pluginLoaderOptions: {
           transformPluginManifest(manifest) {
+            const host = config[manifest.name]?.assetsHost;
+            if (host) {
+              return {
+                ...manifest,
+                loadScripts: manifest.loadScripts.map((script) => `${host}/${script}`),
+              };
+            }
             return {
               ...manifest,
               loadScripts: manifest.loadScripts.map((script) => `${script}`),

diff --git a/examples/test-app/src/routes/LegacyModules.tsx b/examples/test-app/src/routes/LegacyModules.tsx
@@ -24,15 +24,15 @@ const LegacyModules = () => {
 
   const handlePreload = async () => {
     try {
-      await preloadModule('preLoad', './PreLoadedModule');
+      await preloadModule('sdk-plugin', './PreLoadedModule');
     } catch (error) {
       console.log('Unable to preload module: ', error);
     }
   };
 
   const handlePreloadPF = async () => {
     try {
-      await preloadModule('testApp', './ModuleOne');
+      await preloadModule('sdk-plugin', './ModuleOne');
     } catch (error) {
       console.log('Unable to preload module: ', error);
     }
@@ -79,20 +79,20 @@ const LegacyModules = () => {
         <GridLayout margin={[10, 10]} className="layout" layout={layout} cols={2} width={852}>
           <div key="initial">
             <BoxWrapper>
-              <ScalprumComponent LoadingComponent={LoadingComponent} scope="testApp" module="./ModuleOne" />
+              <ScalprumComponent LoadingComponent={LoadingComponent} scope="sdk-plugin" module="./ModuleOne" />
             </BoxWrapper>
           </div>
           {showPreLoadedModule && (
             <div key="preLoad">
               <BoxWrapper>
-                <ScalprumComponent LoadingComponent={LoadingComponent} scope="preLoad" module="./PreLoadedModule" />
+                <ScalprumComponent LoadingComponent={LoadingComponent} scope="sdk-plugin" module="./PreLoadedModule" />
               </BoxWrapper>
             </div>
           )}
           {showPreLoadedModuleWPF && (
             <div key="preFetch">
               <BoxWrapper>
-                <ScalprumComponent LoadingComponent={LoadingComponent} scope="testApp" module="./ModuleOne" />
+                <ScalprumComponent LoadingComponent={LoadingComponent} scope="sdk-plugin" module="./ModuleOne" />
               </BoxWrapper>
             </div>
           )}

diff --git a/examples/test-app/src/routes/RuntimeErrorRoute.tsx b/examples/test-app/src/routes/RuntimeErrorRoute.tsx
@@ -6,7 +6,7 @@ const RuntimeErrorRoute = () => {
   return (
     <div>
       <h2>Runtime error route</h2>
-      <ScalprumComponent LoadingComponent={LoadingComponent} scope="testApp" module="./ErrorModule" />
+      <ScalprumComponent LoadingComponent={LoadingComponent} scope="sdk-plugin" module="./ErrorModule" />
     </div>
   );
 };

diff --git a/examples/test-app/webpack.config.ts b/examples/test-app/webpack.config.ts
@@ -3,11 +3,10 @@
 import { withNx, NxWebpackExecutionContext, composePluginsSync } from '@nx/webpack';
 import { withReact } from '@nx/react';
 import { merge } from 'webpack-merge';
-import { Configuration, container, ProgressPlugin } from 'webpack';
+import { Configuration, ProgressPlugin } from 'webpack';
 import { join, resolve } from 'path';
-import { DynamicRemotePlugin } from '@openshift/dynamic-plugin-sdk-webpack';
-
-const { ModuleFederationPlugin } = container;
+import { ModuleFederationPlugin } from '@module-federation/enhanced';
+import { DynamicRemotePluginEnhanced } from '@scalprum/build-tools/src/index';
 
 const sharedModules = {
   react: {
@@ -28,18 +27,12 @@ const sharedModules = {
   },
 };
 
-const TestAppFederation = new ModuleFederationPlugin({
-  name: 'testApp',
-  filename: 'testApp.js',
+const ShellConfig = new ModuleFederationPlugin({
+  name: 'shell',
+  filename: 'shell.[contenthash].js',
   library: {
-    type: 'var',
-    name: 'testApp',
-  },
-  exposes: {
-    './ModuleOne': resolve(__dirname, './src/modules/moduleOne.tsx'),
-    './ModuleTwo': resolve(__dirname, './src/modules/moduleTwo.tsx'),
-    './ModuleThree': resolve(__dirname, './src/modules/moduleThree.tsx'),
-    './ErrorModule': resolve(__dirname, './src/modules/errorModule.tsx'),
+    type: 'global',
+    name: 'shell',
   },
   shared: [
     {
@@ -63,7 +56,7 @@ const TestPreLoadFederation = new ModuleFederationPlugin({
   name: 'preLoad',
   filename: 'preLoad.js',
   library: {
-    type: 'var',
+    type: 'global',
     name: 'preLoad',
   },
   exposes: {
@@ -77,7 +70,7 @@ const TestModuleFederation = new ModuleFederationPlugin({
   name: 'testModule',
   filename: 'testModule.js',
   library: {
-    type: 'var',
+    type: 'global',
     name: 'testModule',
   },
   exposes: {
@@ -87,13 +80,10 @@ const TestModuleFederation = new ModuleFederationPlugin({
   shared: [sharedModules],
 });
 
-const TestSDKPLugin = new DynamicRemotePlugin({
+const TestSDKPLugin = new DynamicRemotePluginEnhanced({
   extensions: [],
   sharedModules,
   entryScriptFilename: 'sdk-plugin.[contenthash].js',
-  moduleFederationSettings: {
-    libraryType: 'global',
-  },
   pluginMetadata: {
     name: 'sdk-plugin',
     version: '1.0.0',
@@ -104,7 +94,7 @@ const TestSDKPLugin = new DynamicRemotePlugin({
 });
 
 const withModuleFederation = (config: Configuration, { context }: NxWebpackExecutionContext): Configuration => {
-  const plugins: Configuration['plugins'] = [new ProgressPlugin(), TestSDKPLugin, TestAppFederation, TestModuleFederation, TestPreLoadFederation];
+  const plugins: Configuration['plugins'] = [new ProgressPlugin(), ShellConfig];
   const newConfig = merge(config, {
     experiments: {
       outputModule: true,