feat: support data loader

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

@@ -87,3 +87,8 @@ jobs:
     needs: checkout-install
     uses: ./.github/workflows/e2e-router.yml
     secrets: inherit
+
+  e2e-modern-ssr-data-loader:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-modern-ssr-data-loader.yml
+    secrets: inherit

.github/workflows/e2e-modern-ssr-data-loader.yml

@@ -0,0 +1,53 @@
+name: E2E Test for ModernJS SSR Data Loader
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-modern:
+    runs-on: ubuntu-latest
+    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: '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: 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=modernjs
+
+      - name: E2E Test for Modern.js SSR Data Loader
+        if: steps.check-ci.outcome == 'success'
+        run: |
+          lsof -ti tcp:3062,3061,3063,3064 | xargs -r kill &&
+          pnpm run app:modern:data-loader:dev &
+          npx wait-on http://127.0.0.1:3062/entry-one/nested-routes/pathname &&
+          npx wait-on http://127.0.0.1:3061/ &&
+          npx wait-on http://127.0.0.1:3063/ &&
+          npx wait-on http://127.0.0.1:3064/ &&
+          npx nx run modernjs-ssr-data-loader-host:e2e &&
+          lsof -ti tcp:3062,3061,3063,3064 | xargs kill

apps/modernjs-ssr-data-loader/README.md

@@ -0,0 +1,30 @@
+# modernjs-ssr
+
+## Running Demo
+
+**Apps**
+
+- host: [localhost:3062](http://localhost:3062/)
+- sub: [localhost:3061](http://localhost:3061/)
+
+**Components**
+
+- host-provider: [localhost:3063](http://localhost:3063/)
+- sub-provider: [localhost:3064](http://localhost:3064/)
+
+## How to start the demos ?
+
+```bash
+# Root directory
+pnpm i
+
+nx build modern-js-plugin
+
+pnpm app:modern:data-loader:dev
+
+# SSR 
+open http://localhost:3062/entry-one/nested-routes/pathname
+# CSR
+open http://localhost:3062/entry-two
+```
+/Users/bytedance/outter/universe/apps/modernjs-ssr-data-loader/sub-provider/node_modules/.federation/tsconfig.fb3ee3c97a41fc15144d1061cf9569eb.json

apps/modernjs-ssr-data-loader/host-provider/CHANGELOG.md

@@ -0,0 +1,27 @@
+# modernjs-ssr-remote
+
+## 0.1.15
+
+### Patch Changes
+
+- @module-federation/modern-js@0.3.3
+
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [85ae159]
+  - @module-federation/modern-js@0.3.2
+
+## 0.1.13
+
+### Patch Changes
+
+- @module-federation/modern-js@0.3.1
+
+## 0.1.12
+
+### Patch Changes
+
+- Updated dependencies [fa37cc4]
+  - @module-federation/modern-js@0.2.0

apps/modernjs-ssr-data-loader/host-provider/modern.config.ts

@@ -0,0 +1,23 @@
+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({
+  runtime: {
+    router: true,
+  },
+
+  plugins: [
+    appTools({
+      // TODO: wait rspack fix react-router-dom shared issue to change bundler type as rspack
+      bundler: 'webpack',
+    }),
+    moduleFederationPlugin(),
+  ],
+  server: {
+    port: 3063,
+    ssr: {
+      mode: 'stream',
+    },
+  },
+});

apps/modernjs-ssr-data-loader/host-provider/module-federation.config.ts

@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host_provider',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Image': './src/components/Image.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

apps/modernjs-ssr-data-loader/host-provider/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "modernjs-ssr-data-loader-host-provider",
+  "private": true,
+  "version": "0.1.15",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "upgrade": "modern upgrade"
+  },
+  "engines": {
+    "node": ">=16.18.1"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "dependencies": {
+    "@modern-js/runtime": "^2.60.4",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@module-federation/modern-js": "workspace:*",
+    "@babel/runtime": "7.24.4",
+    "antd": "4.24.15"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.60.4",
+    "@modern-js/tsconfig": "^2.60.4",
+    "typescript": "~5.0.4",
+    "@types/jest": "~29.5.0",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "lint-staged": "~13.1.0",
+    "prettier": "~2.8.1",
+    "rimraf": "~3.0.2"
+  }
+}

apps/modernjs-ssr-data-loader/host-provider/project.json

@@ -0,0 +1,77 @@
+{
+  "name": "modernjs-ssr-data-loader-host-provider",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/modernjs-ssr/host-provider/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-ssr-data-loader/host-provider; pnpm run build",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-ssr-data-loader/host-provider; pnpm run dev",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/modernjs-ssr-data-loader/host-provider/cypress.config.ts",
+        "testingType": "e2e",
+        "baseUrl": "http://localhost:4001",
+        "browser": "chrome"
+      },
+      "configurations": {
+        "development": {
+          "runnerUi": true,
+          "browser": "electron",
+          "exit": false,
+          "watch": true
+        }
+      }
+    },
+    "test:e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": true,
+        "commands": [
+          {
+            "command": "lsof -i :8080 || nx run modernjs-ssr-data-loader-host-provider:serve & echo 'done'",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "sleep 20 && nx run modernjs-ssr-data-loader-host-provider:e2e",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["typescript"]
+}

apps/modernjs-ssr-data-loader/host-provider/src/.eslintrc.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};

apps/modernjs-ssr-data-loader/host-provider/src/components/Image.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import stuff from './stuff.module.css';
+
+export default (): JSX.Element => (
+  <div
+    id="host-provider-components"
+    style={{
+      backgroundColor: '#1ee9c1',
+      color: 'lightgrey',
+      padding: '1rem',
+    }}
+  >
+    <h2>
+      <strong>host-provider</strong>&nbsp;image
+    </h2>
+    <button
+      id="host-provider-components-button"
+      style={{ marginBottom: '1rem' }}
+      onClick={() =>
+        alert('[host-provider-components] Client side Javascript works!')
+      }
+    >
+      Click me to test i'm interactive!
+    </button>
+    <img
+      id="host-provider-components-image"
+      src="https://module-federation.io/module-federation-logo.svg"
+      style={{ width: '100px' }}
+      alt="serge"
+    />
+    <Button className={stuff['test-host-provider']}>
+      Button from host-provider
+    </Button>
+  </div>
+);

apps/modernjs-ssr-data-loader/host-provider/src/components/stuff.module.css

@@ -0,0 +1,3 @@
+.test-host-provider {
+  background: red;
+}

apps/modernjs-ssr-data-loader/host-provider/src/components/stuff.module.css.d.ts

@@ -0,0 +1,3 @@
+const classes: { readonly 'test-host-provider': string };
+
+export default classes;

apps/modernjs-ssr-data-loader/host-provider/src/modern-app-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types='@modern-js/app-tools/types' />
+/// <reference types='@modern-js/runtime/types' />
+/// <reference types='@modern-js/runtime/types/router' />
+/// <reference types='@module-federation/modern-js/types' />

apps/modernjs-ssr-data-loader/host-provider/src/routes/layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

apps/modernjs-ssr-data-loader/host-provider/src/routes/page.tsx

@@ -0,0 +1,10 @@
+import Image from '../components/Image';
+
+const Index = (): JSX.Element => {
+  return (
+    <div className="container-box">
+      <Image />
+    </div>
+  );
+};
+export default Index;

apps/modernjs-ssr-data-loader/host-provider/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "express"],
+    "target": "ES2015",
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

apps/modernjs-ssr-data-loader/host-provider/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    }
+  },
+  "include": ["src", "shared", "config", "modern.config.ts"],
+  "exclude": ["**/node_modules"]
+}