sample-piral 0.14.9 → 0.14.10

package/app/{index.7455cb.js → index.ebf3c0.js}

@@ -2367,8 +2367,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "ErrorBoundary": () => (/* binding */ ErrorBoundary)
 /* harmony export */ });
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/components.js");
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -2393,8 +2394,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 
 
+
 /**
- * The React component for catching errors and displaying error information.
+ * The component for catching errors and displaying error information.
  */
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
@@ -2402,12 +2404,12 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(ErrorBoundary);
 
-  function ErrorBoundary(props) {
+  function ErrorBoundary() {
     var _this;
 
     _classCallCheck(this, ErrorBoundary);
 
-    _this = _super.call(this, props);
+    _this = _super.apply(this, arguments);
     _this.state = {
       error: undefined
     };
@@ -2417,12 +2419,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _createClass(ErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(error) {
-      var onError = this.props.onError;
-
-      if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(onError)) {
-        onError(error);
-      }
-
+      var _this$props = this.props,
+          piral = _this$props.piral,
+          errorType = _this$props.errorType;
+      var pilet = piral.meta.name;
+      console.error("[".concat(pilet, "] Exception in component of type \"").concat(errorType, "\"."), error);
       this.setState({
         error: error
       });
@@ -2430,26 +2431,25 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          renderError = _this$props.renderError,
-          renderChild = _this$props.renderChild,
-          renderProps = _this$props.renderProps;
+      var _a = this.props,
+          children = _a.children,
+          piral = _a.piral,
+          errorType = _a.errorType,
+          renderProps = (0,tslib__WEBPACK_IMPORTED_MODULE_1__.__rest)(_a, ["children", "piral", "errorType"]);
+
       var error = this.state.error;
+      var rest = renderProps;
 
       if (error) {
-        if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(renderError)) {
-          return renderError(error, renderProps);
-        }
-
-        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-          style: {
-            whiteSpace: 'pre-wrap'
-          }
-        }, error && error.message);
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_2__.PiralError, Object.assign({
+          type: errorType,
+          error: error
+        }, rest));
       }
 
-      return (0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(renderChild) ? renderChild(children, renderProps) : children;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
+        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_2__.PiralLoadingIndicator, null)
+      }, children);
     }
   }]);
 
@@ -2510,6 +2510,133 @@ ExtensionSlot.displayName = "ExtensionSlot";
 
 /***/ }),
 
+/***/ "../../framework/piral-core/esm/components/ForeignComponentContainer.js":
+/*!******************************************************************************!*\
+  !*** ../../framework/piral-core/esm/components/ForeignComponentContainer.js ***!
+  \******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ForeignComponentContainer": () => (/* binding */ ForeignComponentContainer)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+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); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+
+
+var ForeignComponentContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ForeignComponentContainer, _React$Component);
+
+  var _super = _createSuper(ForeignComponentContainer);
+
+  function ForeignComponentContainer() {
+    var _this;
+
+    _classCallCheck(this, ForeignComponentContainer);
+
+    _this = _super.apply(this, arguments);
+
+    _this.handler = function (ev) {
+      var innerProps = _this.props.innerProps;
+      ev.stopPropagation();
+      innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+    };
+
+    _this.setNode = function (node) {
+      _this.current = node;
+    };
+
+    return _this;
+  }
+
+  _createClass(ForeignComponentContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var node = this.current;
+      var _this$props = this.props,
+          $component = _this$props.$component,
+          $context = _this$props.$context,
+          innerProps = _this$props.innerProps;
+      var mount = $component.mount;
+
+      if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(mount)) {
+        mount(node, innerProps, $context);
+        node.addEventListener('render-html', this.handler, false);
+      }
+
+      this.previous = node;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var current = this.current,
+          previous = this.previous;
+      var _this$props2 = this.props,
+          $component = _this$props2.$component,
+          $context = _this$props2.$context,
+          innerProps = _this$props2.innerProps;
+      var update = $component.update;
+
+      if (current !== previous) {
+        previous && this.componentWillUnmount();
+        current && this.componentDidMount();
+      } else if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(update)) {
+        update(current, innerProps, $context);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var node = this.previous;
+      var $component = this.props.$component;
+      var unmount = $component.unmount;
+
+      if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(unmount)) {
+        unmount(node);
+        node.removeEventListener('render-html', this.handler, false);
+      }
+
+      this.previous = undefined;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var $portalId = this.props.$portalId;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+        "data-portal-id": $portalId,
+        ref: this.setNode
+      });
+    }
+  }]);
+
+  return ForeignComponentContainer;
+}(react__WEBPACK_IMPORTED_MODULE_0__.Component);
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/components/Mediator.js":
 /*!*************************************************************!*\
   !*** ../../framework/piral-core/esm/components/Mediator.js ***!
@@ -3163,7 +3290,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "SetProvider": () => (/* reexport safe */ _SetProvider__WEBPACK_IMPORTED_MODULE_16__.SetProvider),
 /* harmony export */   "SetRedirect": () => (/* reexport safe */ _SetRedirect__WEBPACK_IMPORTED_MODULE_17__.SetRedirect),
 /* harmony export */   "SetRoute": () => (/* reexport safe */ _SetRoute__WEBPACK_IMPORTED_MODULE_18__.SetRoute),
