@ice/mf-runtime 1.0.2 → 1.0.3-beta.2

package/es2017/__tests__/plugin-manager.test.js

@@ -0,0 +1,291 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { EnhancedPluginManager, getEnhancedPluginManager, registerEnhancedPlugins } from '../plugin-manager';
+import * as React from 'react';
+describe('EnhancedPluginManager', ()=>{
+    let manager;
+    beforeEach(()=>{
+        manager = new EnhancedPluginManager();
+    });
+    describe('Plugin Registration', ()=>{
+        it('should register an enhanced plugin', ()=>{
+            const enhancedPlugin = {
+                name: 'test-enhanced',
+                wrapComponent: (Component)=>Component,
+                injectProps: (props)=>props
+            };
+            manager.register(enhancedPlugin);
+            const plugins = manager.getPlugins();
+            expect(plugins).toHaveLength(1);
+            expect(plugins[0].name).toBe('test-enhanced');
+        });
+        it('should replace existing plugin with same name', ()=>{
+            const plugin1 = {
+                name: 'test-plugin',
+                wrapComponent: (Component)=>Component
+            };
+            const plugin2 = {
+                name: 'test-plugin',
+                injectProps: (props)=>props
+            };
+            manager.register(plugin1);
+            manager.register(plugin2);
+            const plugins = manager.getPlugins();
+            expect(plugins).toHaveLength(1);
+            expect(plugins[0]).toBe(plugin2);
+        });
+        it('should register multiple plugins', ()=>{
+            const plugins = [
+                {
+                    name: 'plugin1',
+                    wrapComponent: (Component)=>Component
+                },
+                {
+                    name: 'plugin2',
+                    injectProps: (props)=>props
+                }
+            ];
+            manager.registerPlugins(plugins);
+            expect(manager.getPlugins()).toHaveLength(2);
+        });
+    });
+    describe('Component Wrapping', ()=>{
+        it('should wrap component with single plugin', ()=>{
+            const TestComponent = ()=>React.createElement('div', null, 'test');
+            const mockWrapper = vi.fn((Component)=>Component);
+            const plugin = {
+                name: 'wrapper-plugin',
+                wrapComponent: mockWrapper
+            };
+            manager.register(plugin);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module',
+                props: {
+                    test: true
+                },
+                React: React,
+                ReactDOM: undefined
+            };
+            const wrappedComponent = manager.wrapComponent(TestComponent, context);
+            expect(mockWrapper).toHaveBeenCalledWith(TestComponent, context);
+            expect(wrappedComponent).toBe(TestComponent);
+        });
+        it('should apply multiple wrappers in order', ()=>{
+            const TestComponent = ()=>React.createElement('div', null, 'original');
+            const Wrapper1 = ()=>React.createElement('div', null, 'wrapper1');
+            const Wrapper2 = ()=>React.createElement('div', null, 'wrapper2');
+            const plugin1 = {
+                name: 'wrapper1',
+                wrapComponent: ()=>Wrapper1
+            };
+            const plugin2 = {
+                name: 'wrapper2',
+                wrapComponent: ()=>Wrapper2
+            };
+            // 注册顺序很重要
+            manager.register(plugin1);
+            manager.register(plugin2);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module',
+                props: {},
+                React: React,
+                ReactDOM: undefined
+            };
+            const result = manager.wrapComponent(TestComponent, context);
+            // plugin2 应该最后执行，所以返回 Wrapper2
+            expect(result).toBe(Wrapper2);
+        });
+        it('should handle wrapper errors gracefully', ()=>{
+            const TestComponent = ()=>React.createElement('div', null, 'test');
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(()=>{});
+            const plugin = {
+                name: 'error-plugin',
+                wrapComponent: ()=>{
+                    throw new Error('Wrapper error');
+                }
+            };
+            manager.register(plugin);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module',
+                props: {},
+                React: React,
+                ReactDOM: undefined
+            };
+            const result = manager.wrapComponent(TestComponent, context);
+            expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Error applying wrapper from plugin "error-plugin"'), expect.any(Error));
+            expect(result).toBe(TestComponent); // 应该返回原始组件
+            consoleSpy.mockRestore();
+        });
+    });
+    describe('Props Injection', ()=>{
+        it('should inject props with single plugin', ()=>{
+            const mockInjector = vi.fn((props)=>_object_spread_props(_object_spread({}, props), {
+                    injected: true
+                }));
+            const plugin = {
+                name: 'injector-plugin',
+                injectProps: mockInjector
+            };
+            manager.register(plugin);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module'
+            };
+            const result = manager.injectProps({
+                original: true
+            }, context);
+            expect(mockInjector).toHaveBeenCalledWith({
+                original: true
+            }, context);
+            expect(result).toEqual({
+                original: true,
+                injected: true
+            });
+        });
+        it('should apply multiple injectors in order', ()=>{
+            const plugin1 = {
+                name: 'injector1',
+                injectProps: (props)=>_object_spread_props(_object_spread({}, props), {
+                        step1: true
+                    })
+            };
+            const plugin2 = {
+                name: 'injector2',
+                injectProps: (props)=>_object_spread_props(_object_spread({}, props), {
+                        step2: true
+                    })
+            };
+            manager.register(plugin1);
+            manager.register(plugin2);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module'
+            };
+            const result = manager.injectProps({
+                original: true
+            }, context);
+            expect(result).toEqual({
+                original: true,
+                step1: true,
+                step2: true
+            });
+        });
+        it('should handle injection errors gracefully', ()=>{
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(()=>{});
+            const plugin = {
+                name: 'error-plugin',
+                injectProps: ()=>{
+                    throw new Error('Injection error');
+                }
+            };
+            manager.register(plugin);
+            const context = {
+                remoteName: 'test-remote',
+                moduleName: 'test-module'
+            };
+            const result = manager.injectProps({
+                original: true
+            }, context);
+            expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Error injecting props from plugin "error-plugin"'), expect.any(Error));
+            expect(result).toEqual({
+                original: true
+            }); // 应该返回原始props
+            consoleSpy.mockRestore();
+        });
+    });
+    describe('Plugin Management', ()=>{
+        it('should get plugin info', ()=>{
+            const wrapperPlugin = {
+                name: 'wrapper-plugin',
+                wrapComponent: (Component)=>Component
+            };
+            const injectorPlugin = {
+                name: 'injector-plugin',
+                injectProps: (props)=>props
+            };
+            const hybridPlugin = {
+                name: 'hybrid-plugin',
+                wrapComponent: (Component)=>Component,
+                injectProps: (props)=>props
+            };
+            manager.register(wrapperPlugin);
+            manager.register(injectorPlugin);
+            manager.register(hybridPlugin);
+            const info = manager.getPluginInfo();
+            expect(info).toHaveLength(3);
+            expect(info[0]).toEqual({
+                name: 'wrapper-plugin',
+                hasWrapper: true,
+                hasInjector: false
+            });
+            expect(info[1]).toEqual({
+                name: 'injector-plugin',
+                hasWrapper: false,
+                hasInjector: true
+            });
+            expect(info[2]).toEqual({
+                name: 'hybrid-plugin',
+                hasWrapper: true,
+                hasInjector: true
+            });
+        });
+        it('should remove plugin', ()=>{
+            const plugin = {
+                name: 'test-plugin',
+                wrapComponent: (Component)=>Component
+            };
+            manager.register(plugin);
+            expect(manager.getPlugins()).toHaveLength(1);
+            const removed = manager.removePlugin('test-plugin');
+            expect(removed).toBe(true);
+            expect(manager.getPlugins()).toHaveLength(0);
+        });
+        it('should return false when removing non-existent plugin', ()=>{
+            const removed = manager.removePlugin('non-existent');
+            expect(removed).toBe(false);
+        });
+        it('should clear all plugins', ()=>{
+            manager.register({
+                name: 'plugin1',
+                wrapComponent: (Component)=>Component
+            });
+            manager.register({
+                name: 'plugin2',
+                injectProps: (props)=>props
+            });
+            expect(manager.getPlugins()).toHaveLength(2);
+            manager.clear();
+            expect(manager.getPlugins()).toHaveLength(0);
+        });
+    });
+    describe('Global Enhanced Plugin Manager', ()=>{
+        beforeEach(()=>{
+            // 清理全局状态
+            getEnhancedPluginManager().clear();
+        });
+        it('should provide singleton instance', ()=>{
+            const manager1 = getEnhancedPluginManager();
+            const manager2 = getEnhancedPluginManager();
+            expect(manager1).toBe(manager2);
+        });
+        it('should register multiple plugins via convenience function', ()=>{
+            const plugins = [
+                {
+                    name: 'plugin1',
+                    wrapComponent: (Component)=>Component
+                },
+                {
+                    name: 'plugin2',
+                    injectProps: (props)=>props
+                }
+            ];
+            registerEnhancedPlugins(plugins);
+            const manager = getEnhancedPluginManager();
+            expect(manager.getPlugins()).toHaveLength(2);
+        });
+    });
+});

