sample-cross-fx 0.14.8-beta.3509 → 0.14.8-beta.3515

package/app/{index.59e19b.js → index.b1d1f6.js}

@@ -129479,8 +129479,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");
+
 
 
 
@@ -129512,13 +129514,56 @@ const Piral = ({
 }), /*#__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));
 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");
+
+
+
+const RootListener = () => {
+  const context = (0,___WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)();
+  react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(() => {
+    if (typeof document !== 'undefined') {
+      const handler = ev => {
+        ev.stopPropagation();
+        const {
+          target,
+          props
+        } = ev.detail;
+        const [dispose, update] = (0,_modules__WEBPACK_IMPORTED_MODULE_2__.renderElement)(context, target, props);
+        target.dispose = dispose;
+        target.update = update;
+      };
+
+      document.body.addEventListener('render-html', handler, false);
+      return () => {
+        document.body.removeEventListener('render-html', handler, false);
+      };
+    }
+  }, [context]);
+  return null;
+};
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/actions/app.js":
 /*!*****************************************************!*\
   !*** ../../framework/piral-core/esm/actions/app.js ***!
@@ -130021,7 +130066,8 @@ function ExtensionSlot(props) {
     name,
     render = _utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender,
     empty,
-    params
+    params,
+    children
   } = props;
   const extensions = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalState)(s => s.registry.extensions[name] || _utils__WEBPACK_IMPORTED_MODULE_3__.none);
   return render(extensions.length === 0 && (0,piral_base__WEBPACK_IMPORTED_MODULE_4__.isfunc)(empty) ? [(0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(empty(), 'empty')] : extensions.map(({
@@ -130030,6 +130076,7 @@ function ExtensionSlot(props) {
     defaults = {}
   }, i) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, {
     key: `${(reference === null || reference === void 0 ? void 0 : reference.displayName) || '_'}${i}`,
+    children: children,
     params: Object.assign(Object.assign({}, defaults), params || {})
   })));
 }
@@ -130764,7 +130811,7 @@ function createInstance(config = {}) {
   const createApi = apiFactory(context, usedPlugins);
   const root = createApi({
     name: 'root',
-    version: "0.14.8-beta.3509" || 0,
+    version: "0.14.8-beta.3515" || 0,
     spec: ''
   });
   const options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
@@ -131159,6 +131206,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),
@@ -131205,133 +131253,59 @@ __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");
-
-
-
-
-
-if (typeof window !== 'undefined' && 'customElements' in window) {
-  class PiralExtension extends HTMLElement {
-    constructor() {
-      super(...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
-      };
-    }
-
-    get params() {
-      return this.props.params;
-    }
-
-    set params(value) {
-      this.props.params = value;
-      this.update(this.props);
-    }
-
-    get name() {
-      return this.props.name;
-    }
-
-    set name(value) {
-      this.props.name = value;
-      this.update(this.props);
-    }
-
-    get empty() {
-      return this.props.empty;
-    }
-
-    set empty(value) {
-      this.props.empty = value;
-      this.update(this.props);
-    }
-
-    connectedCallback() {
-      if (this.isConnected) {
-        this.dispatchEvent(new CustomEvent('render-html', {
-          bubbles: true,
-          detail: {
-            target: this,
-            props: this.props
-          }
-        }));
-      }
-    }
-
-    disconnectedCallback() {
-      this.dispose();
-      this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-      this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
-    }
+/* 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");
 
-    attributeChangedCallback(name, _, newValue) {
-      switch (name) {
-        case 'name':
-          this.name = newValue;
-          break;
 
-        case 'params':
-          this.params = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.tryParseJson)(newValue);
-          break;
-      }
-    }
+function createExtenders(context, apis) {
+  const creators = [_core__WEBPACK_IMPORTED_MODULE_0__.createCoreApi, ...apis.filter(piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)];
+  return creators.map(c => {
+    const ctx = c(context);
 
-    static get observedAttributes() {
-      return ['name', 'params'];
+    if ((0,piral_base__WEBPACK_IMPORTED_MODULE_1__.isfunc)(ctx)) {
+      return ctx;
+    } else {
+      return () => Object.assign({}, ctx);
     }
-
-  }
-
-  customElements.define('piral-extension', PiralExtension);
+  });
+}
+function defaultApiFactory(context, apis) {
+  const extenders = createExtenders(context, apis);
+  return target => {
+    const 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) {
-  let [id, portal] = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.renderInDom)(context, element, _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot, props);
-  const evName = 'extension-props-changed';
+/***/ }),
 
