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

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 (9) hide show
  1. package/es2017/FallBack.d.ts +1 -55
  2. package/es2017/FallBack.js +38 -8
  3. package/es2017/RemoteModule.d.ts +3 -1
  4. package/es2017/RemoteModule.js +8 -4
  5. package/esm/FallBack.d.ts +1 -55
  6. package/esm/FallBack.js +36 -6
  7. package/esm/RemoteModule.d.ts +3 -1
  8. package/esm/RemoteModule.js +8 -4
  9. package/package.json +1 -1
package/es2017/FallBack.d.ts CHANGED
@@ -8,59 +8,5 @@ interface FallBackOptions {
8
8
  mountNode?: HTMLElement;
9
9
  containerClassName?: string;
10
10
  }
11
- export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => {
12
- new (props: {}): {
13
- containerRef: React.RefObject<HTMLDivElement>;
14
- componentDidMount(): void;
15
- componentDidUpdate(): void;
16
- componentWillUnmount(): void;
17
- getTargetNode(): HTMLElement | null;
18
- mountOriginalComponent(shouldRender?: boolean): void;
19
- render(): React.JSX.Element;
20
- context: unknown;
21
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
22
- forceUpdate(callback?: () => void): void;
23
- readonly props: Readonly<{}>;
24
- state: Readonly<{}>;
25
- refs: {
26
- [key: string]: React.ReactInstance;
27
- };
28
- shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
29
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
30
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
31
- componentWillMount?(): void;
32
- UNSAFE_componentWillMount?(): void;
33
- componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
34
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
35
- componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
36
- UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
37
- };
38
- new (props: {}, context: any): {
39
- containerRef: React.RefObject<HTMLDivElement>;
40
- componentDidMount(): void;
41
- componentDidUpdate(): void;
42
- componentWillUnmount(): void;
43
- getTargetNode(): HTMLElement | null;
44
- mountOriginalComponent(shouldRender?: boolean): void;
45
- render(): React.JSX.Element;
46
- context: unknown;
47
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
48
- forceUpdate(callback?: () => void): void;
49
- readonly props: Readonly<{}>;
50
- state: Readonly<{}>;
51
- refs: {
52
- [key: string]: React.ReactInstance;
53
- };
54
- shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
55
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
56
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
57
- componentWillMount?(): void;
58
- UNSAFE_componentWillMount?(): void;
59
- componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
60
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
61
- componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
62
- UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
63
- };
64
- contextType?: React.Context<any>;
65
- };
11
+ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
66
12
  export {};
package/es2017/FallBack.js CHANGED
@@ -1,4 +1,7 @@
1
1
  import { _ as _define_property } from "@swc/helpers/_/_define_property";
2
+ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
3
+ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
4
+ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
2
5
  import * as React from 'react';
