Skip to content

Commit 0b4b748

Browse files
ScriptedAlchemyScriptedAlchemy
authored
Update typescript sample (#3824)
* update typescript example * update typescript example * update typescript example * update runtime node sample * update runtime node sample --------- Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent 67c48c5 commit 0b4b748

26 files changed

+473
-384
lines changed

‎dashboard-admin-react-rspack-material-ui/.vscode/launch.json

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎different-react-versions-typescript/README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
This example demos the ability to load two separate versions of react (v16.6.3 and v18.2.0).
44

5+
Read more about TypeScript and Federation: https://module-federation.io/guide/basic/type-prompt.html
6+
57
> Check the javascript version of this example [here](../different-react-versions/README.md).
68
79
Module Federation allows us to create an adapter which attaches a hooks-friendly version to render a section of thr app using modern versions.
@@ -62,8 +64,7 @@ This is a generic component type, so you can pass the generic parameter to the c
6264

6365
```jsx
6466
// remeber to add path alias to your tsconfig.base.json at the root of the workspace and the type definition file of the remote component
65-
// this demo contains an example that reproduce that but you can check in the gist below
66-
// https://gist.github.com/brunos3d/80235047c74b27573234c774ed474ef8
67+
// Read more here: https://module-federation.io/guide/basic/type-prompt.html
6768
import type { ButtonProps } from 'app2/Button';
6869

6970
<ReactAdapterConsumer<ButtonProps>

‎different-react-versions-typescript/app1/@mf-types/app2/Button.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './compiled-types/Button';
2+
export { default } from './compiled-types/Button';

‎different-react-versions-typescript/app1/@mf-types/app2/ModernComponent.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './compiled-types/ModernReactComponent';
2+
export { default } from './compiled-types/ModernReactComponent';

‎different-react-versions-typescript/app1/@mf-types/app2/compiled-types/Button.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
export interface ButtonProps {
3+
color?: 'blue' | 'red';
4+
}
5+
declare const Button: React.FC<ButtonProps>;
6+
export default Button;

‎different-react-versions-typescript/app1/@mf-types/app2/compiled-types/ModernReactComponent.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactAdapterProvider from './ReactAdapterProvider';
3+
export interface ModernReactComponentProps {
4+
children?: React.ReactNode;
5+
input: string;
6+
}
7+
declare const ModernReactComponent: React.FC<ModernReactComponentProps>;
8+
export declare const Adapted: React.ForwardRefExoticComponent<ModernReactComponentProps & React.RefAttributes<ReactAdapterProvider<ModernReactComponentProps>>>;
9+
export default ModernReactComponent;

‎different-react-versions-typescript/app1/@mf-types/app2/compiled-types/ReactAdapterProvider.d.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
export declare type ReactAdapterProviderProps<P = {}> = P & {
3+
component: React.FunctionComponent<P> | React.ComponentClass<P> | keyof React.ReactHTML | string;
4+
children?: React.ReactNode;
5+
};
6+
export interface ReactAdapterProviderState {
7+
Component: React.ReactNode;
8+
}
9+
declare class ReactAdapterProvider<P = {}> extends React.Component<ReactAdapterProviderProps<P>, ReactAdapterProviderState> {
10+
private refHold;
11+
constructor(props: ReactAdapterProviderProps<P>);
12+
init: (hydrate?: boolean) => void;
13+
componentDidUpdate(): void;
14+
componentDidMount(): void;
15+
render(): JSX.Element;
16+
}
17+
export default ReactAdapterProvider;

‎different-react-versions-typescript/app1/index.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
declare module 'app2/Button' {
2-
export * from 'app2/src/components/Button';
2+
export * from 'app2/src/components/Button';
33
}
44

55
declare module 'app2/ModernComponent' {
6-
export * from 'app2/src/components/ModernReactComponent';
6+
export * from 'app2/src/components/ModernReactComponent';
77
}

‎different-react-versions-typescript/app1/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "different-react-versions-typescript_app1",
33
"version": "0.0.0",
44
"scripts": {
5-
"legacy:start": "webpack-cli serve",
5+
"legacy:start": "webpack serve",
66
"start": "rspack serve",
77
"legacy:build": "webpack --mode production",
88
"build": "rspack --mode production",
@@ -32,4 +32,4 @@
3232
"@rspack/cli": "^0.6.2",
3333
"@rspack/dev-server": "^0.6.2"
3434
}
35-
}
35+
}

‎different-react-versions-typescript/app1/rspack.config.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const HtmlWebpackPlugin = require('html-webpack-plugin');
2-
const { ModuleFederationPlugin } = require('@rspack/core').container;
2+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
33
const path = require('path');
44
const deps = require('./package.json').dependencies;
55

@@ -46,9 +46,8 @@ module.exports = {
4646
plugins: [
4747
new ModuleFederationPlugin({
4848
name: 'app1',
49-
library: { type: 'var', name: 'app1' },
5049
remotes: {
51-
app2: 'app2',
50+
app2: 'app2@http://localhost:3002/remoteEntry.js',
5251
},
5352
shared: {
5453
...deps,

‎different-react-versions-typescript/app1/tsconfig.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"extends": "../tsconfig.base.json",
3-
"compilerOptions": {},
3+
"compilerOptions": {
4+
"paths": {
5+
"*": ["./@mf-types/*"]
6+
}
7+
},
48
"include": ["src/**/*", "**/*.d.ts"],
59
"exclude": ["node_modules"]
610
}

‎different-react-versions-typescript/app1/webpack.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ module.exports = {
3737
plugins: [
3838
new ModuleFederationPlugin({
3939
name: 'app1',
40-
library: { type: 'var', name: 'app1' },
40+
dts:true,
4141
remotes: {
42-
app2: 'app2',
42+
app2: 'app2@http://localhost:3002/remoteEntry.js',
4343
},
4444
shared: {
4545
...deps,

‎different-react-versions-typescript/app2/rspack.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const HtmlWebpackPlugin = require('html-webpack-plugin');
2-
const { ModuleFederationPlugin } = require('@rspack/core').container;
2+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
33
const path = require('path');
44

55
module.exports = {
@@ -44,7 +44,6 @@ module.exports = {
4444
plugins: [
4545
new ModuleFederationPlugin({
4646
name: 'app2',
47-
library: { type: 'var', name: 'app2' },
4847
filename: 'remoteEntry.js',
4948
exposes: {
5049
'./Button': './src/components/Button',

‎different-react-versions-typescript/app2/tsconfig.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"extends": "../tsconfig.base.json",
3-
"compilerOptions": {},
3+
"compilerOptions": {
4+
"paths": {
5+
"*": ["./@mf-types/*"]
6+
}
7+
},
48
"include": ["src/**/*", "**/*.d.ts"],
59
"exclude": ["node_modules"]
610
}

‎different-react-versions-typescript/app2/webpack.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ module.exports = {
3636
plugins: [
3737
new ModuleFederationPlugin({
3838
name: 'app2',
39-
library: { type: 'var', name: 'app2' },
4039
filename: 'remoteEntry.js',
4140
exposes: {
4241
'./Button': './src/components/Button',

‎different-react-versions-typescript/tsconfig.base.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
"lib": ["dom", "dom.iterable", "esnext"],
1616
"baseUrl": ".",
1717
"paths": {
18-
"@app1/*": ["./app1/src/*"],
19-
"@app2/*": ["./app2/src/*"]
18+
"*": ["./@mf-types/*"]
2019
}
2120
},
2221
"exclude": ["node_modules", "tmp"]

‎dynamic-remotes-node/README.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,3 @@ Similar to browser side dynamic remotes.
55
This allows you to dynamically load remote containers on the server.
66

77
`pnpm run start` will initiate a build and http server, then node will execute a simple test.
8-
9-
## runtime-container
10-
This example shows the same thing but how to do it outside of the webpack runtime (outside a webpack bundle). See the script `import-remote.js`, which is not compiled by webpack. Run the command `yarn import-remote` or simply, `node import-remote.js`

‎dynamic-remotes-node/app1/rspack.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
2+
module.exports = {
3+
entry: './index.js',
4+
mode: 'development',
5+
output: {
6+
library: {type: 'commonjs-module',}
7+
},
8+
target: 'async-node',
9+
plugins: [
10+
new ModuleFederationPlugin({
11+
remoteType: 'script',
12+
name: 'app1',
13+
runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
14+
exposes: {
15+
'./noop': './noop.js',
16+
}
17+
}),
18+
]
19+
}

‎dynamic-remotes-node/app1/webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
remoteType: 'script',
1212
isServer: true,
1313
name: 'app1',
14+
useRuntimePlugin: true,
1415
exposes: {
1516
'./noop': './noop.js',
1617
}

‎dynamic-remotes-node/app2/rspack.config.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
2+
module.exports = {
3+
entry: './index.js',
4+
mode: 'development',
5+
target: 'async-node',
6+
output: {
7+
library: {type: 'commonjs-module',}
8+
},
9+
plugins: [
10+
new ModuleFederationPlugin({
11+
remoteType: 'script',
12+
isServer: true,
13+
name: 'app2',
14+
library: {type: 'commonjs-module',},
15+
runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
16+
filename: 'remoteEntry.js',
17+
exposes: {
18+
'./sample': './expose-sample.js',
19+
}
20+
}),
21+
]
22+
}

‎dynamic-remotes-node/app2/webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
remoteType: 'script',
1212
isServer: true,
1313
name: 'app2',
14+
useRuntimePlugin: true,
1415
library: {type: 'commonjs-module',},
1516
filename: 'remoteEntry.js',
1617
exposes: {

‎dynamic-remotes-node/import-remote.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎dynamic-remotes-node/package.json

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,21 @@
66
"license": "MIT",
77
"scripts": {
88
"serve": "concurrently 'serve -s app1/dist -l 3001' 'serve -s app2/dist -l 3002'",
9-
"build": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js' 'cd app2; webpack --config ./webpack.config.js'",
10-
"start": "pnpm build && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'",
11-
"import-remote": "node import-remote.js"
9+
"build:legacy": "rimraf dist/server && concurrently 'cd app1; webpack --config ./webpack.config.js' 'cd runtime-container; webpack --config ./webpack.config.js' 'cd app2; webpack --config ./webpack.config.js'",
10+
"build": "rimraf dist/server && concurrently 'cd app1; rspack --config ./rspack.config.js' 'cd runtime-container; rspack --config ./rspack.config.js' 'cd app2; rspack --config ./rspack.config.js'",
11+
"start:legacy": "pnpm build:legacy && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'",
12+
"start": "pnpm build && concurrently 'pnpm serve' 'sleep 5 && node app1/dist/main.js'"
1213
},
1314
"dependencies": {
1415
"@module-federation/node": "^2.2.0",
16+
"@module-federation/enhanced": "^0.1.9",
1517
"@module-federation/runtime": "^0.1.9",
1618
"concurrently": "^8.0.1",
1719
"webpack": "^5.91.0",
1820
"rimraf": "^5.0.5",
19-
"webpack-cli": "^5.1.4"
21+
"webpack-cli": "^5.1.4",
22+
"@rspack/cli": "^0.6.2",
23+
"@rspack/core": "^0.6.2",
24+
"@rspack/dev-server": "^0.6.2"
2025
}
21-
}
26+
}

‎dynamic-remotes-node/runtime-container/rspack.config.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
2+
3+
module.exports = {
4+
entry: './index.js',
5+
mode: 'development',
6+
target: 'async-node',
7+
output: {
8+
library: {type: 'commonjs-module',}
9+
},
10+
optimization: {
11+
runtimeChunk: 'single',
12+
},
13+
plugins: [
14+
new ModuleFederationPlugin({
15+
remoteType: 'script',
16+
isServer: true,
17+
name: 'app2',
18+
library: {type: 'commonjs-module',},
19+
runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
20+
filename: 'remoteEntry.js',
21+
exposes: {
22+
'./sample': './expose-sample.js',
23+
}
24+
}),
25+
]
26+
}

‎dynamic-remotes-node/runtime-container/webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ module.exports = {
1414
remoteType: 'script',
1515
isServer: true,
1616
name: 'app2',
17+
useRuntimePlugin: true,
1718
library: {type: 'commonjs-module',},
1819
filename: 'remoteEntry.js',
1920
exposes: {

0 commit comments

Comments
 (0)