sample-piral 0.14.8-beta.3504 → 0.14.8-beta.3513

package/app/{index.1a4f84.js → index.a1ff64.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");
+
 
 
 
@@ -1846,7 +1848,7 @@ var Piral = function Piral(_ref) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_4__.Mediator, {
     options: instance.options,
     key: instance.id
-  }), /*#__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, {
+  }), /*#__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));
 };
@@ -1854,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 ***!
@@ -2428,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;
   });
@@ -2439,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 || {})
     });
   }));
@@ -3222,7 +3285,7 @@ function createInstance() {
   var createApi = apiFactory(context, usedPlugins);
   var root = createApi({
     name: 'root',
-    version: "0.14.8-beta.3504" || 0,
+    version: "0.14.8-beta.3513" || 0,
     spec: ''
   });
   var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
@@ -3638,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),
@@ -3684,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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-  element.addEventListener(evName, handler);
-  return [dispose, update];
-}
 
-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);
@@ -3890,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
         });
@@ -3902,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);
-  };
-}
 
 /***/ }),
 
@@ -4008,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 ***!
@@ -4528,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
+  });
+}
 
 /***/ }),
 
@@ -4762,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),
@@ -5457,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),
@@ -9028,11 +9224,11 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "0.14.8-beta.3504",
+      version: "0.14.8-beta.3513",
       dependencies: "reactstrap,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-18T18:14:49.804Z",
+      date: "2022-01-20T10:25:04.567Z",
       cli: "0.14.7",
       compat: "0.14"
     },
@@ -80337,4 +80533,4 @@ var layout_1 = __webpack_require__(/*! ./layout */ "./src/layout.tsx");
 
 /******/ })()
 ;
-//# sourceMappingURL=index.1a4f84.js.map
+//# sourceMappingURL=index.a1ff64.js.map