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

package/esm/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/esm/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/esm/plugin-manager.js

@@ -0,0 +1,201 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import * as React from "react";
+/**
+ * 增强插件管理器 - 专门负责管理和执行增强运行时插件
+ * 标准 MF 插件交由底层 @module-federation/runtime 管理
+ */ export var EnhancedPluginManager = /*#__PURE__*/ function() {
+    "use strict";
+    function EnhancedPluginManager() {
+        _class_call_check(this, EnhancedPluginManager);
+        _define_property(this, "plugins", []);
+    }
+    _create_class(EnhancedPluginManager, [
+        {
+            /**
+   * 注册增强插件
+   * @param plugin 增强运行时插件
+   */ key: "register",
+            value: function register(plugin) {
+                // 检查是否已存在同名插件
+                var existingIndex = this.plugins.findIndex(function(p) {
+                    return p.name === plugin.name;
+                });
+                if (existingIndex >= 0) {
+                    console.warn('Enhanced plugin "'.concat(plugin.name, '" already exists, replacing it.'));
+                    this.plugins[existingIndex] = plugin;
+                } else {
+                    this.plugins.push(plugin);
+                }
+            }
+        },
+        {
+            /**
+   * 注册多个增强插件
+   * @param plugins 增强插件数组
+   */ key: "registerPlugins",
+            value: function registerPlugins(plugins) {
+                var _this = this;
+                plugins.forEach(function(plugin) {
+                    return _this.register(plugin);
+                });
+            }
+        },
+        {
+            /**
+   * 获取所有增强插件列表
+   * @returns 增强插件数组
+   */ key: "getPlugins",
+            value: function getPlugins() {
+                return _to_consumable_array(this.plugins);
+            }
+        },
+        {
+            /**
+   * 应用组件包装器
+   * 按插件注册顺序依次应用所有组件包装器
+   * @param Component 原始组件
+   * @param context 包装器上下文
+   * @returns 包装后的组件
+   */ key: "wrapComponent",
+            value: function wrapComponent(Component, context) {
+                var WrappedComponent = Component;
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    // 按数组顺序依次应用所有组件包装器
+                    for(var _iterator = this.plugins[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var plugin = _step.value;
+                        if (plugin.wrapComponent) {
+                            try {
+                                WrappedComponent = plugin.wrapComponent(WrappedComponent, context);
+                            } catch (error) {
+                                console.error('Error applying wrapper from plugin "'.concat(plugin.name, '":'), error);
+                            }
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return WrappedComponent;
+            }
+        },
+        {
+            /**
+   * 注入属性
+   * 按插件注册顺序依次应用所有属性注入器
+   * @param props 原始属性
+   * @param context 注入上下文
+   * @returns 注入后的属性
+   */ key: "injectProps",
+            value: function injectProps(props, context) {
+                var injectedProps = _object_spread({}, props);
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    // 按数组顺序依次应用所有属性注入器
+                    for(var _iterator = this.plugins[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var plugin = _step.value;
+                        if (plugin.injectProps) {
+                            try {
+                                injectedProps = plugin.injectProps(injectedProps, context);
+                            } catch (error) {
+                                console.error('Error injecting props from plugin "'.concat(plugin.name, '":'), error);
+                            }
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return injectedProps;
+            }
+        },
+        {
+            /**
+   * 获取所有插件信息
+   * @returns 插件信息数组
+   */ key: "getPluginInfo",
+            value: function getPluginInfo() {
+                return this.plugins.map(function(plugin) {
+                    return {
+                        name: plugin.name,
+                        hasWrapper: !!plugin.wrapComponent,
+                        hasInjector: !!plugin.injectProps
+                    };
+                });
+            }
+        },
+        {
+            /**
+   * 移除插件
+   * @param name 插件名称
+   * @returns 是否成功移除
+   */ key: "removePlugin",
+            value: function removePlugin(name) {
+                var index = this.plugins.findIndex(function(p) {
+                    return p.name === name;
+                });
+                if (index !== -1) {
+                    this.plugins.splice(index, 1);
+                    return true;
+                }
+                return false;
+            }
+        },
+        {
+            /**
+   * 清空所有插件
+   */ key: "clear",
+            value: function clear() {
+                this.plugins = [];
+            }
+        }
+    ]);
+    return EnhancedPluginManager;
+}();
+// 全局增强插件管理器实例
+var 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/esm/runtime-plugin.js

@@ -2,10 +2,10 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import * as React from "react";
 import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from "./mf-global-store";
-import { FallBack } from "./FallBack";
+import { createRuntimePluginWrapper } from "./types";
 var loadRemotePackagedReactAndRender = function() {
     var _ref = _async_to_generator(function(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, hostVersion, remoteInstance, remoteVersion, _sharedOptions_find, remoteReactDOM, _sharedOptions_find1, remoteReact, wrappedRender;
+        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, hostVersion, remoteInstance, remoteVersion, _sharedOptions_find, remoteReactDOM, _sharedOptions_find1, remoteReact;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
@@ -23,8 +23,8 @@ var loadRemotePackagedReactAndRender = function() {
                         4,
                         remoteInstance.loadShare("react-dom", {
                             resolver: function(sharedOptions) {
-                                return (_sharedOptions_find = sharedOptions.find(function(i) {
-                                    return i.version === remoteVersion;
+                                return (_sharedOptions_find = sharedOptions.find(function(option) {
+                                    return option.version === remoteVersion;
                                 })) !== null && _sharedOptions_find !== void 0 ? _sharedOptions_find : sharedOptions[0];
                             }
                         })
@@ -35,8 +35,8 @@ var loadRemotePackagedReactAndRender = function() {
                         4,
                         remoteInstance.loadShare("react", {
                             resolver: function(sharedOptions) {
-                                return (_sharedOptions_find1 = sharedOptions.find(function(i) {
-                                    return i.version === remoteVersion;
+                                return (_sharedOptions_find1 = sharedOptions.find(function(option) {
+                                    return option.version === remoteVersion;
                                 })) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0];
                             }
                         })
@@ -49,26 +49,22 @@ var loadRemotePackagedReactAndRender = function() {
                             null
                         ];
                     }
-                    wrappedRender = function(mountNode, containerClassName) {
-                        return FallBack({
-                            Original: args.exposeModule.default,
-                            remoteVersion: function() {
-                                return remoteVersion;
-                            },
-                            hostVersion: function() {
-                                return hostVersion;
-                            },
-                            remoteReactDOM: remoteReactDOM,
-                            remoteReact: remoteReact,
-                            mountNode: mountNode,
-                            containerClassName: containerClassName
-                        });
-                    };
-                    // 添加标记，用于在 RemoteModule 中识别
-                    wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
+                    // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
+                    // 让 RemoteModule 控制 HOC 的正确层级顺序
                     return [
                         2,
-                        wrappedRender
+                        createRuntimePluginWrapper(// 原始组件
+                        args.exposeModule.default, // 运行时信息
+                        {
+                            remoteVersion: remoteVersion,
+                            hostVersion: hostVersion,
+                            remoteReact: remoteReact,
+                            remoteReactDOM: remoteReactDOM
+                        }, // React 实例信息
+                        {
+                            react: remoteReact(),
+                            reactDOM: remoteReactDOM()
+                        })
                     ];
                 case 3:
                     return [
@@ -99,7 +95,7 @@ export var runtimePlugin = function() {
         },
         onLoad: function onLoad(args) {
             return _async_to_generator(function() {
-                var _args_origin_options_shared_reactdom_, _args_origin_options_shared_reactdom, _args_origin_options_shared, _args_origin_options, _extraInfo, hostName, remoteName, hostVersion, extraInfo, externalReact, externalReactDOM, remoteReact, remoteReactDOM, wrappedRender, fallBackRender;
+                var _args_origin_options_shared_reactdom_, _args_origin_options_shared_reactdom, _args_origin_options_shared, _args_origin_options, _extraInfo, hostName, remoteName, hostVersion, extraInfo, externalReact, externalReactDOM, remoteReact, remoteReactDOM, fallBackRender;
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -124,20 +120,20 @@ export var runtimePlugin = function() {
                                             args
                                         ];
                                     }
-                                    wrappedRender = function(mountNode, containerClassName) {
-                                        return FallBack({
-                                            Original: args.exposeModule.default,
-                                            remoteReactDOM: remoteReactDOM,
-                                            remoteReact: remoteReact,
-                                            mountNode: mountNode,
-                                            containerClassName: containerClassName
-                                        });
-                                    };
-                                    // 添加标记，用于在 RemoteModule 中识别
-                                    wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
+                                    // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
+                                    // 让 RemoteModule 控制 HOC 的正确层级顺序
                                     return [
                                         2,
-                                        wrappedRender
+                                        createRuntimePluginWrapper(// 原始组件
+                                        args.exposeModule.default, // 运行时信息
+                                        {
+                                            remoteReact: remoteReact,
+                                            remoteReactDOM: remoteReactDOM
+                                        }, // React 实例信息
+                                        {
+                                            react: remoteReact(),
+                                            reactDOM: remoteReactDOM()
+                                        })
                                     ];
                                 }
                             }

package/esm/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/esm/types.js

@@ -1 +1,20 @@
-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) {
+    var wrapper = function() {
+        return {
+            type: "runtime-plugin-wrapper",
+            originalComponent: originalComponent,
+            runtimeInfo: runtimeInfo,
+            reactInstances: reactInstances
+        };
+    };
+    wrapper.__mf_fallback_render = true;
+    return wrapper;
+} // 不再需要联合类型，两种插件分开管理

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "1.0.2",
+  "version": "1.0.3-beta.2",
   "description": "ice mf runtime",
   "files": [
     "esm",
     "es2017",
     "cjs",
-    "dist"
+    "dist",
+    "docs"
   ],
   "main": "esm/index.js",
   "module": "esm/index.js",
@@ -34,6 +35,9 @@
     "start": "ice-pkg start",
     "build": "ice-pkg build",
     "prepublishOnly": "npm run build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"**/*.{css,scss,less}\"",
@@ -57,12 +61,19 @@
     "@applint/spec": "^1.2.3",
     "@ice/pkg": "^1.0.0",
     "@ice/runtime": "^1.0.0",
+    "@ice/stark-app": "^1.5.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@vitest/coverage-v8": "^1.0.0",
     "eslint": "^8.0.0",
+    "jsdom": "^23.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "stylelint": "^15.0.0"
+    "stylelint": "^15.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0"
   },
   "publishConfig": {
     "access": "public",