@module-federation/utilities 0.0.4 → 0.1.0

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [0.2.0](https://github.com/module-federation/nextjs-mf/compare/utils-0.1.0...utils-0.2.0) (2022-10-05)
+
+
+
+# [0.1.0](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.1.0) (2022-10-05)
+
+
+### Bug Fixes
+
+* **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
+
+
+
+## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-05)
+
+
+### Bug Fixes
+
+* **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
+
+
+
+## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-05)
+
+
+### Bug Fixes
+
+* **update versions:** bumping versions ([f72209a](https://github.com/module-federation/nextjs-mf/commit/f72209ae070fb50c9d317e764caf872facd4b887))
+
+
+
 ## [0.0.4](https://github.com/module-federation/nextjs-mf/compare/utils-0.0.3...utils-0.0.4) (2022-10-04)
 
 

package/README.md

@@ -9,3 +9,28 @@ Run `nx build utils` to build the library.
 ## Running unit tests
 
 Run `nx test utils` to execute the unit tests via [Jest](https://jestjs.io).
+
+## React utilities
+---
+`FederatedBoundary`
+
+A component wrapper that provides a fallback for safe imports if something were to fail when grabbing a module off of a remote host.
+
+This wrapper also exposes an optional property for a custom react error boundary component.
+
+Any extra props will be passed directly to the imported module.
+
+Usage looks something like this:
+```js
+import { FederationBoundary } from "@module-federation/utilities/react";
+
+const MyPage = () => {
+  return (
+    <FederationBoundary
+      dynamicImport={() => import("some_remote_host_name").then((m) => m.Component)}
+      fallback={() => import("@npm/backup").then((m) => m.Component)}
+      customBoundary={CustomErrorBoundary}
+    />
+  )
+}
+```

package/package.json

@@ -1,14 +1,31 @@
 {
   "name": "@module-federation/utilities",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "commonjs",
   "main": "src/index.js",
   "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    },
+    "./package.json": "./package.json",
+    "./react": {
+      "import": "./src/utils/react.js",
+      "require": "./src/utils/react.js"
+    }
+  },
   "repository": "https://github.com/module-federation/nextjs-mf/tree/main/packages/utilities",
-  "typings": "./src/index.d.ts",
-  "dependencies": {},
   "peerDependencies": {
+    "react": "^12 || ^18",
+    "next": "^11 || ^12",
     "webpack": "^5.74.0",
     "tslib": "^2.3.0"
-  }
+  },
+  "devDependencies": {
+    "react": "18.2.0",
+    "next": "12.3.0"
+  },
+  "typings": "./src/index.d.ts",
+  "dependencies": {}
 }

package/src/utils/react.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from 'react';
+/**
+ * Wrapper around dynamic import.
+ * Adds error boundaries and fallback options
+ */
+export declare const FederationBoundary: ({ dynamicImporter, fallback, customBoundary: CustomBoundary, ...rest }: {
+    dynamicImporter: () => Promise<any>;
+    fallback: () => Promise<any> | null;
+    customBoundary: ComponentType;
+}) => JSX.Element;

package/src/utils/react.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FederationBoundary = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var dynamic_1 = tslib_1.__importDefault(require("next/dynamic"));
+var ErrorBoundary = /** @class */ (function (_super) {
+    tslib_1.__extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        return _super.call(this, props) || this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        // You can also log the error to an error reporting service
+        console.error(error, errorInfo);
+    };
+    ErrorBoundary.prototype.render = function () {
+        return this.props['children'];
+    };
+    return ErrorBoundary;
+}(react_1.default.Component));
+/**
+ * Wrapper around dynamic import.
+ * Adds error boundaries and fallback options
+ */
+var FederationBoundary = function (_a) {
+    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"]);
+    return (0, react_1.useMemo)(function () {
+        var ImportResult = (0, dynamic_1.default)(function () {
+            return dynamicImporter().catch(function (e) {
+                console.error(e);
+                return fallback();
+            });
+        }, {
+            ssr: false,
+        });
+        var Boundary = CustomBoundary !== undefined ? CustomBoundary : ErrorBoundary;
+        return (react_1.default.createElement(Boundary, null,
+            react_1.default.createElement(ImportResult, tslib_1.__assign({}, rest))));
+    }, [dynamicImporter, fallback]);
+};
+exports.FederationBoundary = FederationBoundary;
+//# sourceMappingURL=react.js.map

package/src/utils/react.js.map

@@ -0,0 +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"}