package/es2017/__tests__/setup.d.ts

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

package/es2017/__tests__/setup.js

@@ -0,0 +1,28 @@
+import { vi } from 'vitest';
+// Test setup for ice-mf-runtime
+// Mock @ice/stark-app dependency
+vi.mock('@ice/stark-app', ()=>({
+        getBasename: ()=>'/app'
+    }));
+// Mock @module-federation/runtime
+vi.mock('@module-federation/runtime', ()=>({
+        init: vi.fn(),
+        registerPlugins: vi.fn(),
+        loadRemote: vi.fn()
+    }));
+// Mock performance API
+Object.defineProperty(globalThis, 'performance', {
+    value: {
+        now: ()=>Date.now()
+    },
+    writable: true
+});
+// Suppress console warnings during tests
+const originalWarn = console.warn;
+console.warn = (...args)=>{
+    var _args__includes, _args_;
+    if ((_args_ = args[0]) === null || _args_ === void 0 ? void 0 : (_args__includes = _args_.includes) === null || _args__includes === void 0 ? void 0 : _args__includes.call(_args_, 'Warning: ReactDOM.render is no longer supported')) {
+        return;
+    }
+    originalWarn.call(console, ...args);
+};

package/es2017/index.d.ts

@@ -2,5 +2,7 @@ import type { ExtendedUserOptions, MicroMod } from './types';
 export { loadRemote, registerPlugins } from '@module-federation/runtime';
 export * from './FallBack';
 export * from './RemoteModule';
