sample-cross-fx 0.14.9-beta.3522 → 0.14.10-beta.3616

package/app/{index.fc1cf0.js → index.00ccd7.js}

@@ -129975,17 +129975,19 @@ __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");
+
 
 
 /**
- * The React component for catching errors and displaying error information.
+ * The component for catching errors and displaying error information.
  */
 
 class ErrorBoundary extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super(...arguments);
     this.state = {
       error: undefined
     };
@@ -129993,42 +129995,40 @@ class ErrorBoundary extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
 
   componentDidCatch(error) {
     const {
-      onError
+      piral,
+      errorType
     } = this.props;
-
-    if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(onError)) {
-      onError(error);
-    }
-
+    const pilet = piral.meta.name;
+    console.error(`[${pilet}] Exception in component of type "${errorType}".`, error);
     this.setState({
       error
     });
   }
 
   render() {
-    const {
+    const _a = this.props,
+          {
       children,
-      renderError,
-      renderChild,
-      renderProps
-    } = this.props;
+      piral,
+      errorType
+    } = _a,
+          renderProps = (0,tslib__WEBPACK_IMPORTED_MODULE_1__.__rest)(_a, ["children", "piral", "errorType"]);
+
     const {
       error
     } = this.state;
+    const 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);
   }
 
 }
@@ -130084,6 +130084,110 @@ 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");
+
+
+class ForeignComponentContainer extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
+  constructor() {
+    super(...arguments);
+
+    this.handler = ev => {
+      const {
+        innerProps
+      } = this.props;
+      ev.stopPropagation();
+      innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+    };
+
+    this.setNode = node => {
+      this.current = node;
+    };
+  }
+
+  componentDidMount() {
+    const node = this.current;
+    const {
+      $component,
+      $context,
+      innerProps
+    } = this.props;
+    const {
+      mount
+    } = $component;
+
+    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;
+  }
+
+  componentDidUpdate() {
+    const {
+      current,
+      previous
+    } = this;
+    const {
+      $component,
+      $context,
+      innerProps
+    } = this.props;
+    const {
+      update
+    } = $component;
+
+    if (current !== previous) {
+      previous && this.componentWillUnmount();
+      current && this.componentDidMount();
+    } else if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(update)) {
+      update(current, innerProps, $context);
+    }
+  }
+
+  componentWillUnmount() {
+    const node = this.previous;
+    const {
+      $component
+    } = this.props;
+    const {
+      unmount
+    } = $component;
+
+    if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(unmount)) {
+      unmount(node);
+      node.removeEventListener('render-html', this.handler, false);
+    }
+
+    this.previous = undefined;
+  }
+
+  render() {
+    const {
+      $portalId
+    } = this.props;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+      "data-portal-id": $portalId,
+      ref: this.setNode
+    });
+  }
+
+}
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/components/Mediator.js":
 /*!*************************************************************!*\
   !*** ../../framework/piral-core/esm/components/Mediator.js ***!
@@ -130694,7 +130798,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");
@@ -130716,6 +130821,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");
+
 
 
 
@@ -130736,6 +130843,86 @@ __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");
+
+
+
+
+
+ // this is an arbitrary start number to have 6 digits
+
+let portalIdBase = 123456;
+
+function wrapReactComponent(Component, captured, Wrapper) {
+  return props => /*#__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(props => {
+    const {
+      state,
+      readState,
+      destroyPortal
+    } = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)();
+    const router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_2__.__RouterContext);
+    const id = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => (portalIdBase++).toString(26), _utils__WEBPACK_IMPORTED_MODULE_3__.none);
+    const context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => ({
+      router,
+      state,
+      readState
+    }), [router, state]);
+    const innerProps = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => Object.assign(Object.assign({}, props), captured), [props]);
+    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => () => 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) {
+    const pilet = captured.piral.meta.name;
+    console.error(`[${pilet}] The given value is not a valid component.`); // tslint:disable-next-line:no-null-keyword
+
+    component = () => null;
+  }
+
+  if (typeof component === 'object' && isNotExotic(component)) {
+    const result = (0,_utils__WEBPACK_IMPORTED_MODULE_6__.convertComponent)(converters[component.type], component);
+    return wrapForeignComponent(result, captured, Wrapper);
+  }
+
+  return wrapReactComponent(component, captured, Wrapper);
+}
 
 /***/ }),
 
@@ -130811,7 +130998,7 @@ function createInstance(config = {}) {
   const createApi = apiFactory(context, usedPlugins);
   const root = createApi({
     name: 'root',
-    version: "0.14.9-beta.3522" || 0,
+    version: "0.14.10-beta.3616" || 0,
     spec: ''
   });
   const options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
@@ -131171,6 +131358,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),
@@ -131320,11 +131508,14 @@ function createCoreApi(context) {
         return context.tryWriteDataItem(name, value, pilet, target, expiration);
       },
 
