-
-
Notifications
You must be signed in to change notification settings - Fork 268
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(nextjs-mf): update module share for rsc
- Loading branch information
1 parent
7a178c0
commit 10f2b73
Showing
14 changed files
with
329 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| //@ts-check | ||
| 'use client'; | ||
|
|
||
| import dynamic from 'next/dynamic'; | ||
|
|
||
| // Dynamically import remote components | ||
| const Button = dynamic(() => import('remote_4001/Button'), { ssr: true }); | ||
| const Header = dynamic(() => import('remote_4001/Header'), { ssr: true }); | ||
| const ProductCard = dynamic(() => import('remote_4001/ProductCard'), { ssr: true }); | ||
| const TabGroup = dynamic(() => import('remote_4001/TabGroup'), { ssr: true }); | ||
| const TabNavItem = dynamic(() => import('remote_4001/TabNavItem'), { ssr: true }); | ||
| const CountUp = dynamic(() => import('remote_4001/CountUp'), { ssr: true }); | ||
| const RenderingInfo = dynamic(() => import('remote_4001/RenderingInfo'), { ssr: true }); | ||
|
|
||
| export default function DemoPage() { | ||
| return ( | ||
| <div className="p-4"> | ||
| <Header /> | ||
|
|
||
| <main className="max-w-4xl mx-auto mt-8"> | ||
| <h1 className="text-2xl font-bold mb-6">Remote Components Demo</h1> | ||
|
|
||
| <section className="mb-8"> | ||
| <h2 className="text-xl font-semibold mb-4">Basic UI Components</h2> | ||
| <div className="space-x-4"> | ||
| <Button>Primary Button</Button> | ||
| <Button>Secondary Button</Button> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section className="mb-8"> | ||
| <h2 className="text-xl font-semibold mb-4">Navigation Components</h2> | ||
| <TabGroup> | ||
| <TabNavItem href="/demo/tab1" isActive={true}>Tab 1</TabNavItem> | ||
| <TabNavItem href="/demo/tab2" isActive={false}>Tab 2</TabNavItem> | ||
| <TabNavItem href="/demo/tab3" isActive={false}>Tab 3</TabNavItem> | ||
| </TabGroup> | ||
| </section> | ||
|
|
||
| <section className="mb-8"> | ||
| <h2 className="text-xl font-semibold mb-4">Product Components</h2> | ||
| <div className="grid grid-cols-2 gap-4"> | ||
| <ProductCard | ||
| product={{ | ||
| name: 'Demo Product', | ||
| price: 99.99, | ||
| description: 'This is a demo product to showcase the ProductCard component', | ||
| image: 'https://via.placeholder.com/300', | ||
| rating: 4.5, | ||
| }} | ||
| /> | ||
| <ProductCard | ||
| product={{ | ||
| name: 'Another Product', | ||
| price: 149.99, | ||
| description: 'Another demo product with different details', | ||
| image: 'https://via.placeholder.com/300', | ||
| rating: 5, | ||
| }} | ||
| /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section className="mb-8"> | ||
| <h2 className="text-xl font-semibold mb-4">Interactive Components</h2> | ||
| <div className="space-y-4"> | ||
| <div className="p-4 border rounded"> | ||
| <h3 className="font-medium mb-2">Count Up Animation</h3> | ||
| <CountUp start={0} end={1000} /> | ||
| </div> | ||
| <div className="p-4 border rounded"> | ||
| <h3 className="font-medium mb-2">Rendering Information</h3> | ||
| <RenderingInfo /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ | |
| "description": "Module Federation helper for NextJS", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/module-federation/core/", | ||
| "url": "git+https://github.com/module-federation/core.git", | ||
| "directory": "packages/nextjs-mf" | ||
| }, | ||
| "author": "Zack Jackson <[email protected]>", | ||
|
|
@@ -48,6 +48,9 @@ | |
| "@module-federation/node": "workspace:*", | ||
| "@module-federation/webpack-bundler-runtime": "workspace:*" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/btoa": "^1.2.5" | ||
| }, | ||
| "peerDependencies": { | ||
| "webpack": "^5.40.0", | ||
| "next": "^12 || ^13 || ^14 || ^15", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.