feat: modernize advanced-api examples with Module Federation 2.0

[ScriptedAlchemy]

Summary

• Upgraded all four advanced-api examples to use @module-federation/enhanced for Module Federation 2.0 capabilities
• Added TypeScript support with proper type definitions for module federation
• Implemented enhanced error boundaries for better federation error handling
• Added runtime plugins for dynamic configuration where appropriate
• Converted all Cypress tests to Playwright for consistency across examples
• Maintained essential CORS headers for cross-origin Module Federation functionality
• Focused specifically on Module Federation improvements without unnecessary webpack optimizations

Test plan

• All examples build successfully with both webpack and rspack configurations
• Playwright e2e tests run for all examples
• Module Federation remotes load correctly across all examples
• TypeScript compilation works without errors
• Runtime plugins function properly for dynamic configuration
• Error boundaries handle federation failures gracefully

🤖 Generated with Claude Code

[github-advanced-security]

CodeQL found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[Copilot]

Pull Request Overview

This PR modernizes the advanced-api examples by upgrading to Module Federation 2.0 with @module-federation/enhanced, adding comprehensive TypeScript support, implementing enhanced error boundaries, creating runtime plugins for dynamic configuration, converting Cypress tests to Playwright, and maintaining essential CORS headers for cross-origin functionality. The changes focus specifically on Module Federation improvements while introducing modern React patterns and better developer tooling.

Key Changes

• Upgraded all examples to use @module-federation/enhanced for Module Federation 2.0 capabilities
• Added comprehensive TypeScript support with proper type definitions and configurations
• Converted all Cypress tests to Playwright for improved consistency and reliability
• Implemented enhanced error boundaries and runtime plugins for better federation error handling

Reviewed Changes

Copilot reviewed 103 out of 111 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package.json	Added Playwright test dependency for modernized e2e testing
esm/rspack/webpack.config.mjs	Removed file as part of modernization cleanup
advanced-api/dynamic-remotes/shared-config.js	Added centralized shared configuration utilities for Module Federation
advanced-api/dynamic-remotes/runtime-plugins.js	Created comprehensive runtime plugins for enhanced error handling and performance monitoring
advanced-api/dynamic-remotes/playwright.config.ts	Configured Playwright testing with webServer management
advanced-api/dynamic-remotes/package.json	Updated test scripts to use Playwright instead of manual server management
advanced-api/dynamic-remotes/e2e/utils/base-test.ts	Simplified base test utilities by removing unused fixtures
advanced-api/dynamic-remotes/e2e/checkDynamicRemotesApps.spec.ts	Converted test from Cypress patterns to inline Playwright helper functions
advanced-api/dynamic-remotes/app*/webpack.config.js	Updated webpack configs to use shared configuration and enhanced Module Federation
advanced-api/dynamic-remotes/app*/tsconfig.json	Added TypeScript configuration files for all applications
advanced-api/dynamic-remotes/app*/package.json	Added TypeScript dependencies and babel presets
advanced-api/dynamic-remotes/app1/src/App.tsx	Enhanced host app with comprehensive error handling and TypeScript
advanced-api/dynamic-remotes-synchronous-imports/*	Comprehensive modernization with enhanced runtime plugins and TypeScript
advanced-api/dynamic-remotes-runtime-environment-variables/*	Updated to use enhanced Module Federation and improved error handling

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

advanced-api/dynamic-remotes/runtime-plugins.js:64

• The function uses window?.location?.origin which could be undefined in non-browser environments. Consider adding a null check or default fallback to prevent potential runtime errors.

  }

[Copilot]

The abort signal check should happen before processing the response, but the current logic returns early without calling setIsLoading(false), which could leave the component in a perpetual loading state.

Suggested change

	if (signal.aborted || !isMountedRef.current) {
	if (signal.aborted || !isMountedRef.current) {
	setIsLoading(false);

[Copilot]

The handleAutoRetry method creates a timeout but doesn't handle the case where the component unmounts before the timeout executes. This could lead to memory leaks and attempting to update unmounted components.

[Copilot]

[nitpick] Using force: true in clicks can mask underlying issues with element accessibility or timing. Consider using proper waiting strategies instead of forcing interactions.

Suggested change

	await element.click({ timeout: 5000, force: true });
	await element.click({ timeout: 5000 });

To fix the problem, the unused function clickElementWithText should be removed from the file advanced-api/dynamic-remotes-synchronous-imports/e2e/checkDynamicRemotesSynchImportApps.spec.ts. Specifically, delete lines 29-31, which define the function. No other changes are necessary, as the function is not referenced elsewhere in the provided code.

The best way to fix the problem is to remove the unused function waitForDynamicImport from the file. This involves deleting its definition (lines 33–37) from advanced-api/dynamic-remotes-synchronous-imports/e2e/checkDynamicRemotesSynchImportApps.spec.ts. No other changes are necessary, as the function is not referenced elsewhere in the provided code. This will improve code readability and prevent any wasted computation.

To fix the problem, we should remove the useless conditional and replace it with the value that is always used. In this case, since loading always evaluates to false, the expression loading ? '#ccc' : '#dc3545' will always result in '#dc3545'. Therefore, we should replace the entire conditional with '#dc3545'. This change should be made only on line 220 of the file advanced-api/dynamic-remotes/app1/src/App.tsx. No additional imports, methods, or definitions are required.

---

To fix the problem, we should remove the useless conditional and replace it with the constant value that is always selected. Since loading always evaluates to false in this context, the conditional cursor: loading ? 'not-allowed' : 'pointer' will always select 'pointer'. Therefore, we should replace this line with cursor: 'pointer'. This change should be made in the style object for the retry button, on line 224 of the file advanced-api/dynamic-remotes/app1/src/App.tsx. No additional imports or definitions are required.

To fix the problem, we should remove the useless conditional that checks the value of loading in the button label. Since loading is always false in this context, the conditional {loading ? 'Retrying...' : 'Retry Load'} will always evaluate to 'Retry Load'. Therefore, we should replace this expression with the constant string 'Retry Load'. This change should be made only at line 228 in the file advanced-api/dynamic-remotes/app1/src/App.tsx. No additional imports, methods, or definitions are required.

---