@meethive/vite 0.0.1

package/src/federation/src/prod/shared-production.ts

@@ -0,0 +1,268 @@
+// *****************************************************************************
+// Copyright (C) 2022 Origin.js and others.
+//
+// This program and the accompanying materials are licensed under Mulan PSL v2.
+// You can use this software according to the terms and conditions of the Mulan PSL v2.
+// You may obtain a copy of Mulan PSL v2 at:
+//          http://license.coscl.org.cn/MulanPSL2
+// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+// See the Mulan PSL v2 for more details.
+//
+// SPDX-License-Identifier: MulanPSL-2.0
+// *****************************************************************************
+
+import type { PluginHooks } from '../../types/pluginHooks'
+import { NAME_CHAR_REG, parseSharedOptions, removeNonRegLetter } from '../utils'
+import { parsedOptions } from '../public'
+import type { ConfigTypeSet, VitePluginFederationOptions } from '../../types'
+import { basename, join, resolve } from 'path'
+import { readdirSync, readFileSync, statSync } from 'fs'
+const sharedFilePathReg = /__federation_shared_(.+)-.{8}\.js$/
+
+// @ts-ignore
+import federation_fn_import from './federation_fn_import.js?raw'
+
+export function prodSharedPlugin(
+  options: VitePluginFederationOptions
+): PluginHooks {
+  parsedOptions.prodShared = parseSharedOptions(options)
+  const shareName2Prop = new Map<string, any>()
+  parsedOptions.prodShared.forEach((value) =>
+    shareName2Prop.set(removeNonRegLetter(value[0], NAME_CHAR_REG), value[1])
+  )
+  let isHost
+  let isRemote
+  const id2Prop = new Map<string, any>()
+
+
+  function negotiateManualChunksCompatibility(inputOptions: any) {
+    if (!inputOptions.output) return
+
+    const outputs = Array.isArray(inputOptions.output)
+      ? inputOptions.output
+      : [inputOptions.output]
+
+    outputs.forEach(output => {
+      if (!output.manualChunks) return
+
+      const sharedModuleNames = [...shareName2Prop.keys()]
+      const conflictModules = new Set<string>()
+
+      // 检测冲突模块
+      if (typeof output.manualChunks === 'object') {
+        Object.values(output.manualChunks).flat().forEach((mod:any) => {
+          if (sharedModuleNames.some(shared => mod.includes(shared) || mod === shared)) {
+            conflictModules.add(mod)
+          }
+        })
+      }
+
+      if (conflictModules.size > 0) {
+        console.info(
+          `[Federation] 检测到模块 [${Array.from(conflictModules).join(', ')}] ` +
+          `同时配置在 shared 和 manualChunks 中，启用协商共存模式`
+        )
+
+        // 协商策略：修改 shared 配置以适配 manualChunks
+        adaptSharedToManualChunks(conflictModules)
+      }
+    })
+  }
+
+  function adaptSharedToManualChunks(conflictModules: Set<string>) {
+    // 为冲突模块调整 federation 共享策略
+    parsedOptions.prodShared.forEach((sharedItem, index) => {
+      const [moduleName, config] = sharedItem as any
+
+      if (conflictModules.has(moduleName)) {
+        // 保持 federation 共享逻辑，但标记为兼容模式
+        config.manualChunkCompat = true
+        config.chunkLoading = 'defer' // 延迟加载，让 manualChunk 先处理
+
+        console.info(
+          `[Federation] 模块 "${moduleName}" 设置为兼容模式：` +
+          `manualChunks 负责分块，federation 负责运行时共享`
+        )
+      }
+    })
+  }
+
+  return {
+    name: 'originjs:shared-production',
+    virtualFile: {
+      __federation_fn_import: federation_fn_import
+    },
+    options(inputOptions) {
+      isRemote = !!parsedOptions.prodExpose.length
+      isHost = options.isHost
+
+      if (shareName2Prop.size) {
+        // remove item which is both in external and shared
+        inputOptions.external = (
+          inputOptions.external as (string | RegExp)[]
+        )?.filter((item) => {
+          if (item instanceof RegExp)
+            return ![...shareName2Prop.keys()].some((key) => item.test(key))
+          return !shareName2Prop.has(removeNonRegLetter(item, NAME_CHAR_REG))
+        })
+      }
+
+      // 协商共存：处理 manualChunks 与 shared 的兼容
+      negotiateManualChunksCompatibility(inputOptions)
+
+      return inputOptions
+    },
+    async buildStart() {
+      // Cannot emit chunks after module loading has finished, so emitFile first.
+      if (parsedOptions.prodShared.length && isRemote) {
+        this.emitFile({
+          name: '__federation_fn_import',
+          type: 'chunk',
+          id: '__federation_fn_import',
+          preserveSignature: 'strict'
+        })
+      }
+
+      // forEach and collect dir
+      const collectDirFn = (filePath: string, collect: string[]) => {
+        const files = readdirSync(filePath)
+        files.forEach((name) => {
+          const tempPath = join(filePath, name)
+          const isDir = statSync(tempPath).isDirectory()
+          if (isDir) {
+            collect.push(tempPath)
+            collectDirFn(tempPath, collect)
+          }
+        })
+      }
+
+      const monoRepos: { arr: string[]; root: string | ConfigTypeSet }[] = []
+      const dirPaths: string[] = []
+      const currentDir = resolve()
+      //  try to get every module package.json file
+      for (const arr of parsedOptions.prodShared) {
+        if (isHost && !arr[1].version && !arr[1].manuallyPackagePathSetting) {
+          const packageJsonPath = (
+            await this.resolve(`${arr[1].packagePath}/package.json`)
+          )?.id
+          if (packageJsonPath) {
+            const packageJson = JSON.parse(
+              readFileSync(packageJsonPath, { encoding: 'utf-8' })
+            )
+            arr[1].version = packageJson.version
+          } else {
+            arr[1].removed = true
+            const dir = join(currentDir, 'node_modules', arr[0])
+            const dirStat = statSync(dir)
+            if (dirStat.isDirectory()) {
+              collectDirFn(dir, dirPaths)
+            } else {
+              this.error(`cant resolve "${arr[1].packagePath}"`)
+            }
+
+            if (dirPaths.length > 0) {
+              monoRepos.push({ arr: dirPaths, root: arr })
+            }
+          }
+
+          if (!arr[1].removed && !arr[1].version) {
+            this.error(
+              `No description file or no version in description file (usually package.json) of ${arr[0]}. Add version to description file, or manually specify version in shared config.`
+            )
+          }
+        }
+      }
+      parsedOptions.prodShared = parsedOptions.prodShared.filter(
+        (item) => !item[1].removed
+      )
+      // assign version to monoRepo
+      if (monoRepos.length > 0) {
+        for (const monoRepo of monoRepos) {
+          for (const id of monoRepo.arr) {
+            try {
+              const idResolve = await this.resolve(id)
+              if (idResolve?.id) {
+                (parsedOptions.prodShared as any[]).push([
+                  `${monoRepo.root[0]}/${basename(id)}`,
+                  {
+                    id: idResolve?.id,
+                    import: monoRepo.root[1].import,
+                    shareScope: monoRepo.root[1].shareScope,
+                    root: monoRepo.root
+                  }
+                ])
+              }
+            } catch (e) {
+              //    ignore
+            }
+          }
+        }
+      }
+
+      if (parsedOptions.prodShared.length && isRemote) {
+        for (const prod of parsedOptions.prodShared) {
+          id2Prop.set(prod[1].id, prod[1])
+        }
+      }
+    },
+
+    outputOptions: function (outputOption) {
+      // remove rollup generated empty imports,like import './filename.js'
+      outputOption.hoistTransitiveImports = false
+
+      const manualChunkFunc = (id: string) => {
+        //  if id is in shared dependencies, return id ,else return vite function value
+        const find = parsedOptions.prodShared.find((arr) =>
+          arr[1].dependencies?.has(id)
+        )
+        return find ? find[0] : undefined
+      }
+
+      // only active when manualChunks is function,array not to solve
+      if (typeof outputOption.manualChunks === 'function') {
+        outputOption.manualChunks = new Proxy(outputOption.manualChunks, {
+          apply(target, thisArg, argArray) {
+            const result = manualChunkFunc(argArray[0])
+            return result ? result : target(argArray[0], argArray[1])
+          }
+        })
+      }
+
+      // The default manualChunk function is no longer available from vite 2.9.0
+      if (outputOption.manualChunks === undefined) {
+        outputOption.manualChunks = manualChunkFunc
+      }
+
+      return outputOption
+    },
+
+    generateBundle(options, bundle) {
+      if (!isRemote) {
+        return
+      }
+      const needRemoveShared = new Set<string>()
+      for (const key in bundle) {
+        const chunk = bundle[key]
+        if (chunk.type === 'chunk') {
+          if (!isHost) {
+            const regRst = sharedFilePathReg.exec(chunk.fileName)
+            if (
+              regRst &&
+              shareName2Prop.get(removeNonRegLetter(regRst[1], NAME_CHAR_REG))
+                ?.generate === false
+            ) {
+              needRemoveShared.add(key)
+            }
+          }
+        }
+      }
+      if (needRemoveShared.size !== 0) {
+        for (const key of needRemoveShared) {
+          delete bundle[key]
+        }
+      }
+    }
+  }
+}

