core/apps/manifest-demo/webpack-host/src/App.tsx at fc350dba6f7c22900a1a50b29be40e0392211126 · module-federation/core · GitHub

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { Suspense, lazy } from 'react';
// @ts-ignore
import TestRemoteHook from './test-remote-hook';
import { loadRemote } from '@module-federation/runtime';
import LocalBtn from './components/ButtonOldAnt';
import WebpackPng from './webpack.png';
import WebpackSvg from './webpack.svg';

function DynamicRemoteButton() {
  // @ts-ignore ignore
  const Comp = React.lazy(async () => {
    //@ts-ignore
    const Button = await loadRemote('dynamic-remote/ButtonOldAnt');
    console.log('BUTTON');
    console.log(Button);
    return Button;
  });
  console.log('loadManifestProvider');
  return (
    <React.Suspense fallback="Loading Button">
      <Comp />
    </React.Suspense>
  );
}

const WebpackSvgRemote = lazy(() =>
  import('remote1/WebpackSvg').then((m) => {
    return m;
  }),
);

const WebpackPngRemote = lazy(() => import('remote1/WebpackPng'));

const App = () => (
  <div>
    <h2>Manifest Basic Usage</h2>
    <h3>check static remote</h3>
    <table border={1} cellPadding={5}>
      <thead>
        <tr>
          <td></td>
          <td>Test case</td>
          <td>Expected</td>
          <td>Actual</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>✅</td>
          <td>Test hook from remote localhost:3009</td>
          <td>
            <div>
              Page with custom remote hook. You must see text in red box below:
              <div style={{ border: '1px solid red', padding: 5 }}>
                Custom hook from localhost:3009 works!
              </div>
            </div>
          </td>
          <td>
            <TestRemoteHook />
          </td>
        </tr>
        <tr>
          <td>✅</td>
          <td>
            Loading remote component with PNG image from localhost:3009
            <br />
            <blockquote>(check publicPath fix in image-loader)</blockquote>
          </td>
          <td>
            <img className="home-webpack-png" src={WebpackPng} />
          </td>
          <td>
            <Suspense fallback="loading WebpackPngRemote">
              <WebpackPngRemote />
            </Suspense>
          </td>
        </tr>
        <tr>
          <td>✅</td>
          <td>
            Loading remote component with SVG from localhost:3009
            <br />
            <blockquote>(check publicPath fix in url-loader)</blockquote>
          </td>
          <td>
            <img className="home-webpack-svg" src={WebpackSvg} />
          </td>
          <td>
            <Suspense fallback="loading WebpackSvgRemote">
              <WebpackSvgRemote />
            </Suspense>
          </td>
        </tr>
      </tbody>
    </table>

    <h3>check dynamic remote</h3>
    <table border={1} cellPadding={5}>
      <thead>
        <tr>
          <td></td>
          <td>Test case</td>
          <td>Expected</td>
          <td>Actual</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>✅</td>
          <td>Loading dynamic remote Button from localhost:3010</td>
          <td>
            <LocalBtn />
          </td>
          <td>
            <DynamicRemoteButton />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
);

export default App;