sample-piral 0.14.8-beta.3500 → 0.14.8-beta.3511

package/app/{index.a98486.js → index.545e8c.js}

@@ -1812,8 +1812,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _createInstance__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./createInstance */ "../../framework/piral-core/esm/createInstance.js");
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/ResponsiveLayout.js");
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/Mediator.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/PiralView.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/PiralView.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
+/* harmony import */ var _RootListener__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./RootListener */ "../../framework/piral-core/esm/RootListener.js");
+
 
 
 
@@ -1844,8 +1846,9 @@ var Piral = function Piral(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ResponsiveLayout, {
     breakpoints: breakpoints
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_4__.Mediator, {
-    options: instance.options
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_5__.PiralView, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_6__.PortalRenderer, {
+    options: instance.options,
+    key: instance.id
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_RootListener__WEBPACK_IMPORTED_MODULE_5__.RootListener, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_6__.PiralView, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_7__.PortalRenderer, {
     id: "root"
   }), children));
 };
@@ -1853,6 +1856,65 @@ Piral.displayName = 'Piral';
 
 /***/ }),
 
+/***/ "../../framework/piral-core/esm/RootListener.js":
+/*!******************************************************!*\
+  !*** ../../framework/piral-core/esm/RootListener.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "RootListener": () => (/* binding */ RootListener)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! . */ "../../framework/piral-core/esm/hooks/globalState.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/element.js");
+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; }
+
+
+
+
+var RootListener = function RootListener() {
+  var context = (0,___WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)();
+  react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(function () {
+    if (typeof document !== 'undefined') {
+      var handler = function handler(ev) {
+        ev.stopPropagation();
+        var _ev$detail = ev.detail,
+            target = _ev$detail.target,
+            props = _ev$detail.props;
+
+        var _renderElement = (0,_modules__WEBPACK_IMPORTED_MODULE_2__.renderElement)(context, target, props),
+            _renderElement2 = _slicedToArray(_renderElement, 2),
+            dispose = _renderElement2[0],
+            update = _renderElement2[1];
+
+        target.dispose = dispose;
+        target.update = update;
+      };
+
+      document.body.addEventListener('render-html', handler, false);
+      return function () {
+        document.body.removeEventListener('render-html', handler, false);
+      };
+    }
+  }, [context]);
+  return null;
+};
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/actions/app.js":
 /*!*****************************************************!*\
   !*** ../../framework/piral-core/esm/actions/app.js ***!
@@ -2427,7 +2489,8 @@ function ExtensionSlot(props) {
       _props$render = props.render,
       render = _props$render === void 0 ? _utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender : _props$render,
       empty = props.empty,
-      params = props.params;
+      params = props.params,
+      children = props.children;
   var extensions = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalState)(function (s) {
     return s.registry.extensions[name] || _utils__WEBPACK_IMPORTED_MODULE_3__.none;
   });
@@ -2438,6 +2501,7 @@ function ExtensionSlot(props) {
         defaults = _ref$defaults === void 0 ? {} : _ref$defaults;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, {
       key: "".concat((reference === null || reference === void 0 ? void 0 : reference.displayName) || '_').concat(i),
+      children: children,
       params: Object.assign(Object.assign({}, defaults), params || {})
     });
   }));
@@ -2459,7 +2523,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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/create.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.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");
 
 
@@ -2471,20 +2535,30 @@ __webpack_require__.r(__webpack_exports__);
 
 var Mediator = function Mediator(_ref) {
   var options = _ref.options;
-  var initialize = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useAction)('initialize');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)(),
+      initialize = _useGlobalStateContex.initialize,
+      readState = _useGlobalStateContex.readState;
+
   react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
-    var _startLoadingPilets = (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.startLoadingPilets)(options),
-        connect = _startLoadingPilets.connect,
-        disconnect = _startLoadingPilets.disconnect;
+    var shouldLoad = readState(function (s) {
+      return s.app.loading;
+    });
 
-    var notifier = function notifier(error, pilets, loaded) {
-      initialize(!loaded, error, pilets);
-    };
+    if (shouldLoad) {
+      var _startLoadingPilets = (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.startLoadingPilets)(options),
+          connect = _startLoadingPilets.connect,
+          disconnect = _startLoadingPilets.disconnect;
 
-    connect(notifier);
-    return function () {
-      return disconnect(notifier);
-    };
+      var notifier = function notifier(error, pilets, loaded) {
+        initialize(!loaded, error, pilets);
+      };
+
+      connect(notifier);
+      return function () {
+        return disconnect(notifier);
+      };
+    }
   }, _utils__WEBPACK_IMPORTED_MODULE_3__.none); // tslint:disable-next-line:no-null-keyword
 
   return null;
@@ -2666,10 +2740,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/media.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/media.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/media.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
 
 
 
@@ -2684,14 +2757,17 @@ var ResponsiveLayout = function ResponsiveLayout(_ref) {
   var current = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalState)(function (m) {
     return m.app.layout;
   }) || 'desktop';
-  var changeTo = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useAction)('changeLayout');
-  var selected = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useMedia)(breakpoints, _utils__WEBPACK_IMPORTED_MODULE_1__.defaultLayouts, current);
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalStateContext)(),
+      changeLayout = _useGlobalStateContex.changeLayout;
+
+  var selected = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useMedia)(breakpoints, _utils__WEBPACK_IMPORTED_MODULE_1__.defaultLayouts, current);
   react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
     if (selected !== current) {
-      changeTo(selected);
+      changeLayout(selected);
     }
   }, [selected]);
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.defaultRender)(children);
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.defaultRender)(children);
 };
 ResponsiveLayout.displayName = 'ResponsiveLayout';
 
@@ -2708,7 +2784,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetComponent": () => (/* binding */ SetComponent)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2718,7 +2794,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetComponent(_ref) {
   var name = _ref.name,
       component = _ref.component;
-  var setComponent = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setComponent');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setComponent = _useGlobalStateContex.setComponent;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setComponent(name, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2739,7 +2818,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetError": () => (/* binding */ SetError)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2749,7 +2828,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetError(_ref) {
   var type = _ref.type,
       component = _ref.component;
-  var setErrorComponent = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setErrorComponent');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setErrorComponent = _useGlobalStateContex.setErrorComponent;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setErrorComponent(type, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2836,7 +2918,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetProvider": () => (/* binding */ SetProvider)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2845,7 +2927,10 @@ __webpack_require__.r(__webpack_exports__);
 
 function SetProvider(_ref) {
   var provider = _ref.provider;
-  var includeProvider = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('includeProvider');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      includeProvider = _useGlobalStateContex.includeProvider;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return provider && includeProvider(provider);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2868,7 +2953,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_3__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 
@@ -2880,7 +2965,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetRedirect(_ref) {
   var from = _ref.from,
       to = _ref.to;
-  var setRoute = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useAction)('setRoute');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)(),
+      setRoute = _useGlobalStateContex.setRoute;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useSetter)(function () {
     return setRoute(from, function () {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_router__WEBPACK_IMPORTED_MODULE_3__.Redirect, {
@@ -2905,7 +2993,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetRoute": () => (/* binding */ SetRoute)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2915,7 +3003,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetRoute(_ref) {
   var path = _ref.path,
       component = _ref.component;
-  var setRoute = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setRoute');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setRoute = _useGlobalStateContex.setRoute;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setRoute(path, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -3128,15 +3219,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "createInstance": () => (/* binding */ createInstance)
 /* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/events.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/strategies.js");
-/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/dependencies.js");
-/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/api.js");
-/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createGlobalState.js");
-/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createActions.js");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers */ "../../framework/piral-core/esm/helpers.js");
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/events.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/strategies.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/dependencies.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/api.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createGlobalState.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createActions.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers */ "../../framework/piral-core/esm/helpers.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ "../../framework/piral-core/esm/utils/guid.js");
+
 
 
 
@@ -3165,35 +3258,37 @@ render(app, document.querySelector('#app'));
 
 function createInstance() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var state = config.state,
+  var _config$id = config.id,
+      id = _config$id === void 0 ? (0,_utils__WEBPACK_IMPORTED_MODULE_0__.generateId)() : _config$id,
+      state = config.state,
       actions = config.actions,
       _config$availablePile = config.availablePilets,
       availablePilets = _config$availablePile === void 0 ? [] : _config$availablePile,
       plugins = config.plugins,
       _config$requestPilets = config.requestPilets,
-      requestPilets = _config$requestPilets === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_0__.defaultModuleRequester : _config$requestPilets,
+      requestPilets = _config$requestPilets === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultModuleRequester : _config$requestPilets,
       loaderConfig = config.loaderConfig,
       _config$async = config.async,
       async = _config$async === void 0 ? false : _config$async,
       _config$shareDependen = config.shareDependencies,
-      shareDependencies = _config$shareDependen === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_0__.defaultDependencySelector : _config$shareDependen,
+      shareDependencies = _config$shareDependen === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultDependencySelector : _config$shareDependen,
       loadPilet = config.loadPilet,
       loaders = config.loaders,
       debug = config.debug,
       _config$apiFactory = config.apiFactory,
-      apiFactory = _config$apiFactory === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultApiFactory : _config$apiFactory;
-  var globalState = (0,_state__WEBPACK_IMPORTED_MODULE_2__.createGlobalState)(state);
-  var events = (0,piral_base__WEBPACK_IMPORTED_MODULE_3__.createListener)(globalState);
-  var context = (0,_state__WEBPACK_IMPORTED_MODULE_4__.createActions)(globalState, events);
+      apiFactory = _config$apiFactory === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_2__.defaultApiFactory : _config$apiFactory;
+  var globalState = (0,_state__WEBPACK_IMPORTED_MODULE_3__.createGlobalState)(state);
+  var events = (0,piral_base__WEBPACK_IMPORTED_MODULE_4__.createListener)(globalState);
+  var context = (0,_state__WEBPACK_IMPORTED_MODULE_5__.createActions)(globalState, events);
   var definedPlugins = plugins || [];
   var usedPlugins = Array.isArray(definedPlugins) ? definedPlugins : [definedPlugins];
   var createApi = apiFactory(context, usedPlugins);
   var root = createApi({
     name: 'root',
-    version: "0.14.8-beta.3500" || 0,
+    version: "0.14.8-beta.3511" || 0,
     spec: ''
   });
-  var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_5__.createPiletOptions)({
+  var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
     context: context,
     createApi: createApi,
     loaders: loaders,
@@ -3201,17 +3296,18 @@ function createInstance() {
     availablePilets: availablePilets,
     loaderConfig: loaderConfig,
     shareDependencies: shareDependencies,
-    strategy: (0,piral_base__WEBPACK_IMPORTED_MODULE_6__.isfunc)(async) ? async : async ? piral_base__WEBPACK_IMPORTED_MODULE_7__.blazingStrategy : piral_base__WEBPACK_IMPORTED_MODULE_7__.standardStrategy,
+    strategy: (0,piral_base__WEBPACK_IMPORTED_MODULE_7__.isfunc)(async) ? async : async ? piral_base__WEBPACK_IMPORTED_MODULE_8__.blazingStrategy : piral_base__WEBPACK_IMPORTED_MODULE_8__.standardStrategy,
     requestPilets: requestPilets,
     debug: debug
   });
 
   if (actions) {
-    (0,_state__WEBPACK_IMPORTED_MODULE_4__.includeActions)(context, actions);
+    (0,_state__WEBPACK_IMPORTED_MODULE_5__.includeActions)(context, actions);
   }
 
   context.options = options;
-  return (0,tslib__WEBPACK_IMPORTED_MODULE_8__.__assign)(events, {
+  return (0,tslib__WEBPACK_IMPORTED_MODULE_9__.__assign)(events, {
+    id: id,
     createApi: createApi,
     context: context,
     root: root,
@@ -3605,6 +3701,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "noop": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.noop),
 /* harmony export */   "prependItem": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.prependItem),
 /* harmony export */   "prependItems": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.prependItems),
+/* harmony export */   "reactifyContent": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.reactifyContent),
 /* harmony export */   "removeIndicator": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.removeIndicator),
 /* harmony export */   "removeNested": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.removeNested),
 /* harmony export */   "renderInDom": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_6__.renderInDom),
@@ -3651,201 +3748,103 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "createCoreApi": () => (/* binding */ createCoreApi),
 /* harmony export */   "createExtenders": () => (/* binding */ createExtenders),
 /* harmony export */   "defaultApiFactory": () => (/* binding */ defaultApiFactory)
 /* harmony export */ });
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/api.js");
-/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../state */ "../../framework/piral-core/esm/state/withApi.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ExtensionSlot.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/data.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); }
-
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/api.js");
+/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./core */ "../../framework/piral-core/esm/modules/core.js");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-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 _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 _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 _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
-
-function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
-
-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 _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-
-
-
 
 
-if (typeof window !== 'undefined' && 'customElements' in window) {
-  var PiralExtension = /*#__PURE__*/function (_HTMLElement) {
-    _inherits(PiralExtension, _HTMLElement);
-
-    var _super = _createSuper(PiralExtension);
-
-    function PiralExtension() {
-      var _this;
-
-      _classCallCheck(this, PiralExtension);
+function createExtenders(context, apis) {
+  var creators = [_core__WEBPACK_IMPORTED_MODULE_0__.createCoreApi].concat(_toConsumableArray(apis.filter(piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)));
+  return creators.map(function (c) {
+    var ctx = c(context);
 
-      _this = _super.apply(this, arguments);
-      _this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-      _this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-      return _this;
+    if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(ctx)) {
+      return ctx;
+    } else {
+      return function () {
+        return Object.assign({}, ctx);
+      };
     }
-
-    _createClass(PiralExtension, [{
-      key: "getProps",
-      value: function getProps() {
-        var name = this.getAttribute('name');
-        var params = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.tryParseJson)(this.getAttribute('params'));
-        return {
-          name: name,
-          params: params
-        };
-      }
-    }, {
-      key: "connectedCallback",
-      value: function connectedCallback() {
-        if (this.isConnected) {
-          this.dispatchEvent(new CustomEvent('render-html', {
-            bubbles: true,
-            detail: {
-              target: this,
-              props: this.getProps()
-            }
-          }));
-        }
-      }
-    }, {
-      key: "disconnectedCallback",
-      value: function disconnectedCallback() {
-        this.dispose();
-        this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-        this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-      }
-    }, {
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback() {
-        this.update(this.getProps());
-      }
-    }], [{
-      key: "observedAttributes",
-      get: function get() {
-        return ['name', 'params'];
-      }
-    }]);
-
-    return PiralExtension;
-  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
-
-  customElements.define('piral-extension', PiralExtension);
+  });
+}
+function defaultApiFactory(context, apis) {
+  var extenders = createExtenders(context, apis);
+  return function (target) {
+    var api = (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.initializeApi)(target, context);
+    context.apis[target.name] = api;
+    return (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.mergeApis)(api, extenders, target);
+  };
 }
 
-function render(context, element, props) {
-  var _renderInDom = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.renderInDom)(context, element, _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot, props),
-      _renderInDom2 = _slicedToArray(_renderInDom, 2),
-      id = _renderInDom2[0],
-      portal = _renderInDom2[1];
+/***/ }),
 
