Add support for using the vite dev server on remotes

package.json

@@ -4,6 +4,20 @@
   "workspaces": [
     "packages/**"
   ],
+  "files": [
+    "packages/lib/dist/*",
+    "packages/types/*"
+  ],
+  "main": "./packages/lib/dist/index.js",
+  "module": "./packages/lib/dist/index.mjs",
+  "types": "./packages/lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./packages/lib/types/index.d.ts",
+      "import": "./packages/lib/dist/index.mjs",
+      "require": "./packages/lib/dist/index.js"
+    }
+  },
   "engines": {
     "node": "^14.18.0 || >=16.0.0",
     "pnpm": ">=8.0.1"
@@ -12,7 +26,7 @@
   "license": "MulanPSL-2.0",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "prepare": "husky install",
+    "prepare": "pnpm run build",
     "postinstall": "npx playwright install",
     "lint-staged": "lint-staged",
     "format": "prettier -w packages/lib/**/*.ts",
@@ -52,5 +66,6 @@
       "eslint --cache --fix",
       "eslint"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }

packages/examples/react-vite/package.json

@@ -8,6 +8,7 @@
       "build:remotes": "pnpm --parallel --filter \"./remote\" build",
       "serve:remotes": "pnpm --parallel --filter \"./remote\" serve",
       "dev:hosts": "pnpm --filter \"./host\" dev",
+      "dev:remotes": "pnpm --filter \"./remote\" dev",
       "stop": "kill-port --port 5000,5001"
     },
     "devDependencies": {

packages/examples/vue3-advanced-demo/package.json

@@ -15,6 +15,7 @@
     "build:remotes": "pnpm --parallel --filter \"./team-blue\" --filter \"./team-green\"  build",
     "serve:remotes": "pnpm --parallel --filter \"./team-blue\" --filter \"./team-green\"  serve",
     "dev:hosts": "pnpm --filter \"./team-red\" dev",
+    "dev:remotes": "pnpm --parallel --filter \"./team-blue\" --filter \"./team-green\" dev",
     "stop": "kill-port --port 5000,5001,5002",
     "clean": "pnpm run clean"
   },

packages/lib/package.json

