App router share filter

.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,10 @@
+---
+"@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,5 @@
+---
+"@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

.cursor/rules/nx-rules.mdc

@@ -6,7 +6,7 @@ alwaysApply: true
 
 // This file is automatically generated by Nx Console
 
-You are in an nx workspace using Nx 0.0.0 and npm as the package manager.
+You are in an nx workspace using Nx 21.0.3 and pnpm as the package manager.
 
 You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
 
@@ -17,7 +17,7 @@ You have access to the Nx MCP server and the tools it provides. Use them. Follow
 - To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool
 
 # Generation Guidelines
-If the user wants to generate something, use the following flow: 
+If the user wants to generate something, use the following flow:
 
 - learn about the nx workspace and any specifics the user needs by using the 'nx_workspace' tool and the 'nx_project_details' tool if applicable
 - get the available generators using the 'nx_generators' tool

.cursor/rules/running-tests.mdc

@@ -0,0 +1,6 @@
+---
+description:
+globs: packages/enhanced/*
+alwaysApply: false
+---
+use pnpm enhanced:jest to test this

.cursorignore

@@ -2,7 +2,7 @@
 **/.cache/
 **/.temp/
 **/coverage/
-**/dist/
+!**/dist/
 
 # Explicitly ignore specific packages
 packages/typescript/

.github/workflows/release.yml

@@ -42,13 +42,25 @@ jobs:
           node-version: '18'
           cache: 'pnpm'
 
+      - name: Cache Browsers
+        uses: actions/cache@v3
+        id: browsers-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+            ~/.cache/Cypress
+          key: ${{ runner.os }}-browsers-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
       - name: Install deps
         run: pnpm install
 
       - name: Build and test Packages
         run: |
           git fetch origin main
-          npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache
+          npx nx run-many --targets=build --projects=tag:type:pkg
           ls -l packages/*/dist packages/*/package.json
 
       - name: Release

apps/3000-home/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/3000-home/pages/index.tsx

@@ -1,15 +1,15 @@
 import React, { Suspense, lazy } from 'react';
 import Head from 'next/head';
-import CheckoutTitle from 'checkout/CheckoutTitle';
-import ButtonOldAnt from 'checkout/ButtonOldAnt';
+// import CheckoutTitle from 'checkout/CheckoutTitle';
+// import ButtonOldAnt from 'checkout/ButtonOldAnt';
 // const CheckoutTitle = lazy(() => import('checkout/CheckoutTitle'));
 // const ButtonOldAnt = lazy(() => import('checkout/ButtonOldAnt'));