-      registerPage(route, arg, meta) {
+      registerPage(route, arg, meta = {}) {
+        const component = (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'page', undefined, {
+          meta
+        });
         context.registerPage(route, {
           pilet,
           meta,
-          component: (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'page')
+          component
         });
         return () => api.unregisterPage(route);
       },
@@ -131715,199 +131906,40 @@ __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");
-
 
 
 
 
- // this is an arbitrary start number to have 6 digits
-
-let portalIdBase = 123456;
-
 const DefaultWrapper = props => (0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(props.children);
 
-class ForeignComponentContainer extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
-  constructor() {
-    super(...arguments);
-
-    this.handler = ev => {
-      const {
-        innerProps
-      } = this.props;
-      ev.stopPropagation();
-      innerProps.piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-    };
-
-    this.setNode = node => {
-      this.current = node;
-    };
-  }
-
-  componentDidMount() {
-    const node = this.current;
-    const {
-      $component,
-      $context,
-      innerProps
-    } = this.props;
-    const {
-      mount
-    } = $component;
-
-    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;
-  }
-
-  componentDidUpdate() {
-    const {
-      current,
-      previous
-    } = this;
-    const {
-      $component,
-      $context,
-      innerProps
-    } = this.props;
-    const {
-      update
-    } = $component;
-
-    if (current !== previous) {
-      previous && this.componentWillUnmount();
-      current && this.componentDidMount();
-    } else if ((0,piral_base__WEBPACK_IMPORTED_MODULE_2__.isfunc)(update)) {
-      update(current, innerProps, $context);
-    }
-  }
-
-  componentWillUnmount() {
-    const node = this.previous;
-    const {
-      $component
-    } = this.props;
-    const {
-      unmount
-    } = $component;
-
-    if (node && (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.isfunc)(unmount)) {
-      unmount(node);
-      node.removeEventListener('render-html', this.handler, false);
-    }
-
-    this.previous = undefined;
-  }
+function getWrapper(wrappers, wrapperType) {
+  const WrapAll = wrappers['*'];
+  const WrapType = wrappers[wrapperType];
 
-  render() {
-    const {
-      $portalId
-    } = this.props;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-      "data-portal-id": $portalId,
-      ref: this.setNode
-    });
+  if (WrapAll && WrapType) {
+    return props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(WrapAll, Object.assign({}, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(WrapType, Object.assign({}, props)));
   }
 
+  return WrapType || WrapAll || DefaultWrapper;
 }
 
-function wrapReactComponent(Component, stasisOptions, piral, Wrapper) {
-  return props => /*#__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
-  }))));
+function makeWrapper(context, outerProps, wrapperType, errorType) {
+  const OuterWrapper = context.readState(m => getWrapper(m.registry.wrappers, wrapperType));
+  return props => /*#__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 wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(props => {
-    const {
-      state,
-      readState,
-      destroyPortal
-    } = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useGlobalStateContext)();
-    const router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_5__.__RouterContext);
-    const id = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => (portalIdBase++).toString(26), _utils__WEBPACK_IMPORTED_MODULE_6__.none);
-    const context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => ({
-      router,
-      state,
-      readState
-    }), [router, state]);
-    const innerProps = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => Object.assign(Object.assign({}, props), {
-      piral
-    }), [props]);
-    react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => () => 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 withApi(context, component, piral, errorType, wrapperType = errorType, captured = {}) {
+  const outerProps = Object.assign(Object.assign({}, captured), {
+    piral
   });
-}
-
-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 = () => null;
-  }
-
-  if (typeof component === 'object' && isNotExotic(component)) {
-    const 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;
-}
-
-function withApi(context, component, piral, errorType, wrapperType = errorType) {
   const converters = context.converters;
-  const Wrapper = context.readState(m => getWrapper(m.registry.wrappers, wrapperType));
-  return wrapComponent(converters, component, piral, Wrapper, {
-    onError(error) {
-      console.error(piral, error);
-    },
-
-    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(error, props) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralError, Object.assign({
-        type: errorType,
-        error: error
-      }, props));
-    }
-
-  });
+  const Wrapper = makeWrapper(context, outerProps, wrapperType, errorType);
+  return (0,_components__WEBPACK_IMPORTED_MODULE_3__.wrapComponent)(converters, component, outerProps, Wrapper);
 }
 
 /***/ }),
@@ -133353,12 +133385,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-cross-fx",
-      version: "0.14.9-beta.3522",
+      version: "0.14.10-beta.3616",
       dependencies: "@angular/common,@angular/compiler,@angular/core,@angular/platform-browser,@angular/platform-browser-dynamic,@webcomponents/webcomponentsjs,angular,aurelia-framework,aurelia-templating-binding,aurelia-templating-resources,aurelia-pal-browser,aurelia-event-aggregator,aurelia-history-browser,hyperapp,inferno,inferno-create-element,mithril,lit-element,solid-js,solid-js/dom,preact,riot,rxjs,vue,zone.js,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-21T00:58:23.969Z",
-      cli: "0.14.8",
+      date: "2022-02-04T13:38:21.948Z",
+      cli: "0.14.9",
       compat: "0.14"
     },
     pilets: {
@@ -255435,4 +255467,4 @@ const app = React.createElement(piral_core_1.Piral, {
 
 /******/ })()
 ;
-//# sourceMappingURL=index.fc1cf0.js.map
+//# sourceMappingURL=index.00ccd7.js.map