-  var evName = 'extension-props-changed';
+/***/ "../../framework/piral-core/esm/modules/core.js":
+/*!******************************************************!*\
+  !*** ../../framework/piral-core/esm/modules/core.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-  var handler = function handler(ev) {
-    return update(ev.detail);
-  };
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "createCoreApi": () => (/* binding */ createCoreApi)
+/* harmony export */ });
+/* harmony import */ var _element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./element */ "../../framework/piral-core/esm/modules/element.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../state */ "../../framework/piral-core/esm/state/withApi.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ExtensionSlot.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/data.js");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-  var dispose = function dispose() {
-    context.hidePortal(id, portal);
-    element.removeEventListener(evName, handler);
-  };
+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."); }
 
-  var update = function update(newProps) {
-    var _changeDomPortal = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.changeDomPortal)(id, portal, context, element, _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot, newProps);
+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); }
 
-    var _changeDomPortal2 = _slicedToArray(_changeDomPortal, 2);
+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; }
 
-    id = _changeDomPortal2[0];
-    portal = _changeDomPortal2[1];
-  };
+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; }
 
-  element.addEventListener(evName, handler);
-  return [dispose, update];
-}
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function createCoreApi(context) {
-  if (typeof document !== 'undefined') {
-    document.body.addEventListener('render-html', function (ev) {
-      ev.stopPropagation();
-      var container = ev.detail.target;
 
-      var _render = render(context, container, ev.detail.props),
-          _render2 = _slicedToArray(_render, 2),
-          dispose = _render2[0],
-          update = _render2[1];
 
-      container.dispose = dispose;
-      container.update = update;
-    }, false);
-  }
 
-  return function (api, target) {
-    var pilet = target.name;
+
+function createCoreApi(context) {
+  return function (api, meta) {
+    var pilet = meta.name;
     return {
       getData: function getData(name) {
         return context.readDataValue(name);
       },
       setData: function setData(name, value, options) {
-        var _createDataOptions = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.createDataOptions)(options),
+        var _createDataOptions = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createDataOptions)(options),
             _createDataOptions$ta = _createDataOptions.target,
             target = _createDataOptions$ta === void 0 ? 'memory' : _createDataOptions$ta,
             expires = _createDataOptions.expires;
 
-        var expiration = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getDataExpiration)(expires);
+        var expiration = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getDataExpiration)(expires);
         return context.tryWriteDataItem(name, value, pilet, target, expiration);
       },
       registerPage: function registerPage(route, arg, meta) {
         context.registerPage(route, {
           pilet: pilet,
           meta: meta,
-          component: (0,_state__WEBPACK_IMPORTED_MODULE_4__.withApi)(context, arg, api, 'page')
+          component: (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'page')
         });
         return function () {
           return api.unregisterPage(route);
@@ -3857,7 +3856,7 @@ function createCoreApi(context) {
       registerExtension: function registerExtension(name, arg, defaults) {
         context.registerExtension(name, {
           pilet: pilet,
-          component: (0,_state__WEBPACK_IMPORTED_MODULE_4__.withApi)(context, arg, api, 'extension'),
+          component: (0,_state__WEBPACK_IMPORTED_MODULE_1__.withApi)(context, arg, api, 'extension'),
           reference: arg,
           defaults: defaults
         });
@@ -3869,38 +3868,16 @@ function createCoreApi(context) {
         context.unregisterExtension(name, arg);
       },
       renderHtmlExtension: function renderHtmlExtension(element, props) {
-        var _render3 = render(context, element, props),
-            _render4 = _slicedToArray(_render3, 1),
-            dispose = _render4[0];
+        var _renderElement = (0,_element__WEBPACK_IMPORTED_MODULE_2__.renderElement)(context, element, props),
+            _renderElement2 = _slicedToArray(_renderElement, 1),
+            dispose = _renderElement2[0];
 
         return dispose;
       },
-      Extension: _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot
+      Extension: _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot
     };
   };
 }
-function createExtenders(context, apis) {
-  var creators = [createCoreApi].concat(_toConsumableArray(apis.filter(piral_base__WEBPACK_IMPORTED_MODULE_5__.isfunc)));
-  return creators.map(function (c) {
-    var ctx = c(context);
-
-    if ((0,piral_base__WEBPACK_IMPORTED_MODULE_5__.isfunc)(ctx)) {
-      return ctx;
-    } else {
-      return function () {
-        return Object.assign({}, ctx);
-      };
-    }
-  });
-}
-function defaultApiFactory(context, apis) {
-  var extenders = createExtenders(context, apis);
-  return function (target) {
-    var api = (0,piral_base__WEBPACK_IMPORTED_MODULE_6__.initializeApi)(target, context);
-    context.apis[target.name] = api;
-    return (0,piral_base__WEBPACK_IMPORTED_MODULE_6__.mergeApis)(api, extenders, target);
-  };
-}
 
 /***/ }),
 