-/* harmony export */   "SwitchErrorInfo": () => (/* reexport safe */ _SwitchErrorInfo__WEBPACK_IMPORTED_MODULE_19__.SwitchErrorInfo)
+/* harmony export */   "SwitchErrorInfo": () => (/* reexport safe */ _SwitchErrorInfo__WEBPACK_IMPORTED_MODULE_19__.SwitchErrorInfo),
+/* harmony export */   "wrapComponent": () => (/* reexport safe */ _wrapComponent__WEBPACK_IMPORTED_MODULE_20__.wrapComponent)
 /* harmony export */ });
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/components.js");
 /* harmony import */ var _DefaultErrorInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DefaultErrorInfo */ "../../framework/piral-core/esm/components/DefaultErrorInfo.js");
@@ -3185,6 +3313,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _SetRedirect__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./SetRedirect */ "../../framework/piral-core/esm/components/SetRedirect.js");
 /* harmony import */ var _SetRoute__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./SetRoute */ "../../framework/piral-core/esm/components/SetRoute.js");
 /* harmony import */ var _SwitchErrorInfo__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./SwitchErrorInfo */ "../../framework/piral-core/esm/components/SwitchErrorInfo.js");
+/* harmony import */ var _wrapComponent__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./wrapComponent */ "../../framework/piral-core/esm/components/wrapComponent.js");
+
 
 
 
@@ -3205,6 +3335,102 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+/***/ }),
+
+/***/ "../../framework/piral-core/esm/components/wrapComponent.js":
+/*!******************************************************************!*\
+  !*** ../../framework/piral-core/esm/components/wrapComponent.js ***!
+  \******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "wrapComponent": () => (/* binding */ wrapComponent)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
+/* harmony import */ var _PortalRenderer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PortalRenderer */ "../../framework/piral-core/esm/components/PortalRenderer.js");
+/* harmony import */ var _ForeignComponentContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ForeignComponentContainer */ "../../framework/piral-core/esm/components/ForeignComponentContainer.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+
+
+
+
+
+ // this is an arbitrary start number to have 6 digits
+
+var portalIdBase = 123456;
+
+function wrapReactComponent(Component, captured, Wrapper) {
+  return function (props) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, Object.assign({}, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, Object.assign({}, props, captured)));
+  };
+}
+
+function wrapForeignComponent(component, captured, Wrapper) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(function (props) {
+    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)(),
+        state = _useGlobalStateContex.state,
+        readState = _useGlobalStateContex.readState,
+        destroyPortal = _useGlobalStateContex.destroyPortal;
+
+    var router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_2__.__RouterContext);
+    var id = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
+      return (portalIdBase++).toString(26);
+    }, _utils__WEBPACK_IMPORTED_MODULE_3__.none);
+    var context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
+      return {
+        router: router,
+        state: state,
+        readState: readState
+      };
+    }, [router, state]);
+    var innerProps = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
+      return Object.assign(Object.assign({}, props), captured);
+    }, [props]);
+    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
+      return function () {
+        return destroyPortal(id);
+      };
+    }, _utils__WEBPACK_IMPORTED_MODULE_3__.none);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, Object.assign({}, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_PortalRenderer__WEBPACK_IMPORTED_MODULE_4__.PortalRenderer, {
+      id: id
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ForeignComponentContainer__WEBPACK_IMPORTED_MODULE_5__.ForeignComponentContainer, {
+      innerProps: innerProps,
+      "$portalId": id,
+      "$component": component,
+      "$context": context
+    }));
+  });
+}
+
+function isNotExotic(component) {
+  return !component.$$typeof;
+}
+
+function wrapComponent(converters, component, captured, Wrapper) {
+  if (!component) {
+    var pilet = captured.piral.meta.name;
+    console.error("[".concat(pilet, "] The given value is not a valid component.")); // tslint:disable-next-line:no-null-keyword
+
+    component = function component() {
+      return null;
+    };
+  }
+
+  if (_typeof(component) === 'object' && isNotExotic(component)) {
+    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_6__.convertComponent)(converters[component.type], component);
+    return wrapForeignComponent(result, captured, Wrapper);
+  }
+
+  return wrapReactComponent(component, captured, Wrapper);
+}
 
 /***/ }),
 
