feat(chrome-devtools): support devtools to debug online mf module (#2178)

Co-authored-by: zhouxiao.shaw <[email protected]>
Co-authored-by: Zhou xiao <[email protected]>

Author: nyqykk

.changeset/pretty-olives-poke.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/devtools': patch
+---
+
+feat: Added chrome devtool

.github/workflows/build-and-test.yml

@@ -54,7 +54,7 @@ jobs:
       #        run: pnpm run app:next:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=3001-shop && lsof -ti tcp:3000,3001,3002 | xargs kill
 
       - name: E2E Test for ModernJS
-        run: npx nx run-many --target=test:e2e --projects=modernjs --parallel=1 && lsof -ti tcp:8080 | xargs kill
+        run: npx nx run-many --target=test:e2e --projects=modernjs --parallel=1 && lsof -ti tcp:4001 | xargs kill
 
       #      - name: E2E Test for 3002-checkout
       #        run: pnpm run app:next:dev & echo "done" && sleep 15 && npx nx run-many --target=test:e2e --projects=3002-checkout && lsof -ti tcp:3000,3001,3002 | xargs kill

.github/workflows/devtools.yml

@@ -0,0 +1,47 @@
+name: Devtools
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+
+env:
+  PLAYWRIGHT_BROWSERS_PATH: 0 # Places binaries to node_modules/@playwright/test
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.head_ref || github.run_id }}
+      cancel-in-progress: true
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '17'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Run Affected Build
+        run: npx nx affected -t build --parallel=10 --exclude='*,!tag:package'
+
+      - name: Configuration xvfb
+        shell: bash
+        run: sudo apt-get update && sudo apt-get install xvfb
+
+      - name: E2E Chrome Devtools
+        run: |
+          pnpm run app:manifest:dev & echo "done" && sleep 50 && npx nx e2e:devtools chrome-devtools && lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill

apps/modernjs/modern.config.ts

@@ -5,13 +5,21 @@ import {
 } from '@module-federation/enhanced';
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
+  dev: {
+    port: 4001,
+  },
   runtime: {
     router: true,
   },
+  // source: {
+  //   enableAsyncEntry: true,
+  // },
   plugins: [appTools()],
   tools: {
     webpack: (config, { webpack, appendPlugins }) => {
-      config.output.publicPath = 'auto';
+      if (config?.output) {
+        config.output.publicPath = 'http://localhost:4001/';
+      }
 
       appendPlugins([
         new AsyncBoundaryPlugin({

apps/modernjs/project.json

@@ -43,7 +43,7 @@
       "options": {
         "cypressConfig": "apps/modernjs/cypress.config.ts",
         "testingType": "e2e",
-        "baseUrl": "http://localhost:8080",
+        "baseUrl": "http://localhost:4001",
         "browser": "chrome"
       },
       "configurations": {

package.json

@@ -24,6 +24,7 @@
     "lint": "nx run-many --target=lint",
     "test": "nx run-many --target=test",
     "build": "nx run-many --target=build --parallel=3 --exclude='*,!tag:package'",
+    "build:pkg": "nx run-many --target=build --parallel=3 --exclude='react_ts_remote,react_ts_host'",
     "lint-fix": "nx format:write --uncommitted",
     "trigger-release": "node -e 'import(\"open\").then(open => open.default(\"https://github.com/module-federation/universe/actions/workflows/trigger-release.yml\"))'",
     "serve:next": "nx run-many --target=serve --all --parallel=3 -exclude='*,!tag:nextjs'",
@@ -147,6 +148,7 @@
     "@types/webpack-sources": "3.2.3",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
+    "@types/chrome": "^0.0.260",
     "@vitest/coverage-istanbul": "1.2.2",
     "@vitest/coverage-v8": "1.2.2",
     "@vitest/ui": "1.2.2",

packages/chrome-devtools/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10

packages/chrome-devtools/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+  env: {
+    webextensions: true,
+  },
+  parserOptions: {
+    project: true,
+  },
+  rules: {
+    '@typescript-eslint/no-parameter-properties': 'off',
+  },
+};

packages/chrome-devtools/.gitignore

@@ -0,0 +1,33 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+*.log*
+
+node_modules/
+.yarn-integrity
+.pnpm-store/
+*.tsbuildinfo
+.eslintcache
+.changeset/pre.json
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+log/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+modern.config.local.*
+
+test-results/

packages/chrome-devtools/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false