Skip to content

Commit acede37

Browse files
2heal12heal1
committed
feat: run through basic example
1 parent 9f7856d commit acede37

File tree

19 files changed

+2631
-1807
lines changed

19 files changed

+2631
-1807
lines changed

‎apps/modern-component-data-fetch/host/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@
2626
],
2727
"dependencies": {
2828
"@babel/runtime": "7.26.0",
29-
"@modern-js/runtime": "2.65.1",
29+
"@modern-js/runtime": "2.67.3",
3030
"@module-federation/modern-js": "workspace:*",
3131
"antd": "4.24.15",
3232
"react": "~18.3.1",
3333
"react-dom": "~18.3.1"
3434
},
3535
"devDependencies": {
3636
"@modern-js-app/eslint-config": "2.59.0",
37-
"@modern-js/app-tools": "2.65.1",
37+
"@modern-js/app-tools": "2.67.3",
3838
"@modern-js/eslint-config": "2.59.0",
39-
"@modern-js/tsconfig": "2.65.1",
39+
"@modern-js/tsconfig": "2.67.3",
4040
"@types/jest": "~29.5.0",
4141
"@types/node": "~16.11.7",
4242
"@types/react": "~18.2.0",

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

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { createRemoteSSRComponent } from '@modern-js/runtime/mf';
2-
1+
import { kit } from '@module-federation/modern-js/runtime';
32
import './index.css';
3+
import RemoteSSRComponent2 from 'remote/Content2';
4+
5+
const { createRemoteSSRComponent } = kit;
46

57
const RemoteSSRComponent = createRemoteSSRComponent({
68
loader: () => import('remote/Content'),
@@ -16,10 +18,25 @@ const RemoteSSRComponent = createRemoteSSRComponent({
1618
},
1719
});
1820

21+
// const RemoteSSRComponent2 = createRemoteSSRComponent({
22+
// loader: () => import('remote/Content2'),
23+
// loading: 'loading...',
24+
// export: 'default',
25+
// fallback: ({ error }) => {
26+
// console.log(33333333333);
27+
// console.error(error);
28+
// if (error instanceof Error && error.message.includes('not exist')) {
29+
// return <div>fallback - not existed id</div>;
30+
// }
31+
// return <div>fallback</div>;
32+
// },
33+
// });
34+
1935
const Index = () => (
2036
<>
2137
<div className="container-box">
2238
<RemoteSSRComponent />
39+
<RemoteSSRComponent2 />
2340
</div>
2441
</>
2542
);

‎apps/modern-component-data-fetch/provider/module-federation.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export default createModuleFederationConfig({
44
filename: 'remoteEntry.js',
55
exposes: {
66
'./Content': './src/components/Content.tsx',
7-
'./Content.data': './src/components/Content.data.ts',
7+
'./Content2': './src/components/Content2.tsx',
8+
// './Content.data': './src/components/Content.data.ts',
89
},
910
shared: {
1011
react: { singleton: true },

‎apps/modern-component-data-fetch/provider/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@
2626
],
2727
"dependencies": {
2828
"@babel/runtime": "7.26.0",
29-
"@modern-js/runtime": "2.65.1",
29+
"@modern-js/runtime": "2.67.3",
3030
"@module-federation/modern-js": "workspace:*",
3131
"antd": "4.24.15",
3232
"react": "~18.3.1",
3333
"react-dom": "~18.3.1"
3434
},
3535
"devDependencies": {
3636
"@modern-js-app/eslint-config": "2.59.0",
37-
"@modern-js/app-tools": "2.65.1",
37+
"@modern-js/app-tools": "2.67.3",
3838
"@modern-js/eslint-config": "2.59.0",
39-
"@modern-js/tsconfig": "2.65.1",
39+
"@modern-js/tsconfig": "2.67.3",
4040
"@types/jest": "~29.5.0",
4141
"@types/node": "~16.11.7",
4242
"@types/react": "~18.2.0",

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import Button from 'antd/lib/button';
3+
4+
const Content = (): JSX.Element => {
5+
return (
6+
<div
7+
id="nested-remote-components333"
8+
style={{
9+
backgroundColor: '#e91ece',
10+
color: 'lightgrey',
11+
padding: '1rem',
12+
}}
13+
>
14+
<h2 onClick={() => alert('Client side Javascript works!')}>
15+
<strong>Coccococococ</strong>
16+
</h2>
17+
<Button
18+
id="nested-remote-components-button333"
19+
onClick={() => {
20+
console.log(3333);
21+
}}
22+
>
23+
Click me to test <strong>nested remote</strong> interactive!
24+
</Button>
25+
</div>
26+
);
27+
};
28+
29+
export default Content;

‎packages/modernjs/package.json

+16-8
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@
6060
"types": "./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts",
6161
"import": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js",
6262
"require": "./dist/esm/cli/mfRuntimePlugins/inject-node-fetch.js"
63+
},
64+
"./data-fetch-server-plugin": {
65+
"types": "./dist/types/cli/server/data-fetch-server-plugin.d.ts",
66+
"default": "./dist/cjs/cli/server/data-fetch-server-plugin.js"
6367
}
6468
},
6569
"typesVersions": {
@@ -87,6 +91,9 @@
8791
],
8892
"inject-node-fetch": [
8993
"./dist/types/cli/mfRuntimePlugins/inject-node-fetch.d.ts"
94+
],
95+
"data-fetch-server-plugin": [
96+
"./dist/types/cli/server/data-fetch-server-plugin.d.ts"
9097
]
9198
}
9299
},
@@ -95,9 +102,9 @@
95102
"author": "hanric <[email protected]>",
96103
"license": "MIT",
97104
"dependencies": {
98-
"@modern-js/node-bundle-require": "2.65.1",
105+
"@modern-js/node-bundle-require": "2.67.3",
99106
"@module-federation/rsbuild-plugin": "workspace:*",
100-
"@modern-js/utils": "2.65.1",
107+
"@modern-js/utils": "2.67.3",
101108
"@module-federation/enhanced": "workspace:*",
102109
"@module-federation/runtime": "workspace:*",
103110
"@module-federation/node": "workspace:*",
@@ -109,12 +116,13 @@
109116
},
110117
"devDependencies": {
111118
"@rsbuild/core": "1.2.8",
112-
"@modern-js/app-tools": "2.65.1",
113-
"@modern-js/core": "2.65.1",
114-
"@modern-js/module-tools": "2.65.1",
115-
"@modern-js/runtime": "2.65.1",
116-
"@modern-js/tsconfig": "2.65.1",
117-
"@module-federation/manifest": "workspace:*"
119+
"@modern-js/app-tools": "2.67.3",
120+
"@modern-js/core": "2.67.3",
121+
"@modern-js/module-tools": "2.67.3",
122+
"@modern-js/runtime": "2.67.3",
123+
"@modern-js/tsconfig": "2.67.3",
124+
"@module-federation/manifest": "workspace:*",
125+
"@modern-js/server-core": "2.67.3"
118126
},
119127
"peerDependencies": {
120128
"react": ">=17",

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import { moduleFederationPlugin, encodeName } from '@module-federation/sdk';
44
import { bundle } from '@modern-js/node-bundle-require';
55
import { PluginOptions } from '../types';
66
import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
7-
import { autoDeleteSplitChunkCacheGroups } from '@module-federation/rsbuild-plugin/utils';
8-
import logger from './logger';
7+
import {
8+
autoDeleteSplitChunkCacheGroups,
9+
addDataFetchExposes,
10+
} from '@module-federation/rsbuild-plugin/utils';
11+
import logger from '../runtime/logger';
912

1013
import type { InternalModernPluginOptions } from '../types';
1114
import type {
@@ -146,12 +149,16 @@ export const patchMFConfig = (
146149
remoteIpStrategy?: 'ipv4' | 'inherit',
147150
) => {
148151
replaceRemoteUrl(mfConfig, remoteIpStrategy);
152+
addDataFetchExposes(mfConfig.exposes, isServer);
153+
149154
if (mfConfig.remoteType === undefined) {
150155
mfConfig.remoteType = 'script';
151156
}
157+
152158
if (!mfConfig.name) {
153159
throw new Error(`${PLUGIN_IDENTIFIER} mfConfig.name can not be empty!`);
154160
}
161+
155162
const runtimePlugins = [...(mfConfig.runtimePlugins || [])];
156163

157164
patchDTSConfig(mfConfig, isServer);
@@ -485,6 +492,17 @@ export const moduleFederationConfigPlugin = (
485492
},
486493
};
487494
});
495+
496+
if (enableSSR && mfConfig.remotes) {
497+
api._internalServerPlugins(({ plugins }) => {
498+
plugins.push({
499+
name: '@module-federation/modern-js/data-fetch-server-plugin',
500+
options: {},
501+
});
502+
503+
return { plugins };
504+
});
505+
}
488506
},
489507
});
490508

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

