mfe-react
Version:
React Micro-Frontend Component Wrapper
324 lines (235 loc) • 16.7 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.MFEComponent = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactShadowRoot = _interopRequireDefault(require("react-shadow-root"));
var _excluded = ["children"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
// The default MFE Configuration
var defaultConfig = {
shadowDOM: false,
errorHandler: null,
fallback: null,
log: false
}; // Test if a loaded module is a React component (the other option is a Parcel).
// This will not work if the external module is any other type of plain
// function, but you shouldn't use this wrapper in those cases.
var isModuleReactComponent = function isModuleReactComponent(module) {
return module && module["default"] && !module["default"].mount;
}; // This Wrapper may wrap a React Component or a plain javascript component.
// The argument is just an import statement, which gets turned into a Promise that
// resolves when the remote module is loaded.
// The imported component must either be a React Component or a Parcel format: mount() etc
var MFEComponent = function MFEComponent(importPromise, config, id) {
// Apply the passed config to the default config for this MFE's effective config
config = Object.assign({}, defaultConfig, config);
var logLabel = "".concat(id ? '[MFE ' + id + '] ' : '');
var log = function log(msg) {
if (!config.log) return;
if (_typeof(msg) === "object") {
window.console.info(logLabel, msg);
} else {
window.console.info("".concat(logLabel).concat(msg));
}
};
log("Running MFEComponent"); // Has the import resolved yet?
var resolved = false; // What type is the module?
var isReactComponent = null; // Component is the actual object we use in our output
var Component = null; // Parcel is the possible remote component with mount() etc
var Parcel = null; // This is a component to trap errors in sub-components, since MFEs can be unpredictable.
// We don't want errors to propagate up and break the host page.
// It prevents itself from re-rendering if the MFE is a Parcel, because we don't
// want it to unmount and then mount again and potentially lose state.
var BoundaryErrorWrapper = /*#__PURE__*/function (_React$Component) {
_inherits(BoundaryErrorWrapper, _React$Component);
var _super = _createSuper(BoundaryErrorWrapper);
function BoundaryErrorWrapper(props) {
var _this;
_classCallCheck(this, BoundaryErrorWrapper);
_this = _super.call(this, props);
_this.state = {
hasError: false,
errorMessage: null
};
return _this;
}
_createClass(BoundaryErrorWrapper, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
log("shouldComponentUpdate");
var children = nextProps.children,
props = _objectWithoutProperties(nextProps, _excluded);
log(props); // If the module has not yet resolved or if it's a React component, we always want to re-render.
// But for Parcel components, we never want to re-render, just call update()
if (this.state.hasError) {
log("error, BoundaryError should update");
return true;
}
if (!resolved) {
log("module is not yet resolved, BoundaryError should update");
return true;
}
if (isReactComponent) {
log("module is a React component, BoundaryError should update");
return true;
}
log("module is not a React component");
if (Parcel.update) {
log("It has an update() method, calling it"); // Add domElement to the props
props.domElement = Parcel.domElement;
try {
Parcel.update(props);
} catch (e) {
// If the update() call throws, we want to catch it and re-render the error
this.state.hasError = true;
this.state.errorMessage = e.toString();
return true;
}
return false;
}
return true;
}
}, {
key: "componentDidCatch",
value: function componentDidCatch(error, errorInfo) {// console.warn(error);
// console.warn(errorInfo);
}
}, {
key: "render",
value: function render() {
log("BoundaryErrorWrapper is rendering");
if (this.state.hasError) {
log("BoundaryError error!");
log(this.state.errorMessage);
var Err = config.errorHandler;
if (Err) {
if (typeof Err == "string") return Err;
return /*#__PURE__*/_react["default"].createElement(Err, _extends({}, this.props, {
errorMessage: this.state.errorMessage
}));
}
return /*#__PURE__*/_react["default"].createElement("div", null, "MFE Component Error: ", this.state.errorMessage);
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.props.children);
}
}], [{
key: "getDerivedStateFromError",
value: function getDerivedStateFromError(error, b, c) {
return {
hasError: true,
errorMessage: "".concat(error ? error.toString() : error)
};
}
}]);
return BoundaryErrorWrapper;
}(_react["default"].Component); // What to do when the import() actually resolves to the module
var modulePromise = importPromise.then(function (module) {
log("Promise resolved");
resolved = true; // If the module is a React Component, return it, we're done.
isReactComponent = isModuleReactComponent(module);
log("isModuleReactComponent=".concat(isReactComponent));
if (isReactComponent) {
return module;
}
log("Module is not a react component"); // If it is not a React component, then we need to turn it into one!
isReactComponent = false;
var mounted = false;
Parcel = module["default"];
Component = function Component(props) {
log("Component render"); // This will be a reference to the DOM node we mount to
var ref = /*#__PURE__*/_react["default"].createRef();
var _React$useState = _react["default"].useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
error = _React$useState2[0],
setError = _React$useState2[1]; // Once the React component renders, let the Parcel component mount itself.
_react["default"].useEffect(function () {
log("Non-React Component has rendered in useEffect");
log(props); // If the component gets a forced re-render, unmount then re-mount the non-react component
if (mounted && Parcel.unmount) {
Parcel.unmount();
mounted = false;
}
if (!mounted) {
mounted = true;
try {
// First we call the Parcel bootstrap method
if (Parcel.bootstrap) {
Parcel.bootstrap();
} // Now we call mount()
// The Parcel API requires us to pass in a "domElement" prop which is where the component will mount
log("Calling mount");
Parcel.domElement = ref.current;
Parcel.mount(_objectSpread({
domElement: Parcel.domElement
}, props));
} catch (e) {
setError(e.toString());
}
} // Cleanup Method
// This will run when component unmounts, so unmount the Parcel instance
return function () {
log("Cleanup in useEffect - unmounting");
if (mounted && Parcel.unmount) {
log("Unmounting app");
Parcel.unmount();
mounted = false;
}
};
}, []);
return error ? /*#__PURE__*/_react["default"].createElement("div", null, "MFE Component Error: ", error) : /*#__PURE__*/_react["default"].createElement("div", {
ref: ref
});
}; // Now return the native React component back in module format as expected
return {
"default": Component
};
}); // The above code just chains on to the import() promise, so the output is a module in the
// format that React.lazy() expects, whether it's a React component or Parcel.
// Now just create a Lazy Component from it which will resolve when the module loads.
Component = /*#__PURE__*/_react["default"].lazy(function () {
return modulePromise;
}); // This is the actual Component that the wrapper returns.
return /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
log("Rendering Component"); // Check to see if we actually got a ref and need to pass it on
var refProps = ref ? _objectSpread(_objectSpread({}, props), {}, {
ref: ref
}) : _objectSpread({}, props); // Attach a shadow dom root?
if (config.shadowDOM) {
return /*#__PURE__*/_react["default"].createElement(BoundaryErrorWrapper, props, /*#__PURE__*/_react["default"].createElement(_reactShadowRoot["default"], null, /*#__PURE__*/_react["default"].createElement(_react["default"].Suspense, {
fallback: config.fallback || ''
}, /*#__PURE__*/_react["default"].createElement(Component, refProps))));
}
return /*#__PURE__*/_react["default"].createElement(BoundaryErrorWrapper, props, /*#__PURE__*/_react["default"].createElement(_react["default"].Suspense, {
fallback: config.fallback || ''
}, /*#__PURE__*/_react["default"].createElement(Component, refProps)));
});
};
exports.MFEComponent = MFEComponent;
var _default = MFEComponent;
exports["default"] = _default;