3
6
  class Component extends React.Component {
4
7
  render() {
@@ -16,8 +19,9 @@ class Component extends React.Component {
16
19
  }
17
20
  export const FallBack = ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName })=>{
18
21
  const ReactDOM = remoteReactDOM();
19
- const React1 = remoteReact();
20
- class WrappedComponent extends React1.Component {
22
+ const React = remoteReact();
23
+ // 使用 class 组件来避免 hooks 冲突问题
24
+ class WrappedComponent extends React.Component {
21
25
  componentDidMount() {
22
26
  this.mountOriginalComponent(true);
23
27
  }
@@ -35,7 +39,12 @@ export const FallBack = ({ Original, remoteReactDOM, remoteReact, mountNode, con
35
39
  return mountNode || this.containerRef.current;
36
40
  }
37
41
  mountOriginalComponent(shouldRender = false) {
38
- const element = React1.createElement(Original, this.props);
42
+ const _this_props = this.props, { forwardedRef } = _this_props, otherProps = _object_without_properties(_this_props, [
43
+ "forwardedRef"
44
+ ]);
45
+ const element = React.createElement(Original, _object_spread_props(_object_spread({}, otherProps), {
46
+ ref: this.handleRef
47
+ }));
39
48
  const targetNode = this.getTargetNode();
40
49
  if (targetNode) {
41
50
  const renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
@@ -43,16 +52,37 @@ export const FallBack = ({ Original, remoteReactDOM, remoteReact, mountNode, con
43
52
  }
44
53
  }
45
54
  render() {
46
- return /*#__PURE__*/ React.createElement(Component, {
55
+ return React.createElement(Component, {
47
56
  containerRef: this.containerRef,
48
57
  mountNode: mountNode,
49
58
  containerClassName: containerClassName
50
59
  });
51
60
  }
52
- constructor(...args){
53
- super(...args);
54
- _define_property(this, "containerRef", React1.createRef());
61
+ constructor(props){
62
+ super(props);
63
+ _define_property(this, "containerRef", void 0);
64
+ _define_property(this, "originalComponentRef", null);
65
+ // 处理 ref 回调
66
+ _define_property(this, "handleRef", (instance)=>{
67
+ this.originalComponentRef = instance;
68
+ // 转发 ref 到外部
69
+ const { forwardedRef } = this.props;
70
+ if (forwardedRef) {
71
+ if (typeof forwardedRef === 'function') {
72
+ forwardedRef(instance);
73
+ } else if (forwardedRef && typeof forwardedRef === 'object') {
74
+ forwardedRef.current = instance;
75
+ }
76
+ }
77
+ });
78
+ this.containerRef = React.createRef();
55
79
  }
56
80
  }
57
- return WrappedComponent;
81
+ // 使用 forwardRef 包装 class 组件来支持 ref 转发
82
+ const ForwardedComponent = React.forwardRef((props, ref)=>{
83
+ return React.createElement(WrappedComponent, _object_spread_props(_object_spread({}, props), {
84
+ forwardedRef: ref
85
+ }));
86
+ });
87
+ return ForwardedComponent;
58
88
  };
package/es2017/RemoteModule.d.ts CHANGED
@@ -17,5 +17,7 @@ interface RemoteModuleOptions<T = any> {
17
17
  mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
18
18
  fallbackContainerClassName?: string;
19
19
  }
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;
20
+ export declare const RemoteModule: <T extends object = any>(props: RemoteModuleOptions<T> & {
21
+ ref?: React.Ref<any>;
22
+ }) => React.ReactElement | null;
21
23
  export {};
package/es2017/RemoteModule.js CHANGED
@@ -1,6 +1,7 @@
1
+ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
1
2
  import { loadRemote } from '@module-federation/runtime';
2
3
  import * as React from 'react';
3
- import { useMemo, useState, useLayoutEffect } from 'react';
4
+ import { useMemo, useState, useLayoutEffect, forwardRef } from 'react';
4
5
  import { ErrorBoundary } from 'react-error-boundary';
5
6
  import { FallBack } from './FallBack';
6
7
  import { setFederatedModulePublicPath } from './set-public-path';
@@ -30,7 +31,7 @@ const useMountNode = (mountNodeConfig)=>{
30
31
  ]);
31
32
  return resolvedNode;
32
33
  };
33
- export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null, mountNode, fallbackContainerClassName })=>{
34
+ const RemoteModuleInner = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null, mountNode, fallbackContainerClassName }, ref)=>{
34
35
  var _microMod, _runtime, _runtime1;
35
36
  const microMod = getMicroMod(scope);
36
37
  const resolvedMountNode = useMountNode(mountNode);
@@ -40,7 +41,6 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
40
41
  if (publicPath) {
41
42
  setFederatedModulePublicPath(scope, publicPath);
42
43
  }
43
- console.log('mountNode:', mountNode, 'resolvedMountNode:', resolvedMountNode);
44
44
  const Component = useMemo(()=>{
45
45
  if (!module || !scope) return null;
46
46
  return /*#__PURE__*/ React.lazy(async ()=>{
@@ -92,5 +92,9 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
92
92
  onError: onError
93
93
  }, /*#__PURE__*/ React.createElement(React.Suspense, {
94
94
  fallback: Loading
95
- }, /*#__PURE__*/ React.createElement(Component, componentProps, children)));
95
+ }, /*#__PURE__*/ React.createElement(Component, _object_spread({
96
+ ref: ref
97
+ }, componentProps), children)));
96
98
  };
99
+ // 使用 forwardRef 包装组件以支持 ref
100
+ export const RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);
package/esm/FallBack.d.ts CHANGED
@@ -8,59 +8,5 @@ interface FallBackOptions {
8
8
  mountNode?: HTMLElement;
9
9
  containerClassName?: string;
10
10
  }
