Skip to content

Commit 276b691

Browse files
2heal12heal1
committed
chore: wip
1 parent 9f7856d commit 276b691

File tree

8 files changed

+154
-110
lines changed

8 files changed

+154
-110
lines changed

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { createRemoteSSRComponent } from '@modern-js/runtime/mf';
2-
1+
import { kit } from '@module-federation/modern-js/runtime';
32
import './index.css';
43

4+
const { createRemoteSSRComponent } = kit;
5+
56
const RemoteSSRComponent = createRemoteSSRComponent({
67
loader: () => import('remote/Content'),
78
loading: 'loading...',

‎packages/modernjs/src/cli/configPlugin.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { bundle } from '@modern-js/node-bundle-require';
55
import { PluginOptions } from '../types';
66
import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
77
import { autoDeleteSplitChunkCacheGroups } from '@module-federation/rsbuild-plugin/utils';
8-
import logger from './logger';
8+
import logger from '../runtime/logger';
99

1010
import type { InternalModernPluginOptions } from '../types';
1111
import type {
@@ -219,6 +219,19 @@ export const patchMFConfig = (
219219
mfConfig.dts = false;
220220
mfConfig.dev = false;
221221

222+
const exposes = mfConfig.exposes;
223+
224+
if (typeof exposes === 'object' && !Array.isArray(exposes)) {
225+
Object.keys(exposes).forEach((key) => {
226+
const expose = exposes[key];
227+
if (typeof expose === 'string') {
228+
exposes[key] = {
229+
import: expose,
230+
};
231+
}
232+
});
233+
}
234+
222235
return mfConfig;
223236
};
224237

‎packages/modernjs/src/cli/ssrPlugin.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@module-
55
import UniverseEntryChunkTrackerPlugin from '@module-federation/node/universe-entry-chunk-tracker-plugin';
66
import { updateStatsAndManifest } from './manifest';
77
import { isDev } from './constant';
8-
import logger from './logger';
8+
import logger from '../runtime/logger';
99
import { isWebTarget, skipByTarget } from './utils';
1010

1111
import type {

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

+14-89
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import React from 'react';
2-
import helpers from '@module-federation/runtime/helpers';
3-
import {
4-
getInstance,
5-
type FederationHost,
6-
} from '@module-federation/enhanced/runtime';
7-
import { isBrowserEnv } from '@module-federation/sdk';
2+
import logger from './logger';
3+
import { getInstance } from '@module-federation/enhanced/runtime';
84
import {
95
ErrorBoundary,
106
ErrorBoundaryPropsWithComponent,
117
} from 'react-error-boundary';
12-
import { getDataFetchInfo } from './utils';
138
import { Await } from './Await';
9+
import { fetchData, getDataFetchId } from './dataFetch';
10+
import { getLoadedRemoteInfos } from './utils';
1411

1512
type IProps = {
1613
id: string;
@@ -20,81 +17,6 @@ type IProps = {
2017

2118
type ReactKey = { key?: React.Key | null };
2219

23-
async function fetchData(
24-
id: string,
25-
uid: string,
26-
): Promise<unknown | undefined> {
27-
if (isBrowserEnv()) {
28-
if (!globalThis._MF__DATA_FETCH_ID_MAP__) {
29-
globalThis._MF__DATA_FETCH_ID_MAP__ = {};
30-
}
31-
if (globalThis._MF__DATA_FETCH_ID_MAP__[uid]) {
32-
return;
33-
}
34-
let res;
35-
let rej;
36-
const p = new Promise((resolve, reject) => {
37-
res = resolve;
38-
rej = reject;
39-
});
40-
globalThis._MF__DATA_FETCH_ID_MAP__[uid] = [p, res, rej];
41-
return globalThis._MF__DATA_FETCH_ID_MAP__[uid][0];
42-
}
43-
const instance = getInstance();
44-
if (!instance) {
45-
return;
46-
}
47-
48-
const { name } = instance.remoteHandler.idToRemoteMap[id] || {};
49-
if (!name) {
50-
return;
51-
}
52-
const module = instance.moduleCache.get(name);
53-
if (!module) {
54-
return;
55-
}
56-
const dataFetchInfo = getDataFetchInfo({
57-
id,
58-
name,
59-
alias: module.remoteInfo.alias,
60-
});
61-
if (!dataFetchInfo) {
62-
return;
63-
}
64-
const key = `${name}@${module.remoteInfo.version}@${dataFetchInfo.dataFetchName}`;
65-
const fetchDataPromise =
66-
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(key);
67-
if (!fetchDataPromise) {
68-
return;
69-
}
70-
71-
const fetchDataFn = await fetchDataPromise;
72-
if (!fetchDataFn) {
73-
return;
74-
}
75-
console.log('fetchDataFn: ', fetchDataFn.toString());
76-
return fetchDataFn();
77-
}
78-
79-
function getLoadedRemoteInfos(instance: FederationHost, id: string) {
80-
const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
81-
if (!name) {
82-
return;
83-
}
84-
const module = instance.moduleCache.get(name);
85-
if (!module) {
86-
return;
87-
}
88-
const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(
89-
module.remoteInfo,
90-
);
91-
return {
92-
...module.remoteInfo,
93-
snapshot: remoteSnapshot,
94-
expose,
95-
};
96-
}
97-
9820
function getTargetModuleInfo(id: string) {
9921
const instance = getInstance();
10022
if (!instance) {
@@ -199,9 +121,6 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
199121
fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
200122
export?: E;
201123
}) {
202-
// const [uid,setUid] = useState('')
203-
console.log('createRemoteSSRComponent trigger');
204-
205124
type ComponentType = T[E] extends (...args: any) => any
206125
? Parameters<T[E]>[0] extends undefined
207126
? ReactKey
@@ -219,18 +138,24 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
219138
};
220139

221140
const getData = async () => {
222-
// const nodeUid = isBrowserEnv () ? document.get : uid
223141
const m = await callLoader();
224142
const moduleId = m && m[Symbol.for('mf_module_id')];
225-
const data = await fetchData(moduleId, moduleId);
226-
console.log('data: ', data);
143+
const dataFetchId = getDataFetchId(moduleId);
144+
logger.debug('getData dataFetchId: ', dataFetchId);
145+
if (!dataFetchId) {
146+
return;
147+
}
148+
const data = await fetchData(dataFetchId);
149+
logger.debug('data: \n', data);
227150
return data;
228151
};
229152

230153
const LazyComponent = React.lazy(async () => {
231154
try {
232155
const m = await callLoader();
233156
const moduleId = m && m[Symbol.for('mf_module_id')];
157+
const dataFetchId = getDataFetchId(moduleId);
158+
logger.debug('LazyComponent dataFetchId: ', dataFetchId);
234159

235160
const assets = collectSSRAssets({
236161
id: moduleId,
@@ -247,7 +172,7 @@ export function createRemoteSSRComponent<T, E extends keyof T>(info: {
247172
suppressHydrationWarning
248173
dangerouslySetInnerHTML={{
249174
__html: String.raw`
250-
globalThis._MF__DATA_FETCH_ID_MAP__['${moduleId}'][1](${JSON.stringify(props._mfData)})
175+
globalThis._MF__DATA_FETCH_ID_MAP__['${dataFetchId}'][1](${JSON.stringify(props._mfData)})
251176
`,
252177
}}
253178
></script>

‎packages/modernjs/src/runtime/dataFetch.ts

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { isBrowserEnv, composeKeyWithSeparator } from '@module-federation/sdk';
2+
import helpers from '@module-federation/runtime/helpers';
3+
import { getInstance } from '@module-federation/enhanced/runtime';
4+
import {
5+
getDataFetchInfo,
6+
getLoadedRemoteInfos,
7+
isSSRDowngrade,
8+
} from './utils';
9+
10+
export async function fetchData(id: string): Promise<unknown | undefined> {
11+
if (isBrowserEnv()) {
12+
if (!globalThis._MF__DATA_FETCH_ID_MAP__) {
13+
globalThis._MF__DATA_FETCH_ID_MAP__ = {};
14+
}
15+
if (globalThis._MF__DATA_FETCH_ID_MAP__[id]) {
16+
return;
17+
}
18+
if (isSSRDowngrade()) {
19+
}
20+
let res;
21+
let rej;
22+
const p = new Promise((resolve, reject) => {
23+
res = resolve;
24+
rej = reject;
25+
});
26+
globalThis._MF__DATA_FETCH_ID_MAP__[id] = [p, res, rej];
27+
return globalThis._MF__DATA_FETCH_ID_MAP__[id][0];
28+
}
29+
30+
const fetchDataPromise =
31+
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.get(id);
32+
if (!fetchDataPromise) {
33+
return;
34+
}
35+
36+
const fetchDataFn = await fetchDataPromise;
37+
if (!fetchDataFn) {
38+
return;
39+
}
40+
return fetchDataFn();
41+
}
42+
43+
export function getDataFetchId(moduleId: string) {
44+
const instance = getInstance();
45+
if (!instance) {
46+
return;
47+
}
48+
const loadedRemoteInfo = getLoadedRemoteInfos(instance, moduleId);
49+
if (!loadedRemoteInfo) {
50+
return;
51+
}
52+
53+
const { name } = instance.remoteHandler.idToRemoteMap[moduleId] || {};
54+
if (!name) {
55+
return;
56+
}
57+
const module = instance.moduleCache.get(name);
58+
if (!module) {
59+
return;
60+
}
61+
const dataFetchInfo = getDataFetchInfo({
62+
id: moduleId,
63+
name,
64+
alias: module.remoteInfo.alias,
65+
});
66+
67+
if (!dataFetchInfo) {
68+
return;
69+
}
70+
71+
return composeKeyWithSeparator(
72+
name,
73+
module.remoteInfo.version,
74+
dataFetchInfo.dataFetchName,
75+
);
76+
}

‎packages/modernjs/src/cli/logger.ts renamed to ‎packages/modernjs/src/runtime/logger.ts

File renamed without changes.

‎packages/modernjs/src/runtime/utils.ts

+29
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { FederationHost } from '@module-federation/enhanced/runtime';
2+
13
export const getDataFetchInfo = ({
24
name,
35
alias,
@@ -33,3 +35,30 @@ export const getDataFetchInfo = ({
3335
dataFetchId,
3436
};
3537
};
38+
39+
export function getLoadedRemoteInfos(instance: FederationHost, id: string) {
40+
const { name, expose } = instance.remoteHandler.idToRemoteMap[id] || {};
41+
if (!name) {
42+
return;
43+
}
44+
const module = instance.moduleCache.get(name);
45+
if (!module) {
46+
return;
47+
}
48+
const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(
49+
module.remoteInfo,
50+
);
51+
return {
52+
...module.remoteInfo,
53+
snapshot: remoteSnapshot,
54+
expose,
55+
};
56+
}
57+
58+
export function isSSRDowngrade() {
59+
if (typeof window === 'undefined') {
60+
return true;
61+
}
62+
63+
return window._SSR_DATA?.renderLevel !== 2;
64+
}

0 commit comments

Comments
 (0)