chore: add README

Author: 2heal1

apps/shared-treeshake/README.md

@@ -1,19 +1,84 @@
 # shared-treeshake
 
-## Running Demo
+## How to start the demos ?
 
-- host: [localhost:5001](http://localhost:5001/)
-- provider: [localhost:5002](http://localhost:5002/)
+### Basic 
 
-## How to start the demos ?
+1. Build host and provider
 
 ```bash
 # Root directory
 pnpm i
 
+pnpm i -g serve
+
 nx build modern-js-plugin
 
-pnpm run app:shared-treeshake:dev
+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 show the error: 
+
+Minified React error #130
+
+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 only export 4 components : 
+
+```
+Button
+Divider
+Space
+Switch
+```
+
+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
 
-open http://localhost:5001/
+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/modern.config.ts

@@ -1,10 +1,13 @@
 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({
@@ -21,17 +24,24 @@ if (isReShake) {
   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: 'http://localhost:3001/',
+    assetPrefix: publicPath,
   },
   output: {
-    assetPrefix: 'http://localhost:3001/',
+    assetPrefix: publicPath,
     polyfill: 'off',
     disableTsChecker: true,
   },
@@ -42,6 +52,7 @@ export default defineConfig({
     appTools({
       bundler: 'webpack', // Set to 'webpack' to enable webpack
     }),
+    serverPlugin(),
   ],
   performance: {
     chunkSplit: {

apps/shared-treeshake/host/package.json

@@ -39,13 +39,18 @@
     "@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"
+    "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

@@ -23,6 +23,23 @@
         ]
       }
     },
+    "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": {
@@ -34,8 +51,8 @@
         ],
         "commands": [
           {
-            "command": "cd apps/shared-treeshake/host; pnpm run dev",
-            "forwardAllArgs": false
+            "command": "cd apps/shared-treeshake/host; pnpm run serve",
+            "forwardAllArgs": true
           }
         ]
       }

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

@@ -0,0 +1,44 @@
+import { defineServerConfig } from '@modern-js/server-runtime';
+import path from 'path';
+import fs from 'fs';
+import { readFile } from 'fs/promises';
+
+import type { MiddlewareHandler } from '@modern-js/server-runtime';
+
+const handler: MiddlewareHandler = async (c, next) => {
+  try {
+    console.log('req.url', c.req.url);
+    if (c.req.url?.includes('independent-packages')) {
+      const filepath = path.join(
+        process.cwd(),
+        c.req.url.replace('http://localhost:3001/', 'dist/'),
+      );
+      console.log('filepath: ', filepath);
+
+      fs.statSync(filepath);
+      c.res.headers.set('Access-Control-Allow-Origin', '*');
+      c.res.headers.set(
+        'Access-Control-Allow-Methods',
+        'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      );
+      c.res.headers.set('Access-Control-Allow-Headers', '*');
+      const content = await readFile(filepath, 'utf-8');
+      return c.text(content); // 返回文件内容
+    } else {
+      await next();
+    }
+  } catch (err) {
+    await next();
+  }
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'proxy-fallback-shared',
+      handler,
+    },
+  ],
+  renderMiddlewares: [],
+  plugins: [],
+});

apps/shared-treeshake/host/tsconfig.json

@@ -10,6 +10,6 @@
       "*": ["./@mf-types/*"]
     }
   },
-  "include": ["src", "shared", "config", "modern.config.ts"],
+  "include": ["src", "shared", "config", "modern.config.ts", "server"],
   "exclude": ["**/node_modules"]
 }

apps/shared-treeshake/provider/project.json

@@ -34,8 +34,8 @@
         ],
         "commands": [
           {
-            "command": "cd apps/shared-treeshake/provider; pnpm run dev",
-            "forwardAllArgs": false
+            "command": "cd apps/shared-treeshake/provider; pnpm run serve",
+            "forwardAllArgs": true
           }
         ]
       }