@ice/mf-runtime 1.0.1 → 1.0.2-beta.1

package/es2017/index.js

@@ -1,14 +1,16 @@
 import { getBasename } from '@ice/stark-app';
-import { registerPlugins, init as mfInit } from '@module-federation/runtime';
+import { registerPlugins as mfRegisterPlugins, init as mfInit } from '@module-federation/runtime';
 import { runtimePlugin } from './runtime-plugin';
 import { initGlobalStore } from './mf-global-store';
 export { loadRemote, registerPlugins } from '@module-federation/runtime';
 export * from './FallBack';
 export * from './RemoteModule';
+export * from './types';
+export * from './plugin-manager';
 export function init(options, microMods) {
     initGlobalStore(options, microMods);
     mfInit(options);
-    registerPlugins([
+    mfRegisterPlugins([
         runtimePlugin()
     ]);
 }

package/es2017/plugin-manager.d.ts

@@ -0,0 +1,79 @@
+import type { EnhancedRuntimePlugin, WrapperContext, InjectionContext } from './types';
+import * as React from 'react';
+/**
+ * 增强插件管理器 - 专门负责管理和执行增强运行时插件
+ * 标准 MF 插件交由底层 @module-federation/runtime 管理
+ */
+export declare class EnhancedPluginManager {
+    private plugins;
+    /**
+     * 注册增强插件
+     * @param plugin 增强运行时插件
+     */
+    register(plugin: EnhancedRuntimePlugin): void;
+    /**
+     * 注册多个增强插件
+     * @param plugins 增强插件数组
+     */
+    registerPlugins(plugins: EnhancedRuntimePlugin[]): void;
+    /**
+     * 获取所有增强插件列表
+     * @returns 增强插件数组
+     */
+    getPlugins(): EnhancedRuntimePlugin[];
+    /**
+     * 应用组件包装器
+     * 按插件注册顺序依次应用所有组件包装器
+     * @param Component 原始组件
+     * @param context 包装器上下文
+     * @returns 包装后的组件
+     */
+    wrapComponent(Component: React.ComponentType, context: WrapperContext): React.ComponentType;
+    /**
+     * 注入属性
+     * 按插件注册顺序依次应用所有属性注入器
+     * @param props 原始属性
+     * @param context 注入上下文
+     * @returns 注入后的属性
+     */
+    injectProps(props: Record<string, any>, context: InjectionContext): Record<string, any>;
+    /**
+     * 获取所有插件信息
+     * @returns 插件信息数组
+     */
+    getPluginInfo(): Array<{
+        name: string;
+        hasWrapper: boolean;
+        hasInjector: boolean;
+    }>;
+    /**
+     * 移除插件
+     * @param name 插件名称
+     * @returns 是否成功移除
+     */
+    removePlugin(name: string): boolean;
+    /**
+     * 清空所有插件
+     */
+    clear(): void;
+}
+/**
+ * 获取全局增强插件管理器实例
+ * @returns 增强插件管理器实例
+ */
+export declare function getEnhancedPluginManager(): EnhancedPluginManager;
+/**
+ * 注册增强插件（便捷函数）
+ * @param plugin 增强运行时插件
+ */
+export declare function registerEnhancedPlugin(plugin: EnhancedRuntimePlugin): void;
+/**
+ * 注册多个增强插件（便捷函数）
+ * @param plugins 增强插件数组
+ */
+export declare function registerEnhancedPlugins(plugins: EnhancedRuntimePlugin[]): void;
+/**
+ * React Hook：使用增强插件管理器
+ * @returns 增强插件管理器实例
+ */
+export declare function useEnhancedPluginManager(): EnhancedPluginManager;

package/es2017/plugin-manager.js

@@ -0,0 +1,134 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import * as React from 'react';
+/**
+ * 增强插件管理器 - 专门负责管理和执行增强运行时插件
+ * 标准 MF 插件交由底层 @module-federation/runtime 管理
+ */ export class EnhancedPluginManager {
+    /**
+   * 注册增强插件
+   * @param plugin 增强运行时插件
+   */ register(plugin) {
+        // 检查是否已存在同名插件
+        const existingIndex = this.plugins.findIndex((p)=>p.name === plugin.name);
+        if (existingIndex >= 0) {
+            console.warn(`Enhanced plugin "${plugin.name}" already exists, replacing it.`);
+            this.plugins[existingIndex] = plugin;
+        } else {
+            this.plugins.push(plugin);
+        }
+    }
+    /**
+   * 注册多个增强插件
+   * @param plugins 增强插件数组
+   */ registerPlugins(plugins) {
+        plugins.forEach((plugin)=>this.register(plugin));
+    }
+    /**
+   * 获取所有增强插件列表
+   * @returns 增强插件数组
+   */ getPlugins() {
+        return [
+            ...this.plugins
+        ];
+    }
+    /**
+   * 应用组件包装器
+   * 按插件注册顺序依次应用所有组件包装器
+   * @param Component 原始组件
+   * @param context 包装器上下文
+   * @returns 包装后的组件
+   */ wrapComponent(Component, context) {
+        let WrappedComponent = Component;
+        // 按数组顺序依次应用所有组件包装器
+        for (const plugin of this.plugins){
+            if (plugin.wrapComponent) {
+                try {
+                    WrappedComponent = plugin.wrapComponent(WrappedComponent, context);
+                } catch (error) {
+                    console.error(`Error applying wrapper from plugin "${plugin.name}":`, error);
+                }
+            }
+        }
+        return WrappedComponent;
+    }
+    /**
+   * 注入属性
+   * 按插件注册顺序依次应用所有属性注入器
+   * @param props 原始属性
+   * @param context 注入上下文
+   * @returns 注入后的属性
+   */ injectProps(props, context) {
+        let injectedProps = _object_spread({}, props);
+        // 按数组顺序依次应用所有属性注入器
+        for (const plugin of this.plugins){
+            if (plugin.injectProps) {
+                try {
+                    injectedProps = plugin.injectProps(injectedProps, context);
+                } catch (error) {
+                    console.error(`Error injecting props from plugin "${plugin.name}":`, error);
+                }
+            }
+        }
+        return injectedProps;
+    }
+    /**
+   * 获取所有插件信息
+   * @returns 插件信息数组
+   */ getPluginInfo() {
+        return this.plugins.map((plugin)=>({
+                name: plugin.name,
+                hasWrapper: !!plugin.wrapComponent,
+                hasInjector: !!plugin.injectProps
+            }));
+    }
+    /**
+   * 移除插件
+   * @param name 插件名称
+   * @returns 是否成功移除
+   */ removePlugin(name) {
+        const index = this.plugins.findIndex((p)=>p.name === name);
+        if (index !== -1) {
+            this.plugins.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+    /**
+   * 清空所有插件
+   */ clear() {
+        this.plugins = [];
+    }
+    constructor(){
+        _define_property(this, "plugins", []);
+    }
+}
+// 全局增强插件管理器实例
+let globalEnhancedPluginManager = null;
+/**
+ * 获取全局增强插件管理器实例
+ * @returns 增强插件管理器实例
+ */ export function getEnhancedPluginManager() {
+    if (!globalEnhancedPluginManager) {
+        globalEnhancedPluginManager = new EnhancedPluginManager();
+    }
+    return globalEnhancedPluginManager;
+}
+/**
+ * 注册增强插件（便捷函数）
+ * @param plugin 增强运行时插件
+ */ export function registerEnhancedPlugin(plugin) {
+    getEnhancedPluginManager().register(plugin);
+}
+/**
+ * 注册多个增强插件（便捷函数）
+ * @param plugins 增强插件数组
+ */ export function registerEnhancedPlugins(plugins) {
+    getEnhancedPluginManager().registerPlugins(plugins);
+}
+/**
+ * React Hook：使用增强插件管理器
+ * @returns 增强插件管理器实例
+ */ export function useEnhancedPluginManager() {
+    return getEnhancedPluginManager();
+}

package/es2017/runtime-plugin.js

@@ -1,3 +1,4 @@
+import { loadShare } from '@module-federation/runtime';
 import * as React from 'react';
 import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from './mf-global-store';
 import { FallBack } from './FallBack';
@@ -9,11 +10,11 @@ const loadRemotePackagedReactAndRender = async (args)=>{
     const remoteVersion = remoteInstance ? (_remoteInstance_options = remoteInstance.options) === null || _remoteInstance_options === void 0 ? void 0 : (_remoteInstance_options_shared = _remoteInstance_options.shared) === null || _remoteInstance_options_shared === void 0 ? void 0 : (_remoteInstance_options_shared_reactdom = _remoteInstance_options_shared['react-dom']) === null || _remoteInstance_options_shared_reactdom === void 0 ? void 0 : (_remoteInstance_options_shared_reactdom_ = _remoteInstance_options_shared_reactdom[0]) === null || _remoteInstance_options_shared_reactdom_ === void 0 ? void 0 : _remoteInstance_options_shared_reactdom_.version : false;
     if (remoteVersion && hostVersion) {
         var _sharedOptions_find;
-        const remoteReactDOM = await remoteInstance.loadShare('react-dom', {
+        const remoteReactDOM = await loadShare('react-dom', {
             resolver: (sharedOptions)=>(_sharedOptions_find = sharedOptions.find((i)=>i.version === remoteVersion)) !== null && _sharedOptions_find !== void 0 ? _sharedOptions_find : sharedOptions[0]
         });
         var _sharedOptions_find1;
-        const remoteReact = await remoteInstance.loadShare('react', {
+        const remoteReact = await loadShare('react', {
             resolver: (sharedOptions)=>(_sharedOptions_find1 = sharedOptions.find((i)=>i.version === remoteVersion)) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0]
         });
         if (!remoteReact || !remoteReactDOM) {

package/es2017/types.d.ts

@@ -1,5 +1,6 @@
 import type { UserOptions } from '@module-federation/runtime-core';
 import type { Remote } from '@module-federation/runtime-core/dist/src/types';
+import * as React from 'react';
 export interface ExtraInfo {
     external?: Record<string, string>;
     legacy?: boolean;
@@ -18,3 +19,29 @@ export interface MicroMod {
     moduleFederatedName: string;
     extraInfo?: ExtraInfo;
 }
+export interface FederationRuntimePlugin {
+    name: string;
+    afterResolve?: (args: any) => any;
+    onLoad?: (args: any) => any;
+    beforeRequest?: (args: any) => any;
+}
+export interface WrapperContext {
+    remoteName: string;
+    moduleName: string;
+    props: Record<string, any>;
+}
+export interface InjectionContext {
+    remoteName: string;
+    moduleName: string;
+}
+export interface ComponentWrapper {
+    (WrappedComponent: React.ComponentType<any>, context: WrapperContext): React.ComponentType<any>;
+}
+export interface PropInjector {
+    (props: Record<string, any>, context: InjectionContext): Record<string, any>;
+}
+export interface EnhancedRuntimePlugin {
+    name: string;
+    wrapComponent?: ComponentWrapper;
+    injectProps?: PropInjector;
+}

package/es2017/types.js

@@ -1 +1,2 @@
-export { };
+import * as React from 'react';
+ // 不再需要联合类型，两种插件分开管理

package/esm/RemoteModule.js

@@ -10,6 +10,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { FallBack } from "./FallBack";
 import { setFederatedModulePublicPath } from "./set-public-path";
 import { getMicroMod } from "./mf-global-store";
+import { useEnhancedPluginManager } from "./plugin-manager";
 var useMountNode = function(mountNodeConfig) {
     var _useState = _sliced_to_array(useState(undefined), 2), resolvedNode = _useState[0], setResolvedNode = _useState[1];
     // 解析各种类型的 mountNode
@@ -40,6 +41,7 @@ var RemoteModuleInner = function(param, ref) {
     var _microMod, _runtime, _runtime1;
     var microMod = getMicroMod(scope);
     var resolvedMountNode = useMountNode(mountNode);
+    var enhancedPluginManager = useEnhancedPluginManager();
     if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
         setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
     }
@@ -49,7 +51,7 @@ var RemoteModuleInner = function(param, ref) {
     var Component = useMemo(function() {
         if (!module || !scope) return null;
         return /*#__PURE__*/ React.lazy(/*#__PURE__*/ _async_to_generator(function() {
-            var _typedRemoteModule, remoteModule, ComponentFromPlugin, typedRemoteModule, react, reactDOM;
+            var _typedRemoteModule, remoteModule, ComponentFromPlugin, typedRemoteModule, BaseComponent, WrappedComponent, FinalComponent, react, reactDOM;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -71,36 +73,35 @@ var RemoteModuleInner = function(param, ref) {
                         }
                         typedRemoteModule = remoteModule;
                         if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
-                            return [
-                                2,
-                                {
-                                    default: remoteModule
-                                }
-                            ];
+                            BaseComponent = remoteModule;
+                        } else {
+                            BaseComponent = typedRemoteModule.default;
                         }
+                        WrappedComponent = enhancedPluginManager.wrapComponent(BaseComponent, {
+                            remoteName: scope,
+                            moduleName: module,
+                            props: componentProps || {}
+                        });
                         if (runtime) {
                             react = runtime.react, reactDOM = runtime.reactDOM;
-                            return [
-                                2,
-                                {
-                                    default: FallBack({
-                                        Original: typedRemoteModule.default,
-                                        remoteReact: function() {
-                                            return react;
-                                        },
-                                        remoteReactDOM: function() {
-                                            return reactDOM;
-                                        },
-                                        mountNode: resolvedMountNode,
-                                        containerClassName: fallbackContainerClassName
-                                    })
-                                }
-                            ];
+                            FinalComponent = FallBack({
+                                Original: WrappedComponent,
+                                remoteReact: function() {
+                                    return react;
+                                },
+                                remoteReactDOM: function() {
+                                    return reactDOM;
+                                },
+                                mountNode: resolvedMountNode,
+                                containerClassName: fallbackContainerClassName
+                            });
+                        } else {
+                            FinalComponent = WrappedComponent;
                         }
                         return [
                             2,
                             {
-                                default: typedRemoteModule.default
+                                default: FinalComponent
                             }
                         ];
                 }
@@ -112,7 +113,9 @@ var RemoteModuleInner = function(param, ref) {
         (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
         (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
         resolvedMountNode,
-        fallbackContainerClassName
+        fallbackContainerClassName,
+        enhancedPluginManager,
+        componentProps
     ]);
     var Loading = LoadingComponent || /*#__PURE__*/ React.createElement("div", null, "Loading...");
     var ErrorFallback = function(param) {
@@ -120,6 +123,11 @@ var RemoteModuleInner = function(param, ref) {
         return ErrorComponent || /*#__PURE__*/ React.createElement("div", null, "远程模块加载失败: ", error.message);
     };
     if (!Component) return Loading;
+    // 应用增强插件的属性注入
+    var injectedProps = enhancedPluginManager.injectProps(componentProps || {}, {
+        remoteName: scope,
+        moduleName: module
+    });
     return /*#__PURE__*/ React.createElement(ErrorBoundary, {
         resetKeys: [
             module,
@@ -132,7 +140,7 @@ var RemoteModuleInner = function(param, ref) {
         fallback: Loading
     }, /*#__PURE__*/ React.createElement(Component, _object_spread({
         ref: ref
-    }, componentProps), children)));
+    }, injectedProps), children)));
 };
 // 使用 forwardRef 包装组件以支持 ref
 export var RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);

package/esm/__tests__/plugin-manager.test.d.ts

@@ -0,0 +1 @@
+export {};