@@ -3285,7 +3511,7 @@ function createInstance() {
   var createApi = apiFactory(context, usedPlugins);
   var root = createApi({
     name: 'root',
-    version: "0.14.9" || 0,
+    version: "0.14.10" || 0,
     spec: ''
   });
   var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
@@ -3666,6 +3892,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "SetRoute": () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.SetRoute),
 /* harmony export */   "SwitchErrorInfo": () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.SwitchErrorInfo),
 /* harmony export */   "getPiralComponent": () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.getPiralComponent),
+/* harmony export */   "wrapComponent": () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_3__.wrapComponent),
 /* harmony export */   "useAction": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_4__.useAction),
 /* harmony export */   "useActions": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_4__.useActions),
 /* harmony export */   "useGlobalState": () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_4__.useGlobalState),
@@ -3840,11 +4067,15 @@ function createCoreApi(context) {
         var expiration = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getDataExpiration)(expires);
         return context.tryWriteDataItem(name, value, pilet, target, expiration);
       },
-      registerPage: function registerPage(route, arg, meta) {
+      registerPage: function registerPage(route, arg) {
+        var meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var component = (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'page', undefined, {
+          meta: meta
+        });
         context.registerPage(route, {
           pilet: pilet,
           meta: meta,
-          component: (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'page')
+          component: component
         });
         return function () {
           return api.unregisterPage(route);
@@ -4311,238 +4542,50 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "withApi": () => (/* binding */ withApi)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ErrorBoundary.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/components.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ErrorBoundary.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/wrapComponent.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-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); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 
 
 
-
-
- // this is an arbitrary start number to have 6 digits
-
-var portalIdBase = 123456;
-
 var DefaultWrapper = function DefaultWrapper(props) {
   return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(props.children);
 };
 
-var ForeignComponentContainer = /*#__PURE__*/function (_React$Component) {
-  _inherits(ForeignComponentContainer, _React$Component);
-
-  var _super = _createSuper(ForeignComponentContainer);
-
-  function ForeignComponentContainer() {
-    var _this;
-
-    _classCallCheck(this, ForeignComponentContainer);
-
-    _this = _super.apply(this, arguments);
-
-    _this.handler = function (ev) {
-      var innerProps = _this.props.innerProps;
-      ev.stopPropagation();
-      innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-    };
+function getWrapper(wrappers, wrapperType) {
+  var WrapAll = wrappers['*'];
+  var WrapType = wrappers[wrapperType];
 
-    _this.setNode = function (node) {
-      _this.current = node;
+  if (WrapAll && WrapType) {
+    return function (props) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(WrapAll, Object.assign({}, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(WrapType, Object.assign({}, props)));
     };
-
-    return _this;
   }
 
-  _createClass(ForeignComponentContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var node = this.current;
-      var _this$props = this.props,
-          $component = _this$props.$component,
-          $context = _this$props.$context,
-          innerProps = _this$props.innerProps;
-      var mount = $component.mount;
-
-      if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.isfunc)(mount)) {
-        mount(node, innerProps, $context);
-        node.addEventListener('render-html', this.handler, false);
-      }
-
-      this.previous = node;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var current = this.current,
-          previous = this.previous;
-      var _this$props2 = this.props,
-          $component = _this$props2.$component,
-          $context = _this$props2.$context,
-          innerProps = _this$props2.innerProps;
-      var update = $component.update;
-
-      if (current !== previous) {
-        previous && this.componentWillUnmount();
-        current && this.componentDidMount();
-      } else if ((0,piral_base__WEBPACK_IMPORTED_MODULE_2__.isfunc)(update)) {
-        update(current, innerProps, $context);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var node = this.previous;
-      var $component = this.props.$component;
-      var unmount = $component.unmount;
-
-      if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.isfunc)(unmount)) {
-        unmount(node);
-        node.removeEventListener('render-html', this.handler, false);
-      }
-
-      this.previous = undefined;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var $portalId = this.props.$portalId;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-        "data-portal-id": $portalId,
-        ref: this.setNode
-      });
-    }
-  }]);
-
-  return ForeignComponentContainer;
-}(react__WEBPACK_IMPORTED_MODULE_0__.Component);
-
-function wrapReactComponent(Component, stasisOptions, piral, Wrapper) {
-  return function (props) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, Object.assign({}, props, {
-      piral: piral
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ErrorBoundary, Object.assign({}, stasisOptions, {
-      renderProps: props
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, Object.assign({}, props, {
-      piral: piral
-    }))));
-  };
+  return WrapType || WrapAll || DefaultWrapper;
 }
 
