From 4cc9ad7b1bf627a472ec17539ab2ee168ea5ec75 Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Tue, 9 Apr 2024 10:31:04 +0200
Subject: [PATCH] chore: adjust example app to use new build tools

---
 .../testPath/pre-load-module-fed-mods.json    |  7 ----
 .../assets/testPath/test-app-fed-mods.json    |  7 ----
 .../assets/testPath/test-module-fed-mods.json |  7 ----
 examples/test-app/src/entry.tsx               | 22 +++++-------
 .../test-app/src/routes/LegacyModules.tsx     | 10 +++---
 .../test-app/src/routes/RuntimeErrorRoute.tsx |  2 +-
 examples/test-app/webpack.config.ts           | 34 +++++++------------
 7 files changed, 27 insertions(+), 62 deletions(-)
 delete mode 100644 examples/test-app/src/assets/testPath/pre-load-module-fed-mods.json
 delete mode 100644 examples/test-app/src/assets/testPath/test-app-fed-mods.json
 delete mode 100644 examples/test-app/src/assets/testPath/test-module-fed-mods.json

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
deleted file mode 100644
index 1509d16..0000000
--- a/examples/test-app/src/assets/testPath/pre-load-module-fed-mods.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "preLoad": {
-      "entry": [
-          "/testPath/preLoad.js"
-      ]
-  }
-}
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
deleted file mode 100644
index 7f60ae8..0000000
--- a/examples/test-app/src/assets/testPath/test-app-fed-mods.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "testApp": {
-        "entry": [
-            "/testPath/testApp.js"
-        ]
-    }
-}
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
deleted file mode 100644
index 7f60ae8..0000000
--- a/examples/test-app/src/assets/testPath/test-module-fed-mods.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "testApp": {
-        "entry": [
-            "/testPath/testApp.js"
-        ]
-    }
-}
diff --git a/examples/test-app/src/entry.tsx b/examples/test-app/src/entry.tsx
index f4b9081..2e3acaf 100644
--- 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
index aa4ffe8..5830ae5 100644
--- a/examples/test-app/src/routes/LegacyModules.tsx
+++ b/examples/test-app/src/routes/LegacyModules.tsx
@@ -24,7 +24,7 @@ const LegacyModules = () => {
 
   const handlePreload = async () => {
     try {
-      await preloadModule('preLoad', './PreLoadedModule');
+      await preloadModule('sdk-plugin', './PreLoadedModule');
     } catch (error) {
       console.log('Unable to preload module: ', error);
     }
@@ -32,7 +32,7 @@ const LegacyModules = () => {
 
   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
index b3ddef9..5681094 100644
--- 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
index 5b9a343..8e12661 100644
--- 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,