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 index 0a36ee3aae..a59be8aeb2 100644 --- 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} > + @@ -29,22 +35,29 @@ export default function DemoPage() {
-

Navigation Components

+

Navigation Components

- Tab 1 - Tab 2 - Tab 3 + + Tab 1 + + + Tab 2 + + + Tab 3 +
-

Product Components

+

Product Components

-

Interactive Components

+

Interactive Components

-
-

Count Up Animation

+
+

Count Up Animation

-
-

Rendering Information

+
+

Rendering Information

diff --git a/apps/next-app-router-4001/next.config.js b/apps/next-app-router-4001/next.config.js index dafe9d8ca2..714745c649 100644 --- 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 index e9badacf8a..1ae93165b8 100644 --- 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 index 585b6faeb4..a814c6d8cd 100644 --- 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 index 52a39ff1a2..dd631ad099 100644 --- 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, -); +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, + ); +}; -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, -); +]; -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, +]; + +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,