package/src/federation/src/public.ts

@@ -0,0 +1,54 @@
+// *****************************************************************************
+// Copyright (C) 2022 Origin.js and others.
+//
+// This program and the accompanying materials are licensed under Mulan PSL v2.
+// You can use this software according to the terms and conditions of the Mulan PSL v2.
+// You may obtain a copy of Mulan PSL v2 at:
+//          http://license.coscl.org.cn/MulanPSL2
+// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+// See the Mulan PSL v2 for more details.
+//
+// SPDX-License-Identifier: MulanPSL-2.0
+// *****************************************************************************
+
+import type { ConfigTypeSet, RemotesConfig } from '../types'
+import type { ResolvedConfig } from 'vite'
+import { Remote } from './utils'
+// for generateBundle Hook replace
+export const EXPOSES_MAP = new Map()
+export const EXPOSES_KEY_MAP = new Map()
+export const SHARED = 'shared'
+export const DYNAMIC_LOADING_CSS = 'dynamicLoadingCss'
+export const DYNAMIC_LOADING_CSS_PREFIX = '__v__css__'
+export const DEFAULT_ENTRY_FILENAME = 'remoteEntry.js'
+export const EXTERNALS: string[] = []
+export const ROLLUP = 'rollup'
+export const VITE = 'vite'
+export const VitePluginFederationVersion = '1.5.0'
+export const builderInfo = {
+  builder: 'rollup',
+  version: '',
+  assetsDir: '',
+  isHost: false,
+  isRemote: false,
+  isShared: false,
+}
+export const parsedOptions = {
+  prodExpose: [] as (string | ConfigTypeSet)[],
+  prodRemote: [] as (string | ConfigTypeSet)[],
+  prodShared: [] as (string | ConfigTypeSet)[],
+  devShared: [] as (string | ConfigTypeSet)[],
+  devExpose: [] as (string | ConfigTypeSet)[],
+  devRemote: [] as (string | ConfigTypeSet)[]
+}
+export const devRemotes: {
+  id: string
+  regexp: RegExp
+  config: RemotesConfig
+}[] = []
+export const prodRemotes: Remote[] = []
+export const viteConfigResolved: { config: ResolvedConfig | undefined } = {
+  config: undefined
+}