-const WebpackSvgRemote = lazy(() =>
-  import('shop/WebpackSvg').then((m) => {
-    return m;
-  }),
-);
-const WebpackPngRemote = lazy(() => import('shop/WebpackPng'));
+// const WebpackSvgRemote = lazy(() =>
+//   import('shop/WebpackSvg').then((m) => {
+//     return m;
+//   }),
+// );
+// const WebpackPngRemote = lazy(() => import('shop/WebpackPng'));
 
 const Home = () => {
   return (
@@ -83,9 +83,9 @@ const Home = () => {
               <h3>This title came from checkout with hooks data!!!</h3>
             </td>
             <td>
-              <Suspense fallback="loading CheckoutTitle">
-                <CheckoutTitle />
-              </Suspense>
+              {/*<Suspense fallback="loading CheckoutTitle">*/}
+              {/*  <CheckoutTitle />*/}
+              {/*</Suspense>*/}
             </td>
           </tr>
           <tr>
@@ -95,9 +95,9 @@ const Home = () => {
             </td>
             <td>[Button from [email protected]]</td>
             <td>
-              <Suspense fallback="loading ButtonOldAnt">
-                <ButtonOldAnt />
-              </Suspense>
+              {/*<Suspense fallback="loading ButtonOldAnt">*/}
+              {/*  <ButtonOldAnt />*/}
+              {/*</Suspense>*/}
             </td>
           </tr>
           <tr>
@@ -111,9 +111,9 @@ const Home = () => {
               <img className="home-webpack-png" src="./webpack.png" />
             </td>
             <td>
-              <Suspense fallback="loading WebpackPngRemote">
-                <WebpackPngRemote />
-              </Suspense>
+              {/*<Suspense fallback="loading WebpackPngRemote">*/}
+              {/*  <WebpackPngRemote />*/}
+              {/*</Suspense>*/}
             </td>
           </tr>
           <tr>
@@ -127,9 +127,9 @@ const Home = () => {
               <img src="./webpack.svg" />
             </td>
             <td>
-              <Suspense fallback="loading WebpackSvgRemote">
-                <WebpackSvgRemote />
-              </Suspense>
+              {/*<Suspense fallback="loading WebpackSvgRemote">*/}
+              {/*  <WebpackSvgRemote />*/}
+              {/*</Suspense>*/}
             </td>
           </tr>
         </tbody>

apps/3001-shop/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/3002-checkout/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

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

@@ -1,32 +1,67 @@
+'use client';
+import Link from 'next/link';
+import Image from 'next/image';
+import Head from 'next/head';
+import Script from 'next/script';
+import {
+  useRouter,
+  usePathname,
+  useSearchParams,
+  useParams,
+  useSelectedLayoutSegments,
+  useSelectedLayoutSegment,
+} from 'next/navigation';
 import { ExternalLink } from '#/ui/external-link';
 
 export default function Page() {
-  return (
-    <div className="space-y-9">
-      <div className="prose prose-sm prose-invert max-w-none">
-        <h1 className="text-xl font-bold">Client Component Hooks</h1>
-
-        <ul>
-          <li>
-            Next.js provides a number of hooks for accessing routing information
-            from client components.
-          </li>
-          <li>
-            Try navigating each page and observing the output of each hook
-            called from the current routes <code>layout.js</code> and{' '}
-            <code>page.js</code> files.
-          </li>
-        </ul>
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = useParams();
+  const segments = useSelectedLayoutSegments();
+  const segment = useSelectedLayoutSegment();
 
-        <div className="flex gap-2">
-          <ExternalLink href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#revalidating-data">
-            Docs
-          </ExternalLink>
-          <ExternalLink href="https://github.com/vercel/app-playground/tree/main/app/hooks">
-            Code
-          </ExternalLink>
+  return (
+    <>
+      <Head>
+        <title>Client Component Hooks Demo</title>
+      </Head>
+      <Script src="https://example.com/script.js" strategy="lazyOnload" />
+      <div className="space-y-9">
+        <div className="prose prose-sm prose-invert max-w-none">
+          <h1 className="text-xl font-bold">Client Component Hooks</h1>
+          <ul>
+            <li>
+              Current pathname: <code>{pathname}</code>
+            </li>
+            <li>
+              Current params: <code>{JSON.stringify(params)}</code>
+            </li>
+            <li>
+              Current search params:{' '}
+              <code>{searchParams?.toString() ?? ''}</code>
+            </li>
+            <li>
+              Current segments: <code>{segments?.join(', ') ?? ''}</code>
+            </li>
+            <li>
+              Current segment: <code>{segment}</code>
+            </li>
+          </ul>
+          <div className="flex gap-2">
+            <ExternalLink href="https://nextjs.org/docs/app/api-reference/functions">
+              Next.js App Router Hooks Docs
+            </ExternalLink>
+          </div>
+          <button onClick={() => router.push('/')}>Go Home</button>
+          <div className="mt-4">
+            <Link href="/about">Go to About (with next/link)</Link>
+          </div>
+          <div className="mt-4">
+            <Image src="/logo.png" alt="Logo" width={100} height={100} />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -32,7 +32,6 @@ export default function RootLayout({
     <html lang="en" className="[color-scheme:dark]">
       <body className="overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')] pb-36">
         {/*<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">
             <div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">

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

@@ -1,12 +1,17 @@
 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 RemoteRSCButton = lazy(() => import('remote_4001/rsc/Button'));
+const RemoteSSRButton = lazy(() => import('remote_4001/Button'));
+import Button from '#/ui/button';
 
 export default function Page() {
   return (
-    <div className="space-  y-8">
-      <Button>Button from remote</Button>
+    <div className="space-y-8">
+      <Button>Local RSC Button</Button>
+      <RemoteRSCButton>Remote Button from RSC</RemoteRSCButton>
+      <RemoteSSRButton>Remote Button from RSC</RemoteSSRButton>
       <h1 className="text-xl font-medium text-gray-300">Examples</h1>
 
       <div className="space-y-10 text-white">

apps/next-app-router/next-app-router-4000/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.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.