@ice/mf-runtime 0.0.7-beta.2 → 0.0.7-beta.4

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 (3) hide show
  1. package/es2017/RemoteModule.js +27 -45
  2. package/esm/RemoteModule.js +58 -87
  3. package/package.json +1 -1
package/es2017/RemoteModule.js CHANGED
@@ -3,60 +3,42 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
3
3
  import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
4
4
  import { loadRemote } from '@module-federation/runtime';
5
5
  import * as React from 'react';
6
- import { useEffect, useState, useMemo } from 'react';
6
+ import { useMemo } from 'react';
7
7
  import { ErrorBoundary } from 'react-error-boundary';
8
8
  import { FallBack } from './FallBack';
9
9
  import { setFederatedModulePublicPath } from './set-public-path';
10
- function useDynamicImport({ module, scope }) {
11
- const [component, setComponent] = useState(null);
12
- useEffect(()=>{
13
- if (!module || !scope) return;
14
- const loadComponent = async ()=>{
15
- try {
16
- const res = await loadRemote(`${scope}/${module}`);
17
- setComponent(res);
18
- } catch (error) {
19
- console.error(`Error loading remote module ${scope}/${module}:`, error);
20
- }
21
- };
22
- loadComponent();
23
- }, [
24
- module,
25
- scope
26
- ]);
27
- return component;
28
- }
29
10
  export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
30
11
  if (publicPath) {
31
12
  setFederatedModulePublicPath(scope, publicPath);
32
13
  }