package/src/federation/src/runtime/dynamic-remote.ts

@@ -0,0 +1,247 @@
+// *****************************************************************************
+// Copyright (C) 2022 Origin.js and others.
+//
+// This program and the accompanying materials are licensed under Mulan PSL v2.
+// You can use this software according to the terms and conditions of the Mulan PSL v2.
+// You may obtain a copy of Mulan PSL v2 at:
+//          http://license.coscl.org.cn/MulanPSL2
+// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+// EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+// MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+// See the Mulan PSL v2 for more details.
+//
+// SPDX-License-Identifier: MulanPSL-2.0
+// *****************************************************************************
+
+/**
+ * Dynamic remote loader for runtime
+ * Provides utilities to dynamically load and manage remote components at runtime
+ */
+
+export interface RemoteOptions {
+  url: string | (() => string | Promise<string>);
+  format?: 'esm' | 'systemjs' | 'var';
+  from?: 'vite' | 'webpack';
+  shareScope?: string;
+  external?: string | string[];
+  externalType?: 'url' | 'promise';
+}
+
+export interface RemoteComponentConfig {
+  name: string;
+  component: string;
+  url: string | (() => string | Promise<string>);
+  options?: RemoteOptions;
+}
+
+/**
+ * Dynamic remote component manager
+ */
+export class DynamicRemoteManager {
+  private remoteCache = new Map<string, any>();
+  private loadingPromises = new Map<string, Promise<any>>();
+
+  /**
+   * Add a remote dynamically at runtime
+   * @param name Remote name
+   * @param config Remote configuration
+   */
+  async addRemote(name: string, config: RemoteOptions): Promise<void> {
+    try {
+      // 直接导入虚拟模块，避免使用Function构造器
+      // @ts-ignore
+      const federationModule = await import('virtual:__federation__');
+      const { __federation_method_add_origin_setRemote } = federationModule;
+
+      // @ts-ignore
+     await __federation_method_add_origin_setRemote(name, config.url, {
+        format: config.format || 'esm',
+        from: config.from || 'vite',
+        shareScope: config.shareScope || 'default',
+        external: config.external,
+        externalType: config.externalType || 'url'
+      });
+    } catch (error) {
+      throw new Error(`Failed to add dynamic remote '${name}': ${error.message}. Make sure to enable dynamic remotes in your plugin configuration with 'enableDynamicRemotes: true'.`);
+    }
+  }
+
+  /**
+   * Load a remote component dynamically
+   * @param remoteName Remote name
+   * @param componentName Component name to load from remote
+   * @returns Promise of the loaded component
+   */
+  async loadRemoteComponent(remoteName: string, componentName: string): Promise<any> {
+    const cacheKey = `${remoteName}/${componentName}`;
+
+    // Check cache first
+    if (this.remoteCache.has(cacheKey)) {
+      return this.remoteCache.get(cacheKey);
+    }
+
+    // Check if already loading
+    if (this.loadingPromises.has(cacheKey)) {
+      return this.loadingPromises.get(cacheKey);
+    }
+
+    // Start loading
+    const loadingPromise = this.doLoadRemoteComponent(remoteName, componentName);
+    this.loadingPromises.set(cacheKey, loadingPromise);
+
+    try {
+      const component = await loadingPromise;
+      this.remoteCache.set(cacheKey, component);
+      return component;
+    } finally {
+      this.loadingPromises.delete(cacheKey);
+    }
+  }
+
+  private async doLoadRemoteComponent(remoteName: string, componentName: string): Promise<any> {
+    try {
+      // 直接导入虚拟模块，避免使用Function构造器
+      // @ts-ignore
+      const federationModule = await import('virtual:__federation__');
+      const { __federation_method_getRemote } = federationModule;
+      return __federation_method_getRemote(remoteName, componentName);
+    } catch (error) {
+      throw new Error(`Failed to load remote component '${remoteName}/${componentName}': ${error.message}. Make sure to enable dynamic remotes in your plugin configuration with 'enableDynamicRemotes: true'.`);
+    }
+  }
+
+  /**
+   * Preload a remote component
+   * @param remoteName Remote name
+   * @param componentName Component name
+   */
+  async preloadRemoteComponent(remoteName: string, componentName: string): Promise<void> {
+    try {
+      await this.loadRemoteComponent(remoteName, componentName);
+    } catch (error) {
+      console.warn(`Failed to preload remote component ${remoteName}/${componentName}:`, error);
+    }
+  }
+
+  /**
+   * Remove a remote component from cache
+   * @param remoteName Remote name
+   * @param componentName Component name
+   */
+  clearRemoteComponentCache(remoteName: string, componentName?: string): void {
+    if (componentName) {
+      const cacheKey = `${remoteName}/${componentName}`;
+      this.remoteCache.delete(cacheKey);
+    } else {
+      // Clear all components for this remote
+      for (const key of this.remoteCache.keys()) {
+        if (key.startsWith(`${remoteName}/`)) {
+          this.remoteCache.delete(key);
+        }
+      }
+    }
+  }
+
+  /**
+   * Get all cached remote components
+   */
+  getCachedRemotes(): string[] {
+    return Array.from(this.remoteCache.keys());
+  }
+
+  /**
+   * Check if a remote component is cached
+   * @param remoteName Remote name
+   * @param componentName Component name
+   */
+  isRemoteComponentCached(remoteName: string, componentName: string): boolean {
+    const cacheKey = `${remoteName}/${componentName}`;
+    return this.remoteCache.has(cacheKey);
+  }
+}
+
+// Global instance
+export const dynamicRemoteManager = new DynamicRemoteManager();
+
+/**
+ * Convenience function to dynamically load remote component
+ * @param config Remote component configuration
+ */
+export async function loadDynamicRemoteComponent(config: RemoteComponentConfig): Promise<any> {
+  // Add remote if not already added
+  if (config.options) {
+    await dynamicRemoteManager.addRemote(config.name, {
+      url: config.url,
+      ...config.options
+    });
+  }
+
+  // Load the component
+  return dynamicRemoteManager.loadRemoteComponent(config.name, config.component);
+}
+
+/**
+ * Vue 3 composable for dynamic remote loading
+ * @param remoteName Remote name
+ * @param componentName Component name
+ */
+export function useDynamicRemote(remoteName: string, componentName: string) {
+  const loading = ref(true);
+  // @ts-ignore
+  const error = ref<Error | null>(null);
+  // @ts-ignore
+  const component = ref<any>(null);
+
+  const loadComponent = async () => {
+    try {
+      loading.value = true;
+      error.value = null;
+      component.value = await dynamicRemoteManager.loadRemoteComponent(remoteName, componentName);
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error('Failed to load remote component');
+      console.error(`Failed to load remote component ${remoteName}/${componentName}:`, err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Auto-load on mount
+  onMounted(() => {
+    loadComponent();
+  });
+
+  return {
+    component: readonly(component),
+    loading: readonly(loading),
+    error: readonly(error),
+    reload: loadComponent
+  };
+}
+
+// Helper function to check if we're in a Vue environment
+function isVueAvailable(): boolean {
+  try {
+    return typeof ref !== 'undefined' && typeof onMounted !== 'undefined';
+  } catch {
+    return false;
+  }
+}
+
+// Import Vue composables only if Vue is available
+let ref: any, onMounted: any, readonly: any;
+if (isVueAvailable()) {
+  try {
+    // 使用动态导入而不是 require
+    // @ts-ignore
+    import('vue').then(vue => {
+      ref = vue.ref;
+      onMounted = vue.onMounted;
+      readonly = vue.readonly;
+    }).catch(() => {
+      // Vue not available, composable won't work
+      console.warn('Vue not available for dynamic import');
+    });
+  } catch {
+    // Vue not available, composable won't work
+  }
+}