11
- export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => {
12
- new (props: {}): {
13
- containerRef: React.RefObject<HTMLDivElement>;
14
- componentDidMount(): void;
15
- componentDidUpdate(): void;
16
- componentWillUnmount(): void;
17
- getTargetNode(): HTMLElement | null;
18
- mountOriginalComponent(shouldRender?: boolean): void;
19
- render(): React.JSX.Element;
20
- context: unknown;
21
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
22
- forceUpdate(callback?: () => void): void;
23
- readonly props: Readonly<{}>;
24
- state: Readonly<{}>;
25
- refs: {
26
- [key: string]: React.ReactInstance;
27
- };
28
- shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
29
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
30
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
31
- componentWillMount?(): void;
32
- UNSAFE_componentWillMount?(): void;
33
- componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
34
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
35
- componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
36
- UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
37
- };
38
- new (props: {}, context: any): {
39
- containerRef: React.RefObject<HTMLDivElement>;
40
- componentDidMount(): void;
41
- componentDidUpdate(): void;
42
- componentWillUnmount(): void;
43
- getTargetNode(): HTMLElement | null;
44
- mountOriginalComponent(shouldRender?: boolean): void;
45
- render(): React.JSX.Element;
46
- context: unknown;
47
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
48
- forceUpdate(callback?: () => void): void;
49
- readonly props: Readonly<{}>;
50
- state: Readonly<{}>;
51
- refs: {
52
- [key: string]: React.ReactInstance;
53
- };
54
- shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
55
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
56
- getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
57
- componentWillMount?(): void;
58
- UNSAFE_componentWillMount?(): void;
59
- componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
60
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
61
- componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
62
- UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
63
- };
64
- contextType?: React.Context<any>;
65
- };
11
+ export declare const FallBack: ({ Original, remoteReactDOM, remoteReact, mountNode, containerClassName, }: FallBackOptions) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
66
12
  export {};
package/esm/FallBack.js CHANGED
@@ -3,6 +3,9 @@ import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
3
3
  import { _ as _create_class } from "@swc/helpers/_/_create_class";
4
4
  import { _ as _define_property } from "@swc/helpers/_/_define_property";
5
5
  import { _ as _inherits } from "@swc/helpers/_/_inherits";
6
+ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
7
+ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
8
+ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
6
9
  import { _ as _create_super } from "@swc/helpers/_/_create_super";
7
10
  import * as React from "react";
