feat: support data loader

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

@@ -0,0 +1,27 @@
+# modernjs-ssr-nested-remote
+
+## 0.1.13
+
+### Patch Changes
+
+- @module-federation/modern-js@0.3.3
+
+## 0.1.12
+
+### 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/modern.config.ts

@@ -0,0 +1,32 @@
+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: 3062,
+    // FIXME: it should be removed , related issue: https://github.com/web-infra-dev/modern.js/issues/5999
+    host: '0.0.0.0',
+  },
+  runtime: {
+    router: true,
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+    // ssrByRouteIds: ['remote@layout', 'remote@page', 'remote@a/page'],
+    port: 3062,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+    moduleFederationPlugin({
+      dataLoader: {
+        baseName: 'federationHost',
+        partialSSRRemotes: ['remote'],
+      },
+    }),
+  ],
+});

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

@@ -0,0 +1,15 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Content': './src/components/Content.tsx',
+  },
+  remotes: {
+    remote: 'remote@http://localhost:3061/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});

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

@@ -0,0 +1,49 @@
+{
+  "name": "modernjs-ssr-data-loader-host",
+  "private": true,
+  "version": "0.1.13",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint",
+    "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": "0.0.0-next-20240816082741",
+    "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": "0.0.0-next-20240816082741",
+    "@modern-js/eslint-config": "0.0.0-next-20240816082741",
+    "@modern-js/tsconfig": "0.0.0-next-20240816082741",
+    "@modern-js-app/eslint-config": "0.0.0-next-20240816082741",
+    "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/project.json

@@ -0,0 +1,77 @@
+{
+  "name": "modernjs-ssr-data-loader-host",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/modernjs-ssr-data-loader/modernjs-ssr-data-loader-host/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/modernjs-ssr-data-loader/host; 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; pnpm run dev",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/modernjs-ssr-data-loader/host/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:serve & echo 'done'",
+            "forwardAllArgs": false
+          },
+          {
+            "command": "sleep 20 && nx run modernjs-ssr-data-loader-host:e2e",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["typescript"]
+}

apps/modernjs-ssr-data-loader/host/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/src/components/Content.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Comp from 'remote/Image';
+import Button from 'antd/lib/button';
+import stuff from './stuff.module.css';
+
+export default (): JSX.Element => (
+  <div
+    id="nested-remote-components"
+    style={{
+      backgroundColor: '#e91ece',
+      color: 'lightgrey',
+      padding: '1rem',
+    }}
+  >
+    <h2 onClick={() => alert('Client side Javascript works!')}>
+      <strong>nested remote</strong>
+    </h2>
+    <Button
+      id="nested-remote-components-button"
+      className={stuff['test-remote2']}
+      onClick={() =>
+        alert('[nested-remote-components] Client side Javascript works!')
+      }
+    >
+      Click me to test <strong>nested remote</strong> interactive!
+    </Button>
+    <Comp />
+  </div>
+);

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

@@ -0,0 +1,3 @@
+.test-remote2 {
+  background: rgb(119, 218, 59);
+}

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

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

apps/modernjs-ssr-data-loader/host/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/src/routes/index.css

@@ -0,0 +1,127 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
+  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container-box {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  display: flex;
+  margin: 4rem 0 4rem;
+  align-items: center;
+  font-size: 4rem;
+  font-weight: 600;
+}
+
+.logo {
+  width: 6rem;
+  margin: 7px 0 0 1rem;
+}
+
+.name {
+  color: #4ecaff;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 1.3rem;
+  color: #1b3a42;
+  margin-bottom: 5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 0.6rem 0.9rem;
+  font-size: 1.05rem;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}
+
+.container-box .grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1100px;
+  margin-top: 3rem;
+}
+
+.card {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100px;
+  color: inherit;
+  text-decoration: none;
+  transition: 0.15s ease;
+  width: 45%;
+}
+
+.card:hover,
+.card:focus {
+  transform: scale(1.05);
+}
+
+.card h2 {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.card p {
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-top: 1rem;
+}
+
+.arrow-right {
+  width: 1.3rem;
+  margin-left: 0.5rem;
+  margin-top: 3px;
+}

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

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