diff --git a/.changeset/ai-eager-wolf.md b/.changeset/ai-eager-wolf.md new file mode 100644 index 00000000000..ab5fe276767 --- /dev/null +++ b/.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. diff --git a/.changeset/ai-happy-fox.md b/.changeset/ai-happy-fox.md new file mode 100644 index 00000000000..51821121aff --- /dev/null +++ b/.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. diff --git a/.changeset/ai-happy-mouse.md b/.changeset/ai-happy-mouse.md new file mode 100644 index 00000000000..82ec31613a9 --- /dev/null +++ b/.changeset/ai-happy-mouse.md @@ -0,0 +1,9 @@ +--- +"@module-federation/sdk": minor +--- + +Added a new option to improve path resolution in ModuleFederationPlugin options. + +- Introduced `nodeModulesReconstructedLookup` option in `ModuleFederationPluginOptions` + - Enhances support for reconstructed lookup of node_modules paths +- The new option is a boolean and is optional. \ No newline at end of file diff --git a/.changeset/ai-hungry-bear.md b/.changeset/ai-hungry-bear.md new file mode 100644 index 00000000000..da78a9f2555 --- /dev/null +++ b/.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. + diff --git a/.changeset/ai-noisy-wolf.md b/.changeset/ai-noisy-wolf.md new file mode 100644 index 00000000000..7a03cd46821 --- /dev/null +++ b/.changeset/ai-noisy-wolf.md @@ -0,0 +1,11 @@ +--- +"@module-federation/enhanced": minor +--- + +Add advanced sharing capabilities in Module Federation + +- Expanded `IncludeExcludeOptions` to support `request`, `version`, and `fallbackVersion` filters for finer control of module sharing inclusion and exclusion, allowing developers to target specific module versions or paths when sharing. + - Enhanced the configuration of `ConsumeSharedModule`, `ConsumeSharedPlugin`, `ProvideSharedPlugin`, and `SharePlugin` to leverage these filtering options. +- Implemented new experimental features under `experiments`: `nodeModulesReconstructedLookup`, enabling more robust and flexible path reconstructions when consuming or providing shared modules, thus improving compatibility with monorepos and complex project structures. +- Updated internal schema validation and error handling to provide more informative feedback and operational resilience against misconfigurations or missing information. +- Introduced comprehensive test coverage for new features and plugin behaviors, ensuring robust validation against various edge cases and scenarios within module sharing operations. \ No newline at end of file diff --git a/.changeset/ai-sleepy-fox.md b/.changeset/ai-sleepy-fox.md new file mode 100644 index 00000000000..36d84f71503 --- /dev/null +++ b/.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 diff --git a/.changeset/ai-sleepy-tiger.md b/.changeset/ai-sleepy-tiger.md new file mode 100644 index 00000000000..faf9daf7c26 --- /dev/null +++ b/.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. diff --git a/.changeset/brown-badgers-fetch.md b/.changeset/brown-badgers-fetch.md new file mode 100644 index 00000000000..00d28f1f096 --- /dev/null +++ b/.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 diff --git a/.changeset/shy-snails-battle.md b/.changeset/shy-snails-battle.md new file mode 100644 index 00000000000..8d4fb5ec2f1 --- /dev/null +++ b/.changeset/shy-snails-battle.md @@ -0,0 +1,5 @@ +--- +'@module-federation/enhanced': minor +--- + +Layer support for Provide Share Plugin diff --git a/.cursor/rules/nx-rules.mdc b/.cursor/rules/nx-rules.mdc new file mode 100644 index 00000000000..6169b6b2748 --- /dev/null +++ b/.cursor/rules/nx-rules.mdc @@ -0,0 +1,41 @@ +--- +description: +globs: +alwaysApply: true +--- + +// This file is automatically generated by Nx Console + +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: + +# General Guidelines +- When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture +- For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration +- If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors +- 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: + +- 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 +- decide which generator to use. If no generators seem relevant, check the 'nx_available_plugins' tool to see if the user could install a plugin to help them +- get generator details using the 'nx_generator_schema' tool +- you may use the 'nx_docs' tool to learn more about a specific generator or technology if you're unsure +- decide which options to provide in order to best complete the user's request. Don't make any assumptions and keep the options minimalistic +- open the generator UI using the 'nx_open_generate_ui' tool +- wait for the user to finish the generator +- read the generator log file using the 'nx_read_generator_log' tool +- use the information provided in the log file to answer the user's question or continue with what they were doing + + +# CI Error Guidelines +If the user wants help with fixing an error in their CI pipeline, use the following flow: +- Retrieve the list of current CI Pipeline Executions (CIPEs) using the 'nx_cloud_cipe_details' tool +- If there are any errors, use the 'nx_cloud_fix_cipe_failure' tool to retrieve the logs for a specific task +- Use the task logs to see what's wrong and help the user fix their problem. Use the appropriate tools if necessary +- Make sure that the problem is fixed by running the task that you passed into the 'nx_cloud_fix_cipe_failure' tool + + diff --git a/.cursor/rules/running-tests.mdc b/.cursor/rules/running-tests.mdc new file mode 100644 index 00000000000..dfc8df4c75f --- /dev/null +++ b/.cursor/rules/running-tests.mdc @@ -0,0 +1,6 @@ +--- +description: +globs: packages/enhanced/* +alwaysApply: false +--- +use pnpm enhanced:jest to test this diff --git a/.cursorignore b/.cursorignore index 9ff4e05b449..5b264c56cf9 100644 --- a/.cursorignore +++ b/.cursorignore @@ -2,7 +2,7 @@ **/.cache/ **/.temp/ **/coverage/ -**/dist/ +!**/dist/ # Explicitly ignore specific packages packages/typescript/ diff --git a/.cursorrules b/.cursorrules index a8aee8134d2..e69de29bb2d 100644 --- a/.cursorrules +++ b/.cursorrules @@ -1,40 +0,0 @@ -an assistant that engages in extremely thorough, self-questioning reasoning. Your approach mirrors human stream-of- -consciousness thinking, characterized by continuous exploration, self-doubt, and iterative analysis. -## Core Principles -1. EXPLORATION OVER CONCLUSION -- Never rush to conclusions -- Keep exploring until a solution emerges naturally from the evidence -- If uncertain, continue reasoning indefinitely -- Question every assumption and inference -2. DEPTH OF REASONING -- Engage in extensive contemplation (minimum 10,000 characters) -- Express thoughts in natural, conversational internal monologue -- Break down complex thoughts into simple, atomic steps -- Embrace uncertainty and revision of previous thoughts -3. THINKING PROCESS -- Use short, simple sentences that mirror natural thought patterns -- Express uncertainty and internal debate freely -- Show work-in-progress thinking -- Acknowledge and explore dead ends -- Frequently backtrack and revise -- Contemplate before each new action -- Contemplate after each and every step -4. PERSISTENCE -- Value thorough exploration over quick resolution -## Output Format -Your responses -must follow this exact structure given below. -Make sure -to -always include the final answer. -... - -Your extensive internal monologue goes here -- Begin with small, foundational observations -- read each file related to the subject in full, make functional observations -- Question each step thoroughly -- Show natural thought progression -- Express doubts and uncertainties -- Revise and backtrack if you need to -- Continue until natural resolution - diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml index 14b67163349..3095dfc5936 100644 --- a/.github/workflows/build-and-test.yml +++ b/.github/workflows/build-and-test.yml @@ -59,7 +59,11 @@ jobs: run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache - name: Run Build for All - run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache + uses: nick-fields/retry@v3 + with: + max_attempts: 2 + timeout_minutes: 15 + command: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 - name: Check Package Publishing Compatibility run: | @@ -69,6 +73,7 @@ jobs: [ "$pkg" != "packages/chrome-devtools" ] && \ [ "$pkg" != "packages/core" ] && \ [ "$pkg" != "packages/esbuild" ] && \ + [ "$pkg" != "packages/modernjs" ] && \ [ "$pkg" != "packages/utilities" ]; then echo "Checking $pkg..." npx publint "$pkg" @@ -128,3 +133,8 @@ jobs: needs: checkout-install uses: ./.github/workflows/e2e-router.yml secrets: inherit + + e2e-next-app-router: + needs: checkout-install + uses: ./.github/workflows/e2e-next-app-router.yml + secrets: inherit diff --git a/.github/workflows/devtools.yml b/.github/workflows/devtools.yml index bdcac4d5cf8..fd263b433aa 100644 --- a/.github/workflows/devtools.yml +++ b/.github/workflows/devtools.yml @@ -38,7 +38,7 @@ jobs: run: pnpm install - name: Run Affected Build - run: npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache + run: npx nx run-many --targets=build --projects=tag:type:pkg - name: Configuration xvfb shell: bash diff --git a/.github/workflows/e2e-next-app-router.yml b/.github/workflows/e2e-next-app-router.yml new file mode 100644 index 00000000000..20446504b84 --- /dev/null +++ b/.github/workflows/e2e-next-app-router.yml @@ -0,0 +1,54 @@ +name: E2E Test for Next.js App Router + +on: + workflow_call: + +permissions: + contents: read + +jobs: + e2e-next-app-router: + runs-on: ubuntu-latest + timeout-minutes: 30 + steps: + - name: Checkout Repository + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Install Pnpm + run: | + corepack prepare pnpm@8.11.0 --activate + corepack enable + + - name: Setup Node.js 18 + uses: actions/setup-node@v3 + with: + node-version: '18' + cache: 'pnpm' + + - name: Set Nx SHA + uses: nrwl/nx-set-shas@v3 + + - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable + run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV + + - name: Set local webpack + run: echo "NEXT_PRIVATE_LOCAL_WEBPACK=true" >> $GITHUB_ENV + + - name: Install Dependencies + run: pnpm install + + - name: Install Cypress + run: npx cypress install + + - name: Run Build for All + run: npx nx run-many --targets=build --projects=tag:type:pkg + + - name: Run condition check script + id: check-ci + run: node tools/scripts/ci-is-affected.mjs --appName=next-app-router-4000,next-app-router-4001 + + - name: E2E Test for Next.js App Router + if: steps.check-ci.outcome == 'success' + run: npx kill-port --port 4000,4001 || true && pnpm run app:next-router:dev & echo "done" && sleep 25 && npx nx run-many --target=e2e --projects=next-app-router-4000,next-app-router-4001 --parallel=1 && lsof -ti tcp:4000,4001 | xargs kill || true diff --git a/.github/workflows/e2e-next-prod.yml b/.github/workflows/e2e-next-prod.yml index a114f29c09c..30d86ad60e0 100644 --- a/.github/workflows/e2e-next-prod.yml +++ b/.github/workflows/e2e-next-prod.yml @@ -43,20 +43,14 @@ jobs: id: check-ci run: node tools/scripts/ci-is-affected.mjs --appName=3000-home - - name: E2E Test for Next.js Prod - Home + - name: E2E Test for Next.js Prod if: steps.check-ci.outcome == 'success' run: | - killall node - npx nx run 3000-home:test:e2e:production - - - name: E2E Test for Next.js Prod - Shop - if: steps.check-ci.outcome == 'success' - run: | - killall node - npx nx run 3001-shop:test:e2e:production - - - name: E2E Test for Next.js Prod - Checkout - if: steps.check-ci.outcome == 'success' - run: | - killall node - npx nx run 3002-checkout:test:e2e:production + pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build && + pnpm run app:next:prod & + sleep 4 && + npx wait-on tcp:3001 && + npx wait-on tcp:3002 && + npx wait-on tcp:3000 && + npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 && + npx kill-port 3000,3001,3002 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b6caed555d9..f65dbc9f5da 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -42,6 +42,18 @@ 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 diff --git a/.gitignore b/.gitignore index 33cea2a448b..d2c78998aef 100644 --- a/.gitignore +++ b/.gitignore @@ -87,3 +87,7 @@ vitest.config.*.timestamp* # website-new .rsbuild ssg + +# Native binary files +*.node +worktrees/ diff --git a/INCREMENTAL_PR_PLAN_REVISED.md b/INCREMENTAL_PR_PLAN_REVISED.md deleted file mode 100644 index b7f88c6f6d0..00000000000 --- a/INCREMENTAL_PR_PLAN_REVISED.md +++ /dev/null @@ -1,293 +0,0 @@ -# Revised Incremental PR Plan for packages/enhanced Changes - -## Overview -Based on a detailed diff analysis, this document provides a more accurate breakdown of changes into focused, incremental PRs. Each PR represents a distinct feature, fix, or refactor that can be merged independently. - -## Updated PR Sequence - -### PR 1: Runtime Safety Fixes -**Size**: Tiny (~2 files) -**Risk**: Low -**Type**: Fix -**Feature**: Add defensive checks to prevent runtime errors - -**Files to include**: -- `src/lib/container/runtime/EmbedFederationRuntimeModule.ts` (add `typeof prevStartup === 'function'` check) -- `src/lib/startup/StartupHelpers.ts` (add `typeof __webpack_require__.x === "function"` check) - -**Why first**: These are independent safety fixes that improve stability without any dependencies. - ---- - -### PR 2: Hook Renaming and Cleanup -**Size**: Small (~6 files) -**Risk**: Low (internal refactoring only - all usages updated) -**Type**: Refactor -**Feature**: Rename container hooks for clarity and consistency - -**Files to include**: -- `src/lib/container/ContainerPlugin.ts` (rename hooks, add `addRemoteDependency`) -- `src/lib/container/runtime/FederationRuntimePlugin.ts` -- `src/lib/container/runtime/FederationModulesPlugin.ts` -- `src/lib/container/runtime/EmbedFederationRuntimePlugin.ts` -- `src/lib/container/RemoteModule.ts` (use new hook) -- Any other files that reference these hooks - -**Changes**: -- `addContainerEntryModule` → `addContainerEntryDependency` -- `addFederationRuntimeModule` → `addFederationRuntimeDependency` -- Add new `addRemoteDependency` hook - -**Implementation**: -```javascript -// Direct rename - all usages updated in same PR -compiler.hooks.addContainerEntryDependency = new SyncHook([...]); -compiler.hooks.addFederationRuntimeDependency = new SyncHook([...]); -compiler.hooks.addRemoteDependency = new SyncHook([...]); -``` - -**Note**: This is NOT a breaking change because all hook usages within the codebase are updated in the same PR. ---- - -### PR 3: Enhanced HoistContainerReferencesPlugin -**Size**: Medium (~3 files) -**Risk**: Medium -**Type**: Feature/Fix -**Feature**: Improve module hoisting for runtime chunks - -**Files to include**: -- `src/lib/container/HoistContainerReferencesPlugin.ts` (complete rewrite) -- `test/compiler-unit/container/HoistContainerReferencesPlugin.test.ts` (new tests) -- Related test fixtures - -**Depends on**: PR 2 (needs renamed hooks) - -**Key improvements**: -- Separate handling for container, federation, and remote dependencies -- Better support for `runtimeChunk: 'single'` configuration -- Proper remote module hoisting - ---- - -### PR 4: Basic Share Filtering - Include/Exclude by Version -**Size**: Medium (~12 files) -**Risk**: Low -**Type**: Feature -**Feature**: Filter shared modules by version constraints - -**Files to include**: -- `src/lib/sharing/utils.ts` (add `testRequestFilters`, `addSingletonFilterWarning`) -- `src/lib/sharing/ConsumeSharedPlugin.ts` (add version-based filtering) -- `src/lib/sharing/ProvideSharedPlugin.ts` (add version-based filtering) -- `src/schemas/sharing/ConsumeSharedPlugin.json` (add include/exclude schema) -- `src/schemas/sharing/ConsumeSharedPlugin.ts` -- `src/schemas/sharing/ConsumeSharedPlugin.check.ts` -- `src/schemas/sharing/ProvideSharedPlugin.json` -- `src/schemas/sharing/ProvideSharedPlugin.ts` -- `src/schemas/sharing/ProvideSharedPlugin.check.ts` -- `test/unit/sharing/utils-filtering.test.ts` (new) -- `test/configCases/sharing/share-multiple-versions-include/*` (new) -- `test/configCases/sharing/share-multiple-versions-exclude/*` (new) - -**API**: -```javascript -shared: { - react: { - include: { version: "^18.0.0" }, - exclude: { version: "17.x" } - } -} -``` - ---- - -### PR 5: Request Pattern Filtering -**Size**: Small (~8 files) -**Risk**: Low -**Type**: Feature -**Feature**: Filter shared modules by request patterns - -**Files to include**: -- `src/lib/sharing/ConsumeSharedPlugin.ts` (add request pattern support) -- `src/lib/sharing/ProvideSharedPlugin.ts` (add request pattern support) -- Update schemas for request patterns -- `test/configCases/sharing/prefix-share-filter/*` (new) -- Related unit tests - -**Depends on**: PR 4 (builds on filtering infrastructure) - -**API**: -```javascript -shared: { - "@scope/*": { - include: { request: /^@scope\/[^\/]+$/ } - } -} -``` - ---- - -### PR 6: Fallback Version Support -**Size**: Small (~6 files) -**Risk**: Low -**Type**: Feature -**Feature**: Add fallback version checking for filters - -**Files to include**: -- `src/lib/sharing/ConsumeSharedPlugin.ts` (add fallbackVersion logic) -- `src/lib/sharing/ProvideSharedPlugin.ts` (add fallbackVersion logic) -- Schema updates for fallbackVersion -- Unit tests for fallback version -- Integration tests - -**Depends on**: PR 4 - -**API**: -```javascript -shared: { - react: { - include: { - version: "^18.0.0", - fallbackVersion: "^17.0.0" - } - } -} -``` - ---- - -### PR 7: nodeModulesReconstructedLookup Feature -**Size**: Medium (~10 files) -**Risk**: Low -**Type**: Feature -**Feature**: Enable path reconstruction for node_modules resolution - -**Files to include**: -- `src/lib/sharing/utils.ts` (add `extractPathAfterNodeModules`) -- `src/lib/sharing/ConsumeSharedPlugin.ts` (add two-stage lookup) -- `src/lib/sharing/ProvideSharedPlugin.ts` (add two-stage lookup) -- Schema updates for nodeModulesReconstructedLookup -- `test/configCases/sharing/share-deep-module/*` (new) -- Related unit tests - -**Depends on**: PR 4 (uses filtering infrastructure) - ---- - -### PR 8: SharePlugin - Unified API -**Size**: Medium (~8 files) -**Risk**: Low -**Type**: Feature -**Feature**: New SharePlugin that combines consume and provide - -**Files to include**: -- `src/lib/sharing/SharePlugin.ts` (add schema validation) -- `src/index.ts` (export SharePlugin) -- `src/schemas/sharing/SharePlugin.json` (new) -- `src/schemas/sharing/SharePlugin.ts` (new) -- `src/schemas/sharing/SharePlugin.check.ts` (new) -- `test/unit/sharing/SharePlugin.test.ts` -- `test/compiler-unit/sharing/SharePlugin.test.ts` (new) - -**Depends on**: PR 4-7 (passes through all filtering options) - ---- - -### PR 9: Enhanced Layer Support -**Size**: Small (~6 files) -**Risk**: Low -**Type**: Feature/Fix -**Feature**: Improve layer handling and issuerLayer fallback - -**Files to include**: -- `src/lib/sharing/ConsumeSharedModule.ts` (layer parameter) -- `src/lib/sharing/ConsumeSharedFallbackDependency.ts` (layer support) -- `src/lib/sharing/resolveMatchedConfigs.ts` (issuerLayer priority) -- `src/lib/sharing/utils.ts` (createLookupKeyForSharing) -- Layer-specific tests -- Unit tests for issuerLayer fallback (PR #3893) - ---- - -### PR 10: Module Exports and API Surface -**Size**: Tiny (~3 files) -**Risk**: Low -**Type**: Feature -**Feature**: Export internal modules for advanced usage - -**Files to include**: -- `src/index.ts` (add ConsumeSharedModule, ProvideSharedModule exports) -- Declaration file updates -- Documentation - ---- - -### PR 11: Comprehensive Test Suite -**Size**: Large (test-only) -**Risk**: None -**Type**: Test -**Feature**: Additional test coverage and edge cases - -**Files to include**: -- Remaining test files not included in feature PRs -- `test/helpers/webpack.ts` -- Additional unit test coverage -- Edge case tests - -**Depends on**: All feature PRs - ---- - -### PR 12: Package Updates and Cleanup -**Size**: Small -**Risk**: Low -**Type**: Chore -**Feature**: Update dependencies and final cleanup - -**Files to include**: -- `package.json` -- `pnpm-lock.yaml` -- `.cursorrules` (editor configuration file) -- `src/scripts/compile-schema.js` (if needed) - -## Key Insights from Analysis - -1. **Runtime Safety Fixes** are completely independent and should go first -2. **Hook Renaming** is a prerequisite for the hoisting improvements -3. **Share Filtering** can be broken into smaller pieces: - - Version filtering (core functionality) - - Request pattern filtering (builds on version) - - Fallback version support (enhancement) - - nodeModulesReconstructedLookup (separate feature) -4. **Layer Support** improvements are somewhat independent but share some utilities -5. **Test files** are well-organized and can be included with their respective features - -## Dependency Graph - -``` -PR 1 (Runtime Fixes) ──────────────────> (Independent) - -PR 2 (Hook Renaming) ──────────────────> PR 3 (Hoisting) - -PR 4 (Version Filter) ──┬──> PR 5 (Request Filter) - ├──> PR 6 (Fallback Version) - └──> PR 7 (nodeModules Lookup) ──> PR 8 (SharePlugin) - -PR 9 (Layer Support) ──────────────────> (Semi-independent) - -PR 10 (Exports) ───────────────────────> (Independent) - -All Feature PRs ───────────────────────> PR 11 (Tests) ──> PR 12 (Cleanup) -``` - -## Benefits of This Revised Plan - -1. **Clearer Separation**: Each PR has a distinct purpose -2. **Reduced Risk**: Smaller, focused changes are easier to review and test -3. **Flexibility**: Some PRs can be developed in parallel -4. **Progressive Enhancement**: Each filtering feature builds on the previous -<<<<<<< HEAD -5. **Early Wins**: Runtime fixes and hook renaming can be merged quickly -======= -5. **Early Wins**: Runtime fixes and hook renaming can be merged quickly ->>>>>>> origin/refactor/hook-renaming-cleanup-v2 diff --git a/apps/3000-home/next-env.d.ts b/apps/3000-home/next-env.d.ts index a4a7b3f5cfa..52e831b4342 100644 --- a/apps/3000-home/next-env.d.ts +++ b/apps/3000-home/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/apps/3000-home/package.json b/apps/3000-home/package.json index d91e9710294..58a3caabcb6 100644 --- a/apps/3000-home/package.json +++ b/apps/3000-home/package.json @@ -6,14 +6,13 @@ "@ant-design/cssinjs": "^1.21.0", "antd": "5.19.1", "lodash": "4.17.21", - "next": "14.2.16", - "react": "18.3.1", - "react-dom": "18.3.1" + "next": "15.3.3", + "react": "19.0.0", + "react-dom": "19.0.0" }, "devDependencies": { "@module-federation/nextjs-mf": "workspace:*", "@module-federation/runtime": "workspace:*", - "@module-federation/utilities": "workspace:*", "webpack": "5.98.0" }, "scripts": { diff --git a/apps/3001-shop/next-env.d.ts b/apps/3001-shop/next-env.d.ts index a4a7b3f5cfa..52e831b4342 100644 --- a/apps/3001-shop/next-env.d.ts +++ b/apps/3001-shop/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/apps/3001-shop/package.json b/apps/3001-shop/package.json index 380c2bc3948..3b9395e279d 100644 --- a/apps/3001-shop/package.json +++ b/apps/3001-shop/package.json @@ -6,15 +6,14 @@ "@ant-design/cssinjs": "^1.21.0", "antd": "5.19.1", "lodash": "4.17.21", - "next": "14.2.16", - "react": "18.3.1", - "react-dom": "18.3.1" + "next": "15.3.3", + "react": "19.0.0", + "react-dom": "19.0.0" }, "devDependencies": { "@module-federation/nextjs-mf": "workspace:*", "@module-federation/runtime": "workspace:*", "@module-federation/sdk": "workspace:*", - "@module-federation/utilities": "workspace:*", "webpack": "5.98.0" }, "scripts": { diff --git a/apps/3002-checkout/next-env.d.ts b/apps/3002-checkout/next-env.d.ts index a4a7b3f5cfa..52e831b4342 100644 --- a/apps/3002-checkout/next-env.d.ts +++ b/apps/3002-checkout/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/apps/3002-checkout/package.json b/apps/3002-checkout/package.json index d3da32aa7df..ac9dc8f07df 100644 --- a/apps/3002-checkout/package.json +++ b/apps/3002-checkout/package.json @@ -6,15 +6,14 @@ "@ant-design/cssinjs": "^1.21.0", "antd": "5.19.1", "lodash": "4.17.21", - "next": "14.2.16", - "react": "18.3.1", - "react-dom": "18.3.1" + "next": "15.3.3", + "react": "19.0.0", + "react-dom": "19.0.0" }, "devDependencies": { "@module-federation/nextjs-mf": "workspace:*", "@module-federation/runtime": "workspace:*", "@module-federation/sdk": "workspace:*", - "@module-federation/utilities": "workspace:*", "webpack": "5.98.0" }, "scripts": { diff --git a/apps/3002-checkout/project.json b/apps/3002-checkout/project.json index 3c3416d759d..6f31c61934e 100644 --- a/apps/3002-checkout/project.json +++ b/apps/3002-checkout/project.json @@ -64,23 +64,6 @@ "lintFilePatterns": ["apps/3002-checkout/**/*.{ts,tsx,js,jsx}"] } }, - "e2e": { - "executor": "@nx/cypress:cypress", - "options": { - "cypressConfig": "apps/3002-checkout/cypress.config.ts", - "testingType": "e2e", - "baseUrl": "http://localhost:3002" - }, - "defaultConfiguration": "development", - "configurations": { - "development": { - "devServerTarget": "3002-checkout:serve:development" - }, - "production": { - "devServerTarget": "3002-checkout:serve:production" - } - } - }, "test:e2e": { "executor": "nx:run-commands", "options": { @@ -119,6 +102,23 @@ ] } } + }, + "e2e": { + "executor": "@nx/cypress:cypress", + "options": { + "cypressConfig": "apps/3002-checkout/cypress.config.ts", + "testingType": "e2e", + "baseUrl": "http://localhost:3002" + }, + "defaultConfiguration": "development", + "configurations": { + "development": { + "devServerTarget": "3002-checkout:serve:development" + }, + "production": { + "devServerTarget": "3002-checkout:serve:production" + } + } } } } diff --git a/apps/next-app-router/next-app-router-4000/app/context/context-click-counter.tsx b/apps/next-app-router/next-app-router-4000/app/context/context-click-counter.tsx index a59be8aeb2f..cd15bc1bd10 100644 --- a/apps/next-app-router/next-app-router-4000/app/context/context-click-counter.tsx +++ b/apps/next-app-router/next-app-router-4000/app/context/context-click-counter.tsx @@ -3,8 +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 }); +// import dynamic from 'next/dynamic'; +// const Button = dynamic(() => import('remote_4001/Button'), { ssr: true }); const ContextClickCounter = () => { const [count, setCount] = useCounter(); @@ -16,7 +16,10 @@ const ContextClickCounter = () => { size="small" animateRerendering={false} > - + {/* */} + diff --git a/apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx b/apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx index a3b35cc8051..c327c2b7ac3 100644 --- a/apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx +++ b/apps/next-app-router/next-app-router-4000/app/error-handling/[categorySlug]/error.tsx @@ -1,7 +1,7 @@ 'use client'; import { Boundary } from '#/ui/boundary'; -import Button from 'remote_4001/Button'; +// import Button from 'remote_4001/Button'; import React from 'react'; export default function Error({ error, reset }: any) { @@ -15,6 +15,12 @@ export default function Error({ error, reset }: any) {

Error

{error?.message}

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

Error

{error?.message}

- + + {/* */}
diff --git a/apps/next-app-router/next-app-router-4000/app/hooks/page.tsx b/apps/next-app-router/next-app-router-4000/app/hooks/page.tsx index c216fb991d6..62370239c48 100644 --- a/apps/next-app-router/next-app-router-4000/app/hooks/page.tsx +++ b/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 ( -
-
-

Client Component Hooks

- -
    -
  • - Next.js provides a number of hooks for accessing routing information - from client components. -
    • -
  • - Try navigating each page and observing the output of each hook - called from the current routes layout.js and{' '} - page.js files. -
    • -
+ const router = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); + const params = useParams(); + const segments = useSelectedLayoutSegments(); + const segment = useSelectedLayoutSegment(); -
- - Docs - - - Code - + return ( + <> + + Client Component Hooks Demo + +