@ice/mf-runtime 0.0.6 → 0.0.7-beta.1

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