feat(nextjs-mf): update module share for rsc

module-federation · Jan 21, 2025 · e122bf4 · e122bf4
1 parent 10f2b73
commit e122bf4
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 110 deletions.
diff --git a/apps/next-app-router-4000/app/context/context-click-counter.tsx b/apps/next-app-router-4000/app/context/context-click-counter.tsx
@@ -3,6 +3,8 @@
 import { useCounter } from './counter-context';
 import React from 'react';
 import { Boundary } from '#/ui/boundary';
+import dynamic from 'next/dynamic';
+const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
 
 const ContextClickCounter = () => {
   const [count, setCount] = useCounter();
@@ -14,6 +16,7 @@ const ContextClickCounter = () => {
       size="small"
       animateRerendering={false}
     >
+      <Button>testing</Button>
       <button
         onClick={() => setCount(count + 1)}
         className="rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"

diff --git a/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx b/apps/next-app-router-4000/app/error-handling/[categorySlug]/[subCategorySlug]/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {

diff --git a/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx b/apps/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {

diff --git a/apps/next-app-router-4000/app/error-handling/error.tsx b/apps/next-app-router-4000/app/error-handling/error.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Boundary } from '#/ui/boundary';
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function Error({ error, reset }: any) {

diff --git a/apps/next-app-router-4000/app/layout.tsx b/apps/next-app-router-4000/app/layout.tsx
@@ -1,7 +1,7 @@
 import '#/styles/globals.css';
 import { AddressBar } from '#/ui/address-bar';
 import Byline from '#/ui/byline';
-import { GlobalNav } from '#/ui/global-nav';
+// import { GlobalNav } from 'remote_4001/GlobalNav(rsc)';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -31,7 +31,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="[color-scheme:dark]">
       <body className="overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')] pb-36">
-        <GlobalNav />
+        {/*<GlobalNav />*/}
 
         <div className="lg:pl-72">
           <div className="mx-auto max-w-4xl space-y-8 px-2 pt-20 lg:px-8 lg:py-8">

diff --git a/apps/next-app-router-4000/ui/buggy-button.tsx b/apps/next-app-router-4000/ui/buggy-button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Button from '#/ui/button';
+import Button from 'remote_4001/Button';
 import React from 'react';
 
 export default function BuggyButton() {

diff --git a/apps/next-app-router-4001/app/demo/page.tsx b/apps/next-app-router-4001/app/demo/page.tsx
@@ -6,45 +6,58 @@ 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 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 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 });
+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>
+      <main className="mx-auto mt-8 max-w-4xl">
+        <h1 className="mb-6 text-2xl font-bold">Remote Components Demo</h1>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Basic UI Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">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>
+          <h2 className="mb-4 text-xl font-semibold">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>
+            <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>
+          <h2 className="mb-4 text-xl font-semibold">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',
+                description:
+                  'This is a demo product to showcase the ProductCard component',
                 image: 'https://via.placeholder.com/300',
                 rating: 4.5,
               }}
@@ -62,14 +75,14 @@ export default function DemoPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Interactive Components</h2>
+          <h2 className="mb-4 text-xl font-semibold">Interactive Components</h2>
           <div className="space-y-4">
-            <div className="p-4 border rounded">
-              <h3 className="font-medium mb-2">Count Up Animation</h3>
+            <div className="rounded border p-4">
+              <h3 className="mb-2 font-medium">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>
+            <div className="rounded border p-4">
+              <h3 className="mb-2 font-medium">Rendering Information</h3>
               <RenderingInfo />
             </div>
           </div>

diff --git a/apps/next-app-router-4001/next.config.js b/apps/next-app-router-4001/next.config.js
@@ -22,9 +22,11 @@ const nextConfig = {
         exposes: {
           // Core UI Components
           './Button': './ui/button',
-          // './Header': './ui/header',
-          // './Footer': './ui/footer',
-          // './GlobalNav': './ui/global-nav',
+          // './Header': isServer ? './ui/header?rsc' : './ui/header?shared',
+          './Footer': './ui/footer',
+          // './GlobalNav(rsc)': isServer ? './ui/global-nav?rsc' : './ui/global-nav',
+          // './GlobalNav(ssr)': isServer ? './ui/global-nav?ssr' : './ui/global-nav',
+          './GlobalNav': './ui/global-nav',
           //
           // // Product Related Components
           // './ProductCard': './ui/product-card',

diff --git a/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts
@@ -334,8 +334,9 @@ class ConsumeSharedPlugin {
                 return createConsumeSharedModule(context, request, match);
               }
               for (const [prefix, options] of prefixedConsumes) {
-                if (request.startsWith(prefix)) {
-                  const remainder = request.slice(prefix.length);
+                const lookup = options.request || prefix;
+                if (request.startsWith(lookup)) {
+                  const remainder = request.slice(lookup.length);
                   return createConsumeSharedModule(context, request, {
                     ...options,
                     import: options.import

diff --git a/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts
@@ -229,8 +229,10 @@ class ProvideSharedPlugin {
               }
             }
             for (const [prefix, config] of prefixMatchProvides) {
-              if (request.startsWith(prefix) && resource) {
-                const remainder = request.slice(prefix.length);
+              const lookup = config.request || prefix;
+              if (request.startsWith(lookup) && resource) {
+                const remainder = request.slice(lookup.length);
+                debugger;
                 provideSharedModule(
                   resource,
                   {

diff --git a/packages/nextjs-mf/src/internal.ts b/packages/nextjs-mf/src/internal.ts
@@ -48,66 +48,54 @@ const WEBPACK_LAYERS_NAMES = {
   appPagesBrowser: 'app-pages-browser',
 } as const;
 
-const reactShares = [
-  WEBPACK_LAYERS_NAMES.reactServerComponents,
-  WEBPACK_LAYERS_NAMES.serverSideRendering,
-  undefined,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `react-${layer}` : 'react';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      import: layer ? undefined : false,
-      shareKey: 'react',
-      request: 'react',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
-);
+const createSharedConfig = (
+  name: string,
+  layers: (string | undefined)[],
+  options: { request?: string; import?: false | undefined } = {},
+) => {
+  return layers.reduce(
+    (acc, layer) => {
+      const key = layer ? `${name}-${layer}` : name;
+      acc[key] = {
+        singleton: true,
+        requiredVersion: false,
+        import: layer ? undefined : (options.import ?? false),
+        shareKey: options.request ?? name,
+        request: options.request ?? name,
+        layer,
+        issuerLayer: layer,
+      };
+      return acc;
+    },
+    {} as Record<string, ExtendedSharedConfig>,
+  );
+};
 
-const reactDomShares = [
+const defaultLayers = [
   WEBPACK_LAYERS_NAMES.reactServerComponents,
   WEBPACK_LAYERS_NAMES.serverSideRendering,
   undefined,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `react-${layer}` : 'react';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      import: layer ? undefined : false,
-      shareKey: 'react-dom',
-      request: 'react-dom',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
-);
+];
 
-const nextNavigationShares = [
+const navigationLayers = [
   WEBPACK_LAYERS_NAMES.reactServerComponents,
   WEBPACK_LAYERS_NAMES.serverSideRendering,
-].reduce(
-  (acc, layer) => {
-    const key = layer ? `next-navigation-${layer}` : 'next-navigation';
-    acc[key] = {
-      singleton: true,
-      requiredVersion: false,
-      shareKey: 'next/navigation',
-      request: 'next/navigation',
-      layer,
-      issuerLayer: layer,
-    };
-    return acc;
-  },
-  {} as Record<string, ExtendedSharedConfig>,
+];
+
+const reactShares = createSharedConfig('react', defaultLayers);
+const reactDomShares = createSharedConfig('react', defaultLayers, {
+  request: 'react-dom',
+});
+const jsxRuntimeShares = createSharedConfig('react/', navigationLayers, {
+  request: 'react/',
+  import: undefined,
+});
+const nextNavigationShares = createSharedConfig(
+  'next-navigation',
+  navigationLayers,
+  { request: 'next/navigation' },
 );
+
 /**
  * @typedef SharedObject
  * @type {object}
@@ -123,6 +111,7 @@ export const DEFAULT_SHARE_SCOPE: sharePlugin.SharedObject = {
   ...reactShares,
   ...reactDomShares,
   ...nextNavigationShares,
+  ...jsxRuntimeShares,
   'next/dynamic': {
     requiredVersion: undefined,
     singleton: true,
@@ -153,34 +142,34 @@ export const DEFAULT_SHARE_SCOPE: sharePlugin.SharedObject = {
     singleton: true,
     import: undefined,
   },
-  // react: {
-  //   singleton: true,
-  //   requiredVersion: false,
-  //   import: false,
-  // },
-  // 'react/': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  //   import: false,
-  // },
-  // 'react-dom/': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  //   import: false,
-  // },
-  // 'react-dom': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  //   import: false,
-  // },
-  // 'react/jsx-dev-runtime': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  // },
-  // 'react/jsx-runtime': {
-  //   singleton: true,
-  //   requiredVersion: false,
-  // },
+  react: {
+    singleton: true,
+    requiredVersion: false,
+    import: false,
+  },
+  'react/': {
+    singleton: true,
+    requiredVersion: false,
+    import: false,
+  },
+  'react-dom/': {
+    singleton: true,
+    requiredVersion: false,
+    import: false,
+  },
+  'react-dom': {
+    singleton: true,
+    requiredVersion: false,
+    import: false,
+  },
+  'react/jsx-dev-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
+  'react/jsx-runtime': {
+    singleton: true,
+    requiredVersion: false,
+  },
   'styled-jsx': {
     singleton: true,
     import: undefined,