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

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,69 @@ 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>;
+    React: typeof import('react');
+    ReactDOM?: typeof import('react-dom');
+}
+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;
+}
+/**
+ * Runtime Plugin 包装器对象的接口
+ * 包含原始组件和运行时信息，让 RemoteModule 控制 HOC 层级顺序
+ */
+export interface RuntimePluginWrapper {
+    readonly type: 'runtime-plugin-wrapper';
+    readonly originalComponent: React.ComponentType<any>;
+    readonly runtimeInfo: {
+        readonly remoteVersion?: string;
+        readonly hostVersion?: string;
+        readonly remoteReact: () => typeof import('react');
+        readonly remoteReactDOM: () => typeof import('react-dom');
+        readonly mountNode?: HTMLElement;
+        readonly containerClassName?: string;
+    };
+    readonly reactInstances: {
+        readonly react: typeof import('react');
+        readonly reactDOM?: typeof import('react-dom');
+    };
+}
+/**
+ * 类型守卫：检查是否为 Runtime Plugin 包装器
+ */
+export declare function isRuntimePluginWrapper(value: any): value is () => RuntimePluginWrapper;
+/**
+ * 创建 Runtime Plugin 包装器的工厂函数
+ */
+export declare function createRuntimePluginWrapper(originalComponent: React.ComponentType<any>, runtimeInfo: {
+    remoteVersion?: string;
+    hostVersion?: string;
+    remoteReact: () => typeof import('react');
+    remoteReactDOM: () => typeof import('react-dom');
+    mountNode?: HTMLElement;
+    containerClassName?: string;
+}, reactInstances: {
+    react: typeof import('react');
+    reactDOM?: typeof import('react-dom');
+}): () => RuntimePluginWrapper;

package/es2017/types.js

@@ -1 +1,18 @@
-export { };
+import * as React from 'react';
+/**
+ * 类型守卫：检查是否为 Runtime Plugin 包装器
+ */ export function isRuntimePluginWrapper(value) {
+    return value && value.__mf_fallback_render;
+}
+/**
+ * 创建 Runtime Plugin 包装器的工厂函数
+ */ export function createRuntimePluginWrapper(originalComponent, runtimeInfo, reactInstances) {
+    const wrapper = ()=>({
+            type: 'runtime-plugin-wrapper',
+            originalComponent,
+            runtimeInfo,
+            reactInstances
+        });
+    wrapper.__mf_fallback_render = true;
+    return wrapper;
+} // 不再需要联合类型，两种插件分开管理

package/esm/RemoteModule.js

@@ -6,10 +6,13 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { loadRemote } from "@module-federation/runtime";
 import * as React from "react";
 import { useMemo, useState, useLayoutEffect, forwardRef } from "react";
+import * as ReactDOM from "react-dom";
 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";
