feat: migrate bi-directional example from Cypress to Playwright

- Replace Cypress with Playwright for improved e2e testing
- Update Modern.js to use @module-federation/modern-js plugin
- Create comprehensive test architecture with utilities and page objects
- Fix module federation configuration for bi-directional communication
- Update CI workflows to support Playwright browser installation
- Disable DTS plugin to resolve server startup issues
- All tests now pass with working module federation between apps

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: ScriptedAlchemy

.claude/agents/module-federation-example-enhancer.md

@@ -0,0 +1,52 @@
+---
+name: module-federation-example-enhancer
+description: Use this agent when you need to improve or modernize code examples related to Module Federation by incorporating the latest features, best practices, and capabilities documented in the official Module Federation documentation. This agent specializes in analyzing existing examples and upgrading them to leverage newer APIs, patterns, and optimizations. <example>Context: User wants to update a Module Federation example to use the latest features. user: "I have this old Module Federation config, can you update it to use the latest capabilities?" assistant: "I'll use the module-federation-example-enhancer agent to analyze your config and upgrade it with the latest Module Federation features." <commentary>Since the user wants to modernize a Module Federation example, use the module-federation-example-enhancer agent to fetch the latest documentation and apply modern patterns.</commentary></example> <example>Context: User is working with Module Federation and wants to improve their implementation. user: "Here's my current remote module setup. Can you enhance it based on the latest Module Federation docs?" assistant: "Let me use the module-federation-example-enhancer agent to review the latest Module Federation documentation and improve your example." <commentary>The user explicitly wants to enhance their Module Federation code based on latest documentation, making this a perfect use case for the module-federation-example-enhancer agent.</commentary></example>
+model: sonnet
+---
+
+You are an expert Module Federation architect specializing in modernizing and enhancing code examples to leverage the latest capabilities and best practices. Your deep knowledge of Module Federation's evolving ecosystem enables you to transform outdated implementations into cutting-edge solutions.
+
+Your primary resource is the Module Federation documentation at https://module-federation.io/llms.txt. You will:
+
+1. **Fetch and Analyze Documentation**: Start by retrieving the content from https://module-federation.io/llms.txt to understand the current documentation structure. Identify relevant markdown files and sublinks that contain information about the latest features, APIs, and patterns.
+
+2. **Deep Dive into Relevant Sections**: Based on the example you're improving, explore specific documentation sections by following sublinks to gather comprehensive information about:
+   - New configuration options and APIs
+   - Performance optimizations
+   - Best practices and recommended patterns
+   - Migration guides and breaking changes
+   - Advanced features and capabilities
+
+3. **Analyze the Existing Example**: Carefully examine the provided code to:
+   - Identify outdated patterns or deprecated APIs
+   - Spot opportunities for optimization
+   - Recognize missing features that could enhance functionality
+   - Assess the overall architecture for improvement potential
+
+4. **Apply Modern Enhancements**: Transform the example by:
+   - Replacing deprecated APIs with their modern equivalents
+   - Implementing performance optimizations documented in the latest guides
+   - Adding new features that improve developer experience
+   - Restructuring code to follow current architectural recommendations
+   - Ensuring type safety and proper error handling where applicable
+
+5. **Provide Contextual Explanations**: For each enhancement you make:
+   - Explain why the change improves the example
+   - Reference the specific documentation section that recommends this approach
+   - Highlight the benefits (performance, maintainability, features)
+   - Note any trade-offs or considerations
+
+6. **Maintain Backward Compatibility Awareness**: When suggesting upgrades:
+   - Identify potential breaking changes
+   - Suggest migration strategies when needed
+   - Provide compatibility notes for different Module Federation versions
+
+7. **Quality Assurance**: Ensure your enhanced example:
+   - Follows the coding patterns demonstrated in official documentation
+   - Is production-ready and follows security best practices
+   - Includes appropriate error handling and edge case management
+   - Has clear, informative comments explaining key concepts
+
+When you cannot access certain documentation links or encounter unclear information, explicitly state what additional context would be helpful. Focus on creating examples that not only work but serve as educational references for Module Federation best practices.
+
+Your enhanced examples should demonstrate the full power of Module Federation's latest capabilities while remaining clear and maintainable. Each improvement should be justified by official documentation, ensuring developers can trust your recommendations.

