@ice/mf-runtime 0.0.11-beta.1 → 0.0.11-beta.3

package/es2017/FallBack.d.ts

@@ -5,58 +5,8 @@ interface FallBackOptions {
     hostVersion?: () => string;
     remoteReactDOM: () => typeof import('react-dom');
     remoteReact: () => typeof import('react');
+    mountNode?: HTMLElement;
+    containerClassName?: string;
 }
-export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: FallBackOptions) => {
-    new (props: {}): {
-        containerRef: React.RefObject<HTMLDivElement>;
-        componentDidMount(): void;
-        componentDidUpdate(): void;
-        componentWillUnmount(): void;
-        mountOriginalComponent(shouldRender?: boolean): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: {}, context: any): {
-        containerRef: React.RefObject<HTMLDivElement>;
-        componentDidMount(): void;
-        componentDidUpdate(): void;
-        componentWillUnmount(): void;
-        mountOriginalComponent(shouldRender?: boolean): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    contextType?: React.Context<any>;
-};
+export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export {};

package/es2017/FallBack.js

@@ -1,17 +1,27 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from 'react';
 class Component extends React.Component {
     render() {
-        const { containerRef } = this.props;
+        const { containerRef, mountNode, containerClassName } = this.props;
+        // 如果提供了 mountNode，则不渲染任何内容（因为会直接挂载到指定节点）
+        // 否则渲染一个 div 作为容器
+        if (mountNode) {
+            return null;
+        }
         return /*#__PURE__*/ React.createElement("div", {
-            ref: containerRef
+            ref: containerRef,
+            className: containerClassName
         });
     }
 }
-export const FallBack = ({ Original, remoteReactDOM, remoteReact })=>{
+export const FallBack = ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName })=>{
     const ReactDOM = remoteReactDOM();
-    const React1 = remoteReact();
-    class WrappedComponent extends React1.Component {
+    const React = remoteReact();
+    // 使用 class 组件来避免 hooks 冲突问题
+    class WrappedComponent extends React.Component {
         componentDidMount() {
             this.mountOriginalComponent(true);
         }
@@ -19,24 +29,60 @@ export const FallBack = ({ Original, remoteReactDOM, remoteReact })=>{
             this.mountOriginalComponent();
         }
         componentWillUnmount() {
-            if (this.containerRef.current) {
-                ReactDOM.unmountComponentAtNode(this.containerRef.current);
+            const targetNode = this.getTargetNode();
+            if (targetNode) {
+                ReactDOM.unmountComponentAtNode(targetNode);
             }
         }
+        getTargetNode() {
+            // 如果指定了 mountNode，使用它；否则使用 containerRef.current
+            return mountNode || this.containerRef.current;
+        }
         mountOriginalComponent(shouldRender = false) {
-            const element = React1.createElement(Original, this.props);
-            const renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
-            renderMethod(element, this.containerRef.current);
+            const _this_props = this.props, { forwardedRef } = _this_props, otherProps = _object_without_properties(_this_props, [
+                "forwardedRef"
+            ]);
+            const element = React.createElement(Original, _object_spread_props(_object_spread({}, otherProps), {
+                ref: this.handleRef
+            }));
+            const targetNode = this.getTargetNode();
+            if (targetNode) {
+                const renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
+                renderMethod(element, targetNode);
+            }
         }
         render() {
-            return /*#__PURE__*/ React.createElement(Component, {
-                containerRef: this.containerRef
+            return React.createElement(Component, {
+                containerRef: this.containerRef,
+                mountNode: mountNode,
+                containerClassName: containerClassName
             });
         }
-        constructor(...args){
-            super(...args);
-            _define_property(this, "containerRef", React1.createRef());
+        constructor(props){
+            super(props);
+            _define_property(this, "containerRef", void 0);
+            _define_property(this, "originalComponentRef", null);
+            // 处理 ref 回调
+            _define_property(this, "handleRef", (instance)=>{
+                this.originalComponentRef = instance;
+                // 转发 ref 到外部
+                const { forwardedRef } = this.props;
+                if (forwardedRef) {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(instance);
+                    } else if (forwardedRef && typeof forwardedRef === 'object') {
+                        forwardedRef.current = instance;
+                    }
+                }
+            });
+            this.containerRef = React.createRef();
         }
     }
-    return WrappedComponent;
+    // 使用 forwardRef 包装 class 组件来支持 ref 转发
+    const ForwardedComponent = React.forwardRef((props, ref)=>{
+        return React.createElement(WrappedComponent, _object_spread_props(_object_spread({}, props), {
+            forwardedRef: ref
+        }));
+    });
+    return ForwardedComponent;
 };

package/es2017/RemoteModule.d.ts

@@ -14,6 +14,10 @@ interface RemoteModuleOptions<T = any> {
     }) => void;
     componentProps?: T;
     children?: React.ReactNode;
+    mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
+    fallbackContainerClassName?: string;
 }
-export declare const RemoteModule: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions<T>) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: <T extends object = any>(props: RemoteModuleOptions<T> & {
+    ref?: React.Ref<any>;
+}) => React.ReactElement | null;
 export {};

package/es2017/RemoteModule.js

@@ -1,13 +1,40 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { loadRemote } from '@module-federation/runtime';
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState, useLayoutEffect, forwardRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FallBack } from './FallBack';
 import { setFederatedModulePublicPath } from './set-public-path';
 import { getMicroMod } from './mf-global-store';
