Skip to content

Commit 10f2b73

Browse files
ScriptedAlchemyScriptedAlchemy
committed
feat(nextjs-mf): update module share for rsc
1 parent 7a178c0 commit 10f2b73

File tree

14 files changed

+329
-118
lines changed

14 files changed

+329
-118
lines changed

‎apps/next-app-router-4000/app/page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import { demos } from '#/lib/demos';
22
import Link from 'next/link';
3+
import dynamic from 'next/dynamic';
4+
const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
35

46
export default function Page() {
57
return (
68
<div className="space- y-8">
9+
<Button>Button from remote</Button>
710
<h1 className="text-xl font-medium text-gray-300">Examples</h1>
811

912
<div className="space-y-10 text-white">

‎apps/next-app-router-4000/next.config.js

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,24 @@ const nextConfig = {
1010
// See: https://github.com/gregberge/svgr
1111
svgr: false,
1212
},
13+
port: 4000,
1314
webpack(config, options) {
1415
const { isServer } = options;
1516
config.watchOptions = {
1617
ignored: ['**/node_modules/**', '**/@mf-types/**'],
1718
};
1819
// used for testing build output snapshots
1920
const remotes = {
20-
checkout: `checkout@http://localhost:3002/_next/static/${
21+
remote_4001: `remote_4001@http://localhost:4001/_next/static/${
2122
isServer ? 'ssr' : 'chunks'
2223
}/remoteEntry.js`,
23-
home_app: `home_app@http://localhost:3000/_next/static/${
24+
checkout: `checkout@http://localhost:4000/_next/static/${
2425
isServer ? 'ssr' : 'chunks'
2526
}/remoteEntry.js`,
26-
shop: `shop@http://localhost:3001/_next/static/${
27+
home_app: `home_app@http://localhost:4000/_next/static/${
28+
isServer ? 'ssr' : 'chunks'
29+
}/remoteEntry.js`,
30+
shop: `shop@http://localhost:4000/_next/static/${
2731
isServer ? 'ssr' : 'chunks'
2832
}/remoteEntry.js`,
2933
};
@@ -33,28 +37,25 @@ const nextConfig = {
3337
name: 'home_app',
3438
filename: 'static/chunks/remoteEntry.js',
3539
remotes: {
40+
remote_4001: remotes.remote_4001,
3641
shop: remotes.shop,
3742
checkout: remotes.checkout,
3843
},
39-
// exposes: {
40-
// './SharedNav': './components/SharedNav',
41-
// './menu': './components/menu',
42-
// },
4344
shared: {
44-
// 'lodash/': {},
45-
// antd: {
46-
// requiredVersion: '5.19.1',
47-
// version: '5.19.1',
48-
// },
49-
// '@ant-design/': {
45+
// 'react': {
5046
// singleton: true,
47+
// requiredVersion: false
5148
// },
49+
// 'react-dom': {
50+
// singleton: true,
51+
// requiredVersion: false
52+
// }
5253
},
5354
extraOptions: {
54-
debug: false,
55-
exposePages: true,
56-
enableImageLoaderFix: true,
57-
enableUrlLoaderFix: true,
55+
// debug: false,
56+
// exposePages: true,
57+
// enableImageLoaderFix: true,
58+
// enableUrlLoaderFix: true,
5859
},
5960
}),
6061
);

‎apps/next-app-router-4000/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"private": true,
33
"scripts": {
44
"build": "next build",
5-
"dev": "NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",
5+
"dev": "NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 4000",
66
"lint": "next lint",
77
"lint-staged": "lint-staged",
88
"prettier": "prettier --write --ignore-unknown .",

‎apps/next-app-router-4000/project.json

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,10 @@
2525
]
2626
},
2727
"serve": {
28-
"executor": "@nx/next:server",
29-
"defaultConfiguration": "development",
28+
"executor": "nx:run-commands",
3029
"options": {
31-
"buildTarget": "next-app-router-4000:build",
32-
"dev": true,
33-
"port": 4000
34-
},
35-
"configurations": {
36-
"development": {
37-
"buildTarget": "next-app-router-4000:build:development",
38-
"dev": true,
39-
"port": 4000
40-
},
41-
"production": {
42-
"buildTarget": "next-app-router-4000:build:production",
43-
"dev": false,
44-
"port": 4000
45-
}
30+
"command": "pnpm dev",
31+
"cwd": "apps/next-app-router-4000"
4632
},
4733
"dependsOn": [
4834
{

‎apps/next-app-router-4001/app/demo/page.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
//@ts-check
2+
'use client';
3+
4+
import dynamic from 'next/dynamic';
5+
6+
// Dynamically import remote components
7+
const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
8+
const Header = dynamic(() => import('remote_4001/Header'), { ssr: true });
9+
const ProductCard = dynamic(() => import('remote_4001/ProductCard'), { ssr: true });
10+
const TabGroup = dynamic(() => import('remote_4001/TabGroup'), { ssr: true });
11+
const TabNavItem = dynamic(() => import('remote_4001/TabNavItem'), { ssr: true });
12+
const CountUp = dynamic(() => import('remote_4001/CountUp'), { ssr: true });
13+
const RenderingInfo = dynamic(() => import('remote_4001/RenderingInfo'), { ssr: true });
14+
15+
export default function DemoPage() {
16+
return (
17+
<div className="p-4">
18+
<Header />
19+
20+
<main className="max-w-4xl mx-auto mt-8">
21+
<h1 className="text-2xl font-bold mb-6">Remote Components Demo</h1>
22+
23+
<section className="mb-8">
24+
<h2 className="text-xl font-semibold mb-4">Basic UI Components</h2>
25+
<div className="space-x-4">
26+
<Button>Primary Button</Button>
27+
<Button>Secondary Button</Button>
28+
</div>
29+
</section>
30+
31+
<section className="mb-8">
32+
<h2 className="text-xl font-semibold mb-4">Navigation Components</h2>
33+
<TabGroup>
34+
<TabNavItem href="/demo/tab1" isActive={true}>Tab 1</TabNavItem>
35+
<TabNavItem href="/demo/tab2" isActive={false}>Tab 2</TabNavItem>
36+
<TabNavItem href="/demo/tab3" isActive={false}>Tab 3</TabNavItem>
37+
</TabGroup>
38+
</section>
39+
40+
<section className="mb-8">
41+
<h2 className="text-xl font-semibold mb-4">Product Components</h2>
42+
<div className="grid grid-cols-2 gap-4">
43+
<ProductCard
44+
product={{
45+
name: 'Demo Product',
46+
price: 99.99,
47+
description: 'This is a demo product to showcase the ProductCard component',
48+
image: 'https://via.placeholder.com/300',
49+
rating: 4.5,
50+
}}
51+
/>
52+
<ProductCard
53+
product={{
54+
name: 'Another Product',
55+
price: 149.99,
56+
description: 'Another demo product with different details',
57+
image: 'https://via.placeholder.com/300',
58+
rating: 5,
59+
}}
60+
/>
61+
</div>
62+
</section>
63+
64+
<section className="mb-8">
65+
<h2 className="text-xl font-semibold mb-4">Interactive Components</h2>
66+
<div className="space-y-4">
67+
<div className="p-4 border rounded">
68+
<h3 className="font-medium mb-2">Count Up Animation</h3>
69+
<CountUp start={0} end={1000} />
70+
</div>
71+
<div className="p-4 border rounded">
72+
<h3 className="font-medium mb-2">Rendering Information</h3>
73+
<RenderingInfo />
74+
</div>
75+
</div>
76+
</section>
77+
</main>
78+
</div>
79+
);
80+
}

‎apps/next-app-router-4001/next.config.js

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,40 +15,42 @@ const nextConfig = {
1515
config.watchOptions = {
1616
ignored: ['**/node_modules/**', '**/@mf-types/**'],
1717
};
18-
// used for testing build output snapshots
19-
const remotes = {
20-
checkout: `checkout@http://localhost:3002/_next/static/${
21-
isServer ? 'ssr' : 'chunks'
22-
}/remoteEntry.js`,
23-
home_app: `home_app@http://localhost:3000/_next/static/${
24-
isServer ? 'ssr' : 'chunks'
25-
}/remoteEntry.js`,
26-
shop: `shop@http://localhost:3001/_next/static/${
27-
isServer ? 'ssr' : 'chunks'
28-
}/remoteEntry.js`,
29-
};
30-
3118
config.plugins.push(
3219
new NextFederationPlugin({
33-
name: 'home_app',
20+
name: 'remote_4001',
3421
filename: 'static/chunks/remoteEntry.js',
35-
remotes: {
36-
shop: remotes.shop,
37-
checkout: remotes.checkout,
22+
exposes: {
23+
// Core UI Components
24+
'./Button': './ui/button',
25+
// './Header': './ui/header',
26+
// './Footer': './ui/footer',
27+
// './GlobalNav': './ui/global-nav',
28+
//
29+
// // Product Related Components
30+
// './ProductCard': './ui/product-card',
31+
// './ProductPrice': './ui/product-price',
32+
// './ProductRating': './ui/product-rating',
33+
// './ProductDeal': './ui/product-deal',
34+
//
35+
// // Navigation Components
36+
// './TabGroup': './ui/tab-group',
37+
// './TabNavItem': './ui/tab-nav-item',
38+
//
39+
// // Utility Components
40+
// './Boundary': './ui/boundary',
41+
// './CountUp': './ui/count-up',
42+
// './RenderedTimeAgo': './ui/rendered-time-ago',
43+
// './RenderingInfo': './ui/rendering-info'
3844
},
39-
// exposes: {
40-
// './SharedNav': './components/SharedNav',
41-
// './menu': './components/menu',
42-
// },
4345
shared: {
44-
// 'lodash/': {},
45-
// antd: {
46-
// requiredVersion: '5.19.1',
47-
// version: '5.19.1',
48-
// },
49-
// '@ant-design/': {
46+
// 'react': {
5047
// singleton: true,
48+
// requiredVersion: false
5149
// },
50+
// 'react-dom': {
51+
// singleton: true,
52+
// requiredVersion: false
53+
// }
5254
},
5355
extraOptions: {
5456
debug: false,

‎apps/next-app-router-4001/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"private": true,
33
"scripts": {
44
"build": "next build",
5-
"dev": "NEXT_PRIVATE_LOCAL_WEBPACK=true next dev",
5+
"dev": "NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 4001",
66
"lint": "next lint",
77
"lint-staged": "lint-staged",
88
"prettier": "prettier --write --ignore-unknown .",

‎apps/next-app-router-4001/project.json

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,10 @@
2525
]
2626
},
2727
"serve": {
28-
"executor": "@nx/next:server",
29-
"defaultConfiguration": "development",
28+
"executor": "nx:run-commands",
3029
"options": {
31-
"buildTarget": "next-app-router-4001:build",
32-
"dev": true,
33-
"port": 4001
34-
},
35-
"configurations": {
36-
"development": {
37-
"buildTarget": "next-app-router-4001:build:development",
38-
"dev": true,
39-
"port": 4001
40-
},
41-
"production": {
42-
"buildTarget": "next-app-router-4001:build:production",
43-
"dev": false,
44-
"port": 4001
45-
}
30+
"command": "pnpm dev",
31+
"cwd": "apps/next-app-router-4001"
4632
},
4733
"dependsOn": [
4834
{

‎packages/nextjs-mf/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"description": "Module Federation helper for NextJS",
99
"repository": {
1010
"type": "git",
11-
"url": "https://github.com/module-federation/core/",
11+
"url": "git+https://github.com/module-federation/core.git",
1212
"directory": "packages/nextjs-mf"
1313
},
1414
"author": "Zack Jackson <[email protected]>",
@@ -48,6 +48,9 @@
4848
"@module-federation/node": "workspace:*",
4949
"@module-federation/webpack-bundler-runtime": "workspace:*"
5050
},
51+
"devDependencies": {
52+
"@types/btoa": "^1.2.5"
53+
},
5154
"peerDependencies": {
5255
"webpack": "^5.40.0",
5356
"next": "^12 || ^13 || ^14 || ^15",

‎packages/nextjs-mf/project.json

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"projectType": "library",
66
"tags": ["type:pkg"],
77
"targets": {
8-
"build": {
8+
"build-tsc": {
99
"executor": "@nx/js:tsc",
1010
"outputs": ["{options.outputPath}"],
1111
"options": {
@@ -21,6 +21,35 @@
2121
}
2222
]
2323
},
24+
"build": {
25+
"executor": "nx:run-commands",
26+
"options": {
27+
"parallel": false,
28+
"commands": [
29+
{
30+
"command": "nx run nextjs-mf:build-tsc",
31+
"forwardAllArgs": false
32+
},
33+
{
34+
"command": "nx run nextjs-mf:rename-dist-files",
35+
"forwardAllArgs": false
36+
}
37+
]
38+
}
39+
},
40+
"rename-dist-files": {
41+
"executor": "nx:run-commands",
42+
"options": {
43+
"commands": [
44+
{
45+
"command": "mv packages/nextjs-mf/dist/src/federation-noop.js packages/nextjs-mf/dist/src/federation-noop.cjs"
46+
},
47+
{
48+
"command": "mv packages/nextjs-mf/dist/src/plugins/container/runtimePlugin.js packages/nextjs-mf/dist/src/plugins/container/runtimePlugin.cjs"
49+
}
50+
]
51+
}
52+
},
2453
"lint": {
2554
"executor": "@nx/eslint:lint",
2655
"outputs": ["{options.outputFile}"],

0 commit comments

Comments
 (0)