Skip to content

Commit f3b764a

Browse files
ScriptedAlchemyScriptedAlchemy
authored
feat(node): runtime plugin for node envs (#2361)
Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent 0b7f8f8 commit f3b764a

File tree

14 files changed

+545
-148
lines changed

14 files changed

+545
-148
lines changed

‎.changeset/dry-buses-burn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'website-new': patch
3+
---
4+
5+
Node Runtime Plugin

‎.changeset/spotty-adults-report.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/node': minor
3+
---
4+
5+
Node Runtime Plugin implementation and options

‎.github/workflows/build-and-test.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ jobs:
6464
npx wait-on tcp:3001 &&
6565
npx wait-on tcp:3002 &&
6666
npx wait-on tcp:3000 &&
67-
npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=3 &&
67+
npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
6868
lsof -ti tcp:3000,3001,3002 | xargs kill
6969
7070
- name: E2E Test for ModernJS

‎apps/3000-home/cypress/e2e/app.cy.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ describe('3000-home/', () => {
1010
'/checkout',
1111
'/checkout/test-title',
1212
'/checkout/test-check-button',
13+
'/api/test',
1314
];
1415
urls.forEach((url) => {
1516
cy.request(url); // This makes a GET request, not a full page visit

‎apps/node-remote/webpack.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const { UniversalFederationPlugin } = require('@module-federation/node');
88
module.exports = composePlugins(withNx(), (config) => {
99
// config.output.publicPath = '/remotetest'; // this breaks because of import.meta
1010
// config.output.publicPath = 'auto';
11-
config.target = 'node';
11+
config.target = 'async-node';
1212
config.devtool = false;
1313
config.cache = false;
1414
if (config.mode === 'development') {
@@ -21,6 +21,7 @@ module.exports = composePlugins(withNx(), (config) => {
2121
name: 'node_remote',
2222
library: { type: 'commonjs-module' },
2323
filename: 'remoteEntry.js',
24+
useRuntimePlugin: false,
2425
exposes: {
2526
'./test': './src/expose.js',
2627
},

‎apps/website-new/docs/en/plugin/_meta.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,10 @@
33
"type": "dir",
44
"name": "dev",
55
"label": "Development"
6+
},
7+
{
8+
"type": "dir",
9+
"name": "plugins",
10+
"label": "Plugins"
611
}
712
]

‎apps/website-new/docs/en/plugin/plugins/_meta.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
["index"]

‎apps/website-new/docs/en/plugin/plugins/index.mdx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { PackageManagerTabs, Tabs, Tab } from '@theme';
2+
3+
# Node Plugin
4+
5+
Module Federation on the server-side enables many possibilities for backend architecture as well as enables server side rendering of apps.
6+
7+
8+
## Usage
9+
10+
This Runtime Plugin is Provided by the `module-federation/node` package
11+
12+
<PackageManagerTabs
13+
command={{
14+
npm: 'npm add @module-federation/enhanced @module-federation/node --save',
15+
yarn: 'yarn add @module-federation/enhanced @module-federation/node --save',
16+
pnpm: 'pnpm add @module-federation/enhanced @module-federation/node --save',
17+
bun: 'bun add @module-federation/enhanced @module-federation/node --save',
18+
}}
19+
/>
20+
21+
22+
### Configuration
23+
24+
The runtime plugin can be applied at compile-time or runtime
25+
<Tabs>
26+
<Tab label="Rspack">
27+
```typescript title="rspack.config.js"
28+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/webpack');
29+
30+
new ModuleFederationPlugin({
31+
// other options
32+
runtimePlugins: [
33+
requrie.resolve('@module-federation/node/runtimePlugin')
34+
]
35+
});
36+
```
37+
</Tab>
38+
<Tab label="Webpack">
39+
```typescript title="webpack.config.js"
40+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');
41+
42+
new ModuleFederationPlugin({
43+
// other options
44+
runtimePlugins: [
45+
requrie.resolve('@module-federation/node/runtimePlugin')
46+
]
47+
});
48+
```
49+
</Tab>
50+
<Tab label="Module Federation Runtime">
51+
```typescript title="app.js"
52+
import {init} from '@module-federation/runtime';
53+
import nodeRuntimePlugin from '@module-federation/node/runtimePlugin';
54+
init({
55+
name: '@demo/app-main',
56+
remotes: [
57+
{
58+
name: '@demo/app2',
59+
entry: 'http: //localhost:3006/mf-manifest.json',
60+
alias: 'app2',
61+
},
62+
],
63+
plugins: [nodeRuntimePlugin()],
64+
});
65+
```
66+
</Tab>
67+
</Tabs>

‎packages/node/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,51 @@ yarn add @module-federation/node
3535
## 🚀 Usage
3636

3737
There are two approaches to using the plugins exported from this package, dependent on your use case.
38+
### Use as Runtime Plugin
39+
40+
`module-federation/enhanced` supports runtime plugins.
41+
42+
```js
43+
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
44+
45+
const options = {
46+
target: 'async-node',
47+
output: {
48+
chunkFilename: '[id]-[chunkhash].js' // important to hash chunks
49+
},
50+
plugins: [
51+
new ModuleFederationPlugin({
52+
name: 'app1',
53+
exposes: {},
54+
remotes: {
55+
app2: 'app2@http://'
56+
},
57+
runtimePlugins: [
58+
require.resolve('@module-federation/node/runtimePlugin')
59+
],
60+
remoteType: 'script',
61+
library: { type: 'commonjs-module', name: 'app1' }
62+
})
63+
]
64+
};
65+
66+
```
67+
68+
or you can enable it with some presets via UniversalFederation
69+
70+
```js
71+
new UniversalFederationPlugin({
72+
name: 'website2',
73+
library: { type: 'commonjs-module' },
74+
isServer: true, // or false
75+
remotes: {},
76+
filename: 'remoteEntry.js',
77+
useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugin api
78+
exposes: {
79+
'./SharedComponent': './remoteServer/SharedComponent',
80+
},
81+
})
82+
```
3883

3984
### UniversalFederationPlugin
4085

@@ -61,6 +106,7 @@ const config = {
61106
isServer: true, // or false
62107
remotes: {},
63108
filename: 'remoteEntry.js',
109+
useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugins
64110
exposes: {
65111
'./SharedComponent': './remoteServer/SharedComponent',
66112
},

‎packages/node/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"require": "./dist/src/index.js"
1111
},
1212
"./package.json": "./package.json",
13+
"./runtimePlugin": "./dist/src/runtimePlugin.js",
1314
"./utils": {
1415
"import": "./dist/src/utils/index.js",
1516
"require": "./dist/src/utils/index.js"
@@ -47,7 +48,6 @@
4748
"@module-federation/runtime": "workspace:*"
4849
},
4950
"peerDependencies": {
50-
"next": "^12||^13",
5151
"react": "^16||^17||^18",
5252
"react-dom": "^16||^17||^18",
5353
"webpack": "^5.40.0"

0 commit comments

Comments
 (0)