-export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
+const useMountNode = (mountNodeConfig)=>{
+    const [resolvedNode, setResolvedNode] = useState(undefined);
+    // 解析各种类型的 mountNode
+    useLayoutEffect(()=>{
+        if (!mountNodeConfig) {
+            setResolvedNode(undefined);
+            return;
+        }
+        let node = null;
+        if (typeof mountNodeConfig === 'string') {
+            node = document.querySelector(mountNodeConfig);
+        } else if (typeof mountNodeConfig === 'function') {
+            node = mountNodeConfig();
+        } else if (mountNodeConfig instanceof HTMLElement) {
+            node = mountNodeConfig;
+        } else if (mountNodeConfig && 'current' in mountNodeConfig) {
+            // 处理 RefObject
+            node = mountNodeConfig.current;
+        }
+        setResolvedNode(node || undefined);
+    }, [
+        mountNodeConfig
+    ]);
+    return resolvedNode;
+};
+const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null, mountNode, fallbackContainerClassName }, ref)=>{
     var _microMod, _runtime, _runtime1;
     const microMod = getMicroMod(scope);
+    const resolvedMountNode = useMountNode(mountNode);
     if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
         setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
     }
@@ -17,9 +44,18 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
     const Component = useMemo(()=>{
         if (!module || !scope) return null;
         return /*#__PURE__*/ React.lazy(async ()=>{
-            var _remoteModule;
+            var _typedRemoteModule;
             const remoteModule = await loadRemote(`${scope}/${module}`);
-            if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
+            // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
+            if (typeof remoteModule === 'function' && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
+                // 调用包装函数并传入 mountNode 和 containerClassName
+                const ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
+                return {
+                    default: ComponentFromPlugin
+                };
+            }
+            const typedRemoteModule = remoteModule;
+            if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
                 return {
                     default: remoteModule
                 };
@@ -28,33 +64,37 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
                 const { react, reactDOM } = runtime;
                 return {
                     default: FallBack({
-                        Original: remoteModule.default,
+                        Original: typedRemoteModule.default,
                         remoteReact: ()=>react,
-                        remoteReactDOM: ()=>reactDOM
+                        remoteReactDOM: ()=>reactDOM,
+                        mountNode: resolvedMountNode,
+                        containerClassName: fallbackContainerClassName
                     })
                 };
             }
             return {
-                default: remoteModule.default
+                default: typedRemoteModule.default
             };
         });
     }, [
         module,
         scope,
         (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
-        (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM
+        (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
+        resolvedMountNode,
+        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;
     return /*#__PURE__*/ React.createElement(ErrorBoundary, {
-        resetKeys: [
-            module,
-            scope
-        ],
         FallbackComponent: ErrorFallback,
         onError: onError
     }, /*#__PURE__*/ React.createElement(React.Suspense, {
         fallback: Loading
-    }, /*#__PURE__*/ React.createElement(Component, componentProps, children)));
+    }, /*#__PURE__*/ React.createElement(Component, _object_spread({
+        ref: ref
+    }, componentProps), children)));
 };
