Skip to content

Commit c8c0ad2

Browse files
2heal1zhoushaw
2heal1
and
zhoushaw
authored
feat: enhance type capabilities (module-federation#2185)
Co-authored-by: Zhou xiao <[email protected]>
1 parent 1d3ee82 commit c8c0ad2

File tree

195 files changed

+7465
-2460
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

195 files changed

+7465
-2460
lines changed

‎.changeset/config.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
"@module-federation/sdk",
1212
"@module-federation/runtime-tools",
1313
"@module-federation/managers",
14-
"@module-federation/manifest"
14+
"@module-federation/manifest",
15+
"@module-federation/dts-plugin",
16+
"@module-federation/native-federation-typescript"
1517
]
1618
],
1719
"ignorePatterns": ["^alpha|^beta"],

‎.changeset/late-mice-hope.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@module-federation/native-federation-typescript': patch
3+
'@module-federation/third-party-dts-extractor': patch
4+
'@module-federation/enhanced-rspack': patch
5+
'@module-federation/dts-plugin': patch
6+
'@module-federation/enhanced': patch
7+
'@module-federation/manifest': patch
8+
'@module-federation/sdk': patch
9+
---
10+
11+
feat: enhance type capability

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,4 @@ apps/**/dist
5454
!packages/enhanced/test/configCases/**/**/node_modules
5555
packages/enhanced/test/js
5656
.ignored
57+
/.mf

