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