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

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

@@ -6,7 +6,6 @@ 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';
 const useMountNode = (mountNodeConfig)=>{
     const [resolvedNode, setResolvedNode] = useState(undefined);
     // 解析各种类型的 mountNode
@@ -36,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);
     }
@@ -47,7 +45,6 @@ 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 (typeof remoteModule === 'function' && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
@@ -58,34 +55,25 @@ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponen
                 };
             }
             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
+                };
             }
-            // 先应用增强插件的组件包装器
-            const WrappedComponent = enhancedPluginManager.wrapComponent(BaseComponent, {
-                remoteName: scope,
-                moduleName: module,
-                props: componentProps || {}
-            });
-            // 然后处理 runtime 和 mountNode（如果需要）
-            let FinalComponent;
             if (runtime) {
                 const { react, reactDOM } = runtime;
-                FinalComponent = FallBack({
-                    Original: WrappedComponent,
-                    remoteReact: ()=>react,
-                    remoteReactDOM: ()=>reactDOM,
-                    mountNode: resolvedMountNode,
-                    containerClassName: fallbackContainerClassName
-                });
-            } else {
-                FinalComponent = WrappedComponent;
+                return {
+                    default: FallBack({
+                        Original: typedRemoteModule.default,
+                        remoteReact: ()=>react,
+                        remoteReactDOM: ()=>reactDOM,
+                        mountNode: resolvedMountNode,
+                        containerClassName: fallbackContainerClassName
+                    })
+                };
             }
             return {
-                default: FinalComponent
+                default: typedRemoteModule.default
             };
         });
     }, [
@@ -94,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,
@@ -117,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()
     ]);
 }

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,29 +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>;
-}
-export interface InjectionContext {
-    remoteName: string;
-    moduleName: string;
-}
-export interface ComponentWrapper {
-    (WrappedComponent: React.ComponentType<any>, context: WrapperContext): React.ComponentType<any>;
-}
-export interface PropInjector {
-    (props: Record<string, any>, context: InjectionContext): Record<string, any>;
-}
-export interface EnhancedRuntimePlugin {
-    name: string;
-    wrapComponent?: ComponentWrapper;
-    injectProps?: PropInjector;
-}

package/es2017/types.js

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

package/esm/RemoteModule.js

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

package/esm/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/esm/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()
     ]);
 }

package/esm/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,29 +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>;
-}
-export interface InjectionContext {
-    remoteName: string;
-    moduleName: string;
-}
-export interface ComponentWrapper {
-    (WrappedComponent: React.ComponentType<any>, context: WrapperContext): React.ComponentType<any>;
-}
-export interface PropInjector {
-    (props: Record<string, any>, context: InjectionContext): Record<string, any>;
-}
-export interface EnhancedRuntimePlugin {
-    name: string;
-    wrapComponent?: ComponentWrapper;
-    injectProps?: PropInjector;
-}

package/esm/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "1.0.2-beta.1",
+  "version": "1.0.2-beta.2",
   "description": "ice mf runtime",
   "files": [
     "esm",
@@ -34,9 +34,6 @@
     "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}\"",
@@ -60,19 +57,12 @@
     "@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",
-    "typescript": "^5.0.0",
-    "vitest": "^1.0.0"
+    "stylelint": "^15.0.0"
   },
   "publishConfig": {
     "access": "public",

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

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