‎apps/3000-home/next.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ const nextConfig = {
1212
},
1313
webpack(config, options) {
1414
const { isServer } = options;
15-
15+
config.watchOptions = {
16+
ignored: ['**/node_modules/**', '**/@mf-types/**'],
17+
};
1618
// used for testing build output snapshots
1719
const remotes = {
1820
checkout: `checkout@http://localhost:3002/_next/static/${

‎apps/3001-shop/next.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const nextConfig = {
1111
},
1212
webpack(config, options) {
1313
const { isServer } = options;
14-
14+
config.watchOptions = {
15+
ignored: ['**/node_modules/**', '**/@mf-types/**'],
16+
};
1517
config.plugins.push(
1618
new NextFederationPlugin({
1719
name: 'shop',

‎apps/3002-checkout/next.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ const nextConfig = {
1212
},
1313
webpack(config, options) {
1414
const { isServer } = options;
15+
config.watchOptions = {
16+
ignored: ['**/node_modules/**', '**/@mf-types/**'],
17+
};
1518
config.plugins.push(
1619
new NextFederationPlugin({
1720
name: 'checkout',

‎apps/react-ts-host/@mf-types/index.d.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type {
2+
PackageType as PackageType_0,
3+
RemoteKeys as RemoteKeys_0,
4+
} from './react_ts_nested_remote/apis.d.ts';
5+
declare module '@module-federation/runtime' {
6+
type RemoteKeys = RemoteKeys_0;
7+
type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
8+
export function loadRemote<T extends RemoteKeys, Y>(
9+
packageName: T,
10+
): Promise<PackageType<T, Y>>;
11+
export function loadRemote<T extends string, Y>(
12+
packageName: T,
13+
): Promise<PackageType<T, Y>>;
14+
}
15+
declare module '@module-federation/runtime-tools' {
16+
type RemoteKeys = RemoteKeys_0;
17+
type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
18+
export function loadRemote<T extends RemoteKeys, Y>(
19+
packageName: T,
20+
): Promise<PackageType<T, Y>>;
21+
export function loadRemote<T extends string, Y>(
22+
packageName: T,
23+
): Promise<PackageType<T, Y>>;
24+
}

‎apps/react-ts-host/@mf-types/react-ts-remote/Module.d.ts

-2
This file was deleted.

‎apps/react-ts-host/@mf-types/react_ts_nested_remote/Module.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './compiled-types/nx-welcome';
2+
export { default } from './compiled-types/nx-welcome';

‎apps/react-ts-host/@mf-types/react_ts_nested_remote/apis.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type RemoteKeys =
2+
| 'react_ts_nested_remote/Module'
3+
| 'react_ts_nested_remote/utils';
4+
type PackageType<T> = T extends 'react_ts_nested_remote/utils'
5+
? typeof import('react_ts_nested_remote/utils')
6+
: T extends 'react_ts_nested_remote/Module'
7+
? typeof import('react_ts_nested_remote/Module')
8+
: any;

‎apps/react-ts-host/@mf-types/react_ts_nested_remote/compiled-types/nx-welcome.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import RemoteModule from 'react_ts_remote/Module';
2+
export default RemoteModule;

‎apps/react-ts-host/@mf-types/react_ts_nested_remote/compiled-types/utils.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export declare function add(a: number, b: number, c: number): number;
2+
export declare function sub(a: number, b: number, c: number): number;

‎apps/react-ts-host/@mf-types/react_ts_nested_remote/utils.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './compiled-types/utils';
2+
export { default } from './compiled-types/utils';

‎apps/react-ts-host/@mf-types/react_ts_remote/Module.d.ts

-2
This file was deleted.

‎apps/react-ts-host/@mf-types/react_ts_remote/_types/apps/react-ts-remote/src/app/App.d.ts

-2
This file was deleted.

‎apps/react-ts-host/@mf-types/react_ts_remote/_types/apps/react-ts-remote/src/app/nx-welcome.d.ts

-6
This file was deleted.

‎apps/react-ts-host/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"version": "1.0.0",
44
"private": true,
55
"devDependencies": {
6-
"@module-federation/core": "workspace:*",
7-
"@module-federation/typescript": "workspace:*",
86
"@module-federation/enhanced": "workspace:*",
7+
"@module-federation/core": "workspace:*",
8+
"@module-federation/runtime": "workspace:*",
99
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
1010
"react-refresh": "0.14.0"
1111
}

‎apps/react-ts-host/project.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"outputs": ["{options.outputPath}"],
1010
"defaultConfiguration": "production",
1111
"options": {
12-
"compiler": "swc",
12+
"compiler": "babel",
1313
"outputPath": "apps/react-ts-host/dist",
1414
"index": "apps/react-ts-host/src/index.html",
1515
"baseHref": "/",

‎apps/react-ts-host/remotes.d.ts

-1
This file was deleted.

‎apps/react-ts-host/src/app/App.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import * as React from 'react';
22
import NxWelcome from './nx-welcome';
33
import { Link, Route, Routes } from 'react-router-dom';
4+
import { loadRemote } from '@module-federation/runtime';
45
import useDynamicModule from './useDynamicRemote';
56

6-
const ReactTsRemote = React.lazy(() => import('react_ts_remote/Module'));
7+
const ReactTsRemote = React.lazy(() => import('react_ts_nested_remote/Module'));
8+
9+
loadRemote('react_ts_nested_remote/utils').then((utils) => {
10+
console.log(utils.add(1, 2, 3) + utils.sub(1, 2, 3));
11+
});
712

813
const DynamicReactTsRemote = React.lazy(() =>
914
useDynamicModule({
10-
name: 'react_ts_remote',
11-
url: 'http://localhost:3004/remoteEntry.js',
15+
name: 'react_ts_nested_remote',
16+
url: 'http://localhost:3005/remoteEntry.js',
1217
modulePath: './Module',
1318
}),
1419
);
@@ -29,7 +34,10 @@ export function App() {
2934
</ul>
3035
<Routes>
3136
<Route path="/" element={<NxWelcome title="react-ts-host" />} />
32-
<Route path="/react-ts-remote" element={<ReactTsRemote />} />
37+
<Route
38+
path="/react-ts-remote"
39+
element={<ReactTsRemote title="xxx" />}
40+
/>
3341
<Route
3442
path="/dynamic-react-ts-remote"
3543
element={

‎apps/react-ts-host/tsconfig.app.json

+5-21
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,11 @@
11
{
22
"extends": "./tsconfig.json",
33
"compilerOptions": {
4+
"baseUrl": "./",
45
"outDir": "../../dist/out-tsc",
5-
"types": [
6-
"node",
7-
"@nx/react/typings/cssmodule.d.ts",
8-
"@nx/react/typings/image.d.ts"
9-
]
6+
"paths": {
7+
"*": ["./@mf-types/*"]
8+
}
109
},
11-
"files": [
12-
"../../node_modules/@nx/react/typings/cssmodule.d.ts",
13-
"../../node_modules/@nx/react/typings/image.d.ts"
14-
],
15-
"exclude": [
16-
"jest.config.ts",
17-
"**/*.spec.ts",
18-
"**/*.test.ts",
19-
"**/*.spec.tsx",
20-
"**/*.test.tsx",
21-
"**/*.spec.js",
22-
"**/*.test.js",
23-
"**/*.spec.jsx",
24-
"**/*.test.jsx"
25-
],
26-
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
10+
"exclude": ["dist/**"]
2711
}

‎apps/react-ts-host/tsconfig.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"extends": "../../tsconfig.base.json",
32
"compilerOptions": {
3+
"baseUrl": "./",
44
"jsx": "react-jsx",
55
"allowJs": true,
66
"esModuleInterop": true,
@@ -10,8 +10,9 @@
1010
"noImplicitOverride": true,
1111
"noPropertyAccessFromIndexSignature": true,
1212
"noImplicitReturns": true,
13-
"noFallthroughCasesInSwitch": true
14-
},
15-
"files": [],
16-
"include": ["./remotes.d.ts"]
13+
"noFallthroughCasesInSwitch": true,
14+
"paths": {
15+
"*": ["./@mf-types/*"]
16+
}
17+
}
1718
}

‎apps/react-ts-host/webpack.config.js

+8-56
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
22

33
registerPluginTSTranspiler();
4-
const { withModuleFederation } = require('@nx/react/module-federation');
5-
const { FederatedTypesPlugin } = require('@module-federation/typescript');
64
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
75
const { composePlugins, withNx } = require('@nx/webpack');
86
const { withReact } = require('@nx/react');
7+
process.env.FEDERATION_DEBUG = true;
98

109
module.exports = composePlugins(
1110
withNx(),
1211
withReact(),
1312
async (config, context) => {
13+
// prevent cyclic updates
14+
config.watchOptions = {
15+
ignored: ['**/node_modules/**', '**/@mf-types/**'],
16+
};
1417
const baseConfig = {
1518
name: 'react_ts_host',
1619
filename: 'remoteEntry.js',
1720
remotes: {
18-
react_ts_remote: 'react_ts_remote@http://localhost:3004/remoteEntry.js',
21+
react_ts_nested_remote:
22+
// 'react_ts_nested_remote@http://localhost:3005/remoteEntry.js',
23+
'react_ts_nested_remote@http://localhost:3005/mf-manifest.json',
1924
},
2025
};
2126
config.plugins.push(new ModuleFederationPlugin(baseConfig));
2227

23-
config.plugins.push(
24-
new FederatedTypesPlugin({
25-
federationConfig: {
26-
...baseConfig,
27-
filename: 'remoteEntry.js',
28-
},
29-
}),
30-
);
31-
3228
config.optimization.runtimeChunk = false;
3329
config.plugins.forEach((p) => {
3430
if (p.constructor.name === 'ModuleFederationPlugin') {
@@ -50,50 +46,6 @@ module.exports = composePlugins(
5046
runtimeChunk: false,
5147
minimize: false,
5248
};
53-
// const mf = await withModuleFederation(defaultConfig);
5449
return config;
55-
56-
// const mf = await withModuleFederation(defaultConfig);
57-
58-
// /** @type {import('webpack').Configuration} */
59-
// const parsedConfig = mf(config, context);
60-
61-
// const remotes = baseConfig.remotes.reduce((remotes, remote) => {
62-
// const [name, url] = remote;
63-
// remotes[name] = url;
64-
// return remotes;
65-
// }, {});
66-
67-
// parsedConfig.plugins.forEach((plugin) => {
68-
// if (plugin.constructor.name === 'ModuleFederationPlugin') {
69-
// //Temporary workaround - https://github.com/nrwl/nx/issues/16983
70-
// plugin._options.library = undefined;
71-
// }
72-
// });
73-
74-
// parsedConfig.plugins.push(
75-
// new FederatedTypesPlugin({
76-
// federationConfig: {
77-
// ...baseConfig,
78-
// filename: 'remoteEntry.js',
79-
// remotes,
80-
// },
81-
// }),
82-
// );
83-
84-
// parsedConfig.infrastructureLogging = {
85-
// level: 'verbose',
86-
// colors: true,
87-
// };
88-
89-
// //Temporary workaround - https://github.com/nrwl/nx/issues/16983
90-
// parsedConfig.experiments = { outputModule: false };
91-
92-
// parsedConfig.output = {
93-
// ...parsedConfig.output,
94-
// scriptType: 'text/javascript',
95-
// };
96-
97-
// return parsedConfig;
9850
},
9951
);

‎apps/react-ts-nested-remote/.babelrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"presets": [
3+
[
4+
"@nx/react/babel",
5+
{
6+
"runtime": "automatic"
7+
}
8+
]
9+
],
10+
"plugins": []
11+
}

‎apps/react-ts-nested-remote/.browserslistrc

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is used by:
2+
# 1. autoprefixer to adjust CSS to support the below specified browsers
3+
# 2. babel preset-env to adjust included polyfills
4+
#
5+
# For additional information regarding the format and rule options, please see:
6+
# https://github.com/browserslist/browserslist#queries
7+
#
8+
# If you need to support different browsers in production, you may tweak the list below.
9+
10+
last 1 Chrome version
11+
last 1 Firefox version
12+
last 2 Edge major versions
13+
last 2 Safari major version
14+
last 2 iOS major versions
15+
Firefox ESR
16+
not IE 9-11 # For IE 9-11 support, remove 'not'.

‎apps/react-ts-nested-remote/.eslintrc.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["plugin:@nx/react", "../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*", "node_modules/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

0 commit comments

Comments
 (0)