-  const handler = ev => update(ev.detail);
+/***/ "../../framework/piral-core/esm/modules/core.js":
+/*!******************************************************!*\
+  !*** ../../framework/piral-core/esm/modules/core.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-  const dispose = () => {
-    context.hidePortal(id, portal);
-    element.removeEventListener(evName, handler);
-  };
+"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");
 
-  const update = newProps => {
-    [id, portal] = (0,_utils__WEBPACK_IMPORTED_MODULE_1__.changeDomPortal)(id, portal, context, element, _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot, newProps);
-  };
 
-  element.addEventListener(evName, handler);
-  return [dispose, update];
-}
 
-function createCoreApi(context) {
-  if (typeof document !== 'undefined') {
-    document.body.addEventListener('render-html', ev => {
-      ev.stopPropagation();
-      const container = ev.detail.target;
-      const [dispose, update] = render(context, container, ev.detail.props);
-      container.dispose = dispose;
-      container.update = update;
-    }, false);
-  }
 
-  return (api, target) => {
-    const pilet = target.name;
+function createCoreApi(context) {
+  return (api, meta) => {
+    const pilet = meta.name;
     return {
       getData(name) {
         return context.readDataValue(name);
@@ -131341,8 +131315,8 @@ function createCoreApi(context) {
         const {
           target = 'memory',
           expires
-        } = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.createDataOptions)(options);
-        const expiration = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.getDataExpiration)(expires);
+        } = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.createDataOptions)(options);
+        const expiration = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.getDataExpiration)(expires);
         return context.tryWriteDataItem(name, value, pilet, target, expiration);
       },
 
@@ -131350,7 +131324,7 @@ function createCoreApi(context) {
         context.registerPage(route, {
           pilet,
           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 () => api.unregisterPage(route);
       },
@@ -131362,7 +131336,7 @@ function createCoreApi(context) {
       registerExtension(name, arg, defaults) {
         context.registerExtension(name, {
           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
         });
@@ -131374,34 +131348,14 @@ function createCoreApi(context) {
       },
 
       renderHtmlExtension(element, props) {
-        const [dispose] = render(context, element, props);
+        const [dispose] = (0,_element__WEBPACK_IMPORTED_MODULE_2__.renderElement)(context, element, props);
         return dispose;
       },
 
-      Extension: _components__WEBPACK_IMPORTED_MODULE_2__.ExtensionSlot
+      Extension: _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot
     };
   };
 }
-function createExtenders(context, apis) {
-  const creators = [createCoreApi, ...apis.filter(piral_base__WEBPACK_IMPORTED_MODULE_5__.isfunc)];
-  return creators.map(c => {
-    const ctx = c(context);
-
-    if ((0,piral_base__WEBPACK_IMPORTED_MODULE_5__.isfunc)(ctx)) {
-      return ctx;
-    } else {
-      return () => Object.assign({}, ctx);
-    }
-  });
-}
-function defaultApiFactory(context, apis) {
-  const extenders = createExtenders(context, apis);
-  return target => {
-    const 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);
-  };
-}
 
 /***/ }),
 