@@ -3975,6 +3952,192 @@ function defaultModuleRequester() {
 
 /***/ }),
 
+/***/ "../../framework/piral-core/esm/modules/element.js":
+/*!*********************************************************!*\
+  !*** ../../framework/piral-core/esm/modules/element.js ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "renderElement": () => (/* binding */ renderElement)
+/* harmony export */ });
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ExtensionSlot.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/extension.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __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 _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 _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 _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 _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+
+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 _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+
+
+
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  var PiralExtension = /*#__PURE__*/function (_HTMLElement) {
+    _inherits(PiralExtension, _HTMLElement);
+
+    var _super = _createSuper(PiralExtension);
+
+    function PiralExtension() {
+      var _this;
+
+      _classCallCheck(this, PiralExtension);
+
+      _this = _super.apply(this, arguments);
+      _this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      _this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      _this.props = {
+        name: _this.getAttribute('name'),
+        params: (0,_utils__WEBPACK_IMPORTED_MODULE_0__.tryParseJson)(_this.getAttribute('params')),
+        empty: undefined,
+        children: (0,_utils__WEBPACK_IMPORTED_MODULE_1__.reactifyContent)(_this.childNodes)
+      };
+      return _this;
+    }
+
+    _createClass(PiralExtension, [{
+      key: "params",
+      get: function get() {
+        return this.props.params;
+      },
+      set: function set(value) {
+        this.props.params = value;
+        this.update(this.props);
+      }
+    }, {
+      key: "name",
+      get: function get() {
+        return this.props.name;
+      },
+      set: function set(value) {
+        this.props.name = value;
+        this.update(this.props);
+      }
+    }, {
+      key: "empty",
+      get: function get() {
+        return this.props.empty;
+      },
+      set: function set(value) {
+        this.props.empty = value;
+        this.update(this.props);
+      }
+    }, {
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        if (this.isConnected) {
+          this.dispatchEvent(new CustomEvent('render-html', {
+            bubbles: true,
+            detail: {
+              target: this,
+              props: this.props
+            }
+          }));
+        }
+      }
+    }, {
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        this.dispose();
+        this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+        this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      }
+    }, {
+      key: "attributeChangedCallback",
+      value: function attributeChangedCallback(name, _, newValue) {
+        switch (name) {
+          case 'name':
+            this.name = newValue;
+            break;
+
+          case 'params':
+            this.params = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.tryParseJson)(newValue);
+            break;
+        }
+      }
+    }], [{
+      key: "observedAttributes",
+      get: function get() {
+        return ['name', 'params'];
+      }
+    }]);
+
+    return PiralExtension;
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+
+  customElements.define('piral-extension', PiralExtension);
+}
+
+function renderElement(context, element, props) {
+  var _renderInDom = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.renderInDom)(context, element, _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot, props),
+      _renderInDom2 = _slicedToArray(_renderInDom, 2),
+      id = _renderInDom2[0],
+      portal = _renderInDom2[1];
+
+  var evName = 'extension-props-changed';
+
+  var handler = function handler(ev) {
+    return update(ev.detail);
+  };
+
+  var dispose = function dispose() {
+    context.hidePortal(id, portal);
+    element.removeEventListener(evName, handler);
+  };
+
+  var update = function update(newProps) {
+    var _changeDomPortal = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.changeDomPortal)(id, portal, context, element, _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot, newProps);
+
+    var _changeDomPortal2 = _slicedToArray(_changeDomPortal, 2);
+
+    id = _changeDomPortal2[0];
+    portal = _changeDomPortal2[1];
+  };
+
+  element.addEventListener(evName, handler);
+  return [dispose, update];
+}
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/state/createActions.js":
 /*!*************************************************************!*\
   !*** ../../framework/piral-core/esm/state/createActions.js ***!
@@ -4149,15 +4312,14 @@ __webpack_require__.r(__webpack_exports__);
 /* 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_6__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.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_8__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_10__ = __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/actions.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.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 _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.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"); } }
@@ -4295,17 +4457,15 @@ function wrapReactComponent(Component, stasisOptions, piral, Wrapper) {
 
 function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(function (props) {
-    var _useActions = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useActions)(),
-        destroyPortal = _useActions.destroyPortal;
-
-    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useGlobalStateContext)(),
+    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useGlobalStateContext)(),
         state = _useGlobalStateContex.state,
-        readState = _useGlobalStateContex.readState;
+        readState = _useGlobalStateContex.readState,
+        destroyPortal = _useGlobalStateContex.destroyPortal;
 
-    var router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_6__.__RouterContext);
+    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_7__.none);
+    }, _utils__WEBPACK_IMPORTED_MODULE_6__.none);
     var context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
       return {
         router: router,
@@ -4322,10 +4482,10 @@ function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
       return function () {
         return destroyPortal(id);
       };
-    }, _utils__WEBPACK_IMPORTED_MODULE_7__.none);
+    }, _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_8__.PortalRenderer, {
+    }), /*#__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,
@@ -4350,7 +4510,7 @@ function wrapComponent(converters, component, piral, Wrapper, stasisOptions) {
   }
 
   if (_typeof(component) === 'object' && isNotExotic(component)) {
-    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.convertComponent)(converters[component.type], component);
+    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.convertComponent)(converters[component.type], component);
     return wrapForeignComponent(result, stasisOptions, piral, Wrapper);
   }
 
@@ -4373,11 +4533,11 @@ function withApi(context, component, piral, errorType) {
     },
     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_10__.PiralLoadingIndicator, null)
+        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_10__.PiralError, Object.assign({
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralError, Object.assign({
         type: errorType,
         error: error
       }, props));
@@ -4498,15 +4658,79 @@ function getDataExpiration(expires) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "toExtension": () => (/* binding */ toExtension)
+/* harmony export */   "toExtension": () => (/* binding */ toExtension),
+/* harmony export */   "reactifyContent": () => (/* binding */ reactifyContent)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 removeAll(nodes) {
+  nodes.forEach(function (node) {
+    return node.remove();
+  });
+}
+
+var SlotCarrier = function SlotCarrier(_ref) {
+  var nodes = _ref.nodes;
+  var host = react__WEBPACK_IMPORTED_MODULE_0__.useRef();
+  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
+    var _a2;
+
+    var _a;
+
+    (_a = host.current) === null || _a === void 0 ? void 0 : (_a2 = _a).append.apply(_a2, _toConsumableArray(nodes));
+    return function () {
+      return removeAll(nodes);
+    };
+  }, [nodes]);
+
+  if (nodes.length) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("slot", {
+      ref: host
+    });
+  }
+
+  return null;
+};
+/**
+ * Transforms the given component to an extension component.
+ * @param Component The component to transform.
+ * @returns The extension component (receiving its props via params).
+ */
+
 
 function toExtension(Component) {
   return function (props) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, Object.assign({}, props.params));
   };
 }
