feat: update manifest/snapshot (#2481)

apps/modernjs-ssr/README.md

@@ -0,0 +1,11 @@
+# modernjs-ssr
+
+# Running Demo
+
+- host: [localhost:3005](http://localhost:3005/)
+- remote: [localhost:3006](http://localhost:3006/)
+- nested-remote: [localhost:3007](http://localhost:3007/)
+- dynamic-remote: [localhost:3008](http://localhost:3008/)
+- dynamic-nested-remote: [localhost:3009](http://localhost:3009/)
+- remote-new-version: [localhost:3010](http://localhost:3010/)
+- dynamic-remote-new-version: [localhost:3011](http://localhost:3011/)

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/Image.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/Image';
+export { default } from './compiled-types/Image';

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/compiled-types/Image.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

apps/modernjs-ssr/dynamic-nested-remote/modern.config.ts

@@ -0,0 +1,67 @@
+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: 3009,
+    hmr: false,
+    liveReload: false,
+  },
+  runtime: {
+    router: true,
+  },
+  output: {
+    disableTsChecker: true,
+    cssModuleLocalIdentName: 'dynamic-nested-remote-[local]-[hash:base64:6]',
+  },
+  server: {
+    ssr: {
+      mode: 'stream',
+      // mode: 'string',
+    },
+    port: 3009,
+  },
+  // source: {
+  //   enableAsyncEntry: true,
+  // },
+  plugins: [appTools(), moduleFederationPlugin()],
+  tools: {
+    webpack: (config, { isServer, appendPlugins }) => {
+      // if (config?.output) {
+      //   config.output.publicPath = 'http://localhost:3009/';
+      // }
+      // if (!isServer) {
+      //   // otherwise the federation entry will be loaded as async chunk
+      //   config.optimization!.splitChunks.chunks = 'async';
+      // }
+      // const mfConfig = {
+      //   name: 'dynamic_nested_remote',
+      //   filename: 'remoteEntry.js',
+      //   exposes: {
+      //     './Content': './src/components/Content.tsx',
+      //   },
+      //   // remotes: {
+      //   //   dynamic_remote:
+      //   //     'dynamic_remote@http://localhost:3008/mf-manifest.json',
+      //   // },
+      //   shared: {
+      //     react: { singleton: true },
+      //     'react-dom': { singleton: true },
+      //   },
+      // };
+      // if (isServer) {
+      //   mfConfig.filename = 'bundles/remoteEntry.js';
+      //   appendPlugins([new StreamingTargetPlugin(mfConfig)]);
+      // }
+      // appendPlugins([
+      //   new AsyncBoundaryPlugin({
+      //     excludeChunk: (chunk) => chunk.name === 'dynamic_nested_remote',
+      //     eager: (module) =>
+      //       module && /\.federation/.test(module?.request || ''),
+      //   }),
+      //   new ModuleFederationPlugin(mfConfig),
+      // ]);
+    },
+  },
+});

apps/modernjs-ssr/dynamic-nested-remote/module-federation.config.ts

@@ -0,0 +1,18 @@
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+export default createModuleFederationConfig({
+  name: 'dynamic_nested_remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Content': './src/components/Content.tsx',
+  },
+  // remotes: {
+  //   dynamic_remote:
+  //     'dynamic_remote@http://localhost:3008/mf-manifest.json',
+  // },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+  dts: false,
+  dev: false,
+});

apps/modernjs-ssr/dynamic-nested-remote/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "modernjs-ssr-dynamic-nested-remote",
+  "private": true,
+  "version": "0.1.11",
+  "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.49.1",
+    "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.49.1",
+    "@modern-js/eslint-config": "2.49.1",
+    "@modern-js/tsconfig": "2.49.1",
+    "@modern-js-app/eslint-config": "2.49.1",
+    "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/dynamic-nested-remote/project.json

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

apps/modernjs-ssr/dynamic-nested-remote/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/dynamic-nested-remote/src/components/Button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+
+export default (): JSX.Element => (
+  <div className="testlll">
+    <Button onClick={() => alert('Client side Javascript works!')}>
+      xxxxxxx
+    </Button>
+  </div>
+);

apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import { loadRemote, registerRemotes } from '@modern-js/runtime/mf';
+import stuff from './stuff.module.css';
+
+const isServer = typeof window === 'undefined';
+registerRemotes([
+  {
+    name: 'dynamic_remote',
+    entry: 'http://localhost:3008/mf-manifest.json',
+  },
+]);
+
+const Comp = React.lazy(() =>
+  loadRemote('dynamic_remote/Image').then((m) => {
+    return {
+      default: () => (
+        <div>
+          <link
+            href="http://localhost:3008/static/css/async/__federation_expose_Image.css"
+            rel="stylesheet"
+            type="text/css"
+          />
+          <span>11</span>
+          <m.default />
+        </div>
+      ),
+    };
+  }),
+);
+
+const LazyButton = React.lazy(() =>
+  import('./Button').then((m) => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve(m), 0);
+    });
+  }),
+);
+
+const LazyButton2 = React.lazy(() =>
+  import('./Button').then((m) => {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve(m), 0);
+    });
+  }),
+);
+
+export default (): JSX.Element => (
+  <div className="testlll">
+    <h2 onClick={() => alert('Client side Javascript works!')}>
+      <strong>dynamic nested remote</strong>
+    </h2>
+    <Button
+      className={stuff['test-remote2']}
+      onClick={() => alert('Client side Javascript works!')}
+    >
+      Click me to test <strong>dynamic nested remote</strong> interactive!
+    </Button>
+
+    <React.Suspense fallback="loading">
+      <Comp />
+    </React.Suspense>
+    <React.Suspense fallback="loading btn">
+      <LazyButton />
+    </React.Suspense>
+    <React.Suspense fallback="loading btn2">
+      <LazyButton2 />
+    </React.Suspense>
+  </div>
+);

apps/modernjs-ssr/dynamic-nested-remote/src/components/stuff.module.css

@@ -0,0 +1,3 @@
+.test-remote2 {
+  background: rgb(0, 170, 255);
+}

apps/modernjs-ssr/dynamic-nested-remote/src/components/stuff.module.css.d.ts

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

apps/modernjs-ssr/dynamic-nested-remote/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' />