feat: support data loader

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,22 @@
+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({
+      bundler: 'experimental-rspack',
+    }),
+    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,49 @@
+{
+  "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",
+    "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": "^2.59.0",
+    "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.59.0",
+    "@modern-js/eslint-config": "^2.59.0",
+    "@modern-js/tsconfig": "^2.59.0",
+    "@modern-js-app/eslint-config": "^2.59.0",
+    "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"]
+}

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

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

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,35 @@
+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: ['entry-one_nested-routes/pathname/layout'],
+    port: 3062,
+  },
+  source: {
+    alias: {
+      // FIXME: becasue modernjs set alias value as package, so the value will use @module-federation/modern-js's @modern-js/runtime , and it will cause multiple instance
+      '@meta/runtime': require.resolve('@modern-js/runtime'),
+    },
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+    moduleFederationPlugin({
+      dataLoader: true,
+    }),
+  ],
+});

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

@@ -0,0 +1,13 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'host',
+  filename: 'remoteEntry.js',
+  remotes: {
+    sub: 'sub@http://localhost:3061/mf-manifest.json',
+    'host-provider': 'host_provider@http://localhost:3063/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});