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

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,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "1.0.2",
+  "version": "1.0.3-beta.1",
   "description": "ice mf runtime",
   "files": [
     "esm",
@@ -34,6 +34,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 +60,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",