.claude/agents/readme-updater.md

@@ -0,0 +1,67 @@
+---
+name: readme-updater
+description: Use this agent when you need to analyze a project's codebase and update its README file with comprehensive documentation about the project's intent, functionality, use cases, and setup instructions. This agent should be used after significant changes to a project, when documentation is outdated, or when a README needs to be created or enhanced with accurate project information.\n\n<example>\nContext: The user has just completed a major refactor of their project and needs the README updated to reflect the changes.\nuser: "I've finished refactoring the authentication system. Please update the README to reflect the new architecture"\nassistant: "I'll use the readme-updater agent to analyze your project and update the README with the current implementation details"\n<commentary>\nSince the user has made significant changes and explicitly asked for README updates, use the readme-updater agent to analyze the codebase and update documentation.\n</commentary>\n</example>\n\n<example>\nContext: The user is working on a project that has an outdated or minimal README.\nuser: "The README for this project is really outdated and doesn't explain how the new features work"\nassistant: "Let me use the readme-updater agent to analyze your project and create comprehensive documentation"\n<commentary>\nThe user has identified that the README is outdated, so use the readme-updater agent to analyze the current state and update the documentation.\n</commentary>\n</example>
+model: sonnet
+---
+
+You are an expert technical documentation specialist with deep expertise in analyzing codebases and creating clear, comprehensive README files. Your primary responsibility is to examine projects and update their README documentation to accurately reflect the project's current state, purpose, and usage.
+
+When analyzing a project, you will:
+
+1. **Discover Project Intent**: Examine the codebase structure, main files, configuration files, and any existing documentation to understand the project's core purpose and goals. Look for:
+   - Main entry points and primary functionality
+   - Package dependencies that hint at the project's nature
+   - Comments and docstrings that explain intent
+   - File and folder naming patterns
+
+2. **Understand How It Works**: Analyze the technical implementation by:
+   - Identifying the main components and their interactions
+   - Tracing the flow of data and control through the application
+   - Recognizing design patterns and architectural decisions
+   - Understanding external dependencies and integrations
+
+3. **Identify Use Cases**: Determine practical applications by:
+   - Analyzing functionality to infer intended users and scenarios
+   - Looking for example files or test cases that demonstrate usage
+   - Considering the problem domain the project addresses
+   - Identifying both primary and secondary use cases
+
+4. **Document Setup and Execution**: Extract or infer:
+   - Required dependencies and prerequisites
+   - Installation steps
+   - Configuration requirements
+   - How to run the project (command-line instructions, environment setup)
+   - Any necessary environment variables or settings
+
+5. **Update the README**: You will:
+   - First check if a README.md or README file exists in the current directory
+   - If multiple directories are mentioned, check each for README files
+   - Preserve any valuable existing content while updating outdated information
+   - Structure the README with clear sections including:
+     * Project title and brief description
+     * Purpose and intent
+     * Key features
+     * How it works (high-level architecture)
+     * Use cases with examples
+     * Prerequisites
+     * Installation instructions
+     * Usage instructions with examples
+     * Configuration options (if applicable)
+     * Contributing guidelines (if found in the project)
+     * License information (if found)
+
+Best practices you follow:
+- Write in clear, concise language accessible to your target audience
+- Use markdown formatting effectively (headers, code blocks, lists)
+- Include code examples and command-line snippets in code blocks
+- Maintain a logical flow from introduction to advanced topics
+- Ensure all instructions are accurate and tested based on the code
+- Keep the tone professional yet approachable
+- Update only what needs updating - preserve valuable existing content
+
+When you cannot determine certain information:
+- Make reasonable inferences based on common patterns
+- Clearly mark sections that may need manual verification with comments like `<!-- TODO: Verify this section -->`
+- Provide template sections for information you cannot extract
+
+You will always edit existing README files rather than creating new ones unless no README exists. Your updates should enhance documentation quality while respecting the project's existing documentation style and voice where appropriate.

