@module-federation/utilities 1.0.3 → 1.1.0
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.
- package/CHANGELOG.md +19 -0
- package/README.md +89 -5
- package/package.json +5 -5
- package/src/utils/importRemote.d.ts +3 -1
- package/src/utils/importRemote.js +20 -11
- package/src/utils/importRemote.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
# [1.1.0](https://github.com/module-federation/nextjs-mf/compare/utils-1.0.4...utils-1.1.0) (2022-12-30)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **utilities:** move tslib from peer deps into deps ([#474](https://github.com/module-federation/nextjs-mf/issues/474)) ([792806c](https://github.com/module-federation/nextjs-mf/commit/792806c805c746cd681d6345bec88a47462cb26f))
|
|
11
|
+
* **utilities:** set webpack peer dep to ^5.40.0 ([#473](https://github.com/module-federation/nextjs-mf/issues/473)) ([d1ae77e](https://github.com/module-federation/nextjs-mf/commit/d1ae77e63993b6f67d329bce5a30d04776a02b76))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* Utilities - Add async callback to importRemote ([#459](https://github.com/module-federation/nextjs-mf/issues/459)) ([508d83c](https://github.com/module-federation/nextjs-mf/commit/508d83ca1060e1fcc80cde44978b186bdf1feefc)), closes [#461](https://github.com/module-federation/nextjs-mf/issues/461) [#451](https://github.com/module-federation/nextjs-mf/issues/451) [#463](https://github.com/module-federation/nextjs-mf/issues/463)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## [1.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-1.0.3...utils-1.0.4) (2022-12-29)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
5
24
|
## [1.0.3](https://github.com/module-federation/nextjs-mf/compare/utils-1.0.2...utils-1.0.3) (2022-12-27)
|
|
6
25
|
|
|
7
26
|
|
package/README.md
CHANGED
|
@@ -11,7 +11,9 @@ Run `nx build utils` to build the library.
|
|
|
11
11
|
Run `nx test utils` to execute the unit tests via [Jest](https://jestjs.io).
|
|
12
12
|
|
|
13
13
|
## React utilities
|
|
14
|
+
|
|
14
15
|
---
|
|
16
|
+
|
|
15
17
|
`FederatedBoundary`
|
|
16
18
|
|
|
17
19
|
A component wrapper that provides a fallback for safe imports if something were to fail when grabbing a module off of a remote host.
|
|
@@ -21,16 +23,98 @@ This wrapper also exposes an optional property for a custom react error boundary
|
|
|
21
23
|
Any extra props will be passed directly to the imported module.
|
|
22
24
|
|
|
23
25
|
Usage looks something like this:
|
|
26
|
+
|
|
24
27
|
```js
|
|
25
|
-
import { FederationBoundary } from
|
|
28
|
+
import { FederationBoundary } from '@module-federation/utilities/src/react';
|
|
26
29
|
|
|
27
30
|
const MyPage = () => {
|
|
28
31
|
return (
|
|
29
32
|
<FederationBoundary
|
|
30
|
-
dynamicImport={() =>
|
|
31
|
-
|
|
33
|
+
dynamicImport={() =>
|
|
34
|
+
import('some_remote_host_name').then((m) => m.Component)
|
|
35
|
+
}
|
|
36
|
+
fallback={() => import('@npm/backup').then((m) => m.Component)}
|
|
32
37
|
customBoundary={CustomErrorBoundary}
|
|
33
38
|
/>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
`ImportRemote`
|
|
46
|
+
|
|
47
|
+
A function which will enable dynamic imports of remotely exposed modules using the Module Federation plugin. It uses the method described in the official Webpack configuration under <a href="https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers" target="_blank">Dynamic Remote Containers</a>.
|
|
48
|
+
|
|
49
|
+
This function will allow you to provide a static url or an async method to retrieve a url from a configuration service.
|
|
50
|
+
|
|
51
|
+
Usage looks something like this:
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import { importRemote } from '@module-federation/utilities';
|
|
55
|
+
|
|
56
|
+
// If it's a regular js module:
|
|
57
|
+
importRemote({
|
|
58
|
+
url: 'http://localhost:3001',
|
|
59
|
+
scope: 'Foo',
|
|
60
|
+
module: 'Bar',
|
|
61
|
+
}).then(
|
|
62
|
+
(
|
|
63
|
+
{
|
|
64
|
+
/* list of Bar exports */
|
|
65
|
+
}
|
|
66
|
+
) => {
|
|
67
|
+
// Use Bar exports
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
// If Bar is a React component you can use it with lazy and Suspense just like a dynamic import:
|
|
72
|
+
const Bar = lazy(() =>
|
|
73
|
+
importRemote({ url: 'http://localhost:3001', scope: 'Foo', module: 'Bar' })
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<Suspense fallback={<div>Loading Bar...</div>}>
|
|
78
|
+
<Bar />
|
|
79
|
+
</Suspense>
|
|
80
|
+
);
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
import { importRemote } from '@module-federation/utilities';
|
|
85
|
+
|
|
86
|
+
// If it's a regular js module:
|
|
87
|
+
importRemote({
|
|
88
|
+
url: () => MyAsyncMethod('remote_name'),
|
|
89
|
+
scope: 'Foo',
|
|
90
|
+
module: 'Bar',
|
|
91
|
+
}).then(
|
|
92
|
+
(
|
|
93
|
+
{
|
|
94
|
+
/* list of Bar exports */
|
|
95
|
+
}
|
|
96
|
+
) => {
|
|
97
|
+
// Use Bar exports
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
// If Bar is a React component you can use it with lazy and Suspense just like a dynamic import:
|
|
102
|
+
const Bar = lazy(() =>
|
|
103
|
+
importRemote({
|
|
104
|
+
url: () => MyAsyncMethod('remote_name'),
|
|
105
|
+
scope: 'Foo',
|
|
106
|
+
module: 'Bar',
|
|
107
|
+
})
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<Suspense fallback={<div>Loading Bar...</div>}>
|
|
112
|
+
<Bar />
|
|
113
|
+
</Suspense>
|
|
114
|
+
);
|
|
36
115
|
```
|
|
116
|
+
|
|
117
|
+
Apart from **url**, **scope** and **module** you can also pass additional options to the **importRemote()** function:
|
|
118
|
+
|
|
119
|
+
- **remoteEntryFileName**: The name of the remote entry file. Defaults to "remoteEntry.js".
|
|
120
|
+
- **bustRemoteEntryCache**: Whether to add a cache busting query parameter to the remote entry file URL. Defaults to **true**. You can disable it if cachebusting is handled by the server.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@module-federation/utilities",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "src/index.d.ts",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"react": "18.2.0",
|
|
17
17
|
"next": "13.0.0"
|
|
18
18
|
},
|
|
19
|
-
"typings": "./src/index.d.ts",
|
|
20
|
-
"dependencies": {},
|
|
21
19
|
"peerDependencies": {
|
|
22
|
-
"webpack": "^5.
|
|
23
|
-
|
|
20
|
+
"webpack": "^5.40.0"
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"tslib": "2.4.0"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
declare type RemoteUrl = string | (() => Promise<string>);
|
|
1
2
|
export interface ImportRemoteOptions {
|
|
2
|
-
url:
|
|
3
|
+
url: RemoteUrl;
|
|
3
4
|
scope: string;
|
|
4
5
|
module: string;
|
|
5
6
|
remoteEntryFileName?: string;
|
|
6
7
|
bustRemoteEntryCache?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const importRemote: <T>({ url, scope, module, remoteEntryFileName, bustRemoteEntryCache, }: ImportRemoteOptions) => Promise<T>;
|
|
10
|
+
export {};
|
|
@@ -68,17 +68,26 @@ var initContainer = function (containerScope) { return tslib_1.__awaiter(void 0,
|
|
|
68
68
|
var importRemote = function (_a) {
|
|
69
69
|
var url = _a.url, scope = _a.scope, module = _a.module, _b = _a.remoteEntryFileName, remoteEntryFileName = _b === void 0 ? REMOTE_ENTRY_FILE : _b, _c = _a.bustRemoteEntryCache, bustRemoteEntryCache = _c === void 0 ? true : _c;
|
|
70
70
|
return tslib_1.__awaiter(void 0, void 0, void 0, function () {
|
|
71
|
-
var _d, moduleFactory, moduleFactory;
|
|
71
|
+
var remoteUrl, _d, moduleFactory, moduleFactory;
|
|
72
72
|
return tslib_1.__generator(this, function (_e) {
|
|
73
73
|
switch (_e.label) {
|
|
74
74
|
case 0:
|
|
75
|
-
if (!!window[scope]) return [3 /*break*/,
|
|
76
|
-
|
|
77
|
-
return [
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
case
|
|
75
|
+
if (!!window[scope]) return [3 /*break*/, 6];
|
|
76
|
+
remoteUrl = '';
|
|
77
|
+
if (!(typeof url === 'string')) return [3 /*break*/, 1];
|
|
78
|
+
remoteUrl = url;
|
|
79
|
+
return [3 /*break*/, 3];
|
|
80
|
+
case 1: return [4 /*yield*/, url()];
|
|
81
|
+
case 2:
|
|
82
|
+
remoteUrl = _e.sent();
|
|
83
|
+
_e.label = 3;
|
|
84
|
+
case 3:
|
|
85
|
+
// Load the remote and initialize the share scope if it's empty
|
|
86
|
+
return [4 /*yield*/, Promise.all([
|
|
87
|
+
loadRemote("".concat(remoteUrl, "/").concat(remoteEntryFileName), scope, bustRemoteEntryCache),
|
|
88
|
+
initSharing(),
|
|
89
|
+
])];
|
|
90
|
+
case 4:
|
|
82
91
|
// Load the remote and initialize the share scope if it's empty
|
|
83
92
|
_e.sent();
|
|
84
93
|
if (!window[scope]) {
|
|
@@ -88,11 +97,11 @@ var importRemote = function (_a) {
|
|
|
88
97
|
initContainer(window[scope]),
|
|
89
98
|
window[scope].get(module.startsWith('./') ? module : "./".concat(module)),
|
|
90
99
|
])];
|
|
91
|
-
case
|
|
100
|
+
case 5:
|
|
92
101
|
_d = _e.sent(), moduleFactory = _d[1];
|
|
93
102
|
return [2 /*return*/, moduleFactory()];
|
|
94
|
-
case
|
|
95
|
-
case
|
|
103
|
+
case 6: return [4 /*yield*/, window[scope].get(module.startsWith('./') ? module : "./".concat(module))];
|
|
104
|
+
case 7:
|
|
96
105
|
moduleFactory = _e.sent();
|
|
97
106
|
return [2 /*return*/, moduleFactory()];
|
|
98
107
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"importRemote.js","sourceRoot":"","sources":["../../../../../packages/utilities/src/utils/importRemote.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"importRemote.js","sourceRoot":"","sources":["../../../../../packages/utilities/src/utils/importRemote.ts"],"names":[],"mappings":"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"}
|