Skip to content

Commit ec066cd

Browse files
2heal12heal1
committed
chore: add demo
1 parent d6dda15 commit ec066cd

File tree

5 files changed

+85
-53
lines changed

5 files changed

+85
-53
lines changed

‎apps/modern-component-data-fetch/host/src/routes/page.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ const RemoteSSRComponent = createRemoteSSRComponent({
1515
});
1616

1717
const Index = () => (
18-
<div className="container-box">
19-
<RemoteSSRComponent />
20-
</div>
18+
<>
19+
<div className="container-box">
20+
<RemoteSSRComponent />
21+
</div>
22+
</>
2123
);
2224

2325
export default Index;

‎apps/modern-component-data-fetch/provider/src/components/Content.data.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
export const fetchData = async () => {
1+
export type Data = {
2+
data: string;
3+
};
4+
5+
export const fetchData = async (): Promise<Data> => {
26
return new Promise((resolve) => {
37
setTimeout(() => {
48
resolve({

‎apps/modern-component-data-fetch/provider/src/components/Content.tsx

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
import React from 'react';
22
import Button from 'antd/lib/button';
33
import stuff from './stuff.module.css';
4+
import type { Data } from './Content.data';
45

5-
export default (): JSX.Element => (
6-
<div
7-
id="nested-remote-components"
8-
style={{
9-
backgroundColor: '#e91ece',
10-
color: 'lightgrey',
11-
padding: '1rem',
12-
}}
13-
>
14-
<h2 onClick={() => alert('Client side Javascript works!')}>
15-
<strong>nested remote</strong>
16-
</h2>
17-
<Button
18-
id="nested-remote-components-button"
19-
className={stuff['test-remote2']}
20-
onClick={() =>
21-
alert('[nested-remote-components] Client side Javascript works!')
22-
}
6+
export default (props: { _mfData: Data }): JSX.Element => {
7+
console.log(333, props);
8+
return (
9+
<div
10+
id="nested-remote-components"
11+
style={{
12+
backgroundColor: '#e91ece',
13+
color: 'lightgrey',
14+
padding: '1rem',
15+
}}
2316
>
24-
Click me to test <strong>nested remote</strong> interactive!
25-
</Button>
26-
</div>
27-
);
17+
<h2 onClick={() => alert('Client side Javascript works!')}>
18+
<strong>{props?._mfData?.data || 'fallback data'}</strong>
19+
</h2>
20+
<Button
21+
id="nested-remote-components-button"
22+
className={stuff['test-remote2']}
23+
onClick={() =>
24+
alert('[nested-remote-components] Client side Javascript works!')
25+
}
26+
>
27+
Click me to test <strong>nested remote</strong> interactive!
28+
</Button>
29+
</div>
30+
);
31+
};

‎packages/modernjs/src/cli/mfRuntimePlugins/auto-fetch-data.ts

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { getDataFetchInfo } from '../../runtime/utils';
55
const autoFetchData: () => FederationRuntimePlugin = () => ({
66
name: 'auto-fetch-data-plugin',
77
afterLoadSnapshot(args) {
8+
if (typeof window !== 'undefined') {
9+
return args;
10+
}
811
const { id, moduleInfo, remoteSnapshot, host } = args;
912

1013
if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
@@ -39,23 +42,26 @@ const autoFetchData: () => FederationRuntimePlugin = () => ({
3942
return args;
4043
}
4144

42-
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key] = host
43-
.loadRemote(dataFetchId)
44-
.then((m) => {
45-
if (
46-
m &&
47-
typeof m === 'object' &&
48-
'fetchData' in m &&
49-
typeof m.fetchData === 'function'
50-
) {
51-
console.log('======= auto fetch plugin fetchData', m.fetchData);
52-
return m.fetchData();
53-
}
54-
})
55-
.catch((e) => {
56-
console.log('======= auto fetch plugin fetchData error', e);
57-
return null;
58-
});
45+
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.set(
46+
key,
47+
host
48+
.loadRemote(dataFetchId)
49+
.then((m) => {
50+
if (
51+
m &&
52+
typeof m === 'object' &&
53+
'fetchData' in m &&
54+
typeof m.fetchData === 'function'
55+
) {
56+
console.log('======= auto fetch plugin fetchData', m.fetchData);
57+
return m.fetchData();
58+
}
59+
})
60+
.catch((e) => {
61+
console.log('======= auto fetch plugin fetchData error', e);
62+
return null;
63+
}),
64+
);
5965

6066
return args;
6167
},

‎packages/modernjs/src/runtime/createRemoteSSRComponent.tsx

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ type IProps = {
1919
type ReactKey = { key?: React.Key | null };
2020

2121
async function fetchData(id: string): Promise<unknown | undefined> {
22+
if (typeof window !== 'undefined') {
23+
// @ts-ignore
24+
return window._ssd;
25+
}
2226
const instance = getInstance();
2327
if (!instance) {
2428
return;
@@ -45,7 +49,7 @@ async function fetchData(id: string): Promise<unknown | undefined> {
4549
'------ helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key];',
4650
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__,
4751
);
48-
return helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key];
52+
return helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(key);
4953
}
5054

5155
function getLoadedRemoteInfos(instance: FederationHost, id: string) {
@@ -127,8 +131,9 @@ export function collectSSRAssets(options: IProps) {
127131
}
128132
const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
129133
if (injectLink) {
130-
[...targetModule.assets.css.sync, ...targetModule.assets.css.async].forEach(
131-
(file, index) => {
134+
[...targetModule.assets.css.sync, ...targetModule.assets.css.async]
135+
.sort()
136+
.forEach((file, index) => {
132137
links.push(
133138
<link
134139
key={`${file.split('.')[0]}_${index}`}
@@ -137,8 +142,7 @@ export function collectSSRAssets(options: IProps) {
137142
type="text/css"
138143
/>,
139144
);
140-
},
141-
);
145+
});
142146
}
143147
if (injectScript) {
144148
scripts.push(
@@ -149,7 +153,7 @@ export function collectSSRAssets(options: IProps) {
149153
crossOrigin="anonymous"
150154
/>,
151155
);
152-
[...targetModule.assets.js.sync].forEach((file, index) => {
156+
[...targetModule.assets.js.sync].sort().forEach((file, index) => {
153157
scripts.push(
154158
<script
155159
key={`${file.split('.')[0]}_${index}`}
@@ -172,9 +176,9 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
172176
}) {
173177
type ComponentType = T[E] extends (...args: any) => any
174178
? Parameters<T[E]>[0] extends undefined
175-
? ReactKey & { _mf_data?: any }
176-
: Parameters<T[E]>[0] & ReactKey & { _mfData?: any }
177-
: ReactKey & { _mfData?: any };
179+
? ReactKey
180+
: Parameters<T[E]>[0] & ReactKey
181+
: ReactKey;
178182
const exportName = info?.export || 'default';
179183

180184
const LazyComponent = React.lazy(async () => {
@@ -186,17 +190,29 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
186190
}
187191
const moduleId = m && m[Symbol.for('mf_module_id')];
188192

189-
const data = await fetchData(moduleId);
193+
//@ts-ignore
194+
const data =
195+
typeof window !== 'undefined' ? window._ssd : await fetchData(moduleId);
190196

191197
const assets = collectSSRAssets({
192198
id: moduleId,
193199
});
200+
console.log('assets: ', assets);
201+
console.log(assets.length);
202+
console.log('mfData: ', data);
194203

195204
const Com = m[exportName] as React.FC<ComponentType>;
196205
if (exportName in m && typeof Com === 'function') {
197206
return {
198207
default: (props: Omit<ComponentType, 'key'>) => (
199208
<>
209+
<script
210+
dangerouslySetInnerHTML={{
211+
__html: String.raw`
212+
window._ssd=${JSON.stringify(data)}
213+
`,
214+
}}
215+
></script>
200216
{assets}
201217
<Com {...props} _mfData={data} />
202218
</>

0 commit comments

Comments
 (0)