convert env var remote to v2 runtime

Author: ScriptedAlchemy

advanced-api/dynamic-remotes-runtime-environment-variables/host/package.json

@@ -14,7 +14,8 @@
     "@rspack/core": "0.7.5",
     "@rspack/cli": "0.7.5",
     "@rspack/dev-server": "0.7.5",
-    "@module-federation/enhanced": "0.2.5"
+    "@module-federation/enhanced": "0.2.5",
+    "@module-federation/runtime": "0.2.5"
   },
   "scripts": {
     "start": "chmod +x ./env.sh && cp env-config.json ./public/ && rspack serve",

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/components/Main.js

@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-
 import { useFederatedComponent } from '../hooks/useFederatedComponent';
 import { EnvContext } from './App';
 

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/hooks/useDynamicScript.js

@@ -1,41 +1,44 @@
 import React, { lazy, useEffect, useState } from 'react';
-
-import useDynamicScript from './useDynamicScript';
+import {registerRemotes, loadRemote} from "@module-federation/runtime";
 
 function loadComponent(scope, module) {
   return async () => {
-    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
-    await __webpack_init_sharing__('default');
-    const container = window[scope]; // or get the container somewhere else
-    // Initialize the container, it may provide shared modules
-    await container.init(__webpack_share_scopes__.default);
-    const factory = await window[scope].get(module);
-    const Module = factory();
-    return Module;
+    if(!scope && !module) {
+      return {default: ()=>null}
+    }
+    return await loadRemote(scope  + module.replace('.',''));
   };
 }
 
 const componentCache = new Map();
 export const useFederatedComponent = (remoteUrl, scope, module) => {
+  console.log(remoteUrl,scope, module);
+  if(scope && remoteUrl) {
+    registerRemotes([
+      {
+        name: scope,
+        entry: remoteUrl,
+      },
+    ]);
+  }
   const key = `${remoteUrl}-${scope}-${module}`;
   const [Component, setComponent] = useState(null);
 
-  const { ready, errorLoading } = useDynamicScript(remoteUrl);
   useEffect(() => {
     if (Component) setComponent(null);
     // Only recalculate when key changes
   }, [key]);
 
   useEffect(() => {
-    if (ready && !Component) {
+    if (!Component) {
       const Comp = lazy(loadComponent(scope, module));
       componentCache.set(key, Comp);
       setComponent(Comp);
     }
     // key includes all dependencies (scope/module)
-  }, [Component, ready, key]);
+  }, [Component, key]);
 
-  return { errorLoading, Component };
+  return { Component };
 };
 
 export default useFederatedComponent;

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/hooks/useFederatedComponent.js

@@ -215,5 +215,6 @@
     "report:generate": "allure generate ./cypress/results/allure-results --clean -o ./cypress/report",
     "report:open": "allure open ./cypress/report",
     "preinstall": "npx only-allow pnpm"
-  }
+  },
+  "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }