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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es2017/FallBack.d.ts +5 -1
  2. package/es2017/FallBack.js +24 -8
  3. package/es2017/RemoteModule.d.ts +3 -1
  4. package/es2017/RemoteModule.js +48 -12
  5. package/es2017/runtime-plugin.js +16 -4
  6. package/esm/FallBack.d.ts +5 -1
  7. package/esm/FallBack.js +27 -8
  8. package/esm/RemoteModule.d.ts +3 -1
  9. package/esm/RemoteModule.js +52 -12
  10. package/esm/runtime-plugin.js +32 -22
  11. package/package.json +1 -1
package/es2017/FallBack.d.ts CHANGED
@@ -5,13 +5,16 @@ interface FallBackOptions {
5
5
  hostVersion?: () => string;
6
6
  remoteReactDOM: () => typeof import('react-dom');
7
7
  remoteReact: () => typeof import('react');
8
+ mountNode?: HTMLElement;
9
+ containerClassName?: string;
8
10
  }
9
- export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: FallBackOptions) => {
11
+ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => {
10
12
  new (props: {}): {
11
13
  containerRef: React.RefObject<HTMLDivElement>;
12
14
  componentDidMount(): void;
13
15
  componentDidUpdate(): void;
14
16
  componentWillUnmount(): void;
17
+ getTargetNode(): HTMLElement | null;
15
18
  mountOriginalComponent(shouldRender?: boolean): void;
16
19
  render(): React.JSX.Element;
17
20
  context: unknown;
@@ -37,6 +40,7 @@ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: Fall
37
40
  componentDidMount(): void;
38
41
  componentDidUpdate(): void;
39
42
  componentWillUnmount(): void;
43
+ getTargetNode(): HTMLElement | null;
40
44
  mountOriginalComponent(shouldRender?: boolean): void;
41
45
  render(): React.JSX.Element;
42
46
  context: unknown;
package/es2017/FallBack.js CHANGED
@@ -2,13 +2,19 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
2
2
  import * as React from 'react';
3
3
  class Component extends React.Component {
4
4
  render() {
5
- const { containerRef } = this.props;
5
+ const { containerRef, mountNode, containerClassName } = this.props;
6
+ // 如果提供了 mountNode，则不渲染任何内容（因为会直接挂载到指定节点）
7
+ // 否则渲染一个 div 作为容器
8
+ if (mountNode) {
9
+ return null;
10
+ }
6
11
  return /*#__PURE__*/ React.createElement("div", {
7
- ref: containerRef
12
+ ref: containerRef,
13
+ className: containerClassName
8
14
  });
9
15
  }
10
16
  }
11
- export const FallBack = ({ Original, remoteReactDOM, remoteReact })=>{
17
+ export const FallBack = ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName })=>{
12
18
  const ReactDOM = remoteReactDOM();
13
19
  const React1 = remoteReact();
14
20
  class WrappedComponent extends React1.Component {
@@ -19,18 +25,28 @@ export const FallBack = ({ Original, remoteReactDOM, remoteReact })=>{
19
25
  this.mountOriginalComponent();
20
26
  }
21
27
  componentWillUnmount() {
22
- if (this.containerRef.current) {
23
- ReactDOM.unmountComponentAtNode(this.containerRef.current);
28
+ const targetNode = this.getTargetNode();
29
+ if (targetNode) {
30
+ ReactDOM.unmountComponentAtNode(targetNode);
24
31
  }
25
32
  }
33
+ getTargetNode() {
34
+ // 如果指定了 mountNode，使用它；否则使用 containerRef.current
35
+ return mountNode || this.containerRef.current;
36
+ }
26
37
  mountOriginalComponent(shouldRender = false) {
27
38
  const element = React1.createElement(Original, this.props);
28
- const renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
29
- renderMethod(element, this.containerRef.current);
39
+ const targetNode = this.getTargetNode();
40
+ if (targetNode) {
41
+ const renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
42
+ renderMethod(element, targetNode);
43
+ }
30
44
  }
31
45
  render() {
32
46
  return /*#__PURE__*/ React.createElement(Component, {
33
- containerRef: this.containerRef
47
+ containerRef: this.containerRef,
48
+ mountNode: mountNode,
49
+ containerClassName: containerClassName
34
50
  });
35
51
  }
36
52
  constructor(...args){
package/es2017/RemoteModule.d.ts CHANGED
@@ -14,6 +14,8 @@ interface RemoteModuleOptions<T = any> {
14
14
  }) => void;
15
15
  componentProps?: T;
16
16
  children?: React.ReactNode;
17
+ mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
18
+ fallbackContainerClassName?: string;
17
19
  }
18
- 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;
20
+ export declare const RemoteModule: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, mountNode, fallbackContainerClassName, }: RemoteModuleOptions<T>) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
19
21
  export {};
package/es2017/RemoteModule.js CHANGED
@@ -1,25 +1,61 @@
1
1
  import { loadRemote } from '@module-federation/runtime';
2
2
  import * as React from 'react';
3
- import { useMemo } from 'react';
3
+ import { useMemo, useState, useLayoutEffect } from 'react';
4
4
  import { ErrorBoundary } from 'react-error-boundary';
5
5
  import { FallBack } from './FallBack';
6
6
  import { setFederatedModulePublicPath } from './set-public-path';
7
7
  import { getMicroMod } from './mf-global-store';
8
- export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
8
+ const useMountNode = (mountNodeConfig)=>{
9
+ const [resolvedNode, setResolvedNode] = useState(undefined);
10
+ // 解析各种类型的 mountNode
11
+ useLayoutEffect(()=>{
12
+ if (!mountNodeConfig) {
13
+ setResolvedNode(undefined);
14
+ return;
15
+ }
16
+ let node = null;
17
+ if (typeof mountNodeConfig === 'string') {
18
+ node = document.querySelector(mountNodeConfig);
19
+ } else if (typeof mountNodeConfig === 'function') {
20
+ node = mountNodeConfig();
21
+ } else if (mountNodeConfig instanceof HTMLElement) {
22
+ node = mountNodeConfig;
23
+ } else if (mountNodeConfig && 'current' in mountNodeConfig) {
24
+ // 处理 RefObject
25
+ node = mountNodeConfig.current;
26
+ }
27
+ setResolvedNode(node || undefined);
28
+ }, [
29
+ mountNodeConfig
30
+ ]);
31
+ return resolvedNode;
32
+ };
33
+ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null, mountNode, fallbackContainerClassName })=>{
9
34
  var _microMod, _runtime, _runtime1;
10
35
  const microMod = getMicroMod(scope);
36
+ const resolvedMountNode = useMountNode(mountNode);
11
37
  if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
12
38
  setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
13
39
  }