+// 使用 forwardRef 包装组件以支持 ref
+export const RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);

package/es2017/runtime-plugin.js

@@ -19,13 +19,19 @@ const loadRemotePackagedReactAndRender = async (args)=>{
             return null;
         }
         const res = (await import('./FallBack')).FallBack;
-        return ()=>res({
+        // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
+        const wrappedRender = (mountNode, containerClassName)=>res({
                 Original: args.exposeModule.default,
                 remoteVersion: ()=>remoteVersion,
                 hostVersion: ()=>hostVersion,
                 remoteReactDOM: remoteReactDOM,
-                remoteReact: remoteReact
+                remoteReact: remoteReact,
+                mountNode,
+                containerClassName
             });
+        // 添加标记，用于在 RemoteModule 中识别
+        wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
+        return wrappedRender;
     }
     return null;
 };
@@ -61,11 +67,17 @@ export const runtimePlugin = ()=>({
                     }
                     // 当 external 版本不一致，走降级渲染
                     const res = (await import('./FallBack')).FallBack;
-                    return ()=>res({
+                    // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
+                    const wrappedRender = (mountNode, containerClassName)=>res({
                             Original: args.exposeModule.default,
                             remoteReactDOM: remoteReactDOM,
-                            remoteReact: remoteReact
+                            remoteReact: remoteReact,
+                            mountNode,
+                            containerClassName
                         });
+                    // 添加标记，用于在 RemoteModule 中识别
+                    wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
+                    return wrappedRender;
                 }
             }
             const fallBackRender = await loadRemotePackagedReactAndRender(args);

package/esm/FallBack.d.ts

@@ -5,58 +5,8 @@ interface FallBackOptions {
     hostVersion?: () => string;
     remoteReactDOM: () => typeof import('react-dom');
     remoteReact: () => typeof import('react');
+    mountNode?: HTMLElement;
+    containerClassName?: string;
 }
-export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: FallBackOptions) => {
-    new (props: {}): {
-        containerRef: React.RefObject<HTMLDivElement>;
-        componentDidMount(): void;
-        componentDidUpdate(): void;
-        componentWillUnmount(): void;
-        mountOriginalComponent(shouldRender?: boolean): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: {}, context: any): {
-        containerRef: React.RefObject<HTMLDivElement>;
-        componentDidMount(): void;
-        componentDidUpdate(): void;
-        componentWillUnmount(): void;
-        mountOriginalComponent(shouldRender?: boolean): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    contextType?: React.Context<any>;
-};
+export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export {};

package/esm/FallBack.js

@@ -3,6 +3,9 @@ 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 _inherits } from "@swc/helpers/_/_inherits";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _create_super } from "@swc/helpers/_/_create_super";
 import * as React from "react";
 var Component = /*#__PURE__*/ function(_React_Component) {
@@ -17,9 +20,15 @@ var Component = /*#__PURE__*/ function(_React_Component) {
         {
             key: "render",
             value: function render() {
-                var containerRef = this.props.containerRef;
+                var _this_props = this.props, containerRef = _this_props.containerRef, mountNode = _this_props.mountNode, containerClassName = _this_props.containerClassName;
+                // 如果提供了 mountNode，则不渲染任何内容（因为会直接挂载到指定节点）
+                // 否则渲染一个 div 作为容器
+                if (mountNode) {
+                    return null;
+                }
                 return /*#__PURE__*/ React.createElement("div", {
-                    ref: containerRef
+                    ref: containerRef,
+                    className: containerClassName
                 });
             }
         }
@@ -27,18 +36,34 @@ var Component = /*#__PURE__*/ function(_React_Component) {
     return Component;
 }(React.Component);
 export var FallBack = function(param) {
-    var Original = param.Original, remoteReactDOM = param.remoteReactDOM, remoteReact = param.remoteReact;
+    var Original = param.Original, remoteReactDOM = param.remoteReactDOM, remoteReact = param.remoteReact, mountNode = param.mountNode, containerClassName = param.containerClassName;
     var ReactDOM = remoteReactDOM();
     var _$React = remoteReact();
+    // 使用 class 组件来避免 hooks 冲突问题
     var WrappedComponent = /*#__PURE__*/ function(_React_Component) {
         "use strict";
         _inherits(WrappedComponent, _React_Component);
         var _super = _create_super(WrappedComponent);
-        function WrappedComponent() {
+        function WrappedComponent(props) {
             _class_call_check(this, WrappedComponent);
             var _this;
-            _this = _super.apply(this, arguments);
-            _define_property(_assert_this_initialized(_this), "containerRef", _$React.createRef());
+            _this = _super.call(this, props);
+            _define_property(_assert_this_initialized(_this), "containerRef", void 0);
+            _define_property(_assert_this_initialized(_this), "originalComponentRef", null);
+            // 处理 ref 回调
+            _define_property(_assert_this_initialized(_this), "handleRef", function(instance) {
+                _this.originalComponentRef = instance;
+                // 转发 ref 到外部
+                var forwardedRef = _this.props.forwardedRef;
+                if (forwardedRef) {
+                    if (typeof forwardedRef === "function") {
+                        forwardedRef(instance);
+                    } else if (forwardedRef && typeof forwardedRef === "object") {
+                        forwardedRef.current = instance;
+                    }
+                }
+            });
+            _this.containerRef = _$React.createRef();
             return _this;
         }
         _create_class(WrappedComponent, [
@@ -57,30 +82,54 @@ export var FallBack = function(param) {
             {
                 key: "componentWillUnmount",
                 value: function componentWillUnmount() {
-                    if (this.containerRef.current) {
-                        ReactDOM.unmountComponentAtNode(this.containerRef.current);
+                    var targetNode = this.getTargetNode();
+                    if (targetNode) {
+                        ReactDOM.unmountComponentAtNode(targetNode);
                     }
                 }
             },
+            {
+                key: "getTargetNode",
+                value: function getTargetNode() {
+                    // 如果指定了 mountNode，使用它；否则使用 containerRef.current
+                    return mountNode || this.containerRef.current;
+                }
+            },
             {
                 key: "mountOriginalComponent",
                 value: function mountOriginalComponent() {
                     var shouldRender = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
-                    var element = _$React.createElement(Original, this.props);
-                    var renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
-                    renderMethod(element, this.containerRef.current);
+                    var _this_props = this.props, forwardedRef = _this_props.forwardedRef, otherProps = _object_without_properties(_this_props, [
+                        "forwardedRef"
+                    ]);
+                    var element = _$React.createElement(Original, _object_spread_props(_object_spread({}, otherProps), {
+                        ref: this.handleRef
+                    }));
+                    var targetNode = this.getTargetNode();
+                    if (targetNode) {
+                        var renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
+                        renderMethod(element, targetNode);
+                    }
                 }
             },
             {
                 key: "render",
                 value: function render() {
-                    return /*#__PURE__*/ React.createElement(Component, {
-                        containerRef: this.containerRef
+                    return _$React.createElement(Component, {
+                        containerRef: this.containerRef,
+                        mountNode: mountNode,
+                        containerClassName: containerClassName
                     });
                 }
             }
         ]);
         return WrappedComponent;
     }(_$React.Component);
-    return WrappedComponent;
+    // 使用 forwardRef 包装 class 组件来支持 ref 转发
+    var ForwardedComponent = _$React.forwardRef(function(props, ref) {
+        return _$React.createElement(WrappedComponent, _object_spread_props(_object_spread({}, props), {
+            forwardedRef: ref
+        }));
+    });
+    return ForwardedComponent;
 };

package/esm/RemoteModule.d.ts

@@ -14,6 +14,10 @@ interface RemoteModuleOptions<T = any> {
     }) => void;
     componentProps?: T;
     children?: React.ReactNode;
+    mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
+    fallbackContainerClassName?: string;
 }
-export declare const RemoteModule: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, }: RemoteModuleOptions<T>) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const RemoteModule: <T extends object = any>(props: RemoteModuleOptions<T> & {
+    ref?: React.Ref<any>;
+}) => React.ReactElement | null;
 export {};

package/esm/RemoteModule.js

@@ -1,16 +1,45 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { loadRemote } from "@module-federation/runtime";
 import * as React from "react";
-import { useMemo } from "react";
+import { useMemo, useState, useLayoutEffect, forwardRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { FallBack } from "./FallBack";
 import { setFederatedModulePublicPath } from "./set-public-path";
 import { getMicroMod } from "./mf-global-store";
-export var RemoteModule = function(param) {
-    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent, ErrorComponent = param.ErrorComponent, onError = param.onError, _param_componentProps = param.componentProps, componentProps = _param_componentProps === void 0 ? {} : _param_componentProps, _param_children = param.children, children = _param_children === void 0 ? null : _param_children;
+var useMountNode = function(mountNodeConfig) {
+    var _useState = _sliced_to_array(useState(undefined), 2), resolvedNode = _useState[0], setResolvedNode = _useState[1];
+    // 解析各种类型的 mountNode
+    useLayoutEffect(function() {
+        if (!mountNodeConfig) {
+            setResolvedNode(undefined);
+            return;
+        }
+        var node = null;
+        if (typeof mountNodeConfig === "string") {
+            node = document.querySelector(mountNodeConfig);
+        } else if (typeof mountNodeConfig === "function") {
+            node = mountNodeConfig();
+        } else if (_instanceof(mountNodeConfig, HTMLElement)) {
+            node = mountNodeConfig;
+        } else if (mountNodeConfig && "current" in mountNodeConfig) {
+            // 处理 RefObject
+            node = mountNodeConfig.current;
+        }
+        setResolvedNode(node || undefined);
+    }, [
+        mountNodeConfig
+    ]);
+    return resolvedNode;
+};
+var RemoteModuleInner = function(param, ref) {
+    var module = param.module, scope = param.scope, runtime = param.runtime, publicPath = param.publicPath, LoadingComponent = param.LoadingComponent, ErrorComponent = param.ErrorComponent, onError = param.onError, _param_componentProps = param.componentProps, componentProps = _param_componentProps === void 0 ? {} : _param_componentProps, _param_children = param.children, children = _param_children === void 0 ? null : _param_children, mountNode = param.mountNode, fallbackContainerClassName = param.fallbackContainerClassName;
     var _microMod, _runtime, _runtime1;
     var microMod = getMicroMod(scope);
+    var resolvedMountNode = useMountNode(mountNode);
     if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
         setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
     }
@@ -20,7 +49,7 @@ export var RemoteModule = function(param) {
     var Component = useMemo(function() {
         if (!module || !scope) return null;
         return /*#__PURE__*/ React.lazy(/*#__PURE__*/ _async_to_generator(function() {
-            var _remoteModule, remoteModule, react, reactDOM;
+            var _typedRemoteModule, remoteModule, ComponentFromPlugin, typedRemoteModule, react, reactDOM;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -30,7 +59,18 @@ export var RemoteModule = function(param) {
                         ];
                     case 1:
                         remoteModule = _state.sent();
-                        if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
+                        // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
+                        if (typeof remoteModule === "function" && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
+                            ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
+                            return [
+                                2,
+                                {
+                                    default: ComponentFromPlugin
+                                }
+                            ];
+                        }
+                        typedRemoteModule = remoteModule;
+                        if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
                             return [
                                 2,
                                 {
@@ -44,13 +84,15 @@ export var RemoteModule = function(param) {
                                 2,
                                 {
                                     default: FallBack({
-                                        Original: remoteModule.default,
+                                        Original: typedRemoteModule.default,
                                         remoteReact: function() {
                                             return react;
                                         },
                                         remoteReactDOM: function() {
                                             return reactDOM;
-                                        }
+                                        },
+                                        mountNode: resolvedMountNode,
+                                        containerClassName: fallbackContainerClassName
                                     })
                                 }
                             ];
@@ -58,7 +100,7 @@ export var RemoteModule = function(param) {
                         return [
                             2,
                             {
-                                default: remoteModule.default
+                                default: typedRemoteModule.default
                             }
                         ];
                 }
@@ -68,7 +110,9 @@ export var RemoteModule = function(param) {
         module,
         scope,
         (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
-        (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM
+        (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
+        resolvedMountNode,
+        fallbackContainerClassName
     ]);
     var Loading = LoadingComponent || /*#__PURE__*/ React.createElement("div", null, "Loading...");
     var ErrorFallback = function(param) {
@@ -77,13 +121,13 @@ export var RemoteModule = function(param) {
     };
     if (!Component) return Loading;
     return /*#__PURE__*/ React.createElement(ErrorBoundary, {
-        resetKeys: [
-            module,
-            scope
-        ],
         FallbackComponent: ErrorFallback,
         onError: onError
     }, /*#__PURE__*/ React.createElement(React.Suspense, {
         fallback: Loading
-    }, /*#__PURE__*/ React.createElement(Component, componentProps, children)));
+    }, /*#__PURE__*/ React.createElement(Component, _object_spread({
+        ref: ref
+    }, componentProps), children)));
 };
+// 使用 forwardRef 包装组件以支持 ref
+export var RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);

package/esm/runtime-plugin.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from "./mf-global-store";
 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, res;
+        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, res, wrappedRender;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
@@ -54,21 +54,26 @@ var loadRemotePackagedReactAndRender = function() {
                     ];
                 case 3:
                     res = _state.sent().FallBack;
+                    wrappedRender = function(mountNode, containerClassName) {
+                        return res({
+                            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;
                     return [
                         2,
-                        function() {
-                            return res({
-                                Original: args.exposeModule.default,
-                                remoteVersion: function() {
-                                    return remoteVersion;
-                                },
-                                hostVersion: function() {
-                                    return hostVersion;
-                                },
-                                remoteReactDOM: remoteReactDOM,
-                                remoteReact: remoteReact
-                            });
-                        }
+                        wrappedRender
                     ];
                 case 4:
                     return [
@@ -99,7 +104,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, res, 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, res, wrappedRender, fallBackRender;
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -136,15 +141,20 @@ export var runtimePlugin = function() {
                             ];
                         case 1:
                             res = _state.sent().FallBack;
+                            wrappedRender = function(mountNode, containerClassName) {
+                                return res({
+                                    Original: args.exposeModule.default,
+                                    remoteReactDOM: remoteReactDOM,
+                                    remoteReact: remoteReact,
+                                    mountNode: mountNode,
+                                    containerClassName: containerClassName
+                                });
+                            };
+                            // 添加标记，用于在 RemoteModule 中识别
+                            wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
                             return [
                                 2,
-                                function() {
-                                    return res({
-                                        Original: args.exposeModule.default,
-                                        remoteReactDOM: remoteReactDOM,
-                                        remoteReact: remoteReact
-                                    });
-                                }
+                                wrappedRender
                             ];
                         case 2:
                             return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/mf-runtime",
-  "version": "0.0.11-beta.1",
+  "version": "0.0.11-beta.3",
   "description": "ice mf runtime",
   "files": [
     "esm",