sample-piral 1.3.0-beta.6001 → 1.3.0-beta.6013

package/app/{index.e7a31b.js → index.c0a9b6.js}

@@ -363,8 +363,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 react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./hooks */ "../../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");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_3__ = __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); }
@@ -374,25 +375,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
 var RootListener = function RootListener() {
-  var context = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)();
+  var context = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalStateContext)();
   react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect(function () {
     if (typeof document !== 'undefined') {
-      var handler = function handler(ev) {
+      var renderHtml = function renderHtml(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),
+        var _renderElement = (0,_modules__WEBPACK_IMPORTED_MODULE_3__.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);
+      var renderContent = function renderContent(ev) {
+        ev.stopPropagation();
+        var _ev$detail2 = ev.detail,
+          target = _ev$detail2.target,
+          content = _ev$detail2.content,
+          portalId = _ev$detail2.portalId;
+        var portal = /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(content, target);
+        var dispose = function dispose() {
+          return context.hidePortal(portalId, portal);
+        };
+        context.showPortal(portalId, portal);
+        target.dispose = dispose;
+      };
+      document.body.addEventListener('render-html', renderHtml, false);
+      document.body.addEventListener('render-content', renderContent, false);
       return function () {
-        document.body.removeEventListener('render-html', handler, false);
+        document.body.removeEventListener('render-html', renderHtml, false);
+        document.body.removeEventListener('render-content', renderContent, false);
       };
     }
   }, [context]);
@@ -845,41 +862,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 react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/dist/piral-base-full.mjs");
-/* harmony import */ var _wrapComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./wrapComponent */ "../../framework/piral-core/esm/components/wrapComponent.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/dist/piral-base-full.mjs");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __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_4__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
-
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
 
 
 
 
-var wrapper = function wrapper(_ref) {
-  var children = _ref.children;
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(children);
-};
-var renderExtensions = [{
-  component: function component(props) {
-    var context = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalStateContext)();
-    var converters = context.converters;
-    var piral = context.apis._;
-    var _props$params = props.params,
-      component = _props$params.component,
-      args = _props$params.props;
-    var Component = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
-      return (0,_wrapComponent__WEBPACK_IMPORTED_MODULE_3__.wrapComponent)(converters, component, {
-        piral: piral
-      }, wrapper);
-    }, [component]);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, Object.assign({}, args));
-  },
-  defaults: {},
-  pilet: '',
-  reference: {
-    displayName: 'AnyComponent'
-  }
-}];
 function defaultOrder(extensions) {
   return extensions;
 }
@@ -900,14 +890,14 @@ function ExtensionSlot(props) {
     _props$order = props.order,
     order = _props$order === void 0 ? defaultOrder : _props$order;
   var extensions = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalState)(function (s) {
-    return name ? s.registry.extensions[name] || _utils__WEBPACK_IMPORTED_MODULE_4__.none : renderExtensions;
+    return s.registry.extensions[name] || _utils__WEBPACK_IMPORTED_MODULE_3__.none;
   });
-  var isEmpty = extensions.length === 0 && (0,piral_base__WEBPACK_IMPORTED_MODULE_5__.isfunc)(empty);
-  var content = isEmpty ? [(0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(empty(), 'empty')] : order(extensions).map(function (_ref2, i) {
-    var Component = _ref2.component,
-      reference = _ref2.reference,
-      _ref2$defaults = _ref2.defaults,
-      defaults = _ref2$defaults === void 0 ? {} : _ref2$defaults;
+  var isEmpty = extensions.length === 0 && (0,piral_base__WEBPACK_IMPORTED_MODULE_4__.isfunc)(empty);
+  var content = isEmpty ? [(0,_utils__WEBPACK_IMPORTED_MODULE_1__.defaultRender)(empty(), 'empty')] : order(extensions).map(function (_ref, i) {
+    var Component = _ref.component,
+      reference = _ref.reference,
+      _ref$defaults = _ref.defaults,
+      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,
@@ -2484,6 +2474,58 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     return PiralSlot;
   }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
   customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.slotName, PiralSlot);
+  /**
+   * This is a virtual element to render children defined in React / by Piral in other
+   * frameworks.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-content cid="123"></piral-content>
+   * ```
+   */
+  var PiralContent = /*#__PURE__*/function (_HTMLElement4) {
+    _inherits(PiralContent, _HTMLElement4);
+    var _super4 = _createSuper(PiralContent);
+    function PiralContent() {
+      var _this2;
+      _classCallCheck(this, PiralContent);
+      _this2 = _super4.apply(this, arguments);
+      _this2.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      return _this2;
+    }
+    _createClass(PiralContent, [{
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        this.style.display = 'contents';
+        var cid = this.getAttribute('cid');
+        var content = PiralContent.contentAssignments[cid];
+        var portal = this.closest('piral-portal');
+        if (content && portal) {
+          var portalId = portal.getAttribute('pid');
+          document.body.dispatchEvent(new CustomEvent('render-content', {
+            detail: {
+              target: this,
+              content: content,
+              portalId: portalId
+            }
+          }));
+        }
+      }
+    }, {
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        this.dispose();
+        this.dispose = _utils__WEBPACK_IMPORTED_MODULE_0__.noop;
+      }
+    }]);
+    return PiralContent;
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+  PiralContent.contentAssignments = {};
+  window.assignContent = function (cid, content) {
+    PiralContent.contentAssignments[cid] = content;
+  };
+  customElements.define(_utils__WEBPACK_IMPORTED_MODULE_3__.contentName, PiralContent);
 }
 function renderElement(context, element, props) {
   if (typeof window !== 'undefined') {
@@ -2985,6 +3027,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "attachDomPortal": () => (/* binding */ attachDomPortal),
 /* harmony export */   "changeDomPortal": () => (/* binding */ changeDomPortal),
+/* harmony export */   "contentName": () => (/* binding */ contentName),
 /* harmony export */   "convertComponent": () => (/* binding */ convertComponent),
 /* harmony export */   "extensionName": () => (/* binding */ extensionName),
 /* harmony export */   "portalName": () => (/* binding */ portalName),
@@ -2997,6 +3040,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var extensionName = 'piral-extension';
+var contentName = 'piral-content';
 var portalName = 'piral-portal';
 var slotName = 'piral-slot';
 function attachDomPortal(id, context, element, component, props) {
@@ -6330,12 +6374,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "1.3.0-beta.6001",
+      version: "1.3.0-beta.6013",
       dependencies: "reactstrap,tslib,react,react-dom,react-router,react-router-dom"
     },
     build: {
-      date: "2023-09-26T21:31:31.541Z",
-      cli: "1.3.0-beta.6001",
+      date: "2023-09-28T11:09:36.489Z",
+      cli: "1.3.0-beta.6013",
       compat: "1"
     }
   };
@@ -65201,4 +65245,4 @@ root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(piral
 
 /******/ })()
 ;
-//# sourceMappingURL=index.e7a31b.js.map
+//# sourceMappingURL=index.c0a9b6.js.map