feat: add modernjs ssr demo (#4174)

* feat: add modernjs ssr demo

* chore: upgrade modernjs dep

* chore: use rspack ssr

* chore: use rspack host

* chore: remove useless code

modernjs-ssr/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com

modernjs-ssr/README.md

@@ -0,0 +1,13 @@
+# Module Federation example for Modern.js Framework
+
+- HOST: [localhost:3007](http://localhost:3007/)
+- REMOTE: [localhost:3006](http://localhost:3006/)
+
+# Running Demo
+
+Run `yarn` to install the dependencies.
+
+Run `pnpm run start`. This will build and serve both `host` and `provider` on ports 3007 and 3006 respectively.
+
+- [localhost:3007](http://localhost:3007/) (HOST)
+- [localhost:3006](http://localhost:3006/) (STANDALONE REMOTE)

modernjs-ssr/dynamic-provider/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+};

modernjs-ssr/dynamic-provider/.npmrc

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

modernjs-ssr/dynamic-provider/.nvmrc

@@ -0,0 +1 @@
+lts/gallium

modernjs-ssr/dynamic-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).

modernjs-ssr/dynamic-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: 3008,
+  },
+  plugins: [
+    appTools({bundler:'experimental-rspack'}),
+    moduleFederationPlugin()
+  ],
+});

modernjs-ssr/dynamic-provider/module-federation.config.ts

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

modernjs-ssr/dynamic-provider/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "modernjs-ssr-dynamic-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"
+  }
+}

modernjs-ssr/dynamic-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'],
+  },
+};

modernjs-ssr/dynamic-provider/src/components/Button.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Button = () => {
+  return (
+    <>
+      <button>button from remote</button>
+    </>
+  );
+};

modernjs-ssr/dynamic-provider/src/components/Image.module.css

@@ -0,0 +1,3 @@
+.button {
+  background: red;
+}

modernjs-ssr/dynamic-provider/src/components/Image.tsx

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

modernjs-ssr/dynamic-provider/src/modern-app-env.d.ts

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

modernjs-ssr/dynamic-provider/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;
+}

modernjs-ssr/dynamic-provider/src/routes/layout.tsx

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