feat(nextjs-mf): App Router

.changeset/ai-eager-wolf.md

@@ -0,0 +1,12 @@
+---
+"@module-federation/runtime-core": minor
+---
+
+Added support for OR ranges in semantic version satisfaction logic with comprehensive unit tests.
+
+- Implemented parsing for OR (||) conditions in version ranges.
+  - Split input ranges by || to evaluate alternatives individually.
+  - Ensured logical handling of wildcards '*' and 'x' within ranges.
+- Refactored internal parsing to support more complex range constructs.
+- Added comprehensive test cases to cover diverse scenarios for OR range support.
+- Introduced error handling during range processing, with console logging for tracking issues.

.changeset/ai-happy-fox.md

@@ -0,0 +1,12 @@
+---
+"@module-federation/nextjs-mf": minor
+---
+
+Refactor and enhance module federation support for Next.js.
+
+- Introduced `getShareScope` function to dynamically generate the default share scope based on the client or server environment, replacing static DEFAULT_SHARE_SCOPE declarations.
+- Implemented `RscManifestInterceptPlugin` to intercept and modify client reference manifests, ensuring proper prefix handling.
+- Refined server-side externals handling to ensure shared federation modules are bundled.
+- Simplified and modularized sharing logic by creating distinct functions for React, React DOM, React JSX Runtime, and React JSX Dev Runtime package configurations.
+- Captured the original webpack public path for potential use in plugins and adjustments.
+- Enhanced logging for debug tracing of shared module resolution processes in runtimePlugin.

.changeset/ai-hungry-bear.md

@@ -0,0 +1,9 @@
+"@module-federation/enhanced": minor
+---
+
+Enhancements to layer handling in module federation tests and configuration.
+
+- Improved handling of `shareKey` for layers within `ConsumeSharedPlugin` and `ProvideSharedPlugin`.
+  - Conditionally prepend the `shareKey` with the `layer` if applicable.
+- Introduced new layer configurations to support more nuanced federation scenarios that consider multiple layers of dependency.
+```

.changeset/ai-sleepy-fox.md

@@ -0,0 +1,9 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Refactored module sharing configuration handling.
+
+- Simplified plugin schema for better maintainability
+- Improved layer-based module sharing test coverage
+- Removed redundant plugin exports

.changeset/ai-sleepy-tiger.md

@@ -0,0 +1,6 @@
+---
+"@module-federation/runtime": minor
+---
+
+- Added a new property 'layer' of type string or null to SharedConfig.
+```

.changeset/brown-badgers-fetch.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': minor
+---
+
+support request option on ConsumeSharePlugin. Allows matching requests like the object key of shared does

.changeset/shy-snails-battle.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': minor
+---
+
+Layer support for Provide Share Plugin

apps/next-app-router/next-app-router-4000/app/layout.tsx

@@ -3,7 +3,7 @@ import { AddressBar } from '#/ui/address-bar';
 import Byline from '#/ui/byline';
 // import { GlobalNav } from 'remote_4001/GlobalNav(rsc)';
 import { Metadata } from 'next';