@@ -37,13 +37,14 @@
   },
   "homepage": "https://github.com/originjs/vite-plugin-federation#readme",
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && tsc",
     "dev": "vite build --watch",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path ."
   },
   "dependencies": {
     "estree-walker": "^3.0.2",
-    "magic-string": "^0.27.0"
+    "magic-string": "^0.27.0",
+    "rollup": "^3.9.1"
   },
   "devDependencies": {
     "@rollup/plugin-virtual": "^3.0.1",

packages/lib/src/dev/expose-development.ts

@@ -13,17 +13,91 @@
 // SPDX-License-Identifier: MulanPSL-2.0
 // *****************************************************************************
 
-import { parseExposeOptions } from '../utils'
-import { parsedOptions } from '../public'
+import { resolve } from 'path'
+import { getModuleMarker, normalizePath, parseExposeOptions } from '../utils'
+import { EXTERNALS, SHARED, builderInfo, parsedOptions } from '../public'
 import type { VitePluginFederationOptions } from 'types'
 import type { PluginHooks } from '../../types/pluginHooks'
+import { UserConfig, ViteDevServer } from 'vite'
+import { importShared } from './import-shared'
 
 export function devExposePlugin(
   options: VitePluginFederationOptions
 ): PluginHooks {
   parsedOptions.devExpose = parseExposeOptions(options)
+  let moduleMap = ''
+  let remoteFile: string | null = null
+
+  const exposeModules = (baseDir) => {
+    for (const item of parsedOptions.devExpose) {
+      const moduleName = getModuleMarker(`\${${item[0]}}`, SHARED)
+      EXTERNALS.push(moduleName)
+      const importPath = normalizePath(item[1].import)
+      const exposeFilepath = normalizePath(resolve(item[1].import))
+      moduleMap += `\n"${item[0]}":() => {
+        return __federation_import('/${importPath}', '${baseDir}@fs/${exposeFilepath}').then(module =>Object.keys(module).every(item => exportSet.has(item)) ? () => module.default : () => module)},`
+    }
+  }
+
+  const buildRemoteFile = (baseDir:string) => {
+    return `(${importShared})(); 
+    import RefreshRuntime from "${baseDir}@react-refresh"
+    RefreshRuntime.injectIntoGlobalHook(window)
+    window.$RefreshReg$ = () => {}
+    window.$RefreshSig$ = () => (type) => type
+    window.__vite_plugin_react_preamble_installed__ = true
+      const exportSet = new Set(['Module', '__esModule', 'default', '_export_sfc']);
+      let moduleMap = {
+        ${moduleMap}
+      };
+      const __federation_import = async (urlImportPath, fsImportPath) => {
+        let importedModule;
+        try {
+          return await import(fsImportPath);
+        } catch(ex) {
+          return await import(urlImportPath);
+        }
+      };
+      export const get =(module) => {
+        if(!moduleMap[module]) throw new Error('Can not find remote module ' + module)
+        return moduleMap[module]();
+      };
+      export const init =(shareScope) => {
+        globalThis.__federation_shared__= globalThis.__federation_shared__|| {};
+        Object.entries(shareScope).forEach(([key, value]) => {
+          const versionKey = Object.keys(value)[0];
+          const versionValue = Object.values(value)[0];
+          const scope = versionValue.scope || 'default'
+          globalThis.__federation_shared__[scope] = globalThis.__federation_shared__[scope] || {};
+          const shared= globalThis.__federation_shared__[scope];
+          (shared[key] = shared[key]||{})[versionKey] = versionValue;
+        });
+      }
+    `
+  }
 
   return {
-    name: 'originjs:expose-development'
+    name: 'originjs:expose-development',
+    config: (config: UserConfig) => {
+      if (config.base) {
+        exposeModules(config.base)
+        remoteFile = buildRemoteFile(config.base)
+      }
+    },
+    configureServer: (server: ViteDevServer) => {
+      const remoteFilePath = `${builderInfo.assetsDir}/${options.filename}`
+      server.middlewares.use((req, res, next) => {
+        if (req.url && req.url.includes(remoteFilePath)) {
+          res.writeHead(200, 'OK', {
+            'Content-Type': 'text/javascript',
+            'Access-Control-Allow-Origin': '*'
+          })
+          res.write(remoteFile)
+          res.end()
+        } else {
+          next()
+        }
+      })
+    }
   }
 }

packages/lib/src/dev/import-shared.js

@@ -0,0 +1,40 @@
+export const importShared = function () {
+  if (!globalThis.importShared) {
+    const moduleCache = Object.create(null)
+    const getSharedFromRuntime = async (name, shareScope) => {
+      let module = null
+      if (globalThis?.__federation_shared__?.[shareScope]?.[name]) {
+        const versionObj = globalThis.__federation_shared__[shareScope][name]
+        const versionValue = Object.values(versionObj)[0]
+        module = await (await versionValue.get())()
+      }
+      if (module) {
+        return flattenModule(module, name)
+      }
+    }
+    const flattenModule = (module, name) => {
+      // use a shared module which export default a function will getting error 'TypeError: xxx is not a function'
+      if (typeof module.default === 'function') {
+        Object.keys(module).forEach((key) => {
+          if (key !== 'default') {
+            module.default[key] = module[key]
+          }
+        })
+        moduleCache[name] = module.default
+        return module.default
+      }
+      if (module.default) module = Object.assign({}, module.default, module)
+      moduleCache[name] = module
+      return module
+    }
+    globalThis.importShared = async (name, shareScope = 'default') => {
+      try {
+        return moduleCache[name]
+          ? new Promise((r) => r(moduleCache[name]))
+          : (await getSharedFromRuntime(name, shareScope)) || null
+      } catch (ex) {
+        console.log(ex)
+      }
+    }
+  }
+}