+import { isRuntimePluginWrapper } from "./types";
 var useMountNode = function(mountNodeConfig) {
     var _useState = _sliced_to_array(useState(undefined), 2), resolvedNode = _useState[0], setResolvedNode = _useState[1];
     // 解析各种类型的 mountNode
@@ -40,6 +43,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 +53,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, _remoteModule, originalComponent, runtimeInfo, reactInstances, remoteReact, remoteReactDOM, PluginWrappedComponent, FinalComponent, typedRemoteModule, BaseComponent, FinalComponent1, react, reactDOM, PluginWrappedComponent1;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -59,48 +63,80 @@ var RemoteModuleInner = function(param, ref) {
                         ];
                     case 1:
                         remoteModule = _state.sent();
-                        // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
-                        if (typeof remoteModule === "function" && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
-                            ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
+                        // 使用清晰的对象结构检查是否为 Runtime Plugin 包装器
+                        if (isRuntimePluginWrapper(remoteModule)) {
+                            _remoteModule = remoteModule(), originalComponent = _remoteModule.originalComponent, runtimeInfo = _remoteModule.runtimeInfo, reactInstances = _remoteModule.reactInstances;
+                            remoteReact = reactInstances.react;
+                            remoteReactDOM = reactInstances.reactDOM;
+                            PluginWrappedComponent = enhancedPluginManager.wrapComponent(originalComponent, {
+                                remoteName: scope,
+                                moduleName: module,
+                                props: componentProps || {},
+                                React: remoteReact,
+                                ReactDOM: remoteReactDOM
+                            });
+                            FinalComponent = FallBack({
+                                Original: PluginWrappedComponent,
+                                remoteVersion: runtimeInfo.remoteVersion ? function() {
+                                    return runtimeInfo.remoteVersion;
+                                } : undefined,
+                                hostVersion: runtimeInfo.hostVersion ? function() {
+                                    return runtimeInfo.hostVersion;
+                                } : undefined,
+                                remoteReactDOM: runtimeInfo.remoteReactDOM,
+                                remoteReact: runtimeInfo.remoteReact,
+                                mountNode: resolvedMountNode,
+                                containerClassName: fallbackContainerClassName
+                            });
                             return [
                                 2,
                                 {
-                                    default: ComponentFromPlugin
+                                    default: FinalComponent
                                 }
                             ];
                         }
                         typedRemoteModule = remoteModule;
                         if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
-                            return [
-                                2,
-                                {
-                                    default: remoteModule
-                                }
-                            ];
+                            BaseComponent = remoteModule;
+                        } else {
+                            BaseComponent = typedRemoteModule.default;
                         }
+                        // 如果需要 runtime 处理（不同 React 版本或 mountNode）
                         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
-                                    })
-                                }
-                            ];
+                            PluginWrappedComponent1 = enhancedPluginManager.wrapComponent(BaseComponent, {
+                                remoteName: scope,
+                                moduleName: module,
+                                props: componentProps || {},
+                                React: react,
+                                ReactDOM: reactDOM
+                            });
+                            FinalComponent1 = FallBack({
+                                Original: PluginWrappedComponent1,
+                                remoteReact: function() {
+                                    return react;
+                                },
+                                remoteReactDOM: function() {
+                                    return reactDOM;
+                                },
+                                mountNode: resolvedMountNode,
+                                containerClassName: fallbackContainerClassName
+                            });
+                        } else {
+                            // 没有 runtime 需求时，直接应用插件包装器
+                            FinalComponent1 = enhancedPluginManager.wrapComponent(BaseComponent, {
+                                remoteName: scope,
+                                moduleName: module,
+                                props: componentProps || {},
+                                React: React,
+                                ReactDOM: ReactDOM
+                            });
                         }
+                        console.log("FinalComponent", FinalComponent1);
                         return [
                             2,
                             {
-                                default: typedRemoteModule.default
+                                default: FinalComponent1
                             }
                         ];
                 }
@@ -112,7 +148,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 +158,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 +175,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 {};

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

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

package/esm/__tests__/setup.d.ts

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

package/esm/__tests__/setup.js

@@ -0,0 +1,43 @@
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { vi } from "vitest";
+// Test setup for ice-mf-runtime
+// Mock @ice/stark-app dependency
+vi.mock("@ice/stark-app", function() {
+    return {
+        getBasename: function() {
+            return "/app";
+        }
+    };
+});
+// Mock @module-federation/runtime
+vi.mock("@module-federation/runtime", function() {
+    return {
+        init: vi.fn(),
+        registerPlugins: vi.fn(),
+        loadRemote: vi.fn()
+    };
+});
+// Mock performance API
+Object.defineProperty(globalThis, "performance", {
+    value: {
+        now: function() {
+            return Date.now();
+        }
+    },
+    writable: true
+});
+// Suppress console warnings during tests
+var originalWarn = console.warn;
+console.warn = function() {
+    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+        args[_key] = arguments[_key];
+    }
+    var _originalWarn;
+    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 = originalWarn).call.apply(_originalWarn, [
+        console
+    ].concat(_to_consumable_array(args)));
+};

package/esm/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;