sample-piral 0.15.0-beta.4633 → 0.15.0-beta.4670

package/app/{index.e41fbd.js → index.e44fc2.js}

@@ -2947,8 +2947,8 @@ var ForeignComponentContainer = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var $portalId = this.props.$portalId;
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
-        "data-portal-id": $portalId,
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("piral-portal", {
+        pid: $portalId,
         ref: this.setNode
       });
     }
@@ -4359,6 +4359,16 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 
 if (typeof window !== 'undefined' && 'customElements' in window) {
+  /**
+   * This is a nice abstraction allowing anyone to actually use the extension system
+   * brought by Piral. Not all props of the extension system are actually exposed.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-extension name="my-ext-name"></piral-extension>
+   * ```
+   */
   var PiralExtension = /*#__PURE__*/function (_HTMLElement) {
     _inherits(PiralExtension, _HTMLElement);
 
@@ -4411,6 +4421,8 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     }, {
       key: "connectedCallback",
       value: function connectedCallback() {
+        this.style.display = 'contents';
+
         if (this.isConnected) {
           this.dispatchEvent(new CustomEvent('render-html', {
             bubbles: true,
@@ -4451,7 +4463,74 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     return PiralExtension;
   }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 
-  customElements.define('piral-extension', PiralExtension);
+  customElements.define(_utils__WEBPACK_IMPORTED_MODULE_2__.extensionName, PiralExtension);
+  /**
+   * This is a boundary to host elements from other frameworks - effectively vanishing
+   * at runtime.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-portal pid="host-1234"></piral-portal>
+   * ```
+   */
+
+  var PiralPortal = /*#__PURE__*/function (_HTMLElement2) {
+    _inherits(PiralPortal, _HTMLElement2);
+
+    var _super2 = _createSuper(PiralPortal);
+
+    function PiralPortal() {
+      _classCallCheck(this, PiralPortal);
+
+      return _super2.apply(this, arguments);
+    }
+
+    _createClass(PiralPortal, [{
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        this.style.display = 'contents';
+      }
+    }]);
+
+    return PiralPortal;
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+
+  customElements.define(_utils__WEBPACK_IMPORTED_MODULE_2__.portalName, PiralPortal);
+  /**
+   * This is a virtual element to aggregate rendering from other frameworks, mostly
+   * used like piral-portal, but without context-hosting capabilities. This would
+   * be used exclusively within a foreign framework, not from Piral to initiate.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-slot></piral-slot>
+   * ```
+   */
+
+  var PiralSlot = /*#__PURE__*/function (_HTMLElement3) {
+    _inherits(PiralSlot, _HTMLElement3);
+
+    var _super3 = _createSuper(PiralSlot);
+
+    function PiralSlot() {
+      _classCallCheck(this, PiralSlot);
+
+      return _super3.apply(this, arguments);
+    }
+
+    _createClass(PiralSlot, [{
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        this.style.display = 'contents';
+      }
+    }]);
+
+    return PiralSlot;
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+
+  customElements.define(_utils__WEBPACK_IMPORTED_MODULE_2__.slotName, PiralSlot);
 }
 
 function renderElement(context, element, props) {
@@ -4836,7 +4915,7 @@ var SlotCarrier = function SlotCarrier(_ref) {
   }, [nodes]);
 
   if (nodes.length) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("slot", {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("piral-slot", {
       ref: host
     });
   }
@@ -4885,13 +4964,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "attachDomPortal": () => (/* binding */ attachDomPortal),
 /* harmony export */   "changeDomPortal": () => (/* binding */ changeDomPortal),
 /* harmony export */   "convertComponent": () => (/* binding */ convertComponent),
-/* harmony export */   "renderInDom": () => (/* binding */ renderInDom)
+/* harmony export */   "extensionName": () => (/* binding */ extensionName),
+/* harmony export */   "portalName": () => (/* binding */ portalName),
+/* harmony export */   "renderInDom": () => (/* binding */ renderInDom),
+/* harmony export */   "slotName": () => (/* binding */ slotName)
 /* 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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");
 
 
+var extensionName = 'piral-extension';
+var portalName = 'piral-portal';
+var slotName = 'piral-slot';
 function attachDomPortal(id, context, element, component, props) {
   var portal = /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)( /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(component, props), element);
   context.showPortal(id, portal);
@@ -4910,11 +4995,11 @@ function convertComponent(converter, component) {
   return converter(component);
 }
 function renderInDom(context, element, component, props) {
-  var portalId = 'data-portal-id';
+  var portalId = 'pid';
   var parent = element;
 
   while (parent) {
-    if (parent instanceof Element && parent.hasAttribute(portalId)) {
+    if (parent instanceof Element && parent.localName === portalName && parent.hasAttribute(portalId)) {
       var id = parent.getAttribute(portalId);
       return attachDomPortal(id, context, element, component, props);
     }
@@ -8308,7 +8393,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'State container logging',
       onChange: function onChange(value) {
-        setValue('dbg:view-state', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.viewState, value ? 'on' : 'off');
       }
     },
     loadPilets: {
@@ -8316,7 +8401,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'Load available pilets',
       onChange: function onChange(value) {
-        setValue('dbg:load-pilets', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.loadPilets, value ? 'on' : 'off');
       }
     },
     hardRefresh: {
@@ -8324,7 +8409,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'Full refresh on change',
       onChange: function onChange(value) {
-        setValue('dbg:hard-refresh', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.hardRefresh, value ? 'on' : 'off');
       }
     },
     viewOrigins: {
@@ -8332,7 +8417,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'Visualize component origins',
       onChange: function onChange(value, prev) {
-        setValue('dbg:view-origins', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.viewOrigins, value ? 'on' : 'off');
 
         if (prev !== value) {
           updateVisualize(value);
@@ -8344,7 +8429,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'Enable extension catalogue',
       onChange: function onChange(value) {
-        setValue('dbg:extension-catalogue', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.extensionCatalogue, value ? 'on' : 'off');
       }
     },
     clearConsole: {
@@ -8352,7 +8437,7 @@ function installPiralDebug(options) {
       type: 'boolean',
       label: 'Clear console during HMR',
       onChange: function onChange(value) {
-        setValue('dbg:clear-console', value ? 'on' : 'off');
+        setValue(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.clearConsole, value ? 'on' : 'off');
       }
     },
     persistSettings: {
@@ -8527,12 +8612,12 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "0.15.0-beta.4633",
+      version: "0.15.0-beta.4670",
       dependencies: "reactstrap,tslib,react,react-dom,react-router,react-router-dom"
     },
     build: {
-      date: "2022-08-30T19:25:48.541Z",
-      cli: "0.14.30",
+      date: "2022-09-20T22:34:23.609Z",
+      cli: "0.14.31",
       compat: "0.14"
     }
   };
@@ -8660,11 +8745,12 @@ function installPiralDebug(options) {
     if (!legacyBrowser && event.storageArea === sessionStorage) {
       // potentially unknowingly updated settings
       updateSettings({
-        viewState: sessionStorage.getItem('dbg:view-state') !== 'off',
-        loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on',
-        hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on',
-        viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on',
-        extensionCatalogue: sessionStorage.getItem('dbg:extension-catalogue') !== 'off'
+        viewState: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.viewState) !== 'off',
+        loadPilets: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.loadPilets) === 'on',
+        hardRefresh: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.hardRefresh) === 'on',
+        viewOrigins: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.viewOrigins) === 'on',
+        extensionCatalogue: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.extensionCatalogue) !== 'off',
+        clearConsole: sessionStorage.getItem(_state__WEBPACK_IMPORTED_MODULE_0__.settingsKeys.clearConsole) === 'on'
       });
     }
   });
@@ -8989,6 +9075,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "navigate": () => (/* binding */ navigate),
 /* harmony export */   "setNavigate": () => (/* binding */ setNavigate),
 /* harmony export */   "setState": () => (/* binding */ setState),
+/* harmony export */   "settingsKeys": () => (/* binding */ settingsKeys),
 /* harmony export */   "subscribe": () => (/* binding */ subscribe),
 /* harmony export */   "useDebugState": () => (/* binding */ useDebugState)
 /* harmony export */ });
@@ -9007,7 +9094,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
-var persistKey = 'dbg:persist-settings-data';
+var settingsKeys = {
+  viewState: 'dbg:view-state',
+  loadPilets: 'dbg:load-pilets',
+  hardRefresh: 'dbg:hard-refresh',
+  viewOrigins: 'dbg:view-origins',
+  extensionCatalogue: 'dbg:extension-catalogue',
+  clearConsole: 'dbg:clear-console',
+  persistSettings: 'dbg:persist-settings-data'
+};
+var persistKey = settingsKeys.persistSettings;
 var persistSettings = !!localStorage.getItem(persistKey);
 
 var defaultSetter = function defaultSetter(name, value) {
@@ -9036,11 +9132,17 @@ if (persistSettings) {
 
 function enablePersistance() {
   var data = {};
+  var validKeys = Object.keys(settingsKeys).map(function (m) {
+    return settingsKeys[m];
+  });
 
   for (var i = 0; i < sessionStorage.length; i++) {
     var name = sessionStorage.key(i);
-    var value = sessionStorage.getItem(name);
-    data[name] = value;
+
+    if (validKeys.includes(name)) {
+      var value = sessionStorage.getItem(name);
+      data[name] = value;
+    }
   }
 
   localStorage.setItem(persistKey, JSON.stringify(data));
@@ -9052,12 +9154,12 @@ function disablePersistance() {
 }
 var initialSetter = persistSettings ? persistentSetter : defaultSetter;
 var initialSettings = {
-  viewState: sessionStorage.getItem('dbg:view-state') !== 'off',
-  loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on',
-  hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on',
-  viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on',
-  extensionCatalogue: sessionStorage.getItem('dbg:extension-catalogue') !== 'off',
-  clearConsole: sessionStorage.getItem('dbg:clear-console') === 'on',
+  viewState: sessionStorage.getItem(settingsKeys.viewState) !== 'off',
+  loadPilets: sessionStorage.getItem(settingsKeys.loadPilets) === 'on',
+  hardRefresh: sessionStorage.getItem(settingsKeys.hardRefresh) === 'on',
+  viewOrigins: sessionStorage.getItem(settingsKeys.viewOrigins) === 'on',
+  extensionCatalogue: sessionStorage.getItem(settingsKeys.extensionCatalogue) !== 'off',
+  clearConsole: sessionStorage.getItem(settingsKeys.clearConsole) === 'on',
   persistSettings: persistSettings,
   cataloguePath: '/$debug-extension-catalogue'
 };
@@ -13135,6 +13237,13 @@ __webpack_require__.r(__webpack_exports__);
         });
 
         return {
+          get path() {
+            if (_nav) {
+              return _nav.location.pathname;
+            }
+
+            return location.pathname;
+          },
           push(target, state) {
             if (_nav) {
               _nav.push(target, state);
@@ -66321,4 +66430,4 @@ root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(piral
 
 /******/ })()
 ;
-//# sourceMappingURL=index.e41fbd.js.map
+//# sourceMappingURL=index.e44fc2.js.map