8
11
  var Component = /*#__PURE__*/ function(_React_Component) {
@@ -36,15 +39,31 @@ export var FallBack = function(param) {
36
39
  var Original = param.Original, remoteReactDOM = param.remoteReactDOM, remoteReact = param.remoteReact, mountNode = param.mountNode, containerClassName = param.containerClassName;
37
40
  var ReactDOM = remoteReactDOM();
38
41
  var _$React = remoteReact();
42
+ // 使用 class 组件来避免 hooks 冲突问题
39
43
  var WrappedComponent = /*#__PURE__*/ function(_React_Component) {
40
44
  "use strict";
41
45
  _inherits(WrappedComponent, _React_Component);
42
46
  var _super = _create_super(WrappedComponent);
43
- function WrappedComponent() {
47
+ function WrappedComponent(props) {
44
48
  _class_call_check(this, WrappedComponent);
45
49
  var _this;
46
- _this = _super.apply(this, arguments);
47
- _define_property(_assert_this_initialized(_this), "containerRef", _$React.createRef());
50
+ _this = _super.call(this, props);
51
+ _define_property(_assert_this_initialized(_this), "containerRef", void 0);
52
+ _define_property(_assert_this_initialized(_this), "originalComponentRef", null);
53
+ // 处理 ref 回调
54
+ _define_property(_assert_this_initialized(_this), "handleRef", function(instance) {
55
+ _this.originalComponentRef = instance;
56
+ // 转发 ref 到外部
57
+ var forwardedRef = _this.props.forwardedRef;
58
+ if (forwardedRef) {
59
+ if (typeof forwardedRef === "function") {
60
+ forwardedRef(instance);
61
+ } else if (forwardedRef && typeof forwardedRef === "object") {
62
+ forwardedRef.current = instance;
63
+ }
64
+ }
65
+ });
66
+ _this.containerRef = _$React.createRef();
48
67
  return _this;
49
68
  }
50
69
  _create_class(WrappedComponent, [
@@ -80,7 +99,12 @@ export var FallBack = function(param) {
80
99
  key: "mountOriginalComponent",
81
100
  value: function mountOriginalComponent() {
82
101
  var shouldRender = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
83
- var element = _$React.createElement(Original, this.props);
102
+ var _this_props = this.props, forwardedRef = _this_props.forwardedRef, otherProps = _object_without_properties(_this_props, [
103
+ "forwardedRef"
104
+ ]);
105
+ var element = _$React.createElement(Original, _object_spread_props(_object_spread({}, otherProps), {
106
+ ref: this.handleRef
107
+ }));
84
108
  var targetNode = this.getTargetNode();
85
109
  if (targetNode) {
86
110
  var renderMethod = shouldRender ? ReactDOM.render : ReactDOM.hydrate;
@@ -91,7 +115,7 @@ export var FallBack = function(param) {
91
115
  {
92
116
  key: "render",
93
117
  value: function render() {
94
- return /*#__PURE__*/ React.createElement(Component, {
118
+ return _$React.createElement(Component, {
95
119
  containerRef: this.containerRef,
96
120
  mountNode: mountNode,
97
121
  containerClassName: containerClassName
@@ -101,5 +125,11 @@ export var FallBack = function(param) {
101
125
  ]);
102
126
  return WrappedComponent;
103
127
  }(_$React.Component);
104
- return WrappedComponent;
128
+ // 使用 forwardRef 包装 class 组件来支持 ref 转发
129
+ var ForwardedComponent = _$React.forwardRef(function(props, ref) {
130
+ return _$React.createElement(WrappedComponent, _object_spread_props(_object_spread({}, props), {
131
+ forwardedRef: ref
132
+ }));
133
+ });
134
+ return ForwardedComponent;
105
135
  };
package/esm/RemoteModule.d.ts CHANGED
@@ -17,5 +17,7 @@ interface RemoteModuleOptions<T = any> {
17
17
  mountNode?: HTMLElement | string | (() => HTMLElement | null) | React.RefObject<HTMLElement>;
18
18
  fallbackContainerClassName?: string;
19
19
  }
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;
20
+ export declare const RemoteModule: <T extends object = any>(props: RemoteModuleOptions<T> & {
21
+ ref?: React.Ref<any>;
22
+ }) => React.ReactElement | null;
21
23
  export {};
package/esm/RemoteModule.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
2
2
  import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
3
+ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
3
4
  import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
4
5
  import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
5
6
  import { loadRemote } from "@module-federation/runtime";
6
7
  import * as React from "react";
7
- import { useMemo, useState, useLayoutEffect } from "react";
8
+ import { useMemo, useState, useLayoutEffect, forwardRef } from "react";
8
9
  import { ErrorBoundary } from "react-error-boundary";
9
10
  import { FallBack } from "./FallBack";
10
11
  import { setFederatedModulePublicPath } from "./set-public-path";
@@ -34,7 +35,7 @@ var useMountNode = function(mountNodeConfig) {
34
35
  ]);
35
36
  return resolvedNode;
36
37
  };
37
- export var RemoteModule = function(param) {
38
+ var RemoteModuleInner = function(param, ref) {
38
39
  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;
39
40
  var _microMod, _runtime, _runtime1;
40
41
  var microMod = getMicroMod(scope);
@@ -45,7 +46,6 @@ export var RemoteModule = function(param) {
45
46
  if (publicPath) {
46
47
  setFederatedModulePublicPath(scope, publicPath);
47
48
  }
48
- console.log("mountNode:", mountNode, "resolvedMountNode:", resolvedMountNode);
49
49
  var Component = useMemo(function() {
50
50
  if (!module || !scope) return null;
51
51
  return /*#__PURE__*/ React.lazy(/*#__PURE__*/ _async_to_generator(function() {
@@ -125,5 +125,9 @@ export var RemoteModule = function(param) {
125
125
  onError: onError
126
126
  }, /*#__PURE__*/ React.createElement(React.Suspense, {
127
127
  fallback: Loading
128
- }, /*#__PURE__*/ React.createElement(Component, componentProps, children)));
128
+ }, /*#__PURE__*/ React.createElement(Component, _object_spread({
129
+ ref: ref
130
+ }, componentProps), children)));
129
131
  };
132
+ // 使用 forwardRef 包装组件以支持 ref
133
+ export var RemoteModule = /*#__PURE__*/ forwardRef(RemoteModuleInner);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ice/mf-runtime",
3
- "version": "0.0.11-beta.2",
3
+ "version": "0.0.11-beta.3",
4
4
  "description": "ice mf runtime",
5
5
  "files": [
6
6
  "esm",