@module-federation/modern-js 0.0.0-next-20240523080317 → 0.0.0-next-20240528083134

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 (5) hide show
  1. package/dist/cjs/runtime/MFReactComponent.js +33 -16
  2. package/dist/esm/runtime/MFReactComponent.js +34 -13
  3. package/dist/esm-node/runtime/MFReactComponent.js +33 -16
  4. package/dist/types/runtime/MFReactComponent.d.ts +1 -0
  5. package/package.json +6 -6
package/dist/cjs/runtime/MFReactComponent.js CHANGED
@@ -36,18 +36,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_runtime = require("@module-federation/enhanced/runtime");
38
38
  function getLoadedRemoteInfos(instance, id) {
39
- const moduleName = instance.remoteHandler.idToModuleNameMap[id];
40
- if (!moduleName) {
39
+ const { name, expose } = instance.remoteHandler.idToRemoteMap[id];
40
+ if (!name) {
41
41
  return;
42
42
  }
43
- const module2 = instance.moduleCache.get(moduleName);
43
+ const module2 = instance.moduleCache.get(name);
44
44
  if (!module2) {
45
45
  return;
46
46
  }
47
47
  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(module2.remoteInfo);
48
48
  return {
49
49
  ...module2.remoteInfo,
50
- snapshot: remoteSnapshot
50
+ snapshot: remoteSnapshot,
51
+ expose
51
52
  };
52
53
  }
53
54
  function collectLinks(id) {
@@ -68,25 +69,33 @@ function collectLinks(id) {
68
69
  if (!publicPath) {
69
70
  return links;
70
71
  }
72
+ const addProtocol = (url) => {
73
+ if (url.startsWith("//")) {
74
+ return `https:${url}`;
75
+ }
76
+ return url;
77
+ };
71
78
  const modules = "modules" in snapshot ? snapshot.modules : [];
72
79
  if (modules) {
73
- modules.forEach((module2) => {
74
- [
75
- ...module2.assets.css.sync,
76
- ...module2.assets.css.async
77
- ].forEach((file, index) => {
78
- links.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", {
79
- href: `${publicPath}${file}`,
80
- rel: "stylesheet",
81
- type: "text/css"
82
- }, index));
83
- });
80
+ const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
81
+ if (!targetModule) {
82
+ return links;
83
+ }
84
+ [
85
+ ...targetModule.assets.css.sync,
86
+ ...targetModule.assets.css.async
87
+ ].forEach((file, index) => {
88
+ links.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", {
89
+ href: `${addProtocol(publicPath)}${file}`,
90
+ rel: "stylesheet",
91
+ type: "text/css"
92
+ }, index));
84
93
  });
85
94
  }
86
95
  return links;
87
96
  }
88
97
  function MFReactComponent(props) {
89
- const { loading = "loading...", id } = props;
98
+ const { loading = "loading...", id, fallback } = props;
90
99
  const Component = /* @__PURE__ */ import_react.default.lazy(() => (0, import_runtime.loadRemote)(id).then((mod) => {
91
100
  const links = collectLinks(id);
92
101
  if (!mod) {
@@ -101,6 +110,14 @@ function MFReactComponent(props) {
101
110
  ]
102
111
  })
103
112
  };
113
+ }).catch((err) => {
114
+ if (!fallback) {
115
+ throw err;
116
+ }
117
+ const FallbackComponent = typeof fallback === "function" ? fallback(err) : fallback;
118
+ return {
119
+ default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackComponent, {})
120
+ };
104
121
  }));