+23-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
22
import helpers from '@module-federation/runtime/helpers';
33
import { getDataFetchInfo } from '../../runtime/utils';
4+
import logger from '../../runtime/logger';
5+
import { getDataFetchMapKey } from '../../runtime/dataFetch';
46

57
const autoFetchData: () => FederationRuntimePlugin = () => ({
68
name: 'auto-fetch-data-plugin',
@@ -30,14 +32,29 @@ const autoFetchData: () => FederationRuntimePlugin = () => ({
3032

3133
const { modules, version } = remoteSnapshot;
3234

33-
const key = `${name}@${version}@${dataFetchName}`;
34-
console.log('======= auto fetch plugin key: ', key);
35-
if (helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[key]) {
35+
const dataFetchMapKey = getDataFetchMapKey(
36+
{ name, version },
37+
dataFetchInfo,
38+
);
39+
logger.debug(
40+
'======= auto fetch plugin dataFetchMapKey: ',
41+
dataFetchMapKey,
42+
);
43+
44+
if (!dataFetchMapKey) {
45+
return args;
46+
}
47+
48+
if (
49+
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__[
50+
dataFetchMapKey
51+
]
52+
) {
3653
return args;
3754
}
3855

3956
if (!modules.find((module) => module.moduleName === dataFetchName)) {
40-
console.log(
57+
logger.debug(
4158
'======= auto fetch plugin module name not existed',
4259
modules.map((i) => i.moduleName).join(', '),
4360
);
@@ -63,11 +80,12 @@ const autoFetchData: () => FederationRuntimePlugin = () => ({
6380
});
6481

6582
helpers.global.nativeGlobal.__FEDERATION__.__DATA_FETCH_MAP__.set(
66-
key,
83+
dataFetchMapKey,
6784
fetchData,
6885
);
6986

7087
return args;
7188
},
7289
});
90+
7391
export default autoFetchData;

‎packages/modernjs/src/cli/server/data-fetch-server-plugin.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { ServerPluginLegacy } from '@modern-js/server-core';
2+
3+
export default (): ServerPluginLegacy => ({
4+
name: 'mf-data-fetch-server-plugin',
5+
setup() {
6+
return {
7+
config(config) {
8+
if (!config.render) {
9+
config.render = {
10+
middleware: [],
11+
};
12+
} else if (!config.render.middleware) {
13+
config.render.middleware = [];
14+
}
15+
16+
config.render!.middleware!.push(
17+
async (ctx: { request: any }, next: () => any) => {
18+
const { request } = ctx;
19+
console.log('request.url: ', request.url);
20+
return next();
21+
},
22+
);
23+
return config;
24+
},
25+
};
26+
},
27+
});

‎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 {

0 commit comments

Comments
 (0)