Skip to content

Commit fd2191a

Browse files
hosekeeping apollo (#4003)
* ll * cpollo client * cpollo client * cpollo client * cpollo client * apollo client --------- Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent e5f3ebb commit fd2191a

19 files changed

+247
-393
lines changed
Lines changed: 20 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,39 @@
11
const deps = require('../package.json').dependencies;
2-
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
3-
const rspack = require('@rspack/core')
42

5-
module.exports = (FederationPlugin)=> {
6-
// let FederationPlugin;
7-
// if(type === 'rspack') {
8-
// FederationPlugin = rspack.container.ModuleFederationPlugin
9-
// } else if(type === 'uni')
10-
return {
3+
const sharedDependencies = {
4+
react: { requiredVersion: deps.react, eager: true },
5+
'react-dom': deps['react-dom'],
6+
graphql: { requiredVersion: deps.graphql, eager: true },
7+
'@apollo/client': {
8+
eager: true,
9+
singleton: true,
10+
requiredVersion: deps['@apollo/client'],
11+
},
12+
'node-fetch': deps['node-fetch'],
13+
'serialize-javascript': deps['serialize-javascript'],
14+
};
15+
16+
module.exports = (FederationPlugin) => ({
1117
client: new FederationPlugin({
1218
remoteType: 'script',
1319
name: 'app1',
1420
filename: 'remoteEntry.js',
1521
remotes: {
1622
app2: 'app2@http://localhost:3001/static/remoteEntry.js',
1723
},
18-
shared: [
19-
{
20-
react: {requiredVersion: deps.react, eager: true},
21-
'react-dom': deps['react-dom'],
22-
graphql: {requiredVersion: deps.graphql, eager: true},
23-
'@apollo/client': {
24-
eager: true,
25-
singleton: true,
26-
requiredVersion: deps['@apollo/client'],
27-
},
28-
'node-fetch': deps['node-fetch'],
29-
'serialize-javascript': deps['serialize-javascript'],
30-
},
31-
],
24+
shared: sharedDependencies,
3225
}),
33-
server
34-
:
35-
[
26+
server: [
3627
new FederationPlugin({
3728
remoteType: 'script',
38-
isServer: true,
3929
name: 'app1',
40-
library: {type: 'commonjs-module'},
30+
library: { type: 'commonjs-module', name: 'app1' },
4131
filename: 'remoteEntry.js',
4232
remotes: {
4333
app2: 'app2@http://localhost:3001/server/remoteEntry.js',
4434
},
4535
runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
46-
shared: [
47-
{
48-
react: {requiredVersion: deps.react, eager: true},
49-
'react-dom': deps['react-dom'],
50-
graphql: {requiredVersion: deps.graphql, eager: true},
51-
'@apollo/client': {
52-
eager: true,
53-
singleton: true,
54-
requiredVersion: deps['@apollo/client'],
55-
},
56-
'node-fetch': deps['node-fetch'],
57-
'serialize-javascript': deps['serialize-javascript'],
58-
},
59-
],
36+
shared: sharedDependencies,
6037
}),
61-
]
62-
}
63-
}
38+
],
39+
});

apollo-client/app1/config/rspack.client.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const path = require('path');
22
const { merge } = require('webpack-merge');
3-
const shared = require('./webpack.shared');
4-
const rspack = require('@rspack/core')
5-
const moduleFederationPlugin = require('./module-federation');
3+
const sharedConfig = require('./webpack.shared');
4+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
5+
const getModuleFederationPlugin = require('./module-federation');
66

77
/**
88
* @type {import('webpack').Configuration}
@@ -19,7 +19,7 @@ const webpackConfig = {
1919
chunkFilename: '[name].js',
2020
publicPath: 'http://localhost:3000/static/',
2121
},
22-
plugins: [moduleFederationPlugin(rspack.container.ModuleFederationPlugin).client],
22+
plugins: [getModuleFederationPlugin(ModuleFederationPlugin).client],
2323
};
2424

25-
module.exports = merge(shared, webpackConfig);
25+
module.exports = merge(sharedConfig, webpackConfig);

apollo-client/app1/config/rspack.server.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
4-
const moduleFederationPlugin = require('./module-federation');
5-
const rspack = require('@rspack/core');
4+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
5+
const getModuleFederationPlugin = require('./module-federation');
66

77
/**
88
* @type {import('webpack').Configuration}
@@ -14,14 +14,16 @@ const webpackConfig = {
1414
output: {
1515
path: path.resolve(__dirname, '../dist/server'),
1616
filename: '[name].js',
17+
chunkFilename: '[name]-[contenthash].js',
1718
libraryTarget: 'commonjs-module',
1819
},
1920
externals: ['express'],
2021
mode: 'production',
21-
plugins: [...moduleFederationPlugin(rspack.container.ModuleFederationPlugin).server],
22+
plugins: [...getModuleFederationPlugin(ModuleFederationPlugin).server],
2223
stats: {
2324
colors: true,
2425
},
2526
};
2627

2728
module.exports = merge(shared, webpackConfig);
29+

apollo-client/app1/config/webpack.client.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
44
const moduleFederationPlugin = require('./module-federation');
5-
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
5+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
66

77
/**
88
* @type {import('webpack').Configuration}

apollo-client/app1/config/webpack.server.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
44
const moduleFederationPlugin = require('./module-federation');
5-
const { UniversalFederationPlugin } = require('@module-federation/node');
5+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
66

77
/**
88
* @type {import('webpack').Configuration}
@@ -13,12 +13,12 @@ const webpackConfig = {
1313
entry: ['@babel/polyfill', path.resolve(__dirname, '../src/server/index')],
1414
output: {
1515
path: path.resolve(__dirname, '../dist/server'),
16-
filename: '[name].js',
16+
filename: '[name]-[contenthash].js',
1717
libraryTarget: 'commonjs-module',
1818
},
1919
externals: ['express'],
2020
mode: 'production',
21-
plugins: [...moduleFederationPlugin(UniversalFederationPlugin).server],
21+
plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
2222
stats: {
2323
colors: true,
2424
},

apollo-client/app1/package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.0",
44
"scripts": {
55
"legacy:start": "pnpm legacy:build && pnpm serve",
6-
"serve": "node dist/server/main.js",
6+
"start": "pnpm build && pnpm serve",
7+
"serve": "wait-on tcp:3002 && node dist/server/main.js",
78
"legacy:build": "pnpm build:server:legacy && pnpm build:client:legacy",
89
"build": "pnpm build:server && pnpm build:client",
910
"build:client:legacy": "rimraf dist/client && webpack --mode production --progress --config config/webpack.client.js",
@@ -41,8 +42,8 @@
4142
"webpack": "5.91.0",
4243
"webpack-cli": "4.10.0",
4344
"webpack-merge": "5.10.0",
44-
"@rspack/core": "0.6.5",
45-
"@rspack/cli": "0.6.5",
46-
"@rspack/dev-server": "0.6.5"
45+
"@rspack/core": "0.7.0-beta.0",
46+
"@rspack/cli": "0.7.0-beta.0",
47+
"@rspack/dev-server": "0.7.0-beta.0"
4748
}
48-
}
49+
}

apollo-client/app1/src/client/components/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import { Helmet } from 'react-helmet';
33
import type { PokemonListProps } from 'app2/PokemonList';
44

5+
6+
console.log(import('app2/PokemonList'));
57
const PokemonList = React.lazy(
68
() => import('app2/PokemonList') as Promise<{ default: React.FC<PokemonListProps> }>,
79
);

apollo-client/app1/src/server/render.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ import React from 'react';
22
import { Helmet } from 'react-helmet';
33
import { ApolloProvider } from '@apollo/client';
44
import { renderToStringWithData } from '@apollo/client/react/ssr';
5-
// import { renderToStaticMarkup } from 'react-dom/server';
65
import serialize from 'serialize-javascript';
7-
import fetch from 'node-fetch';
86

97
import App from '../client/components/App';
108
import { createApolloClient } from '../client/apolloClient';
119

1210
export default async (req, res, next) => {
11+
const fetch = (await import('node-fetch')).default
1312
const helmet = Helmet.renderStatic();
1413

1514
const { apolloClient } = createApolloClient({
@@ -47,3 +46,4 @@ export default async (req, res, next) => {
4746
res.write('</body></html>');
4847
res.send();
4948
};
49+

apollo-client/app2/config/module-federation.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,9 @@ module.exports = (FederationPlugin) => {
2727
server: [
2828
new FederationPlugin({
2929
remoteType: 'script',
30-
isServer: true,
3130
runtimePlugins:[require.resolve('@module-federation/node/runtimePlugin')],
3231
name: 'app2',
33-
library: {type: 'commonjs-module'},
32+
library: {type: 'commonjs-module',name: 'app2'},
3433
filename: 'remoteEntry.js',
3534
exposes: {
3635
'./PokemonList': './src/client/components/PokemonList',

apollo-client/app2/config/rspack.client.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
4-
const rspack = require('@rspack/core')
4+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
55
const moduleFederationPlugin = require('./module-federation');
66

77
/**
@@ -19,7 +19,7 @@ const webpackConfig = {
1919
chunkFilename: '[name].js',
2020
publicPath: 'http://localhost:3001/static/',
2121
},
22-
plugins: [moduleFederationPlugin(rspack.container.ModuleFederationPlugin).client],
22+
plugins: [moduleFederationPlugin(ModuleFederationPlugin).client],
2323
};
2424

2525
module.exports = merge(shared, webpackConfig);

apollo-client/app2/config/rspack.server.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
44
const moduleFederationPlugin = require('./module-federation');
5-
const rspack = require('@rspack/core');
5+
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
66

77
/**
88
* @type {import('webpack').Configuration}
@@ -18,7 +18,7 @@ const webpackConfig = {
1818
},
1919
externals: ['express'],
2020
mode: 'production',
21-
plugins: [...moduleFederationPlugin(rspack.container.ModuleFederationPlugin).server],
21+
plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
2222
stats: {
2323
colors: true,
2424
},

apollo-client/app2/config/webpack.client.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
44
const moduleFederationPlugin = require('./module-federation');
5-
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
5+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
66

77
/**
88
* @type {import('webpack').Configuration}

apollo-client/app2/config/webpack.server.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require('path');
22
const { merge } = require('webpack-merge');
33
const shared = require('./webpack.shared');
44
const moduleFederationPlugin = require('./module-federation');
5-
const { UniversalFederationPlugin } = require('@module-federation/node');
5+
const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
66

77
/**
88
* @type {import('webpack').Configuration}
@@ -18,7 +18,7 @@ const webpackConfig = {
1818
},
1919
externals: ['express'],
2020
mode: 'production',
21-
plugins: [...moduleFederationPlugin(UniversalFederationPlugin).server],
21+
plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
2222
stats: {
2323
colors: true,
2424
},

apollo-client/app2/package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.0",
44
"scripts": {
55
"legacy:start": "pnpm legacy:build && pnpm serve",
6-
"serve": "node dist/server/main.js",
6+
"start": "pnpm build && pnpm serve",
7+
"serve": "sleep 3 && node dist/server/main.js",
78
"legacy:build": "pnpm build:server:legacy && pnpm build:client:legacy",
89
"build": "pnpm build:server && pnpm build:client",
910
"build:client:legacy": "rimraf dist/client && webpack --mode production --progress --config config/webpack.client.js",
@@ -41,8 +42,8 @@
4142
"webpack": "5.91.0",
4243
"webpack-cli": "4.10.0",
4344
"webpack-merge": "5.10.0",
44-
"@rspack/core": "0.6.5",
45-
"@rspack/cli": "0.6.5",
46-
"@rspack/dev-server": "0.6.5"
45+
"@rspack/core": "0.7.0-beta.0",
46+
"@rspack/cli": "0.7.0-beta.0",
47+
"@rspack/dev-server": "0.7.0-beta.0"
4748
}
48-
}
49+
}

apollo-client/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{
22
"name": "apollo-client",
3-
"description": "This example demonstrates using Apollo Client with Module Federation.",
3+
"description": "Example demonstrating Apollo Client with Module Federation.",
44
"version": "0.0.0",
55
"scripts": {
66
"legacy:start": "pnpm --filter apollo-client_* --parallel legacy:start",
77
"legacy:build": "pnpm --filter apollo-client_* --parallel legacy:build",
88
"start": "pnpm --filter apollo-client_* --parallel start",
99
"serve": "pnpm --filter apollo-client_* --parallel serve",
1010
"build": "pnpm --filter apollo-client_* --parallel build",
11-
"e2e:ci": "pnpm build && pnpm serve & sleep 2 && wait-on tcp:3000 && wait-on tcp:3001 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
12-
"legacy:e2e:ci": "kill-port 3000 && kill-port 3001 && pnpm legacy:build && pnpm serve & sleep 20 && wait-on tcp:3000 && wait-on tcp:3001 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
11+
"e2e:ci": "pnpm build && pnpm serve & sleep 30 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
12+
"legacy:e2e:ci": "kill-port 3000 && kill-port 3001 && pnpm legacy:build && pnpm serve & sleep 60 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
1313
},
1414
"devDependencies": {
15-
"wait-on": "7.2.0",
16-
"kill-port": "2.0.1"
15+
"wait-on": "^7.2.0",
16+
"kill-port": "^2.0.1"
1717
}
1818
}

0 commit comments

Comments
 (0)