@module-federation/utilities 0.0.4 → 0.1.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.
- package/CHANGELOG.md +31 -15
- package/README.md +25 -0
- package/package.json +21 -4
- package/src/utils/react.d.ts +10 -0
- package/src/utils/react.js +42 -0
- package/src/utils/react.js.map +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,56 +2,72 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
-
## [0.
|
|
5
|
+
## [0.1.3](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.1-0...utils-0.1.3) (2022-10-06)
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
### Bug Fixes
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
## [0.1.2](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.1...utils-0.1.2) (2022-10-06)
|
|
11
10
|
|
|
12
11
|
|
|
13
12
|
|
|
14
|
-
## [0.
|
|
13
|
+
## [0.1.1](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.0...utils-0.1.1) (2022-10-06)
|
|
15
14
|
|
|
16
15
|
|
|
17
|
-
### Bug Fixes
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
## [0.1.2](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.1...utils-0.1.2) (2022-10-06)
|
|
20
18
|
|
|
19
|
+
## [0.1.1](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.0...utils-0.1.1) (2022-10-06)
|
|
21
20
|
|
|
21
|
+
# [0.2.0](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.0...utils-0.2.0) (2022-10-05)
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
# [0.1.0](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.1.0) (2022-10-05)
|
|
25
24
|
|
|
26
25
|
### Bug Fixes
|
|
27
26
|
|
|
28
|
-
|
|
27
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
29
28
|
|
|
29
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-05)
|
|
30
30
|
|
|
31
|
+
### Bug Fixes
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
33
34
|
|
|
35
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-05)
|
|
34
36
|
|
|
37
|
+
### Bug Fixes
|
|
35
38
|
|
|
36
|
-
|
|
39
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
37
40
|
|
|
41
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-04)
|
|
38
42
|
|
|
39
43
|
### Bug Fixes
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
42
46
|
|
|
47
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-04)
|
|
43
48
|
|
|
49
|
+
### Bug Fixes
|
|
44
50
|
|
|
45
|
-
|
|
51
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
52
|
+
|
|
53
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-04)
|
|
46
54
|
|
|
55
|
+
### Bug Fixes
|
|
47
56
|
|
|
57
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
48
58
|
|
|
49
|
-
## [0.0.
|
|
59
|
+
## [0.0.5](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.4...utils-0.0.5) (2022-10-04)
|
|
50
60
|
|
|
61
|
+
## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-04)
|
|
51
62
|
|
|
63
|
+
### Bug Fixes
|
|
52
64
|
|
|
53
|
-
|
|
65
|
+
- **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
|
|
54
66
|
|
|
67
|
+
## 0.0.1 (2022-10-04)
|
|
55
68
|
|
|
69
|
+
## [0.0.2](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.1...utils-0.0.2) (2022-09-29)
|
|
56
70
|
|
|
57
71
|
## 0.0.1 (2022-09-29)
|
|
72
|
+
|
|
73
|
+
## 0.0.1 (2022-09-29) -->
|
package/README.md
CHANGED
|
@@ -9,3 +9,28 @@ Run `nx build utils` to build the library.
|
|
|
9
9
|
## Running unit tests
|
|
10
10
|
|
|
11
11
|
Run `nx test utils` to execute the unit tests via [Jest](https://jestjs.io).
|
|
12
|
+
|
|
13
|
+
## React utilities
|
|
14
|
+
---
|
|
15
|
+
`FederatedBoundary`
|
|
16
|
+
|
|
17
|
+
A component wrapper that provides a fallback for safe imports if something were to fail when grabbing a module off of a remote host.
|
|
18
|
+
|
|
19
|
+
This wrapper also exposes an optional property for a custom react error boundary component.
|
|
20
|
+
|
|
21
|
+
Any extra props will be passed directly to the imported module.
|
|
22
|
+
|
|
23
|
+
Usage looks something like this:
|
|
24
|
+
```js
|
|
25
|
+
import { FederationBoundary } from "@module-federation/utilities/react";
|
|
26
|
+
|
|
27
|
+
const MyPage = () => {
|
|
28
|
+
return (
|
|
29
|
+
<FederationBoundary
|
|
30
|
+
dynamicImport={() => import("some_remote_host_name").then((m) => m.Component)}
|
|
31
|
+
fallback={() => import("@npm/backup").then((m) => m.Component)}
|
|
32
|
+
customBoundary={CustomErrorBoundary}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
```
|
package/package.json
CHANGED
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@module-federation/utilities",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "src/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./src/index.js",
|
|
10
|
+
"require": "./src/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./package.json": "./package.json",
|
|
13
|
+
"./react": {
|
|
14
|
+
"import": "./src/utils/react.js",
|
|
15
|
+
"require": "./src/utils/react.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
7
18
|
"repository": "https://github.com/module-federation/nextjs-mf/tree/main/packages/utilities",
|
|
8
|
-
"typings": "./src/index.d.ts",
|
|
9
|
-
"dependencies": {},
|
|
10
19
|
"peerDependencies": {
|
|
20
|
+
"react": "^12 || ^18",
|
|
21
|
+
"next": "^11 || ^12",
|
|
11
22
|
"webpack": "^5.74.0",
|
|
12
23
|
"tslib": "^2.3.0"
|
|
13
|
-
}
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"react": "18.2.0",
|
|
27
|
+
"next": "12.3.0"
|
|
28
|
+
},
|
|
29
|
+
"typings": "./src/index.d.ts",
|
|
30
|
+
"dependencies": {}
|
|
14
31
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Wrapper around dynamic import.
|
|
4
|
+
* Adds error boundaries and fallback options
|
|
5
|
+
*/
|
|
6
|
+
export declare const FederationBoundary: ({ dynamicImporter, fallback, customBoundary: CustomBoundary, ...rest }: {
|
|
7
|
+
dynamicImporter: () => Promise<any>;
|
|
8
|
+
fallback: () => Promise<any> | null;
|
|
9
|
+
customBoundary: ComponentType;
|
|
10
|
+
}) => JSX.Element;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FederationBoundary = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
var dynamic_1 = tslib_1.__importDefault(require("next/dynamic"));
|
|
7
|
+
var ErrorBoundary = /** @class */ (function (_super) {
|
|
8
|
+
tslib_1.__extends(ErrorBoundary, _super);
|
|
9
|
+
function ErrorBoundary(props) {
|
|
10
|
+
return _super.call(this, props) || this;
|
|
11
|
+
}
|
|
12
|
+
ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
|
|
13
|
+
// You can also log the error to an error reporting service
|
|
14
|
+
console.error(error, errorInfo);
|
|
15
|
+
};
|
|
16
|
+
ErrorBoundary.prototype.render = function () {
|
|
17
|
+
return this.props['children'];
|
|
18
|
+
};
|
|
19
|
+
return ErrorBoundary;
|
|
20
|
+
}(react_1.default.Component));
|
|
21
|
+
/**
|
|
22
|
+
* Wrapper around dynamic import.
|
|
23
|
+
* Adds error boundaries and fallback options
|
|
24
|
+
*/
|
|
25
|
+
var FederationBoundary = function (_a) {
|
|
26
|
+
var dynamicImporter = _a.dynamicImporter, _b = _a.fallback, fallback = _b === void 0 ? function () { return null; } : _b, CustomBoundary = _a.customBoundary, rest = tslib_1.__rest(_a, ["dynamicImporter", "fallback", "customBoundary"]);
|
|
27
|
+
return (0, react_1.useMemo)(function () {
|
|
28
|
+
var ImportResult = (0, dynamic_1.default)(function () {
|
|
29
|
+
return dynamicImporter().catch(function (e) {
|
|
30
|
+
console.error(e);
|
|
31
|
+
return fallback();
|
|
32
|
+
});
|
|
33
|
+
}, {
|
|
34
|
+
ssr: false,
|
|
35
|
+
});
|
|
36
|
+
var Boundary = CustomBoundary !== undefined ? CustomBoundary : ErrorBoundary;
|
|
37
|
+
return (react_1.default.createElement(Boundary, null,
|
|
38
|
+
react_1.default.createElement(ImportResult, tslib_1.__assign({}, rest))));
|
|
39
|
+
}, [dynamicImporter, fallback]);
|
|
40
|
+
};
|
|
41
|
+
exports.FederationBoundary = FederationBoundary;
|
|
42
|
+
//# sourceMappingURL=react.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../../packages/utilities/src/utils/react.tsx"],"names":[],"mappings":";;;;AACA,qDAAuC;AACvC,iEAAmC;AAQnC;IAA4B,yCAAyB;IACnD,uBAAY,KAAoB;eAC9B,kBAAM,KAAK,CAAC;IACd,CAAC;IAEQ,yCAAiB,GAA1B,UAA2B,KAAY,EAAE,SAAc;QACrD,2DAA2D;QAC3D,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAClC,CAAC;IAEQ,8BAAM,GAAf;QACE,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IACH,oBAAC;AAAD,CAAC,AAbD,CAA4B,eAAK,CAAC,SAAS,GAa1C;AAED;;;GAGG;AACI,IAAM,kBAAkB,GAAG,UAAC,EAS9B;IARH,IAAA,eAAe,qBAAA,EACf,gBAAqB,EAArB,QAAQ,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACL,cAAc,oBAAA,EAC3B,IAAI,sBAJ0B,iDAKlC,CADQ;IAMP,OAAO,IAAA,eAAO,EAAC;QACb,IAAM,YAAY,GAAG,IAAA,iBAAO,EAC1B;YACE,OAAA,eAAe,EAAE,CAAC,KAAK,CAAC,UAAC,CAAQ;gBAC/B,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACjB,OAAO,QAAQ,EAAE,CAAC;YACpB,CAAC,CAAC;QAHF,CAGE,EACJ;YACE,GAAG,EAAE,KAAK;SACX,CACF,CAAC;QACF,IAAM,QAAQ,GACZ,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;QAChE,OAAO,CACL,8BAAC,QAAQ;YACP,8BAAC,YAAY,uBAAK,IAAI,EAAI,CACjB,CACZ,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC;AA7BW,QAAA,kBAAkB,sBA6B7B"}
|