-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
App.js
99 lines (91 loc) · 2.23 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { useState, lazy, Suspense } from 'react';
import { loadRemote, init } from '@module-federation/runtime';
import ReactDOM from 'react-dom';
init({
remotes: [
{
name: 'app2',
alias: 'app2',
entry: 'http://localhost:3002/remoteEntry.js',
},
{
name: 'app3',
alias: 'app3',
entry: 'http://localhost:3003/remoteEntry.js',
},
],
plugins: [
{
name: 'custom-plugin',
beforeInit(args) {
return args;
},
init(args) {
console.log('init: ', args);
return args;
},
beforeLoadShare(args) {
console.log('beforeLoadShare: ', args);
return args;
},
},
],
shared: {
react: {
version: '16.0.0',
scope: 'default',
lib: () => React,
shareConfig: {
singleton: true,
requiredVersion: '^16.0.0',
},
},
'react-dom': {
version: '16.0.0',
scope: 'default',
lib: () => ReactDOM,
shareConfig: {
singleton: true,
requiredVersion: '^16.0.0',
},
},
},
});
const System = ({ request }) => {
if (!request) {
return <h2>No system specified</h2>;
}
const Component = lazy(() => loadRemote(request));
return (
<Suspense fallback="Loading System">
<Component />
</Suspense>
);
};
const App = () => {
const [system, setSystem] = useState(null);
const setApp2 = () => setSystem('app2/Widget');
const setApp3 = () => setSystem('app3/Widget');
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 any components or modules that have been loaded
already.
</p>
<button onClick={setApp2}>Load App 2 Widget</button>
<button onClick={setApp3}>Load App 3 Widget</button>
<div style={{ marginTop: '2em' }}>
<System request={system} />
</div>
</div>
);
};
export default App;