= T extends 'remote/Image' ? typeof import('remote/Image') :any;
\ No newline at end of file
diff --git a/modernjs-ssr/host/@mf-types/remote/compiled-types/src/components/Image.d.ts b/modernjs-ssr/host/@mf-types/remote/compiled-types/src/components/Image.d.ts
new file mode 100644
index 0000000000..1393c75d0a
--- /dev/null
+++ b/modernjs-ssr/host/@mf-types/remote/compiled-types/src/components/Image.d.ts
@@ -0,0 +1,3 @@
+///
+declare const _default: () => JSX.Element;
+export default _default;
diff --git a/modernjs-ssr/host/README.md b/modernjs-ssr/host/README.md
new file mode 100644
index 0000000000..49d9aa523e
--- /dev/null
+++ b/modernjs-ssr/host/README.md
@@ -0,0 +1,37 @@
+# Your App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+yarn install
+```
+
+## Get Started
+
+Start the dev server:
+
+```
+yarn dev
+```
+
+Enable optional features or add a new entry:
+
+```
+yarn new
+```
+
+Build the app for production:
+
+```
+yarn build
+```
+
+Preview the production build locally:
+
+```
+yarn serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).
diff --git a/modernjs-ssr/host/modern.config.ts b/modernjs-ssr/host/modern.config.ts
new file mode 100644
index 0000000000..4c6a9911a0
--- /dev/null
+++ b/modernjs-ssr/host/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({
+ dev: {
+ // 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',
+ },
+ port: 3007,
+ },
+ plugins: [
+ appTools({ bundler: 'experimental-rspack' }),
+ moduleFederationPlugin()
+ ],
+});
diff --git a/modernjs-ssr/host/module-federation.config.ts b/modernjs-ssr/host/module-federation.config.ts
new file mode 100644
index 0000000000..02109ef0a5
--- /dev/null
+++ b/modernjs-ssr/host/module-federation.config.ts
@@ -0,0 +1,12 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+ name: 'consumer',
+ remotes: {
+ remote: 'provider@http://localhost:3006/mf-manifest.json',
+ },
+ shared: {
+ react: { singleton: true },
+ 'react-dom': { singleton: true },
+ },
+});
diff --git a/modernjs-ssr/host/package.json b/modernjs-ssr/host/package.json
new file mode 100644
index 0000000000..4da014999e
--- /dev/null
+++ b/modernjs-ssr/host/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "modernjs-ssr-host",
+ "version": "0.1.0",
+ "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": {
+ "*.{ts,tsx}": [
+ "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+ ],
+ "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [
+ "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.56.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "@module-federation/modern-js":"0.0.0-next-20240725061440"
+ },
+ "devDependencies": {
+ "@modern-js/app-tools": "2.56.2",
+ "@modern-js/eslint-config": "2.56.2",
+ "@modern-js/tsconfig": "2.56.2",
+ "@modern-js-app/eslint-config": "2.56.2",
+ "lint-staged": "15.2.7",
+ "prettier": "3.3.2",
+ "husky": "9.0.11",
+ "rimraf": "5.0.7",
+ "typescript": "4.9.5",
+ "@types/jest": "29.5.12",
+ "@types/node": "16.18.101",
+ "@types/react": "18.3.3",
+ "@types/react-dom": "18.3.0"
+ }
+}
\ No newline at end of file
diff --git a/modernjs-ssr/host/rspackplugin.js b/modernjs-ssr/host/rspackplugin.js
new file mode 100644
index 0000000000..35b6b48649
--- /dev/null
+++ b/modernjs-ssr/host/rspackplugin.js
@@ -0,0 +1,130 @@
+class ModifyServerLoaderPlugin {
+ apply(compiler){
+ compiler.hooks.thisCompilation.tap(
+ 'ModifyServerLoaderPlugin',
+ (compilation) => {
+ this._handleRenderStartup(compiler, compilation);
+ },
+ );
+ }
+
+ _handleRenderStartup(compiler, compilation) {
+ compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(
+ compilation,
+ ).renderStartup.tap(
+ 'ModifyServerLoaderPlugin',
+ (
+ source,
+ _renderContext,
+ upperContext,
+ ) => {
+ return new compiler.webpack.sources.ConcatSource(`
+ console.log(11);
+ ${source.source().toString()}
+ `);
+
+ // const isSingleRuntime = compiler.options?.optimization?.runtimeChunk;
+ // if (upperContext?.chunk.id && isSingleRuntime) {
+ // if (upperContext?.chunk.hasRuntime()) {
+ // return source;
+ // }
+ // }
+
+ // if (
+ // this._options.excludeChunk &&
+ // this._options.excludeChunk(upperContext.chunk)
+ // ) {
+ // return source;
+ // }
+
+ // const runtime = this._getChunkRuntime(upperContext);
+
+ // let remotes = '';
+ // let shared = '';
+
+ // for (const runtimeItem of runtime) {
+ // if (!runtimeItem) {
+ // continue;
+ // }
+
+ // const requirements =
+ // compilation.chunkGraph.getTreeRuntimeRequirements(runtimeItem);
+
+ // const entryOptions = upperContext.chunk.getEntryOptions();
+ // const chunkInitialsSet = new Set(
+ // compilation.chunkGraph.getChunkEntryDependentChunksIterable(
+ // upperContext.chunk,
+ // ),
+ // );
+
+ // chunkInitialsSet.add(upperContext.chunk);
+ // const dependOn = entryOptions?.dependOn || [];
+ // this.getChunkByName(compilation, dependOn, chunkInitialsSet);
+
+ // const initialChunks = [];
+
+ // let hasRemoteModules = false;
+ // let consumeShares = false;
+
+ // for (const chunk of chunkInitialsSet) {
+ // initialChunks.push(chunk.id);
+ // if (!hasRemoteModules) {
+ // hasRemoteModules = Boolean(
+ // compilation.chunkGraph.getChunkModulesIterableBySourceType(
+ // chunk,
+ // 'remote',
+ // ),
+ // );
+ // }
+ // if (!consumeShares) {
+ // consumeShares = Boolean(
+ // compilation.chunkGraph.getChunkModulesIterableBySourceType(
+ // chunk,
+ // 'consume-shared',
+ // ),
+ // );
+ // }
+ // if (hasRemoteModules && consumeShares) {
+ // break;
+ // }
+ // }
+
+ // remotes = this._getRemotes(
+ // compiler.webpack.RuntimeGlobals,
+ // requirements,
+ // hasRemoteModules,
+ // initialChunks,
+ // remotes,
+ // );
+
+ // shared = this._getShared(
+ // compiler.webpack.RuntimeGlobals,
+ // requirements,
+ // consumeShares,
+ // initialChunks,
+ // shared,
+ // );
+ // }
+
+ // if (!remotes && !shared) {
+ // return source;
+ // }
+
+ // const initialEntryModules = this._getInitialEntryModules(
+ // compilation,
+ // upperContext,
+ // );
+ // const templateString = this._getTemplateString(
+ // compiler,
+ // initialEntryModules,
+ // shared,
+ // remotes,
+ // source,
+ // );
+
+ return new compiler.webpack.sources.ConcatSource(templateString);
+ },
+ );
+ }
+}
+module.exports = ModifyServerLoaderPlugin
\ No newline at end of file
diff --git a/modernjs-ssr/host/src/.eslintrc.js b/modernjs-ssr/host/src/.eslintrc.js
new file mode 100644
index 0000000000..fafc003230
--- /dev/null
+++ b/modernjs-ssr/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'],
+ },
+};
diff --git a/modernjs-ssr/host/src/components/dynamic-remote.tsx b/modernjs-ssr/host/src/components/dynamic-remote.tsx
new file mode 100644
index 0000000000..5e3b4fe49f
--- /dev/null
+++ b/modernjs-ssr/host/src/components/dynamic-remote.tsx
@@ -0,0 +1,19 @@
+import { createRemoteSSRComponent, loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+
+registerRemotes([
+ {
+ name: 'dynamic_provider',
+ entry: 'http://localhost:3008/mf-manifest.json',
+ }
+])
+
+export const DynamicRemoteSSRComponents = createRemoteSSRComponent({
+ loader: () => loadRemote('dynamic_provider/Image'),
+ loading: 'loading...',
+ fallback: ({ error }) => {
+ if (error instanceof Error && error.message.includes('not exist')) {
+ return fallback - not existed id
;
+ }
+ return fallback
;
+ },
+});
diff --git a/modernjs-ssr/host/src/modern-app-env.d.ts b/modernjs-ssr/host/src/modern-app-env.d.ts
new file mode 100644
index 0000000000..b1b80f336e
--- /dev/null
+++ b/modernjs-ssr/host/src/modern-app-env.d.ts
@@ -0,0 +1,4 @@
+///
+///
+///
+///
\ No newline at end of file
diff --git a/modernjs-ssr/host/src/routes/index.css b/modernjs-ssr/host/src/routes/index.css
new file mode 100644
index 0000000000..2a542bc953
--- /dev/null
+++ b/modernjs-ssr/host/src/routes/index.css
@@ -0,0 +1,115 @@
+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;
+}
diff --git a/modernjs-ssr/host/src/routes/layout.tsx b/modernjs-ssr/host/src/routes/layout.tsx
new file mode 100644
index 0000000000..6433ea79e9
--- /dev/null
+++ b/modernjs-ssr/host/src/routes/layout.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function Layout() {
+ return (
+
+
+
+ );
+}
diff --git a/modernjs-ssr/host/src/routes/page.tsx b/modernjs-ssr/host/src/routes/page.tsx
new file mode 100644
index 0000000000..598c677551
--- /dev/null
+++ b/modernjs-ssr/host/src/routes/page.tsx
@@ -0,0 +1,28 @@
+import { createRemoteSSRComponent, loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+import {DynamicRemoteSSRComponents} from '../components/dynamic-remote'
+import './index.css';
+
+const RemoteSSRComponent = createRemoteSSRComponent({
+ loader: () => import('remote/Image'),
+ loading: 'loading...',
+ export: 'default',
+ fallback: ({ error }) => {
+ if (error instanceof Error && error.message.includes('not exist')) {
+ return fallback - not existed id
;
+ }
+ return fallback
;
+ },
+});
+
+
+
+const Index = () => {
+ return (
+
+
+
+
+ );
+}
+
+export default Index;
diff --git a/modernjs-ssr/host/tsconfig.json b/modernjs-ssr/host/tsconfig.json
new file mode 100644
index 0000000000..a58ca02b41
--- /dev/null
+++ b/modernjs-ssr/host/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "@modern-js/tsconfig/base",
+ "compilerOptions": {
+ "declaration": false,
+ "jsx": "preserve",
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["./src/*"],
+ "@shared/*": ["./shared/*"],
+ "*": ["./@mf-types/*"]
+ }
+ },
+ "include": ["src", "shared", "config", "modern.config.ts"]
+}
diff --git a/modernjs-ssr/package.json b/modernjs-ssr/package.json
new file mode 100644
index 0000000000..3b9d6f1f81
--- /dev/null
+++ b/modernjs-ssr/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "modernjs-ssr",
+ "description": "Module Federation Example for ByteDance's Modern.js Framework.",
+ "private": true,
+ "version": "1.0.0",
+ "scripts": {
+ "start": "concurrently \"cd ./host && pnpm dev\" \"cd ./provider && pnpm dev\" \"cd ./dynamic-provider && pnpm dev\"",
+ "build": "concurrently \"cd ./host && pnpm build\" \"cd ./provider && pnpm build\" \"cd ./dynamic-provider && pnpm build\"",
+ "serve": "concurrently \"cd ./host && pnpm serve\" \"cd ./provider && pnpm serve\" \"cd ./dynamic-provider && pnpm serve\"",
+ "clean": "concurrently \"cd ./host && pnpm clean\" \"cd ./provider && pnpm clean\" \"cd ./dynamic-provider && pnpm clean\"",
+ "e2e:ci": "pnpm run build && echo \"No e2e tests yet\""
+ },
+ "devDependencies": {
+ "concurrently": "8.2.2"
+ }
+}
diff --git a/modernjs-ssr/provider/.eslintrc.js b/modernjs-ssr/provider/.eslintrc.js
new file mode 100644
index 0000000000..a84ee271a1
--- /dev/null
+++ b/modernjs-ssr/provider/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: ['@modern-js'],
+};
diff --git a/modernjs-ssr/provider/.npmrc b/modernjs-ssr/provider/.npmrc
new file mode 100644
index 0000000000..fa4e095233
--- /dev/null
+++ b/modernjs-ssr/provider/.npmrc
@@ -0,0 +1 @@
+strict-peer-dependencies=false
\ No newline at end of file
diff --git a/modernjs-ssr/provider/.nvmrc b/modernjs-ssr/provider/.nvmrc
new file mode 100644
index 0000000000..53d838af21
--- /dev/null
+++ b/modernjs-ssr/provider/.nvmrc
@@ -0,0 +1 @@
+lts/gallium
diff --git a/modernjs-ssr/provider/README.md b/modernjs-ssr/provider/README.md
new file mode 100644
index 0000000000..49d9aa523e
--- /dev/null
+++ b/modernjs-ssr/provider/README.md
@@ -0,0 +1,37 @@
+# Your App
+
+## Setup
+
+Install the dependencies:
+
+```bash
+yarn install
+```
+
+## Get Started
+
+Start the dev server:
+
+```
+yarn dev
+```
+
+Enable optional features or add a new entry:
+
+```
+yarn new
+```
+
+Build the app for production:
+
+```
+yarn build
+```
+
+Preview the production build locally:
+
+```
+yarn serve
+```
+
+For more information, see the [Modern.js documentation](https://modernjs.dev/en).
diff --git a/modernjs-ssr/provider/modern.config.ts b/modernjs-ssr/provider/modern.config.ts
new file mode 100644
index 0000000000..2d42b6dace
--- /dev/null
+++ b/modernjs-ssr/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({
+ dev:{
+ // 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',
+ },
+ port: 3006,
+ },
+ plugins: [
+ appTools({bundler:'experimental-rspack'}),
+ moduleFederationPlugin()
+ ],
+});
diff --git a/modernjs-ssr/provider/module-federation.config.ts b/modernjs-ssr/provider/module-federation.config.ts
new file mode 100644
index 0000000000..bf1d4e4c83
--- /dev/null
+++ b/modernjs-ssr/provider/module-federation.config.ts
@@ -0,0 +1,13 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+ name: 'provider',
+ filename: 'remoteEntry.js',
+ exposes: {
+ './Image': './src/components/Image.tsx',
+ },
+ shared: {
+ react: { singleton: true },
+ 'react-dom': { singleton: true },
+ },
+});
diff --git a/modernjs-ssr/provider/package.json b/modernjs-ssr/provider/package.json
new file mode 100644
index 0000000000..a11bc9b764
--- /dev/null
+++ b/modernjs-ssr/provider/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "modernjs-ssr-provider",
+ "version": "0.1.0",
+ "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": {
+ "*.{ts,tsx}": [
+ "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
+ ],
+ "*.{js,jsx,mjs,mjsx,cjs,cjsx}": [
+ "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.56.2",
+ "react": "~18.3.0",
+ "react-dom": "~18.3.0",
+ "@module-federation/modern-js":"0.0.0-next-20240725061440"
+ },
+ "devDependencies": {
+ "@modern-js/app-tools": "2.56.2",
+ "@modern-js/eslint-config": "2.56.2",
+ "@modern-js/tsconfig": "2.56.2",
+ "@modern-js-app/eslint-config": "2.56.2",
+ "lint-staged": "15.2.7",
+ "prettier": "3.3.2",
+ "husky": "9.0.11",
+ "rimraf": "5.0.7",
+ "typescript": "4.9.5",
+ "@types/jest": "29.5.12",
+ "@types/node": "16.18.101",
+ "@types/react": "18.3.3",
+ "@types/react-dom": "18.3.0"
+ }
+}
\ No newline at end of file
diff --git a/modernjs-ssr/provider/src/.eslintrc.js b/modernjs-ssr/provider/src/.eslintrc.js
new file mode 100644
index 0000000000..fafc003230
--- /dev/null
+++ b/modernjs-ssr/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'],
+ },
+};
diff --git a/modernjs-ssr/provider/src/components/Button.tsx b/modernjs-ssr/provider/src/components/Button.tsx
new file mode 100644
index 0000000000..d7004ff998
--- /dev/null
+++ b/modernjs-ssr/provider/src/components/Button.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Button = () => {
+ return (
+ <>
+
+
+ );
+};
diff --git a/modernjs-ssr/provider/src/components/Image.module.css b/modernjs-ssr/provider/src/components/Image.module.css
new file mode 100644
index 0000000000..edb0a3cc0a
--- /dev/null
+++ b/modernjs-ssr/provider/src/components/Image.module.css
@@ -0,0 +1,3 @@
+.button {
+ background: red;
+}
diff --git a/modernjs-ssr/provider/src/components/Image.tsx b/modernjs-ssr/provider/src/components/Image.tsx
new file mode 100644
index 0000000000..68de72defb
--- /dev/null
+++ b/modernjs-ssr/provider/src/components/Image.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './Image.module.css';
+
+export default (): JSX.Element => (
+
+
+ remote image
+
+
+
+
+
+
+
+ );
+}
diff --git a/modernjs-ssr/provider/src/routes/page.tsx b/modernjs-ssr/provider/src/routes/page.tsx
new file mode 100644
index 0000000000..33e101ea2c
--- /dev/null
+++ b/modernjs-ssr/provider/src/routes/page.tsx
@@ -0,0 +1,92 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+
+const Index = () => (
+
+
+
+
+
+
+ Welcome to
+
+
Modern.js
+
+ Get started by editing src/routes/page.tsx
+
+
+
+
+