chore: treeshake shared poc

apps/shared-treeshake/README.md

@@ -0,0 +1,76 @@
+# shared-treeshake
+
+## How to start the demos ?
+
+### Basic 
+
+1. Build host and provider
+
+```bash
+# Root directory
+pnpm i
+
+pnpm i -g serve
+
+nx build modern-js-plugin
+
+nx build shared-treeshake-host
+
+nx build shared-treeshake-provider
+
+```
+2. Serve host and provider
+
+```bash
+nx serve shared-treeshake-host
+
+serve apps/shared-treeshake/provider/dist -C -p 3002 
+```
+
+3. Visit page
+
+open http://localhost:3001 , it will render success. 
+
+You can check the current loaded shared by executing `__FEDERATION__.__SHARE__["mf_host:0.1.34"].default.antd["4.24.15"].lib()` in browser console.
+
+It will show all antd components (fallback resources).
+
+
+<!-- 4. Set localStorage to mock snapshot
+
+```bash
+localStorage.setItem('calc','no-use')
+```
+
+It will use the fallback resources. 
+
+5. Refresh the page (Use fallback)
+
+Execute `__FEDERATION__.__SHARE__["mf_host:0.1.34"].default.antd["4.24.15"].lib()` in browser console.
+
+It will show export all components .  -->
+
+### Advanced
+
+This is combined with deploy server , which can calculate the snapshot of shared resources.
+
+In this demo , you can set `localStorage.setItem('calc','use')` to mock snapshot.
+
+First, need to re-shake the asset:
+
+```bash
+nx build:re-shake shared-treeshake-host
+```
+
+Second, serve it(`serve apps/shared-treeshake/host/dist-test -C -p 3003` ) and update the `reShakeShareEntry` with real url in `runtimePlugin.ts`
+
+```diff
+- reShakeShareEntry:
+-   'http://localhost:3003/independent-packages/antd/antd_mf_host.3fc92539.js',
++ reShakeShareEntry:
++   'http://localhost:3003/independent-packages/antd/antd_mf_host.3fc92539.js',
+```
+
+Finally, set `localStorage.setItem('calc','use')` and refresh the page.
+
+You will see the shared will use the re-shake shared with 5 modules export only.

apps/shared-treeshake/host/.npmrc

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

apps/shared-treeshake/host/CHANGELOG.md

@@ -0,0 +1 @@
+# modernjs-ssr-nested-remote

apps/shared-treeshake/host/modern.config.ts

@@ -0,0 +1,90 @@
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { serverPlugin } from '@modern-js/plugin-server';
+import {
+  // DependencyReferencExportPlugin,
+  IndependentSharePlugin,
+  ModuleFederationPlugin,
+} from '@module-federation/enhanced';
+import mfConfig from './module-federation.config';
+import path from 'path';
+
+const isReShake = process.env.RE_SHAKE;
+if (isReShake) {
+  process.env.MF_CUSTOM_REFERENCED_EXPORTS = JSON.stringify({
+    antd: ['Divider', 'Space', 'Switch', 'Button', 'Badge'],
+  });
+}
+
+const webpackConfig = {
+  cache: false,
+};
+
+if (isReShake) {
+  // @ts-ignore
+  webpackConfig.entry = {
+    main: 'data:application/node;base64,',
+  };
+  // @ts-ignore
+  webpackConfig.output = {
+    path: path.resolve(__dirname, 'dist-test'),
+  };
+}
+
+const publicPath = 'http://localhost:3001/';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  dev: {
+    assetPrefix: publicPath,
+  },
+  output: {
+    assetPrefix: publicPath,
+    polyfill: 'off',
+    disableTsChecker: true,
+  },
+  server: {
+    port: 3001,
+  },
+  plugins: [
+    appTools({
+      bundler: 'webpack', // Set to 'webpack' to enable webpack
+    }),
+    serverPlugin(),
+  ],
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-module',
+    },
+  },
+  source: {
+    enableAsyncEntry: true,
+    transformImport: false,
+  },
+  tools: {
+    webpack: webpackConfig,
+    bundlerChain(chain) {
+      chain.optimization.moduleIds('named');
+      chain.optimization.chunkIds('named');
+      chain.optimization.mangleExports(false);
+      // enable in dev
+      chain.optimization.usedExports(true);
+      // chain.optimization.minimize(false)
+      chain.optimization.runtimeChunk(false);
+      if (isReShake) {
+        chain.plugin('IndependentSharePlugin').use(IndependentSharePlugin, [
+          {
+            // @ts-ignore
+            mfConfig,
+            outputDir: 'independent-packages',
+            treeshake: true,
+          },
+        ]);
+      } else {
+        chain.plugin('MF').use(ModuleFederationPlugin, [mfConfig]);
+      }
+    },
+  },
+});

apps/shared-treeshake/host/module-federation.config.ts

@@ -0,0 +1,16 @@
+import { createModuleFederationConfig } from '@module-federation/enhanced';
+
+export default createModuleFederationConfig({
+  name: 'mf_host',
+  remotes: {
+    mf_remote: 'mf_remote@http://localhost:3002/mf-manifest.json',
+  },
+  shared: {
+    antd: { singleton: true, treeshake: true },
+    react: {},
+    'react-dom': {},
+  },
+  // shareStrategy: 'loaded-first',
+  dts: false,
+  runtimePlugins: [require.resolve('./runtimePlugin.ts')],
+});

apps/shared-treeshake/host/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "shared-treeshake-host",
+  "private": true,
+  "version": "0.1.34",
+  "scripts": {
+    "reset": "npx rimraf ./**/node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "build:re-shake": "RE_SHAKE=true modern build",
+    "start": "modern start",
+    "serve": "modern serve",
+    "new": "modern new",
+    "lint": "modern lint",
+    "upgrade": "modern upgrade",
+    "inspect": "modern inspect"
+  },
+  "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": {
+    "@babel/runtime": "7.28.2",
+    "@modern-js/runtime": "2.68.0",
+    "@module-federation/enhanced": "workspace:*",
+    "antd": "4.24.15",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1"
+  },
+  "devDependencies": {
+    "@modern-js-app/eslint-config": "2.59.0",
+    "@modern-js/app-tools": "2.68.0",
+    "@modern-js/eslint-config": "2.59.0",
+    "@modern-js/tsconfig": "2.68.0",
+    "@modern-js/server-runtime": "2.68.0",
+    "@modern-js/plugin-server": "2.68.0",
+    "@types/jest": "~29.5.0",
+    "@types/node": "~16.11.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.3.0",
+    "lint-staged": "~13.1.0",
+    "prettier": "~3.3.3",
+    "rimraf": "~3.0.2",
+    "typescript": "~5.0.4",
+    "fs-extra": "^11.1.1",
+    "ts-node": "~10.8.1",
+    "tsconfig-paths": "~3.14.1"
+  }
+}

apps/shared-treeshake/host/project.json

@@ -0,0 +1,61 @@
+{
+  "name": "shared-treeshake-host",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/shared-treeshake/host/src",
+  "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["typescript"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/shared-treeshake/host; pnpm run build",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "build:re-shake": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/shared-treeshake/host; pnpm run build:re-shake",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "dependencies": true
+          }
+        ],
+        "commands": [
+          {
+            "command": "cd apps/shared-treeshake/host; pnpm run serve",
+            "forwardAllArgs": true
+          }
+        ]
+      }
+    }
+  }
+}