-
+console.log(require('remote_4001/Button'));
 export const metadata: Metadata = {
   title: {
     default: 'Next.js App Router',

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

@@ -1,7 +1,8 @@
 import { demos } from '#/lib/demos';
 import Link from 'next/link';
+import { lazy } from 'react';
 import dynamic from 'next/dynamic';
-const Button = dynamic(() => import('remote_4001/Button'), { ssr: true });
+const Button = lazy(() => import('remote_4001/Button'));
 
 export default function Page() {
   return (

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

@@ -38,8 +38,8 @@ const nextConfig = {
         filename: 'static/chunks/remoteEntry.js',
         remotes: {
           remote_4001: remotes.remote_4001,
-          shop: remotes.shop,
-          checkout: remotes.checkout,
+          // shop: remotes.shop,
+          // checkout: remotes.checkout,
         },
         shared: {
           // 'react': {

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

@@ -27,8 +27,8 @@
     "serve": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "pnpm dev",
-        "cwd": "apps/next-app-router-4000"
+        "command": "npm run dev",
+        "cwd": "apps/next-app-router/next-app-router-4000"
       },
       "dependsOn": [
         {

apps/next-app-router/next-app-router-4001/app/layout.tsx

@@ -1,8 +1,8 @@
 import '#/styles/globals.css';
-import { AddressBar } from '#/ui/address-bar';
-import Byline from '#/ui/byline';
+// import { AddressBar } from '#/ui/address-bar';
+// import Byline from '#/ui/byline';
 import { GlobalNav } from '#/ui/global-nav';
-import { Metadata } from 'next';
+// import { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: {
@@ -36,15 +36,13 @@ export default function RootLayout({
         <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">
             <div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">
-              <div className="rounded-lg bg-black">
-                <AddressBar />
-              </div>
+              <div className="rounded-lg bg-black">{/*<AddressBar />*/}</div>
             </div>
 
             <div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">
               <div className="rounded-lg bg-black p-3.5 lg:p-6">{children}</div>
             </div>
-            <Byline />
+            {/*<Byline />*/}
           </div>
         </div>
       </body>

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

@@ -1,6 +1,7 @@
 import { demos } from '#/lib/demos';
 import Link from 'next/link';
-
+import React from 'react';
+console.log(React);
 export default function Page() {
   return (
     <div className="space-  y-8">

apps/next-app-router/next-app-router-4001/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

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

@@ -23,10 +23,10 @@ const nextConfig = {
           // Core UI Components
           './Button': './ui/button',
           // './Header': isServer ? './ui/header?rsc' : './ui/header?shared',
-          './Footer': './ui/footer',
+          // './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',
+          // './GlobalNav': './ui/global-nav',
           //
           // // Product Related Components
           // './ProductCard': './ui/product-card',

apps/next-app-router/next-app-router-4001/pages/router-test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Link from 'next/link';
+
+const RouterTestPage = () => {
+  return (
+    <div>
+      <h1>Router Test Page (in Pages Directory)</h1>
+      <p>
+        This page exists in the 'pages' directory of an app that primarily uses
+        the App Router ('app' directory).
+      </p>
+      <p>
+        Below are links demonstrating navigation potentially involving different
+        router types:
+      </p>
+      <ul>
+        <li>
+          {/* Link within the current app (likely handled by App Router if root exists there) */}
+          <Link href="/">Link to App Root</Link>
+        </li>
+        <li>
+          {/* Link to an external app known to use Pages Router */}
+          <a href="http://localhost:3000/">
+            Link to Home App (Pages Router via full URL)
+          </a>
+        </li>
+        <li>Placeholder for other routing/federation examples.</li>
+      </ul>
+      <p>
+        Note: The instruction "sets both routers" was interpreted as
+        demonstrating links to potentially different router contexts.
+      </p>
+    </div>
+  );
+};
+
+export default RouterTestPage;

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

@@ -1,7 +1,7 @@
 {
   "name": "next-app-router-4001",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/next-app-router-4001",
+  "sourceRoot": "apps/next-app-router/next-app-router-4001",
   "projectType": "application",
   "tags": [],
   "targets": {
@@ -27,8 +27,8 @@
     "serve": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "pnpm dev",
-        "cwd": "apps/next-app-router-4001"
+        "command": "npm run dev",
+        "cwd": "apps/next-app-router/next-app-router-4001"
       },
       "dependsOn": [
         {

package.json

@@ -51,7 +51,7 @@
     "prepare": "husky install",
     "changeset": "changeset",
     "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'",
-    "changegen": "./changeset-gen.js --path ./packages/enhanced --staged &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/node --staged && ./changeset-gen.js --path ./packages/runtime --staged && ./changeset-gen.js --path ./packages/data-prefetch --staged && ./changeset-gen.js --path ./packages/nextjs-mf --staged && ./changeset-gen.js --path ./packages/dts-plugin --staged",
+    "changegen": "node ./changeset-gen.js --path ./packages/runtime-core && ./changeset-gen.js --path ./packages/enhanced --staged &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/node --staged && ./changeset-gen.js --path ./packages/runtime --staged && ./changeset-gen.js --path ./packages/data-prefetch --staged && ./changeset-gen.js --path ./packages/nextjs-mf --staged && ./changeset-gen.js --path ./packages/dts-plugin --staged",
     "commitgen:staged": "./commit-gen.js --path ./packages --staged",
     "commitgen:main": "./commit-gen.js --path ./packages",
     "changeset:status": "changeset status",