14
40
  if (publicPath) {
15
41
  setFederatedModulePublicPath(scope, publicPath);
16
42
  }
43
+ console.log('mountNode:', mountNode, 'resolvedMountNode:', resolvedMountNode);
17
44
  const Component = useMemo(()=>{
18
45
  if (!module || !scope) return null;
19
46
  return /*#__PURE__*/ React.lazy(async ()=>{
20
- var _remoteModule;
47
+ var _typedRemoteModule;
21
48
  const remoteModule = await loadRemote(`${scope}/${module}`);
22
- if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
49
+ // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
50
+ if (typeof remoteModule === 'function' && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
51
+ // 调用包装函数并传入 mountNode 和 containerClassName
52
+ const ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
53
+ return {
54
+ default: ComponentFromPlugin
55
+ };
56
+ }
57
+ const typedRemoteModule = remoteModule;
58
+ if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
23
59
  return {
24
60
  default: remoteModule
25
61
  };
@@ -28,30 +64,30 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
28
64
  const { react, reactDOM } = runtime;
29
65
  return {
30
66
  default: FallBack({
31
- Original: remoteModule.default,
67
+ Original: typedRemoteModule.default,
32
68
  remoteReact: ()=>react,
33
- remoteReactDOM: ()=>reactDOM
69
+ remoteReactDOM: ()=>reactDOM,
70
+ mountNode: resolvedMountNode,
71
+ containerClassName: fallbackContainerClassName
34
72
  })
35
73
  };
36
74
  }
37
75
  return {
38
- default: remoteModule.default
76
+ default: typedRemoteModule.default
39
77
  };
40
78
  });
41
79
  }, [
42
80
  module,
43
81
  scope,
44
82
  (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
45
- (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM
83
+ (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
84
+ resolvedMountNode,
85
+ fallbackContainerClassName
46
86
  ]);
47
87
  const Loading = LoadingComponent || /*#__PURE__*/ React.createElement("div", null, "Loading...");
48
88
  const ErrorFallback = ({ error })=>ErrorComponent || /*#__PURE__*/ React.createElement("div", null, "远程模块加载失败: ", error.message);
49
89
  if (!Component) return Loading;
50
90
  return /*#__PURE__*/ React.createElement(ErrorBoundary, {
51
- resetKeys: [
52
- module,
53
- scope
54
- ],
55
91
  FallbackComponent: ErrorFallback,
56
92
  onError: onError
57
93
  }, /*#__PURE__*/ React.createElement(React.Suspense, {
package/es2017/runtime-plugin.js CHANGED
@@ -19,13 +19,19 @@ const loadRemotePackagedReactAndRender = async (args)=>{
19
19
  return null;
20
20
  }
21
21
  const res = (await import('./FallBack')).FallBack;
22
- return ()=>res({
22
+ // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
23
+ const wrappedRender = (mountNode, containerClassName)=>res({
23
24
  Original: args.exposeModule.default,
24
25
  remoteVersion: ()=>remoteVersion,
25
26
  hostVersion: ()=>hostVersion,
26
27
  remoteReactDOM: remoteReactDOM,
27
- remoteReact: remoteReact
28
+ remoteReact: remoteReact,
29
+ mountNode,
30
+ containerClassName
28
31
  });
32
+ // 添加标记，用于在 RemoteModule 中识别
33
+ wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
34
+ return wrappedRender;
29
35
  }
30
36
  return null;
31
37
  };
@@ -61,11 +67,17 @@ export const runtimePlugin = ()=>({
61
67
  }
62
68
  // 当 external 版本不一致，走降级渲染
63
69
  const res = (await import('./FallBack')).FallBack;
64
- return ()=>res({
70
+ // 返回一个接受 mountNode 和 containerClassName 参数的函数，并添加标记
71
+ const wrappedRender = (mountNode, containerClassName)=>res({
65
72
  Original: args.exposeModule.default,
66
73
  remoteReactDOM: remoteReactDOM,
67
- remoteReact: remoteReact
74
+ remoteReact: remoteReact,
75
+ mountNode,
76
+ containerClassName
68
77
  });
78
+ // 添加标记，用于在 RemoteModule 中识别
79
+ wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
80
+ return wrappedRender;
69
81
  }
70
82
  }
71
83
  const fallBackRender = await loadRemotePackagedReactAndRender(args);
package/esm/FallBack.d.ts CHANGED
@@ -5,13 +5,16 @@ interface FallBackOptions {
5
5
  hostVersion?: () => string;
6
6
  remoteReactDOM: () => typeof import('react-dom');
7
7
  remoteReact: () => typeof import('react');
8
+ mountNode?: HTMLElement;
9
+ containerClassName?: string;
8
10
  }
9
- export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: FallBackOptions) => {
11
+ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => {
10
12
  new (props: {}): {
11
13
  containerRef: React.RefObject<HTMLDivElement>;
12
14
  componentDidMount(): void;
13
15
  componentDidUpdate(): void;
14
16
  componentWillUnmount(): void;
17
+ getTargetNode(): HTMLElement | null;
15
18
  mountOriginalComponent(shouldRender?: boolean): void;
16
19
  render(): React.JSX.Element;
17
20
  context: unknown;
@@ -37,6 +40,7 @@ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, }: Fall
37
40
  componentDidMount(): void;
38
41
  componentDidUpdate(): void;
39
42
  componentWillUnmount(): void;
43
+ getTargetNode(): HTMLElement | null;
40
44
  mountOriginalComponent(shouldRender?: boolean): void;
41
45
  render(): React.JSX.Element;
42
46
  context: unknown;
package/esm/FallBack.js CHANGED
@@ -17,9 +17,15 @@ var Component = /*#__PURE__*/ function(_React_Component) {
17
17
  {
18
18
  key: "render",
19
19
  value: function render() {
20
- var containerRef = this.props.containerRef;
20
+ var _this_props = this.props, containerRef = _this_props.containerRef, mountNode = _this_props.mountNode, containerClassName = _this_props.containerClassName;
21
+ // 如果提供了 mountNode，则不渲染任何内容（因为会直接挂载到指定节点）
22
+ // 否则渲染一个 div 作为容器
23
+ if (mountNode) {
24
+ return null;
25
+ }
21
26
  return /*#__PURE__*/ React.createElement("div", {
22
- ref: containerRef
27
+ ref: containerRef,
28
+ className: containerClassName
23
29
  });
24
30
  }
25
31
  }
@@ -27,7 +33,7 @@ var Component = /*#__PURE__*/ function(_React_Component) {
27
33
  return Component;
28
34
  }(React.Component);
29
35
  export var FallBack = function(param) {
30
- var Original = param.Original, remoteReactDOM = param.remoteReactDOM, remoteReact = param.remoteReact;
36
+ var Original = param.Original, remoteReactDOM = param.remoteReactDOM, remoteReact = param.remoteReact, mountNode = param.mountNode, containerClassName = param.containerClassName;
31
37
  var ReactDOM = remoteReactDOM();
32
38
  var _$React = remoteReact();
33
39
  var WrappedComponent = /*#__PURE__*/ function(_React_Component) {
@@ -57,25 +63,38 @@ export var FallBack = function(param) {
57
63
  {
58
64
  key: "componentWillUnmount",
59
65
  value: function componentWillUnmount() {
60
- if (this.containerRef.current) {
61
- ReactDOM.unmountComponentAtNode(this.containerRef.current);
66
+ var targetNode = this.getTargetNode();
67
+ if (targetNode) {
68
+ ReactDOM.unmountComponentAtNode(targetNode);
62
69
  }
63
70
  }
64
71
  },
72
+ {
73
+ key: "getTargetNode",
74
+ value: function getTargetNode() {
75
+ // 如果指定了 mountNode，使用它；否则使用 containerRef.current
76
+ return mountNode || this.containerRef.current;
77
+ }
78
+ },
65
79
  {
66
80
  key: "mountOriginalComponent",
67
81
  value: function mountOriginalComponent() {
68
82
  var shouldRender = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
69
83
  var element = _$React.createElement(Original, this.props);
70
- var renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
71
- renderMethod(element, this.containerRef.current);
84
+ var targetNode = this.getTargetNode();
85
+ if (targetNode) {
86
+ var renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
87
+ renderMethod(element, targetNode);
88
+ }
72
89
  }
73
90
  },
74
91
  {
75
92
  key: "render",
76
93
  value: function render() {
77
94
  return /*#__PURE__*/ React.createElement(Component, {
78
- containerRef: this.containerRef
95
+ containerRef: this.containerRef,
96
+ mountNode: mountNode,
97
+ containerClassName: containerClassName
79
98
  });
80
99
  }
81
100
  }
package/esm/RemoteModule.d.ts CHANGED
@@ -14,6 +14,8 @@ interface RemoteModuleOptions<T = any> {
14
14
  }) => void;
15
15
  componentProps?: T;
16
16
  children?: React.ReactNode;
17
+ mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
18
+ fallbackContainerClassName?: string;
17
19
  }
18
- 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;
20
+ export declare const RemoteModule: <T extends object = any>({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps, children, mountNode, fallbackContainerClassName, }: RemoteModuleOptions<T>) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
19
21
  export {};
package/esm/RemoteModule.js CHANGED
@@ -1,26 +1,55 @@
1
1
  import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
2
+ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
3
+ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
2
4
  import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
3
5
  import { loadRemote } from "@module-federation/runtime";
4
6
  import * as React from "react";
5
- import { useMemo } from "react";
7
+ import { useMemo, useState, useLayoutEffect } from "react";
6
8
  import { ErrorBoundary } from "react-error-boundary";
7
9
  import { FallBack } from "./FallBack";
8
10
  import { setFederatedModulePublicPath } from "./set-public-path";
9
11
  import { getMicroMod } from "./mf-global-store";
12
+ var useMountNode = function(mountNodeConfig) {
13
+ var _useState = _sliced_to_array(useState(undefined), 2), resolvedNode = _useState[0], setResolvedNode = _useState[1];
14
+ // 解析各种类型的 mountNode
15
+ useLayoutEffect(function() {
16
+ if (!mountNodeConfig) {
17
+ setResolvedNode(undefined);
18
+ return;
19
+ }
20
+ var node = null;
21
+ if (typeof mountNodeConfig === "string") {
22
+ node = document.querySelector(mountNodeConfig);
23
+ } else if (typeof mountNodeConfig === "function") {
24
+ node = mountNodeConfig();
25
+ } else if (_instanceof(mountNodeConfig, HTMLElement)) {
26
+ node = mountNodeConfig;
27
+ } else if (mountNodeConfig && "current" in mountNodeConfig) {
28
+ // 处理 RefObject
29
+ node = mountNodeConfig.current;
30
+ }
31
+ setResolvedNode(node || undefined);
32
+ }, [
33
+ mountNodeConfig
34
+ ]);
35
+ return resolvedNode;
36
+ };
10
37
  export var RemoteModule = function(param) {
11
- 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;
38
+ 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;
12
39
  var _microMod, _runtime, _runtime1;
13
40
  var microMod = getMicroMod(scope);
41
+ var resolvedMountNode = useMountNode(mountNode);
14
42
  if ((_microMod = microMod) === null || _microMod === void 0 ? void 0 : _microMod.publicPath) {
15
43
  setFederatedModulePublicPath(microMod.moduleFederatedName, microMod.publicPath);
16
44
  }
17
45
  if (publicPath) {
18
46
  setFederatedModulePublicPath(scope, publicPath);
19
47
  }
48
+ console.log("mountNode:", mountNode, "resolvedMountNode:", resolvedMountNode);
20
49
  var Component = useMemo(function() {
21
50
  if (!module || !scope) return null;
22
51
  return /*#__PURE__*/ React.lazy(/*#__PURE__*/ _async_to_generator(function() {
23
- var _remoteModule, remoteModule, react, reactDOM;
52
+ var _typedRemoteModule, remoteModule, ComponentFromPlugin, typedRemoteModule, react, reactDOM;
24
53
  return _ts_generator(this, function(_state) {
25
54
  switch(_state.label){
26
55
  case 0:
@@ -30,7 +59,18 @@ export var RemoteModule = function(param) {
30
59
  ];
31
60
  case 1:
32
61
  remoteModule = _state.sent();
33
- if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
62
+ // 检查是否是来自 runtime plugin 的包装函数（通过标记识别）
63
+ if (typeof remoteModule === "function" && remoteModule.__ICE_MF_RUNTIME_WRAPPER__) {
64
+ ComponentFromPlugin = remoteModule(resolvedMountNode, fallbackContainerClassName);
65
+ return [
66
+ 2,
67
+ {
68
+ default: ComponentFromPlugin
69
+ }
70
+ ];
71
+ }
72
+ typedRemoteModule = remoteModule;
73
+ if (!((_typedRemoteModule = typedRemoteModule) === null || _typedRemoteModule === void 0 ? void 0 : _typedRemoteModule.default)) {
34
74
  return [
35
75
  2,
36
76
  {
@@ -44,13 +84,15 @@ export var RemoteModule = function(param) {
44
84
  2,
45
85
  {
46
86
  default: FallBack({
47
- Original: remoteModule.default,
87
+ Original: typedRemoteModule.default,
48
88
  remoteReact: function() {
49
89
  return react;
50
90
  },
51
91
  remoteReactDOM: function() {
52
92
  return reactDOM;
53
- }
93
+ },
94
+ mountNode: resolvedMountNode,
95
+ containerClassName: fallbackContainerClassName
54
96
  })
55
97
  }
56
98
  ];
@@ -58,7 +100,7 @@ export var RemoteModule = function(param) {
58
100
  return [
59
101
  2,
60
102
  {
61
- default: remoteModule.default
103
+ default: typedRemoteModule.default
62
104
  }
63
105
  ];
64
106
  }
@@ -68,7 +110,9 @@ export var RemoteModule = function(param) {
68
110
  module,
69
111
  scope,
70
112
  (_runtime = runtime) === null || _runtime === void 0 ? void 0 : _runtime.react,
71
- (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM
113
+ (_runtime1 = runtime) === null || _runtime1 === void 0 ? void 0 : _runtime1.reactDOM,
114
+ resolvedMountNode,
115
+ fallbackContainerClassName
72
116
  ]);
73
117
  var Loading = LoadingComponent || /*#__PURE__*/ React.createElement("div", null, "Loading...");
74
118
  var ErrorFallback = function(param) {
@@ -77,10 +121,6 @@ export var RemoteModule = function(param) {
77
121
  };
78
122
  if (!Component) return Loading;
79
123
  return /*#__PURE__*/ React.createElement(ErrorBoundary, {
80
- resetKeys: [
81
- module,
82
- scope
83
- ],
84
124
  FallbackComponent: ErrorFallback,
85
125
  onError: onError
86
126
  }, /*#__PURE__*/ React.createElement(React.Suspense, {
package/esm/runtime-plugin.js CHANGED
@@ -4,7 +4,7 @@ import * as React from "react";
4
4
  import { getExtraInfo, getRemoteInfoFromStore, hasConflict } from "./mf-global-store";
5
5
  var loadRemotePackagedReactAndRender = function() {
6
6
  var _ref = _async_to_generator(function(args) {
7
- 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;
7
+ 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;
8
8
  return _ts_generator(this, function(_state) {
9
9
  switch(_state.label){
10
10
  case 0:
@@ -54,21 +54,26 @@ var loadRemotePackagedReactAndRender = function() {
54
54
  ];
55
55
  case 3:
56
56
  res = _state.sent().FallBack;
57
+ wrappedRender = function(mountNode, containerClassName) {
58
+ return res({
59
+ Original: args.exposeModule.default,
60
+ remoteVersion: function() {
61
+ return remoteVersion;
62
+ },
63
+ hostVersion: function() {
64
+ return hostVersion;
65
+ },
66
+ remoteReactDOM: remoteReactDOM,
67
+ remoteReact: remoteReact,
68
+ mountNode: mountNode,
69
+ containerClassName: containerClassName
70
+ });
71
+ };
72
+ // 添加标记，用于在 RemoteModule 中识别
73
+ wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
57
74
  return [
58
75
  2,
59
- function() {
60
- return res({
61
- Original: args.exposeModule.default,
62
- remoteVersion: function() {
63
- return remoteVersion;
64
- },
65
- hostVersion: function() {
66
- return hostVersion;
67
- },
68
- remoteReactDOM: remoteReactDOM,
69
- remoteReact: remoteReact
70
- });
71
- }
76
+ wrappedRender
72
77
  ];
73
78
  case 4:
74
79
  return [
@@ -99,7 +104,7 @@ export var runtimePlugin = function() {
99
104
  },
100
105
  onLoad: function onLoad(args) {
101
106
  return _async_to_generator(function() {
102
- 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;
107
+ 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;
103
108
  return _ts_generator(this, function(_state) {
104
109
  switch(_state.label){
105
110
  case 0:
@@ -136,15 +141,20 @@ export var runtimePlugin = function() {
136
141
  ];
137
142
  case 1:
138
143
  res = _state.sent().FallBack;
144
+ wrappedRender = function(mountNode, containerClassName) {
145
+ return res({
146
+ Original: args.exposeModule.default,
147
+ remoteReactDOM: remoteReactDOM,
148
+ remoteReact: remoteReact,
149
+ mountNode: mountNode,
150
+ containerClassName: containerClassName
151
+ });
152
+ };
153
+ // 添加标记，用于在 RemoteModule 中识别
154
+ wrappedRender.__ICE_MF_RUNTIME_WRAPPER__ = true;
139
155
  return [
140
156
  2,
141
- function() {
142
- return res({
143
- Original: args.exposeModule.default,
144
- remoteReactDOM: remoteReactDOM,
145
- remoteReact: remoteReact
146
- });
147
- }
157
+ wrappedRender
148
158
  ];
149
159
  case 2:
150
160
  return [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ice/mf-runtime",
3
- "version": "0.0.11-beta.1",
3
+ "version": "0.0.11-beta.2",
4
4
  "description": "ice mf runtime",
5
5
  "files": [
6
6
  "esm",