105
122
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Suspense, {
106
123
  fallback: loading,
package/dist/esm/runtime/MFReactComponent.js CHANGED
@@ -5,17 +5,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
5
  import React from "react";
6
6
  import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
7
7
  function getLoadedRemoteInfos(instance, id) {
8
- var moduleName = instance.remoteHandler.idToModuleNameMap[id];
9
- if (!moduleName) {
8
+ var _instance_remoteHandler_idToRemoteMap_id = instance.remoteHandler.idToRemoteMap[id], name = _instance_remoteHandler_idToRemoteMap_id.name, expose = _instance_remoteHandler_idToRemoteMap_id.expose;
9
+ if (!name) {
10
10
  return;
11
11
  }
12
- var module = instance.moduleCache.get(moduleName);
12
+ var module = instance.moduleCache.get(name);
13
13
  if (!module) {
14
14
  return;
15
15
  }
16
16
  var remoteSnapshot = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo).remoteSnapshot;
17
17
  return _object_spread_props(_object_spread({}, module.remoteInfo), {
18
- snapshot: remoteSnapshot
18
+ snapshot: remoteSnapshot,
19
+ expose
19
20
  });
20
21
  }
21
22
  function collectLinks(id) {
@@ -36,22 +37,32 @@ function collectLinks(id) {
36
37
  if (!publicPath) {
37
38
  return links;
38
39
  }
40
+ var addProtocol = function(url) {
41
+ if (url.startsWith("//")) {
42
+ return "https:".concat(url);
43
+ }
44
+ return url;
45
+ };
39
46
  var modules = "modules" in snapshot ? snapshot.modules : [];
40
47
  if (modules) {
41
- modules.forEach(function(module) {
42
- _to_consumable_array(module.assets.css.sync).concat(_to_consumable_array(module.assets.css.async)).forEach(function(file, index) {
43
- links.push(/* @__PURE__ */ _jsx("link", {
44
- href: "".concat(publicPath).concat(file),
45
- rel: "stylesheet",
46
- type: "text/css"
47
- }, index));
48
- });
48
+ var targetModule = modules.find(function(m) {
49
+ return m.modulePath === loadedRemoteInfo.expose;
50
+ });
51
+ if (!targetModule) {
52
+ return links;
53
+ }
54
+ _to_consumable_array(targetModule.assets.css.sync).concat(_to_consumable_array(targetModule.assets.css.async)).forEach(function(file, index) {
55
+ links.push(/* @__PURE__ */ _jsx("link", {
56
+ href: "".concat(addProtocol(publicPath)).concat(file),
57
+ rel: "stylesheet",
58
+ type: "text/css"
59
+ }, index));
49
60
  });
50
61
  }
51
62
  return links;
52
63
  }
53
64
  function MFReactComponent(props) {
54
- var _props_loading = props.loading, loading = _props_loading === void 0 ? "loading..." : _props_loading, id = props.id;
65
+ var _props_loading = props.loading, loading = _props_loading === void 0 ? "loading..." : _props_loading, id = props.id, fallback = props.fallback;
55
66
  var Component = /* @__PURE__ */ React.lazy(function() {
56
67
  return loadRemote(id).then(function(mod) {
57
68
  var links = collectLinks(id);
@@ -69,6 +80,16 @@ function MFReactComponent(props) {
69
80
  });
70
81
  }
71
82
  };
83
+ }).catch(function(err) {
84
+ if (!fallback) {
85
+ throw err;
86
+ }
87
+ var FallbackComponent = typeof fallback === "function" ? fallback(err) : fallback;
88
+ return {
89
+ default: function() {
90
+ return /* @__PURE__ */ _jsx(FallbackComponent, {});
91
+ }
92
+ };
72
93
  });
73
94
  });
74
95
  return /* @__PURE__ */ _jsx(React.Suspense, {
package/dist/esm-node/runtime/MFReactComponent.js CHANGED
@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { loadRemote, getInstance } from "@module-federation/enhanced/runtime";
4
4
  function getLoadedRemoteInfos(instance, id) {
5
- const moduleName = instance.remoteHandler.idToModuleNameMap[id];
6
- if (!moduleName) {
5
+ const { name, expose } = instance.remoteHandler.idToRemoteMap[id];
6
+ if (!name) {
7
7
  return;
8
8
  }
9
- const module = instance.moduleCache.get(moduleName);
9
+ const module = instance.moduleCache.get(name);
10
10
  if (!module) {
11
11
  return;
12
12
  }
13
13
  const { remoteSnapshot } = instance.snapshotHandler.getGlobalRemoteInfo(module.remoteInfo);
14
14
  return {
15
15
  ...module.remoteInfo,
16
- snapshot: remoteSnapshot
16
+ snapshot: remoteSnapshot,
17
+ expose
17
18
  };
18
19
  }
19
20
  function collectLinks(id) {
@@ -34,25 +35,33 @@ function collectLinks(id) {
34
35
  if (!publicPath) {
35
36
  return links;
36
37
  }
38
+ const addProtocol = (url) => {
39
+ if (url.startsWith("//")) {
40
+ return `https:${url}`;
41
+ }
42
+ return url;
43
+ };
37
44
  const modules = "modules" in snapshot ? snapshot.modules : [];
38
45
  if (modules) {
39
- modules.forEach((module) => {
40
- [
41
- ...module.assets.css.sync,
42
- ...module.assets.css.async
43
- ].forEach((file, index) => {
44
- links.push(/* @__PURE__ */ _jsx("link", {
45
- href: `${publicPath}${file}`,
46
- rel: "stylesheet",
47
- type: "text/css"
48
- }, index));
49
- });
46
+ const targetModule = modules.find((m) => m.modulePath === loadedRemoteInfo.expose);
47
+ if (!targetModule) {
48
+ return links;
49
+ }
50
+ [
51
+ ...targetModule.assets.css.sync,
52
+ ...targetModule.assets.css.async
53
+ ].forEach((file, index) => {
54
+ links.push(/* @__PURE__ */ _jsx("link", {
55
+ href: `${addProtocol(publicPath)}${file}`,
56
+ rel: "stylesheet",
57
+ type: "text/css"
58
+ }, index));
50
59
  });
51
60
  }
52
61
  return links;
53
62
  }
54
63
  function MFReactComponent(props) {
55
- const { loading = "loading...", id } = props;
64
+ const { loading = "loading...", id, fallback } = props;
56
65
  const Component = /* @__PURE__ */ React.lazy(() => loadRemote(id).then((mod) => {
57
66
  const links = collectLinks(id);
58
67
  if (!mod) {
@@ -67,6 +76,14 @@ function MFReactComponent(props) {
67
76
  ]
68
77
  })
69
78
  };
79
+ }).catch((err) => {
80
+ if (!fallback) {
81
+ throw err;
82
+ }
83
+ const FallbackComponent = typeof fallback === "function" ? fallback(err) : fallback;
84
+ return {
85
+ default: () => /* @__PURE__ */ _jsx(FallbackComponent, {})
86
+ };
70
87
  }));
71
88
  return /* @__PURE__ */ _jsx(React.Suspense, {
72
89
  fallback: loading,
package/dist/types/runtime/MFReactComponent.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  interface IProps {
3
3
  id: string;
4
4
  loading?: React.ReactNode;
5
+ fallback?: (err: Error) => React.FC | React.FC;
5
6
  }
6
7
  declare function collectLinks(id: string): React.ReactNode[];
7
8
  declare function MFReactComponent(props: IProps): React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@module-federation/modern-js",
3
- "version": "0.0.0-next-20240523080317",
3
+ "version": "0.0.0-next-20240528083134",
4
4
  "files": [
5
5
  "dist/",
6
6
  "types.d.ts",
@@ -46,10 +46,10 @@
46
46
  "@modern-js/utils": "^2.49.2",
47
47
  "@modern-js/node-bundle-require": "^2.49.2",
48
48
  "node-fetch": "~3.3.0",
49
- "@module-federation/sdk": "0.0.0-next-20240523080317",
50
- "@module-federation/enhanced": "0.0.0-next-20240523080317",
51
- "@module-federation/node": "0.0.0-next-20240523080317",
52
- "@module-federation/dts-plugin": "0.0.0-next-20240523080317"
49
+ "@module-federation/sdk": "0.0.0-next-20240528083134",
50
+ "@module-federation/enhanced": "0.0.0-next-20240528083134",
51
+ "@module-federation/node": "0.0.0-next-20240528083134",
52
+ "@module-federation/dts-plugin": "0.0.0-next-20240528083134"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@modern-js/app-tools": "^2.49.2",
@@ -57,7 +57,7 @@
57
57
  "@modern-js/runtime": "^2.49.2",
58
58
  "@modern-js/module-tools": "^2.35.0",
59
59
  "@modern-js/tsconfig": "^2.35.0",
60
- "@module-federation/manifest": "0.0.0-next-20240523080317"
60
+ "@module-federation/manifest": "0.0.0-next-20240528083134"
61
61
  },
62
62
  "peerDependencies": {
63
63
  "react": ">=17",