+/**
+ * Reactifies the list of child nodes to a React Node by removing the
+ * nodes from the DOM and carrying it in a React Node, where it would be
+ * attached at a slot.
+ * @param childNodes The child nodes to reactify.
+ * @returns The React Node.
+ */
+
+function reactifyContent(childNodes) {
+  var nodes = Array.prototype.filter.call(childNodes, Boolean);
+  removeAll(nodes);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(SlotCarrier, {
+    nodes: nodes
+  });
+}
 
 /***/ }),
 
@@ -4732,6 +4956,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "createDataOptions": () => (/* reexport safe */ _data__WEBPACK_IMPORTED_MODULE_1__.createDataOptions),
 /* harmony export */   "createDataView": () => (/* reexport safe */ _data__WEBPACK_IMPORTED_MODULE_1__.createDataView),
 /* harmony export */   "getDataExpiration": () => (/* reexport safe */ _data__WEBPACK_IMPORTED_MODULE_1__.getDataExpiration),
+/* harmony export */   "reactifyContent": () => (/* reexport safe */ _extension__WEBPACK_IMPORTED_MODULE_2__.reactifyContent),
 /* harmony export */   "toExtension": () => (/* reexport safe */ _extension__WEBPACK_IMPORTED_MODULE_2__.toExtension),
 /* harmony export */   "attachDomPortal": () => (/* reexport safe */ _foreign__WEBPACK_IMPORTED_MODULE_3__.attachDomPortal),
 /* harmony export */   "changeDomPortal": () => (/* reexport safe */ _foreign__WEBPACK_IMPORTED_MODULE_3__.changeDomPortal),
@@ -5427,6 +5652,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "noop": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.noop),
 /* harmony export */   "prependItem": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.prependItem),
 /* harmony export */   "prependItems": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.prependItems),
+/* harmony export */   "reactifyContent": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.reactifyContent),
 /* harmony export */   "removeIndicator": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.removeIndicator),
 /* harmony export */   "removeNested": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.removeNested),
 /* harmony export */   "renderInDom": () => (/* reexport safe */ piral_core__WEBPACK_IMPORTED_MODULE_0__.renderInDom),
@@ -8998,11 +9224,11 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "0.14.8-beta.3500",
+      version: "0.14.8-beta.3511",
       dependencies: "reactstrap,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-17T12:32:35.628Z",
+      date: "2022-01-20T02:03:29.347Z",
       cli: "0.14.7",
       compat: "0.14"
     },
@@ -80307,4 +80533,4 @@ var layout_1 = __webpack_require__(/*! ./layout */ "./src/layout.tsx");
 
 /******/ })()
 ;
-//# sourceMappingURL=index.a98486.js.map
+//# sourceMappingURL=index.545e8c.js.map