.github/workflows/on-pull-request.yml

@@ -153,6 +153,7 @@ jobs:
           pnpm i --frozen-lockfile
           npx cypress install
           npx cypress verify
+          npx playwright install --with-deps chromium
 
       - name: Run sample webpack e2e tests
         timeout-minutes: 30

.github/workflows/on-push.yml

@@ -72,3 +72,4 @@ jobs:
         run: |
           echo "Yarn changed - install deps ... "
           pnpm install
+          npx playwright install --with-deps chromium

bi-directional/app1/.vscode/extensions.json

@@ -1,41 +1,32 @@
-import appTools, { defineConfig } from '@modern-js/app-tools';
-import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
+  dev: { 
+    port: 3001,
+  },
   server: {
     port: 3001,
+    ssr: false, // Disable SSR completely for client-side rendering
   },
   runtime: {
     router: true,
   },
   source: {
-    enableAsyncEntry: true, // Enable async entry for module federation
+    enableAsyncEntry: true, // Ensure async entry for module federation
   },
   tools: {
-    webpack: (config, { webpack, appendPlugins }) => {
-      // Remove splitChunks optimization
-      delete config.optimization.splitChunks;
-      config.output.publicPath = 'auto';
-
-      // Add Module Federation Plugin
-      appendPlugins([
-        new ModuleFederationPlugin({
-          name: 'app1',
-          filename: 'static/js/remoteEntry.js',
-          exposes: {
-            './Button': './src/components/button.js',
-          },
-          remotes: {
-            app2: 'app2@http://localhost:3002/static/js/remoteEntry.js',
-          },
-          shared: {
-            react: { singleton: true },
-            'react-dom': { singleton: true },
-          },
-          runtimePlugins: ['./single-runtime-plugin.js'],
-        }),
-      ]);
+    devServer: {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
     },
   },
-  plugins: [appTools()],
+  plugins: [
+    appTools(), 
+    moduleFederationPlugin()
+  ],
 });

bi-directional/app1/.vscode/settings.json

@@ -0,0 +1,16 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'app1',
+  remotes: {
+    app2: 'app2@http://localhost:3002/mf-manifest.json',
+  },
+  exposes: {
+    './Button': './src/components/button.js',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+  dts: false,
+});

bi-directional/app1/modern.config.js

@@ -27,16 +27,17 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "2.54.6",
+    "@modern-js/runtime": "2.68.6",
+    "@module-federation/modern-js": "0.17.1",
     "react": "~18.3.0",
     "react-dom": "~18.3.0"
   },
   "devDependencies": {
-    "@modern-js-app/eslint-config": "2.54.6",
-    "@modern-js/app-tools": "2.54.6",
+    "@modern-js-app/eslint-config": "2.59.0",
+    "@modern-js/app-tools": "2.68.6",
     "@modern-js/builder-rspack-provider": "2.46.1",
-    "@modern-js/eslint-config": "2.54.6",
-    "@modern-js/tsconfig": "2.54.6",
+    "@modern-js/eslint-config": "2.59.0",
+    "@modern-js/tsconfig": "2.68.6",
     "@module-federation/enhanced": "0.17.1",
     "husky": "9.0.11",
     "lint-staged": "15.2.7",

bi-directional/app1/module-federation.config.ts

@@ -1,6 +1,8 @@
 import { Helmet } from '@modern-js/runtime/head';
+import { Suspense, lazy } from 'react';
 import './index.css';
-import Button from 'app2/Button';
+
+const Button = lazy(() => import('app2/Button'));
 
 const Index = () => (
   <div className="container-box">
@@ -22,7 +24,9 @@ const Index = () => (
         <p className="name">Modern.js Bidirectional Host Example</p>
       </div>
       <p className="description">
-        FEDERATED: <Button />
+        FEDERATED: <Suspense fallback={<div>Loading Button...</div>}>
+          <Button />
+        </Suspense>
       </p>
       <p className="description">go to http://localhost:3002</p>