-function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(function (props) {
-    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useGlobalStateContext)(),
-        state = _useGlobalStateContex.state,
-        readState = _useGlobalStateContex.readState,
-        destroyPortal = _useGlobalStateContex.destroyPortal;
-
-    var router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_5__.__RouterContext);
-    var id = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
-      return (portalIdBase++).toString(26);
-    }, _utils__WEBPACK_IMPORTED_MODULE_6__.none);
-    var context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
-      return {
-        router: router,
-        state: state,
-        readState: readState
-      };
-    }, [router, state]);
-    var innerProps = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
-      return Object.assign(Object.assign({}, props), {
-        piral: piral
-      });
-    }, [props]);
-    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
-      return function () {
-        return destroyPortal(id);
-      };
-    }, _utils__WEBPACK_IMPORTED_MODULE_6__.none);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, Object.assign({}, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ErrorBoundary, Object.assign({}, stasisOptions, {
-      renderProps: props
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_7__.PortalRenderer, {
-      id: id
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(ForeignComponentContainer, {
-      innerProps: innerProps,
-      "$portalId": id,
-      "$component": component,
-      "$context": context
-    })));
+function makeWrapper(context, outerProps, wrapperType, errorType) {
+  var OuterWrapper = context.readState(function (m) {
+    return getWrapper(m.registry.wrappers, wrapperType);
   });
-}
-
-function isNotExotic(component) {
-  return !component.$$typeof;
-}
-
-function wrapComponent(converters, component, piral, Wrapper, stasisOptions) {
-  if (!component) {
-    console.error('The given value is not a valid component.'); // tslint:disable-next-line:no-null-keyword
-
-    component = function component() {
-      return null;
-    };
-  }
-
-  if (_typeof(component) === 'object' && isNotExotic(component)) {
-    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.convertComponent)(converters[component.type], component);
-    return wrapForeignComponent(result, stasisOptions, piral, Wrapper);
-  }
-
-  return wrapReactComponent(component, stasisOptions, piral, Wrapper);
-}
-
-function getWrapper(wrappers, wrapperType) {
-  return wrappers[wrapperType] || wrappers['*'] || DefaultWrapper;
+  return function (props) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(OuterWrapper, Object.assign({}, outerProps, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_2__.ErrorBoundary, Object.assign({}, outerProps, props, {
+      errorType: errorType
+    }), props.children));
+  };
 }
 
 function withApi(context, component, piral, errorType) {
   var wrapperType = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : errorType;
-  var converters = context.converters;
-  var Wrapper = context.readState(function (m) {
-    return getWrapper(m.registry.wrappers, wrapperType);
-  });
-  return wrapComponent(converters, component, piral, Wrapper, {
-    onError: function onError(error) {
-      console.error(piral, error);
-    },
-    renderChild: function renderChild(child) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralLoadingIndicator, null)
-      }, child);
-    },
-    renderError: function renderError(error, props) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralError, Object.assign({
-        type: errorType,
-        error: error
-      }, props));
-    }
+  var captured = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+  var outerProps = Object.assign(Object.assign({}, captured), {
+    piral: piral
   });
+  var converters = context.converters;
+  var Wrapper = makeWrapper(context, outerProps, wrapperType, errorType);
+  return (0,_components__WEBPACK_IMPORTED_MODULE_3__.wrapComponent)(converters, component, outerProps, Wrapper);
 }
 
 /***/ }),
@@ -5679,6 +5722,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "withoutExtension": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.withoutExtension),
 /* harmony export */   "withoutKey": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.withoutKey),
 /* harmony export */   "withoutPage": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.withoutPage),
+/* harmony export */   "wrapComponent": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.wrapComponent),
 /* harmony export */   "Dashboard": () => (/* reexport safe */ piral_ext__WEBPACK_IMPORTED_MODULE_1__.Dashboard),
 /* harmony export */   "Languages": () => (/* reexport safe */ piral_ext__WEBPACK_IMPORTED_MODULE_1__.Languages),
 /* harmony export */   "Menu": () => (/* reexport safe */ piral_ext__WEBPACK_IMPORTED_MODULE_1__.Menu),
@@ -9224,12 +9268,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "0.14.9",
+      version: "0.14.10",
       dependencies: "reactstrap,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-21T11:12:10.668Z",
-      cli: "0.14.9",
+      date: "2022-02-04T21:45:26.856Z",
+      cli: "0.14.10",
       compat: "0.14"
     },
     pilets: {
@@ -80533,4 +80577,4 @@ var layout_1 = __webpack_require__(/*! ./layout */ "./src/layout.tsx");
 
 /******/ })()
 ;
-//# sourceMappingURL=index.7455cb.js.map
+//# sourceMappingURL=index.ebf3c0.js.map