33
- const remoteModule = useDynamicImport({
34
- module,
35
- scope
36
- });
37
14
  const Component = useMemo(()=>{
38
- var _remoteModule;
39
- let Component = null;
40
- if ((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default) {
41
- if (runtime) {
42
- const { react, reactDOM } = runtime;
43
- const w = FallBack({
44
- Original: remoteModule.default,
45
- remoteReact: ()=>react,
46
- remoteReactDOM: ()=>reactDOM
47
- });
48
- Component = w;
49
- } else {
50
- Component = /*#__PURE__*/ React.lazy(()=>Promise.resolve({
51
- default: remoteModule.default
52
- }));
15
+ if (!module || !scope) return null;
16
+ const RemoteComponent = /*#__PURE__*/ React.lazy(async ()=>{
17
+ try {
18
+ const remoteModule = await loadRemote(`${scope}/${module}`);
19
+ if (runtime) {
20
+ const { react, reactDOM } = runtime;
21
+ const wrappedComponent = FallBack({
22
+ Original: remoteModule.default,
23
+ remoteReact: ()=>react,
24
+ remoteReactDOM: ()=>reactDOM
25
+ });
26
+ return {
27
+ default: wrappedComponent
28
+ };
29
+ }
30
+ return {
31
+ default: remoteModule.default
32
+ };
33
+ } catch (error) {
34
+ console.error(`Error loading remote module ${scope}/${module}:`, error);
35
+ throw error;
53
36
  }
54
- } else {
55
- Component = remoteModule;
56
- }
57
- return Component;
37
+ });
38
+ return RemoteComponent;
58
39
  }, [
59
- remoteModule,
40
+ module,
41
+ scope,
60
42
  runtime
61
43
  ]);
62
44
  const Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
@@ -73,7 +55,7 @@ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingCompon
73
55
  FallbackComponent: ErrorFallback,
74
56
  onError: onError,
75
57
  children: /*#__PURE__*/ _jsx(React.Suspense, {
76
- fallback: Loading,
58
+ fallback: null,
77
59
  children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
78
60
  children: children
79
61
  }))
package/esm/RemoteModule.js CHANGED
@@ -1,106 +1,77 @@
1
1
  import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
2
2
  import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
3
3
  import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
4
- import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
5
4
  import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
6
5
  import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
7
6
  import { loadRemote } from "@module-federation/runtime";
8
7
  import * as React from "react";
9
- import { useEffect, useState, useMemo } from "react";
8
+ import { useMemo } from "react";
10
9
  import { ErrorBoundary } from "react-error-boundary";
11
10
  import { FallBack } from "./FallBack";
12
11
  import { setFederatedModulePublicPath } from "./set-public-path";
13
- function useDynamicImport(param) {
14
- var module = param.module, scope = param.scope;
15
- var _useState = _sliced_to_array(useState(null), 2), component = _useState[0], setComponent = _useState[1];
16
- useEffect(function() {
17
- if (!module || !scope) return;
18
- var loadComponent = function() {
19
- var _ref = _async_to_generator(function() {
20
- var res, error;
21
- return _ts_generator(this, function(_state) {
22
- switch(_state.label){
23
- case 0:
24
- _state.trys.push([
25
- 0,
26
- 2,
27
- ,
28
- 3
29
- ]);
30
- return [
31
- 4,
32
- loadRemote("".concat(scope, "/").concat(module))
33
- ];
34
- case 1:
35
- res = _state.sent();
36
- setComponent(res);
37
- return [
38
- 3,
39
- 3
40
- ];
41
- case 2:
42
- error = _state.sent();
43
- console.error("Error loading remote module ".concat(scope, "/").concat(module, ":"), error);
44
- return [
45
- 3,
46
- 3
47
- ];
48
- case 3:
49
- return [
50
- 2
51
- ];
52
- }
53
- });
54
- });
55
- return function loadComponent() {
56
- return _ref.apply(this, arguments);
57
- };
58
- }();
59
- loadComponent();
60
- }, [
61
- module,
62
- scope
63
- ]);
64
- return component;
65
- }
66
12
  export var RemoteModule = function(param) {
67
13
  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;
68
14
  if (publicPath) {
69
15
  setFederatedModulePublicPath(scope, publicPath);
70
16
  }
71
- var remoteModule = useDynamicImport({
72
- module: module,
73
- scope: scope
74
- });
75
17
  var Component = useMemo(function() {
76
- var _remoteModule;
77
- var Component = null;
78
- if ((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default) {
79
- if (runtime) {
80
- var react = runtime.react, reactDOM = runtime.reactDOM;
81
- var w = FallBack({
82
- Original: remoteModule.default,
83
- remoteReact: function() {
84
- return react;
85
- },
86
- remoteReactDOM: function() {
87
- return reactDOM;
88
- }
89
- });
90
- Component = w;
91
- } else {
92
- Component = /*#__PURE__*/ React.lazy(function() {
93
- return Promise.resolve({
94
- default: remoteModule.default
95
- });
96
- });
97
- }
98
- } else {
99
- Component = remoteModule;
100
- }
101
- return Component;
18
+ if (!module || !scope) return null;
19
+ var RemoteComponent = /*#__PURE__*/ React.lazy(/*#__PURE__*/ _async_to_generator(function() {
20
+ var remoteModule, react, reactDOM, wrappedComponent, error;
21
+ return _ts_generator(this, function(_state) {
22
+ switch(_state.label){
23
+ case 0:
24
+ _state.trys.push([
25
+ 0,
26
+ 2,
27
+ ,
28
+ 3
29
+ ]);
30
+ return [
31
+ 4,
32
+ loadRemote("".concat(scope, "/").concat(module))
33
+ ];
34
+ case 1:
35
+ remoteModule = _state.sent();
36
+ if (runtime) {
37
+ react = runtime.react, reactDOM = runtime.reactDOM;
38
+ wrappedComponent = FallBack({
39
+ Original: remoteModule.default,
40
+ remoteReact: function() {
41
+ return react;
42
+ },
43
+ remoteReactDOM: function() {
44
+ return reactDOM;
45
+ }
46
+ });
47
+ return [
48
+ 2,
49
+ {
50
+ default: wrappedComponent
51
+ }
52
+ ];
53
+ }
54
+ return [
55
+ 2,
56
+ {
57
+ default: remoteModule.default
58
+ }
59
+ ];
60
+ case 2:
61
+ error = _state.sent();
62
+ console.error("Error loading remote module ".concat(scope, "/").concat(module, ":"), error);
63
+ throw error;
64
+ case 3:
65
+ return [
66
+ 2
67
+ ];
68
+ }
69
+ });
70
+ }));
71
+ return RemoteComponent;
102
72
  }, [
103
- remoteModule,
73
+ module,
74
+ scope,
104
75
  runtime
105
76
  ]);
106
77
  var Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
@@ -120,7 +91,7 @@ export var RemoteModule = function(param) {
120
91
  FallbackComponent: ErrorFallback,
121
92
  onError: onError,
122
93
  children: /*#__PURE__*/ _jsx(React.Suspense, {
123
- fallback: Loading,
94
+ fallback: null,
124
95
  children: /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, componentProps), {
125
96
  children: children
126
97
  }))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ice/mf-runtime",
3
- "version": "0.0.7-beta.2",
3
+ "version": "0.0.7-beta.4",
4
4
  "description": "ice mf runtime",
5
5
  "files": [
6
6
  "esm",