@@ -131476,6 +131430,125 @@ 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");
+
+
+
+if (typeof window !== 'undefined' && 'customElements' in window) {
+  class PiralExtension extends HTMLElement {
+    constructor() {
+      super(...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)
+      };
+    }
+
+    get params() {
+      return this.props.params;
+    }
+
+    set params(value) {
+      this.props.params = value;
+      this.update(this.props);
+    }
+
+    get name() {
+      return this.props.name;
+    }
+
+    set name(value) {
+      this.props.name = value;
+      this.update(this.props);
+    }
+
+    get empty() {
+      return this.props.empty;
+    }
+
+    set empty(value) {
+      this.props.empty = value;
+      this.update(this.props);
+    }
+
+    connectedCallback() {
+      if (this.isConnected) {
+        this.dispatchEvent(new CustomEvent('render-html', {
+          bubbles: true,
+          detail: {
+            target: this,
+            props: this.props
+          }
+        }));
+      }
+    }
+
+    disconnectedCallback() {
+      this.dispose();
+      this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      this.update = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+    }
+
+    attributeChangedCallback(name, _, newValue) {
+      switch (name) {
+        case 'name':
+          this.name = newValue;
+          break;
+
+        case 'params':
+          this.params = (0,_utils__WEBPACK_IMPORTED_MODULE_0__.tryParseJson)(newValue);
+          break;
+      }
+    }
+
+    static get observedAttributes() {
+      return ['name', 'params'];
+    }
+
+  }
+
+  customElements.define('piral-extension', PiralExtension);
+}
+
+function renderElement(context, element, props) {
+  let [id, portal] = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.renderInDom)(context, element, _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot, props);
+  const evName = 'extension-props-changed';
+
+  const handler = ev => update(ev.detail);
+
+  const dispose = () => {
+    context.hidePortal(id, portal);
+    element.removeEventListener(evName, handler);
+  };
+
+  const update = newProps => {
+    [id, portal] = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.changeDomPortal)(id, portal, context, element, _components__WEBPACK_IMPORTED_MODULE_3__.ExtensionSlot, newProps);
+  };
+
+  element.addEventListener(evName, handler);
+  return [dispose, update];
+}
+
+/***/ }),
+
 /***/ "../../framework/piral-core/esm/state/createActions.js":
 /*!*************************************************************!*\
   !*** ../../framework/piral-core/esm/state/createActions.js ***!
@@ -131945,13 +132018,60 @@ 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 removeAll(nodes) {
+  nodes.forEach(node => node.remove());
+}
+
+const SlotCarrier = ({
+  nodes
+}) => {
+  const host = react__WEBPACK_IMPORTED_MODULE_0__.useRef();
+  react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {
+    var _a;
+
+    (_a = host.current) === null || _a === void 0 ? void 0 : _a.append(...nodes);
+    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 props => /*#__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) {
+  const nodes = Array.prototype.filter.call(childNodes, Boolean);
+  removeAll(nodes);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(SlotCarrier, {
+    nodes: nodes
+  });
+}
 
 /***/ }),
 
@@ -132159,6 +132279,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),
@@ -133232,11 +133353,11 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-cross-fx",
-      version: "0.14.8-beta.3509",
+      version: "0.14.8-beta.3515",
       dependencies: "@angular/common,@angular/compiler,@angular/core,@angular/platform-browser,@angular/platform-browser-dynamic,@webcomponents/webcomponentsjs,angular,aurelia-framework,aurelia-templating-binding,aurelia-templating-resources,aurelia-pal-browser,aurelia-event-aggregator,aurelia-history-browser,hyperapp,inferno,inferno-create-element,mithril,lit-element,solid-js,solid-js/dom,preact,riot,rxjs,vue,zone.js,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-19T08:52:11.652Z",
+      date: "2022-01-20T12:10:29.733Z",
       cli: "0.14.7",
       compat: "0.14"
     },
@@ -255314,4 +255435,4 @@ const app = React.createElement(piral_core_1.Piral, {
 
 /******/ })()
 ;
-//# sourceMappingURL=index.59e19b.js.map
+//# sourceMappingURL=index.b1d1f6.js.map