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

package/README.md

@@ -1,18 +1,12 @@
 # @ice/mf-runtime
 
-基于 Module Federation 的运行时工具，用于在 ice.js 应用中加载和管理远程模块。支持跨版本 React 组件加载，并提供增强的插件机制。
+基于 Module Federation 的运行时工具，用于在 ice.js 应用中加载和管理远程模块。支持跨版本 React 组件加载
 
 ## 特性
 
 - 基于 [Module Federation 2.0](https://module-federation.io/index.html)
 - 支持跨版本 React 组件加载
 - 内置冲突检测和降级渲染
-- 🔌 **增强插件机制**: 完全兼容标准 MF 运行时插件
-- 🎯 **组件增强**: 支持 HOC、Props 注入等组件扩展机制  
-- 🛡️ **错误边界**: 内置错误处理和恢复机制
-- 📊 **性能监控**: 支持组件加载和渲染性能追踪
-- 🔄 **热插拔**: 运行时动态注册和移除插件
-- 📝 **TypeScript**: 完整的类型定义支持
 
 ## 安装
 
@@ -20,220 +14,6 @@
 $ npm i @ice/mf-runtime --save
 ```
 
-## 插件机制
-
-从 v1.0.1 开始，`@ice/mf-runtime` 支持强大的插件机制，允许在运行时动态扩展微前端功能。
-
-### 插件类型
-
-#### 1. 标准 MF 插件 (FederationRuntimePlugin)
-标准 MF 插件使用原生的 `@module-federation/runtime` API 进行管理：
-
-```typescript
-import { registerPlugins } from '@module-federation/runtime';
-import type { FederationRuntimePlugin } from '@ice/mf-runtime';
-
-const mfPlugin: FederationRuntimePlugin = {
-  name: 'my-mf-plugin',
-  beforeRequest: (args) => {
-    console.log('模块请求前:', args);
-    return args;
-  },
-  onLoad: (args) => {
-    console.log('模块加载后:', args);
-    return args;
-  },
-  afterResolve: (args) => {
-    console.log('模块解析后:', args);
-    return args;
-  }
-};
-
-// 使用原生 API 注册标准 MF 插件
-registerPlugins([mfPlugin]);
-```
-
-#### 2. 增强插件 (EnhancedRuntimePlugin)
-增强插件使用新的 API 进行管理，提供组件级别的扩展能力：
-
-```typescript
-import { registerEnhancedPlugins } from '@ice/mf-runtime';
-import type { EnhancedRuntimePlugin } from '@ice/mf-runtime';
-
-const enhancedPlugin: EnhancedRuntimePlugin = {
-  name: 'my-enhanced-plugin',
-  
-  // 组件包装器 - 支持 HOC 模式
-  wrapComponent: (WrappedComponent, context) => {
-    return function Enhanced(props) {
-      console.log(`渲染组件: ${context.remoteName}/${context.moduleName}`);
-      return <WrappedComponent {...props} />;
-    };
-  },
-  
-  // 属性注入器
-  injectProps: (props, context) => {
-    return {
-      ...props,
-      injectedProp: `来自 ${context.remoteName} 的数据`
-    };
-  }
-};
-
-// 使用新的 API 注册增强插件
-registerEnhancedPlugins([enhancedPlugin]);
-```
-
-### 注册和使用插件
-
-#### 基本用法
-
-```typescript
-import { init, registerEnhancedPlugins, RemoteModule } from '@ice/mf-runtime';
-import { registerPlugins } from '@module-federation/runtime';
-
-// 注册标准 MF 插件
-registerPlugins([mfPlugin]);
-
-// 注册增强插件
-registerEnhancedPlugins([enhancedPlugin]);
-
-// 初始化运行时
-init({
-  remotes: [
-    {
-      name: 'remote-app',
-      entry: 'http://localhost:3001/remoteEntry.js'
-    }
-  ]
-});
-
-// 使用远程模块（插件会自动应用）
-function App() {
-  return (
-    <RemoteModule
-      scope="remote-app"
-      module="Button"
-      componentProps={{ text: '点击我' }}
-    />
-  );
-}
-```
-
-#### 使用示例插件包
-
-我们提供了一个示例插件包 `@ice/mf-plugin-example`，包含常用的插件：
-
-```bash
-npm install @ice/mf-plugin-example
-```
-
-```typescript
-import { registerPlugins } from '@module-federation/runtime';
-import { registerEnhancedPlugins } from '@ice/mf-runtime';
-import { 
-  errorBoundaryPlugin, 
-  commonPropsPlugin, 
-  developmentMFLoggingPlugin,
-  developmentEnhancedLoggingPlugin 
-} from '@ice/mf-plugin-example';
-
-// 注册标准 MF 插件
-registerPlugins([
-  developmentMFLoggingPlugin  // MF 日志插件
-]);
-
-// 注册增强插件
-registerEnhancedPlugins([
-  developmentEnhancedLoggingPlugin,  // 增强日志插件
-  errorBoundaryPlugin,               // 错误边界插件  
-  commonPropsPlugin                  // 通用属性注入插件
-]);
-```
-
-### 插件开发指南
-
-#### 错误边界插件示例
-
-```typescript
-import { ErrorBoundary } from 'react-error-boundary';
-
-const errorBoundaryPlugin: EnhancedRuntimePlugin = {
-  name: 'error-boundary',
-  wrapComponent: (WrappedComponent, context) => {
-    return function ErrorBoundaryWrapper(props) {
-      return (
-        <ErrorBoundary
-          fallback={<div>组件 {context.remoteName} 加载失败</div>}
-          onError={(error) => {
-            console.error(`组件错误:`, error);
-          }}
-        >
-          <WrappedComponent {...props} />
-        </ErrorBoundary>
-      );
-    };
-  }
-};
-```
-
-#### 属性注入插件示例
-
-```typescript
-const themePlugin: EnhancedRuntimePlugin = {
-  name: 'theme-injector',
-  injectProps: (props, context) => {
-    return {
-      ...props,
-      theme: {
-        mode: 'light',
-        primaryColor: '#1890ff'
-      }
-    };
-  }
-};
-```
-
-### 插件 API
-
-#### EnhancedPluginManager
-
-```typescript
-import { getEnhancedPluginManager } from '@ice/mf-runtime';
-
-const manager = getEnhancedPluginManager();
-
-// 注册增强插件
-manager.register(enhancedPlugin);
-
-// 获取插件信息
-const info = manager.getPluginInfo();
-// 返回: [{ name: 'plugin-name', hasWrapper: true, hasInjector: false }]
-
-// 移除插件
-manager.removePlugin('plugin-name');
-
-// 清空所有插件
-manager.clear();
-```
-
-#### React Hook
-
-```typescript
-import { useEnhancedPluginManager } from '@ice/mf-runtime';
-
-function MyComponent() {
-  const enhancedPluginManager = useEnhancedPluginManager();
-  
-  // 动态操作插件
-  const handleAddPlugin = () => {
-    enhancedPluginManager.register(newEnhancedPlugin);
-  };
-  
-  return <div>...</div>;
-}
-```
-
 ## 使用
 
 ### 1. 初始化配置

package/es2017/RemoteModule.js

@@ -2,13 +2,10 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 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';
 const useMountNode = (mountNodeConfig)=>{
     const [resolvedNode, setResolvedNode] = useState(undefined);
     // 解析各种类型的 mountNode
@@ -38,7 +35,6 @@ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponen
     var _microMod, _runtime, _runtime1;
     const microMod = getMicroMod(scope);
     const resolvedMountNode = useMountNode(mountNode);
-    const enhancedPluginManager = useEnhancedPluginManager();
     if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
         setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
     }
@@ -49,76 +45,35 @@ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponen
         if (!module || !scope) return null;
         return /*#__PURE__*/ React.lazy(async ()=>{
             var _typedRemoteModule;
-            // 使用标准 MF 加载逻辑，MF 插件自动执行
             const remoteModule = await loadRemote(`${scope}/${module}`);
-            // 使用清晰的对象结构检查是否为 Runtime Plugin 包装器
-            if (isRuntimePluginWrapper(remoteModule)) {
-                // 提取原始组件、运行时信息和 React 实例
-                const { originalComponent, runtimeInfo, reactInstances } = remoteModule();
-                const remoteReact = reactInstances.react;
-                const remoteReactDOM = reactInstances.reactDOM;
-                // 🔑 正确的 HOC 层级顺序：
-                // 1. 先应用增强插件（与其他情况保持一致）
-                const PluginWrappedComponent = enhancedPluginManager.wrapComponent(originalComponent, {
-                    remoteName: scope,
-                    moduleName: module,
-                    props: componentProps || {},
-                    React: remoteReact,
-                    ReactDOM: remoteReactDOM
-                });
-                // 2. 再应用 FallBack（处理不同 React 版本和 mountNode）
-                const FinalComponent = FallBack({
-                    Original: PluginWrappedComponent,
-                    remoteVersion: runtimeInfo.remoteVersion ? ()=>runtimeInfo.remoteVersion : undefined,
-                    hostVersion: runtimeInfo.hostVersion ? ()=>runtimeInfo.hostVersion : undefined,
-                    remoteReactDOM: runtimeInfo.remoteReactDOM,
-                    remoteReact: runtimeInfo.remoteReact,
-                    mountNode: resolvedMountNode,
-                    containerClassName: fallbackContainerClassName
-                });
+            // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
+            if (typeof remoteModule === 'function' && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
+                // 调用包装函数并传入 mountNode 和 containerClassName
+                const ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
                 return {
-                    default: FinalComponent
+                    default: ComponentFromPlugin
                 };
             }
             const typedRemoteModule = remoteModule;
-            let BaseComponent;
             if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
-                BaseComponent = remoteModule;
-            } else {
-                BaseComponent = typedRemoteModule.default;
+                return {
+                    default: remoteModule
+                };
             }
-            let FinalComponent;
-            // 如果需要 runtime 处理（不同 React 版本或 mountNode）
             if (runtime) {
                 const { react, reactDOM } = runtime;
-                // 先应用增强插件的组件包装器，然后传给 FallBack
-                const PluginWrappedComponent = enhancedPluginManager.wrapComponent(BaseComponent, {
-                    remoteName: scope,
-                    moduleName: module,
-                    props: componentProps || {},
-                    React: react,
-                    ReactDOM: reactDOM
-                });
-                FinalComponent = FallBack({
-                    Original: PluginWrappedComponent,
-                    remoteReact: ()=>react,
-                    remoteReactDOM: ()=>reactDOM,
-                    mountNode: resolvedMountNode,
-                    containerClassName: fallbackContainerClassName
-                });
-            } else {
-                // 没有 runtime 需求时，直接应用插件包装器
-                FinalComponent = enhancedPluginManager.wrapComponent(BaseComponent, {
-                    remoteName: scope,
-                    moduleName: module,
-                    props: componentProps || {},
-                    React: React,
-                    ReactDOM: ReactDOM
-                });
+                return {
+                    default: FallBack({
+                        Original: typedRemoteModule.default,
+                        remoteReact: ()=>react,
+                        remoteReactDOM: ()=>reactDOM,
+                        mountNode: resolvedMountNode,
+                        containerClassName: fallbackContainerClassName
+                    })
+                };
             }
-            console.log('FinalComponent', FinalComponent);
             return {
-                default: FinalComponent
+                default: typedRemoteModule.default
             };
         });
     }, [
@@ -127,18 +82,11 @@ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponen
         (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
         (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
         resolvedMountNode,
-        fallbackContainerClassName,
-        enhancedPluginManager,
-        componentProps
+        fallbackContainerClassName
     ]);
     const Loading = LoadingComponent || /*#__PURE__*/ React.createElement("div", null, "Loading...");
     const ErrorFallback = ({ error })=>ErrorComponent || /*#__PURE__*/ React.createElement("div", null, "远程模块加载失败: ", error.message);
     if (!Component) return Loading;
-    // 应用增强插件的属性注入
-    const injectedProps = enhancedPluginManager.injectProps(componentProps || {}, {
-        remoteName: scope,
-        moduleName: module
-    });
     return /*#__PURE__*/ React.createElement(ErrorBoundary, {
         resetKeys: [
             module,
@@ -150,8 +98,8 @@ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponen
     }, /*#__PURE__*/ React.createElement(React.Suspense, {
         fallback: Loading
     }, /*#__PURE__*/ React.createElement(Component, _object_spread({
-        ref
-    }, injectedProps), children)));
+        ref: ref
+    }, componentProps), children)));
 };
 // 使用 forwardRef 包装组件以支持 ref
 export const RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);

package/es2017/index.d.ts

@@ -2,7 +2,5 @@ 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,16 +1,14 @@
 import { getBasename } from '@ice/stark-app';
-import { registerPlugins as mfRegisterPlugins, init as mfInit } from '@module-federation/runtime';
+import { registerPlugins, 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);
-    mfRegisterPlugins([
+    registerPlugins([
         runtimePlugin()
     ]);
 }
@@ -36,6 +34,6 @@ export function initByMicroMods(microMods, hostName) {
     });
     init({
         remotes,
-        name: generateUniqueId() || hostName
+        name: hostName || generateUniqueId()
     }, microMods);
 }

package/es2017/runtime-plugin.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from './mf-global-store';
-import { createRuntimePluginWrapper } from './types';
+import { FallBack } from './FallBack';
 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,29 +10,28 @@ const loadRemotePackagedReactAndRender = async (args)=>{
     if (remoteVersion && hostVersion) {
         var _sharedOptions_find;
         const remoteReactDOM = await remoteInstance.loadShare('react-dom', {
-            resolver: (sharedOptions)=>(_sharedOptions_find = sharedOptions.find((option)=>option.version === remoteVersion)) !== null && _sharedOptions_find !== void 0 ? _sharedOptions_find : sharedOptions[0]
+            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', {
-            resolver: (sharedOptions)=>(_sharedOptions_find1 = sharedOptions.find((option)=>option.version === remoteVersion)) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0]
+            resolver: (sharedOptions)=>(_sharedOptions_find1 = sharedOptions.find((i)=>i.version === remoteVersion)) !== null && _sharedOptions_find1 !== void 0 ? _sharedOptions_find1 : sharedOptions[0]
         });
         if (!remoteReact || !remoteReactDOM) {
             return null;
         }
-        // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
-        // 让 RemoteModule 控制 HOC 的正确层级顺序
-        return createRuntimePluginWrapper(// 原始组件
-        args.exposeModule.default, // 运行时信息
-        {
-            remoteVersion,
-            hostVersion,
-            remoteReact: remoteReact,
-            remoteReactDOM: remoteReactDOM
-        }, // React 实例信息
-        {
-            react: remoteReact(),
-            reactDOM: remoteReactDOM()
-        });
+        // 返回一个接受 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;
     }
     return null;
 };
@@ -66,18 +65,17 @@ export const runtimePlugin = ()=>({
                         console.log('[runtime Plugin onLoad] use same external react');
                         return args;
                     }
-                    // 创建 Runtime Plugin 包装器对象，返回原始组件和运行时信息
-                    // 让 RemoteModule 控制 HOC 的正确层级顺序
-                    return createRuntimePluginWrapper(// 原始组件
-                    args.exposeModule.default, // 运行时信息
-                    {
-                        remoteReact: remoteReact,
-                        remoteReactDOM: remoteReactDOM
-                    }, // React 实例信息
-                    {
-                        react: remoteReact(),
-                        reactDOM: remoteReactDOM()
-                    });
+                    // 返回一个接受 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;
                 }
             }
             const fallBackRender = await loadRemotePackagedReactAndRender(args);

package/es2017/types.d.ts

@@ -1,6 +1,5 @@
 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;
@@ -19,69 +18,3 @@ 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,18 +1 @@
-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;
-} // 不再需要联合类型，两种插件分开管理
+export { };