-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
App.js
80 lines (68 loc) · 1.94 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React, { useState, useEffect, Suspense } from 'react';
import { init, loadRemote } from '@module-federation/runtime';
init({
name: 'app1',
remotes: [
{
name: 'app2',
entry: 'http://localhost:3002/remoteEntry.js',
},
{
name: 'app3',
entry: 'http://localhost:3003/remoteEntry.js',
},
],
});
function useDynamicImport({ module, scope }) {
const [component, setComponent] = useState(null);
useEffect(() => {
if (!module || !scope) return;
const loadComponent = async () => {
try {
const { default: Component } = await loadRemote(`${scope}/${module}`);
setComponent(() => Component);
} catch (error) {
console.error(`Error loading remote module ${scope}/${module}:`, error);
}
};
loadComponent();
}, [module, scope]);
return component;
}
function App() {
const [{ module, scope }, setSystem] = useState({});
const setApp2 = () => {
setSystem({
scope: 'app2',
module: 'Widget',
});
};
const setApp3 = () => {
setSystem({
scope: 'app3',
module: 'Widget',
});
};
const Component = useDynamicImport({ module, scope });
return (
<div
style={{
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
}}
>
<h1>Dynamic System Host</h1>
<h2>App 1</h2>
<p>
The Dynamic System will take advantage of Module Federation <strong>remotes</strong> and{' '}
<strong>exposes</strong>. It will not load components that have already been loaded.
</p>
<button onClick={setApp2}>Load App 2 Widget</button>
<button onClick={setApp3}>Load App 3 Widget</button>
<div style={{ marginTop: '2em' }}>
<Suspense fallback="Loading System">{Component ? <Component /> : null}</Suspense>
</div>
</div>
);
}
export default App;