+export * from './types';
+export * from './plugin-manager';
 export declare function init(options: ExtendedUserOptions, microMods?: MicroMod[]): void;
 export declare function initByMicroMods(microMods: MicroMod[], hostName?: string): void;

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,74 @@
+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 plugins 增强插件数组
+ */
+export declare function registerEnhancedPlugins(plugins: EnhancedRuntimePlugin[]): void;
+/**
+ * React Hook：使用增强插件管理器
+ * @returns 增强插件管理器实例
+ */
+export declare function useEnhancedPluginManager(): EnhancedPluginManager;

package/es2017/plugin-manager.js

@@ -0,0 +1,128 @@
+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 plugins 增强插件数组
+ */ export function registerEnhancedPlugins(plugins) {
+    getEnhancedPluginManager().registerPlugins(plugins);
+}
+/**
+ * React Hook：使用增强插件管理器
+ * @returns 增强插件管理器实例
+ */ export function useEnhancedPluginManager() {
+    return getEnhancedPluginManager();
+}

package/es2017/runtime-plugin.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from './mf-global-store';
-import { FallBack } from './FallBack';
+import { createRuntimePluginWrapper } from './types';
 const loadRemotePackagedReactAndRender = async (args)=>{
     var _args_origin_options_shared_reactdom_, _args_origin_options_shared_reactdom, _args_origin_options_shared, _args_origin_options, _remoteInstance_options_shared_reactdom_, _remoteInstance_options_shared_reactdom, _remoteInstance_options_shared, _remoteInstance_options;
     const hostVersion = ((_args_origin_options = args.origin.options) === null || _args_origin_options === void 0 ? void 0 : (_args_origin_options_shared = _args_origin_options.shared) === null || _args_origin_options_shared === void 0 ? void 0 : (_args_origin_options_shared_reactdom = _args_origin_options_shared['react-dom']) === null || _args_origin_options_shared_reactdom === void 0 ? void 0 : (_args_origin_options_shared_reactdom_ = _args_origin_options_shared_reactdom[0]) === null || _args_origin_options_shared_reactdom_ === void 0 ? void 0 : _args_origin_options_shared_reactdom_.version) || React.version;
@@ -10,28 +10,29 @@ const loadRemotePackagedReactAndRender = async (args)=>{
     if (remoteVersion && hostVersion) {
         var _sharedOptions_find;
         const remoteReactDOM = await remoteInstance.loadShare('react-dom', {
-            resolver: (sharedOptions)=>(_sharedOptions_find = sharedOptions.find((i)=>i.version === remoteVersion)) !== null && _sharedOptions_find !== void 0 ? _sharedOptions_find : sharedOptions[0]
+            resolver: (sharedOptions)=>(_sharedOptions_find = sharedOptions.find((option)=>option.version === remoteVersion)) !== null && _sharedOptions_find !== void 0 ? _sharedOptions_find : sharedOptions[0]
         });
         var _sharedOptions_find1;
         const remoteReact = await remoteInstance.loadShare('react', {
-            resolver: (sharedOptions)=>(_sharedOptions_find1 = sharedOptions.find((i)=>i.version === remoteVersion)) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0]
+            resolver: (sharedOptions)=>(_sharedOptions_find1 = sharedOptions.find((option)=>option.version === remoteVersion)) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0]
         });
         if (!remoteReact || !remoteReactDOM) {
             return null;
         }
-        // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
-        const wrappedRender = (mountNode, containerClassName)=>FallBack({
-                Original: args.exposeModule.default,
-                remoteVersion: ()=>remoteVersion,
-                hostVersion: ()=>hostVersion,
-                remoteReactDOM: remoteReactDOM,
-                remoteReact: remoteReact,
-                mountNode,
-                containerClassName
-            });
-        // 添加标记，用于在 RemoteModule 中识别
-        wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
-        return wrappedRender;
+        // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
+        // 让 RemoteModule 控制 HOC 的正确层级顺序
+        return createRuntimePluginWrapper(// 原始组件
+        args.exposeModule.default, // 运行时信息
+        {
+            remoteVersion,
+            hostVersion,
+            remoteReact: remoteReact,
+            remoteReactDOM: remoteReactDOM
+        }, // React 实例信息
+        {
+            react: remoteReact(),
+            reactDOM: remoteReactDOM()
+        });
     }
     return null;
 };
@@ -65,17 +66,18 @@ export const runtimePlugin = ()=>({
                         console.log('[runtime Plugin onLoad] use same external react');
                         return args;
                     }
-                    // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
-                    const wrappedRender = (mountNode, containerClassName)=>FallBack({
-                            Original: args.exposeModule.default,
-                            remoteReactDOM: remoteReactDOM,
-                            remoteReact: remoteReact,
-                            mountNode,
-                            containerClassName
-                        });
-                    // 添加标记，用于在 RemoteModule 中识别
-                    wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
-                    return wrappedRender;
+                    // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
+                    // 让 RemoteModule 控制 HOC 的正确层级顺序
+                    return createRuntimePluginWrapper(// 原始组件
+                    args.exposeModule.default, // 运行时信息
+                    {
+                        remoteReact: remoteReact,
+                        remoteReactDOM: remoteReactDOM
+                    }, // React 实例信息
+                    {
+                        react: remoteReact(),
+                        reactDOM: remoteReactDOM()
+                    });
                 }
             }
             const fallBackRender = await loadRemotePackagedReactAndRender(args);