@ice/mf-runtime 0.0.7-beta.1 → 0.0.7-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 (3) hide show
  1. package/es2017/RemoteModule.js +35 -66
  2. package/esm/RemoteModule.js +69 -113
  3. package/package.json +1 -1
package/es2017/RemoteModule.js CHANGED
@@ -3,84 +3,53 @@ 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
- // 用于缓存已加载的远程模块
11
- const moduleCache = {};
12
- function useDynamicImport({ module, scope, runtime }) {
13
- const [remoteModule, setRemoteModule] = useState(null);
14
- useEffect(()=>{
15
- if (!module || !scope) return;
16
- const cacheKey = `${scope}/${module}`;
17
- const loadComponent = async ()=>{
10
+ export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
11
+ if (publicPath) {
12
+ setFederatedModulePublicPath(scope, publicPath);
13
+ }
14
+ const Component = useMemo(()=>{
15
+ if (!module || !scope) return null;
16
+ const RemoteComponent = /*#__PURE__*/ React.lazy(async ()=>{
18
17
  try {
19
- if (!moduleCache[cacheKey]) {
20
- moduleCache[cacheKey] = loadRemote(cacheKey);
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
+ };
21
29
  }
22
- const res = await moduleCache[cacheKey];
23
- setRemoteModule(res);
30
+ return {
31
+ default: remoteModule.default
32
+ };
24
33
  } catch (error) {
25
- console.error(`Error loading remote module ${cacheKey}:`, error);
26
- delete moduleCache[cacheKey];
34
+ console.error(`Error loading remote module ${scope}/${module}:`, error);
35
+ throw error;
27
36
  }
28
- };
29
- loadComponent();
37
+ });
38
+ return RemoteComponent;
30
39
  }, [
31
- module,
32
- scope
33
- ]);
34
- // 使用 useMemo 缓存处理后的组件
35
- const Component = useMemo(()=>{
36
- var _remoteModule;
37
- if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
38
- return remoteModule;
39
- }
40
- if (runtime) {
41
- const { react, reactDOM } = runtime;
42
- return FallBack({
43
- Original: remoteModule.default,
44
- remoteReact: ()=>react,
45
- remoteReactDOM: ()=>reactDOM
46
- });
47
- }
48
- return /*#__PURE__*/ React.lazy(()=>Promise.resolve({
49
- default: remoteModule.default
50
- }));
51
- }, [
52
- remoteModule,
53
- runtime
54
- ]);
55
- return Component;
56
- }
57
- export const RemoteModule = ({ module, scope, runtime, publicPath, LoadingComponent, ErrorComponent, onError, componentProps = {}, children = null })=>{
58
- if (publicPath) {
59
- setFederatedModulePublicPath(scope, publicPath);
60
- }
61
- const Component = useDynamicImport({
62
40
  module,
63
41
  scope,
64
42
  runtime
65
- });
66
- // 使用 useMemo 缓存 Loading 组件
67
- const Loading = useMemo(()=>LoadingComponent || /*#__PURE__*/ _jsx("div", {
68
- children: "Loading..."
69
- }), [
70
- LoadingComponent
71
- ]);
72
- // 使用 useMemo 缓存 ErrorFallback 组件
73
- const ErrorFallback = useMemo(()=>{
74
- const Fallback = ({ error })=>ErrorComponent || /*#__PURE__*/ _jsxs("div", {
75
- children: [
76
- "远程模块加载失败: ",
77
- error.message
78
- ]
79
- });
80
- return Fallback;
81
- }, [
82
- ErrorComponent
83
43
  ]);
44
+ const Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
45
+ children: "Loading..."
46
+ });
47
+ const ErrorFallback = ({ error })=>ErrorComponent || /*#__PURE__*/ _jsxs("div", {
48
+ children: [
49
+ "远程模块加载失败: ",
50
+ error.message
51
+ ]
52
+ });
84
53
  if (Component) {
85
54
  return /*#__PURE__*/ _jsx(ErrorBoundary, {
86
55
  FallbackComponent: ErrorFallback,
package/esm/RemoteModule.js CHANGED
@@ -1,135 +1,91 @@
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
- // 用于缓存已加载的远程模块
14
- var moduleCache = {};
15
- function useDynamicImport(param) {
16
- var module = param.module, scope = param.scope, runtime = param.runtime;
17
- var _useState = _sliced_to_array(useState(null), 2), remoteModule = _useState[0], setRemoteModule = _useState[1];
18
- useEffect(function() {
19
- if (!module || !scope) return;
20
- var cacheKey = "".concat(scope, "/").concat(module);
21
- var loadComponent = function() {
22
- var _ref = _async_to_generator(function() {
23
- var res, error;
24
- return _ts_generator(this, function(_state) {
25
- switch(_state.label){
26
- case 0:
27
- _state.trys.push([
28
- 0,
29
- 2,
30
- ,
31
- 3
32
- ]);
33
- if (!moduleCache[cacheKey]) {
34
- moduleCache[cacheKey] = loadRemote(cacheKey);
35
- }
36
- return [
37
- 4,
38
- moduleCache[cacheKey]
39
- ];
40
- case 1:
41
- res = _state.sent();
42
- setRemoteModule(res);
43
- return [
44
- 3,
45
- 3
46
- ];
47
- case 2:
48
- error = _state.sent();
49
- console.error("Error loading remote module ".concat(cacheKey, ":"), error);
50
- delete moduleCache[cacheKey];
51
- return [
52
- 3,
53
- 3
54
- ];
55
- case 3:
12
+ export var RemoteModule = function(param) {
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;
14
+ if (publicPath) {
15
+ setFederatedModulePublicPath(scope, publicPath);
16
+ }
17
+ var Component = useMemo(function() {
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
+ });
56
47
  return [
57
- 2
48
+ 2,
49
+ {
50
+ default: wrappedComponent
51
+ }
58
52
  ];
59
- }
60
- });
61
- });
62
- return function loadComponent() {
63
- return _ref.apply(this, arguments);
64
- };
65
- }();
66
- loadComponent();
67
- }, [
68
- module,
69
- scope
70
- ]);
71
- // 使用 useMemo 缓存处理后的组件
72
- var Component = useMemo(function() {
73
- var _remoteModule;
74
- if (!((_remoteModule = remoteModule) === null || _remoteModule === void 0 ? void 0 : _remoteModule.default)) {
75
- return remoteModule;
76
- }
77
- if (runtime) {
78
- var react = runtime.react, reactDOM = runtime.reactDOM;
79
- return FallBack({
80
- Original: remoteModule.default,
81
- remoteReact: function() {
82
- return react;
83
- },
84
- remoteReactDOM: function() {
85
- return reactDOM;
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
+ ];
86
68
  }
87
69
  });
88
- }
89
- return /*#__PURE__*/ React.lazy(function() {
90
- return Promise.resolve({
91
- default: remoteModule.default
92
- });
93
- });
70
+ }));
71
+ return RemoteComponent;
94
72
  }, [
95
- remoteModule,
73
+ module,
74
+ scope,
96
75
  runtime
97
76
  ]);
98
- return Component;
99
- }
100
- export var RemoteModule = function(param) {
101
- 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;
102
- if (publicPath) {
103
- setFederatedModulePublicPath(scope, publicPath);
104
- }
105
- var Component = useDynamicImport({
106
- module: module,
107
- scope: scope,
108
- runtime: runtime
77
+ var Loading = LoadingComponent || /*#__PURE__*/ _jsx("div", {
78
+ children: "Loading..."
109
79
  });
110
- // 使用 useMemo 缓存 Loading 组件
111
- var Loading = useMemo(function() {
112
- return LoadingComponent || /*#__PURE__*/ _jsx("div", {
113
- children: "Loading..."
80
+ var ErrorFallback = function(param) {
81
+ var error = param.error;
82
+ return ErrorComponent || /*#__PURE__*/ _jsxs("div", {
83
+ children: [
84
+ "远程模块加载失败: ",
85
+ error.message
86
+ ]
114
87
  });
115
- }, [
116
- LoadingComponent
117
- ]);
118
- // 使用 useMemo 缓存 ErrorFallback 组件
119
- var ErrorFallback = useMemo(function() {
120
- var Fallback = function(param) {
121
- var error = param.error;
122
- return ErrorComponent || /*#__PURE__*/ _jsxs("div", {
123
- children: [
124
- "远程模块加载失败: ",
125
- error.message
126
- ]
127
- });
128
- };
129
- return Fallback;
130
- }, [
131
- ErrorComponent
132
- ]);
88
+ };
133
89
  if (Component) {
134
90
  return /*#__PURE__*/ _jsx(ErrorBoundary, {
135
91
  FallbackComponent: ErrorFallback,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ice/mf-runtime",
3
- "version": "0.0.7-beta.1",
3
+ "version": "0.0.7-beta.3",
4
4
  "description": "ice mf runtime",
5
5
  "files": [
6
6
  "esm",