Skip to content

Commit b4d4ae6

Browse files
convert env var remote to v2 runtime
1 parent 7c94c58 commit b4d4ae6

File tree

6 files changed

+249
-134
lines changed

6 files changed

+249
-134
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"@rspack/core": "0.7.5",
1515
"@rspack/cli": "0.7.5",
1616
"@rspack/dev-server": "0.7.5",
17-
"@module-federation/enhanced": "0.2.5"
17+
"@module-federation/enhanced": "0.2.5",
18+
"@module-federation/runtime": "0.2.5"
1819
},
1920
"scripts": {
2021
"start": "chmod +x ./env.sh && cp env-config.json ./public/ && rspack serve",

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext, useState } from 'react';
2-
32
import { useFederatedComponent } from '../hooks/useFederatedComponent';
43
import { EnvContext } from './App';
54

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

Lines changed: 0 additions & 50 deletions
This file was deleted.
Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
import React, { lazy, useEffect, useState } from 'react';
2-
3-
import useDynamicScript from './useDynamicScript';
2+
import {registerRemotes, loadRemote} from "@module-federation/runtime";
43

54
function loadComponent(scope, module) {
65
return async () => {
7-
// Initializes the share scope. This fills it with known provided modules from this build and all remotes
8-
await __webpack_init_sharing__('default');
9-
const container = window[scope]; // or get the container somewhere else
10-
// Initialize the container, it may provide shared modules
11-
await container.init(__webpack_share_scopes__.default);
12-
const factory = await window[scope].get(module);
13-
const Module = factory();
14-
return Module;
6+
if(!scope && !module) {
7+
return {default: ()=>null}
8+
}
9+
return await loadRemote(scope + module.replace('.',''));
1510
};
1611
}
1712

1813
const componentCache = new Map();
1914
export const useFederatedComponent = (remoteUrl, scope, module) => {
15+
console.log(remoteUrl,scope, module);
16+
if(scope && remoteUrl) {
17+
registerRemotes([
18+
{
19+
name: scope,
20+
entry: remoteUrl,
21+
},
22+
]);
23+
}
2024
const key = `${remoteUrl}-${scope}-${module}`;
2125
const [Component, setComponent] = useState(null);
2226

23-
const { ready, errorLoading } = useDynamicScript(remoteUrl);
2427
useEffect(() => {
2528
if (Component) setComponent(null);
2629
// Only recalculate when key changes
2730
}, [key]);
2831

2932
useEffect(() => {
30-
if (ready && !Component) {
33+
if (!Component) {
3134
const Comp = lazy(loadComponent(scope, module));
3235
componentCache.set(key, Comp);
3336
setComponent(Comp);
3437
}
3538
// key includes all dependencies (scope/module)
36-
}, [Component, ready, key]);
39+
}, [Component, key]);
3740

38-
return { errorLoading, Component };
41+
return { Component };
3942
};
4043

4144
export default useFederatedComponent;

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,5 +215,6 @@
215215
"report:generate": "allure generate ./cypress/results/allure-results --clean -o ./cypress/report",
216216
"report:open": "allure open ./cypress/report",
217217
"preinstall": "npx only-allow pnpm"
218-
}
218+
},
219+
"packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
219220
}

0 commit comments

Comments
 (0)