sample-piral 0.14.8-beta.3490 → 0.14.8-beta.3509

package/app/{index.9b2826.js → index.e6e3cd.js}

@@ -1844,7 +1844,8 @@ var Piral = function Piral(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ResponsiveLayout, {
     breakpoints: breakpoints
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_4__.Mediator, {
-    options: instance.options
+    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, {
     id: "root"
   }), children));
@@ -2459,7 +2460,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/create.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
 
 
@@ -2471,20 +2472,30 @@ __webpack_require__.r(__webpack_exports__);
 
 var Mediator = function Mediator(_ref) {
   var options = _ref.options;
-  var initialize = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useAction)('initialize');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)(),
+      initialize = _useGlobalStateContex.initialize,
+      readState = _useGlobalStateContex.readState;
+
   react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
-    var _startLoadingPilets = (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.startLoadingPilets)(options),
-        connect = _startLoadingPilets.connect,
-        disconnect = _startLoadingPilets.disconnect;
+    var shouldLoad = readState(function (s) {
+      return s.app.loading;
+    });
 
-    var notifier = function notifier(error, pilets, loaded) {
-      initialize(!loaded, error, pilets);
-    };
+    if (shouldLoad) {
+      var _startLoadingPilets = (0,piral_base__WEBPACK_IMPORTED_MODULE_2__.startLoadingPilets)(options),
+          connect = _startLoadingPilets.connect,
+          disconnect = _startLoadingPilets.disconnect;
 
-    connect(notifier);
-    return function () {
-      return disconnect(notifier);
-    };
+      var notifier = function notifier(error, pilets, loaded) {
+        initialize(!loaded, error, pilets);
+      };
+
+      connect(notifier);
+      return function () {
+        return disconnect(notifier);
+      };
+    }
   }, _utils__WEBPACK_IMPORTED_MODULE_3__.none); // tslint:disable-next-line:no-null-keyword
 
   return null;
@@ -2666,10 +2677,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/media.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/media.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/media.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
 
 
 
@@ -2684,14 +2694,17 @@ var ResponsiveLayout = function ResponsiveLayout(_ref) {
   var current = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalState)(function (m) {
     return m.app.layout;
   }) || 'desktop';
-  var changeTo = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useAction)('changeLayout');
-  var selected = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useMedia)(breakpoints, _utils__WEBPACK_IMPORTED_MODULE_1__.defaultLayouts, current);
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useGlobalStateContext)(),
+      changeLayout = _useGlobalStateContex.changeLayout;
+
+  var selected = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useMedia)(breakpoints, _utils__WEBPACK_IMPORTED_MODULE_1__.defaultLayouts, current);
   react__WEBPACK_IMPORTED_MODULE_0__.useEffect(function () {
     if (selected !== current) {
-      changeTo(selected);
+      changeLayout(selected);
     }
   }, [selected]);
-  return (0,_utils__WEBPACK_IMPORTED_MODULE_5__.defaultRender)(children);
+  return (0,_utils__WEBPACK_IMPORTED_MODULE_4__.defaultRender)(children);
 };
 ResponsiveLayout.displayName = 'ResponsiveLayout';
 
@@ -2708,7 +2721,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetComponent": () => (/* binding */ SetComponent)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2718,7 +2731,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetComponent(_ref) {
   var name = _ref.name,
       component = _ref.component;
-  var setComponent = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setComponent');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setComponent = _useGlobalStateContex.setComponent;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setComponent(name, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2739,7 +2755,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetError": () => (/* binding */ SetError)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2749,7 +2765,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetError(_ref) {
   var type = _ref.type,
       component = _ref.component;
-  var setErrorComponent = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setErrorComponent');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setErrorComponent = _useGlobalStateContex.setErrorComponent;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setErrorComponent(type, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2836,7 +2855,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetProvider": () => (/* binding */ SetProvider)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2845,7 +2864,10 @@ __webpack_require__.r(__webpack_exports__);
 
 function SetProvider(_ref) {
   var provider = _ref.provider;
-  var includeProvider = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('includeProvider');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      includeProvider = _useGlobalStateContex.includeProvider;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return provider && includeProvider(provider);
   }); // tslint:disable-next-line:no-null-keyword
@@ -2868,7 +2890,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 
@@ -2880,7 +2902,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetRedirect(_ref) {
   var from = _ref.from,
       to = _ref.to;
-  var setRoute = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useAction)('setRoute');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useGlobalStateContext)(),
+      setRoute = _useGlobalStateContex.setRoute;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useSetter)(function () {
     return setRoute(from, function () {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react_router__WEBPACK_IMPORTED_MODULE_3__.Redirect, {
@@ -2905,7 +2930,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "SetRoute": () => (/* binding */ SetRoute)
 /* harmony export */ });
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/action.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/setter.js");
 
 /**
@@ -2915,7 +2940,10 @@ __webpack_require__.r(__webpack_exports__);
 function SetRoute(_ref) {
   var path = _ref.path,
       component = _ref.component;
-  var setRoute = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useAction)('setRoute');
+
+  var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_0__.useGlobalStateContext)(),
+      setRoute = _useGlobalStateContex.setRoute;
+
   (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSetter)(function () {
     return component && setRoute(path, component);
   }); // tslint:disable-next-line:no-null-keyword
@@ -3128,15 +3156,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "createInstance": () => (/* binding */ createInstance)
 /* harmony export */ });
-/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/events.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
-/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/strategies.js");
-/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/dependencies.js");
-/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/api.js");
-/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createGlobalState.js");
-/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createActions.js");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers */ "../../framework/piral-core/esm/helpers.js");
+/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/events.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
+/* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/strategies.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/dependencies.js");
+/* harmony import */ var _modules__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules */ "../../framework/piral-core/esm/modules/api.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createGlobalState.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./state */ "../../framework/piral-core/esm/state/createActions.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers */ "../../framework/piral-core/esm/helpers.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ "../../framework/piral-core/esm/utils/guid.js");
+
 
 
 
@@ -3165,35 +3195,37 @@ render(app, document.querySelector('#app'));
 
 function createInstance() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var state = config.state,
+  var _config$id = config.id,
+      id = _config$id === void 0 ? (0,_utils__WEBPACK_IMPORTED_MODULE_0__.generateId)() : _config$id,
+      state = config.state,
       actions = config.actions,
       _config$availablePile = config.availablePilets,
       availablePilets = _config$availablePile === void 0 ? [] : _config$availablePile,
       plugins = config.plugins,
       _config$requestPilets = config.requestPilets,
-      requestPilets = _config$requestPilets === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_0__.defaultModuleRequester : _config$requestPilets,
+      requestPilets = _config$requestPilets === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultModuleRequester : _config$requestPilets,
       loaderConfig = config.loaderConfig,
       _config$async = config.async,
       async = _config$async === void 0 ? false : _config$async,
       _config$shareDependen = config.shareDependencies,
-      shareDependencies = _config$shareDependen === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_0__.defaultDependencySelector : _config$shareDependen,
+      shareDependencies = _config$shareDependen === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultDependencySelector : _config$shareDependen,
       loadPilet = config.loadPilet,
       loaders = config.loaders,
       debug = config.debug,
       _config$apiFactory = config.apiFactory,
-      apiFactory = _config$apiFactory === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_1__.defaultApiFactory : _config$apiFactory;
-  var globalState = (0,_state__WEBPACK_IMPORTED_MODULE_2__.createGlobalState)(state);
-  var events = (0,piral_base__WEBPACK_IMPORTED_MODULE_3__.createListener)(globalState);
-  var context = (0,_state__WEBPACK_IMPORTED_MODULE_4__.createActions)(globalState, events);
+      apiFactory = _config$apiFactory === void 0 ? _modules__WEBPACK_IMPORTED_MODULE_2__.defaultApiFactory : _config$apiFactory;
+  var globalState = (0,_state__WEBPACK_IMPORTED_MODULE_3__.createGlobalState)(state);
+  var events = (0,piral_base__WEBPACK_IMPORTED_MODULE_4__.createListener)(globalState);
+  var context = (0,_state__WEBPACK_IMPORTED_MODULE_5__.createActions)(globalState, events);
   var definedPlugins = plugins || [];
   var usedPlugins = Array.isArray(definedPlugins) ? definedPlugins : [definedPlugins];
   var createApi = apiFactory(context, usedPlugins);
   var root = createApi({
     name: 'root',
-    version: "0.14.8-beta.3490" || 0,
+    version: "0.14.8-beta.3509" || 0,
     spec: ''
   });
-  var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_5__.createPiletOptions)({
+  var options = (0,_helpers__WEBPACK_IMPORTED_MODULE_6__.createPiletOptions)({
     context: context,
     createApi: createApi,
     loaders: loaders,
@@ -3201,17 +3233,18 @@ function createInstance() {
     availablePilets: availablePilets,
     loaderConfig: loaderConfig,
     shareDependencies: shareDependencies,
-    strategy: (0,piral_base__WEBPACK_IMPORTED_MODULE_6__.isfunc)(async) ? async : async ? piral_base__WEBPACK_IMPORTED_MODULE_7__.blazingStrategy : piral_base__WEBPACK_IMPORTED_MODULE_7__.standardStrategy,
+    strategy: (0,piral_base__WEBPACK_IMPORTED_MODULE_7__.isfunc)(async) ? async : async ? piral_base__WEBPACK_IMPORTED_MODULE_8__.blazingStrategy : piral_base__WEBPACK_IMPORTED_MODULE_8__.standardStrategy,
     requestPilets: requestPilets,
     debug: debug
   });
 
   if (actions) {
-    (0,_state__WEBPACK_IMPORTED_MODULE_4__.includeActions)(context, actions);
+    (0,_state__WEBPACK_IMPORTED_MODULE_5__.includeActions)(context, actions);
   }
 
   context.options = options;
-  return (0,tslib__WEBPACK_IMPORTED_MODULE_8__.__assign)(events, {
+  return (0,tslib__WEBPACK_IMPORTED_MODULE_9__.__assign)(events, {
+    id: id,
     createApi: createApi,
     context: context,
     root: root,
@@ -3729,18 +3762,40 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       _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
+      };
       return _this;
     }
 
     _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: "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",
@@ -3750,7 +3805,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
             bubbles: true,
             detail: {
               target: this,
-              props: this.getProps()
+              props: this.props
             }
           }));
         }
@@ -3764,8 +3819,16 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       }
     }, {
       key: "attributeChangedCallback",
-      value: function attributeChangedCallback() {
-        this.update(this.getProps());
+      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",
@@ -4149,15 +4212,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../node_modules/react/index.js");
 /* harmony import */ var piral_base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! piral-base */ "../../framework/piral-base/esm/utils.js");
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/ErrorBoundary.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/components.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/actions.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/PortalRenderer.js");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../components */ "../../framework/piral-core/esm/components/components.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks */ "../../framework/piral-core/esm/hooks/globalState.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/react.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/helpers.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils */ "../../framework/piral-core/esm/utils/foreign.js");
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -4295,17 +4357,15 @@ function wrapReactComponent(Component, stasisOptions, piral, Wrapper) {
 
 function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(function (props) {
-    var _useActions = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useActions)(),
-        destroyPortal = _useActions.destroyPortal;
-
-    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useGlobalStateContext)(),
+    var _useGlobalStateContex = (0,_hooks__WEBPACK_IMPORTED_MODULE_4__.useGlobalStateContext)(),
         state = _useGlobalStateContex.state,
-        readState = _useGlobalStateContex.readState;
+        readState = _useGlobalStateContex.readState,
+        destroyPortal = _useGlobalStateContex.destroyPortal;
 
-    var router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_6__.__RouterContext);
+    var router = react__WEBPACK_IMPORTED_MODULE_0__.useContext(react_router__WEBPACK_IMPORTED_MODULE_5__.__RouterContext);
     var id = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
       return (portalIdBase++).toString(26);
-    }, _utils__WEBPACK_IMPORTED_MODULE_7__.none);
+    }, _utils__WEBPACK_IMPORTED_MODULE_6__.none);
     var context = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(function () {
       return {
         router: router,
@@ -4322,10 +4382,10 @@ function wrapForeignComponent(component, stasisOptions, piral, Wrapper) {
       return function () {
         return destroyPortal(id);
       };
-    }, _utils__WEBPACK_IMPORTED_MODULE_7__.none);
+    }, _utils__WEBPACK_IMPORTED_MODULE_6__.none);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Wrapper, Object.assign({}, innerProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_3__.ErrorBoundary, Object.assign({}, stasisOptions, {
       renderProps: props
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_8__.PortalRenderer, {
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_7__.PortalRenderer, {
       id: id
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(ForeignComponentContainer, {
       innerProps: innerProps,
@@ -4350,7 +4410,7 @@ function wrapComponent(converters, component, piral, Wrapper, stasisOptions) {
   }
 
   if (_typeof(component) === 'object' && isNotExotic(component)) {
-    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_9__.convertComponent)(converters[component.type], component);
+    var result = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.convertComponent)(converters[component.type], component);
     return wrapForeignComponent(result, stasisOptions, piral, Wrapper);
   }
 
@@ -4373,11 +4433,11 @@ function withApi(context, component, piral, errorType) {
     },
     renderChild: function renderChild(child) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_10__.PiralLoadingIndicator, null)
+        fallback: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralLoadingIndicator, null)
       }, child);
     },
     renderError: function renderError(error, props) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_10__.PiralError, Object.assign({
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components__WEBPACK_IMPORTED_MODULE_9__.PiralError, Object.assign({
         type: errorType,
         error: error
       }, props));
@@ -8998,11 +9058,11 @@ function installPiralDebug(options) {
     debug: debugApiVersion,
     instance: {
       name: "sample-piral",
-      version: "0.14.8-beta.3490",
+      version: "0.14.8-beta.3509",
       dependencies: "reactstrap,react,react-dom,react-router,react-router-dom,history,tslib,path-to-regexp,@libre/atom,@dbeining/react-atom"
     },
     build: {
-      date: "2022-01-13T17:40:31.919Z",
+      date: "2022-01-19T08:52:54.958Z",
       cli: "0.14.7",
       compat: "0.14"
     },
@@ -13461,18 +13521,6 @@ module.exports = function isArguments(value) {
 };
 
 
-/***/ }),
-
-/***/ "../../framework/piral-core/dependencies.codegen":
-/*!*******************************************************!*\
-  !*** ../../framework/piral-core/dependencies.codegen ***!
-  \*******************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-module.exports = function(deps){
-    deps['sample-piral']={};deps["reactstrap"]=__webpack_require__(/*! reactstrap */ "../../../node_modules/reactstrap/es/index.js");deps["reactstrap@8.10.0"]=__webpack_require__(/*! reactstrap */ "../../../node_modules/reactstrap/es/index.js");deps["react"]=__webpack_require__(/*! react */ "../../../node_modules/react/index.js");deps["react@17.0.2"]=__webpack_require__(/*! react */ "../../../node_modules/react/index.js");deps["react-dom"]=__webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");deps["react-dom@17.0.2"]=__webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");deps["react-router"]=__webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");deps["react-router@5.2.1"]=__webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");deps["react-router-dom"]=__webpack_require__(/*! react-router-dom */ "../../../node_modules/react-router-dom/esm/react-router-dom.js");deps["react-router-dom@5.3.0"]=__webpack_require__(/*! react-router-dom */ "../../../node_modules/react-router-dom/esm/react-router-dom.js");deps["history"]=__webpack_require__(/*! history */ "../../../node_modules/history/esm/history.js");deps["history@4.10.1"]=__webpack_require__(/*! history */ "../../../node_modules/history/esm/history.js");deps["tslib"]=__webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");deps["tslib@2.3.1"]=__webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");deps["path-to-regexp"]=__webpack_require__(/*! path-to-regexp */ "../../../node_modules/path-to-regexp/index.js");deps["path-to-regexp@1.8.0"]=__webpack_require__(/*! path-to-regexp */ "../../../node_modules/path-to-regexp/index.js");deps["@libre/atom"]=__webpack_require__(/*! @libre/atom */ "../../../node_modules/@libre/atom/dist/index.esm.js");deps["@libre/atom@1.3.3"]=__webpack_require__(/*! @libre/atom */ "../../../node_modules/@libre/atom/dist/index.esm.js");deps["@dbeining/react-atom"]=__webpack_require__(/*! @dbeining/react-atom */ "../../../node_modules/@dbeining/react-atom/dist/react-atom.js");deps["@dbeining/react-atom@4.1.21"]=__webpack_require__(/*! @dbeining/react-atom */ "../../../node_modules/@dbeining/react-atom/dist/react-atom.js")
-  }
-
 /***/ }),
 
 /***/ "../../../node_modules/path-to-regexp/index.js":
@@ -79586,6 +79634,18 @@ __webpack_require__(/*! ../modules/web.url-search-params */ "../../framework/pir
 module.exports = __webpack_require__(/*! ../internals/path */ "../../framework/piral/node_modules/core-js/internals/path.js");
 
 
+/***/ }),
+
+/***/ "../../framework/piral-core/dependencies.codegen":
+/*!*******************************************************!*\
+  !*** ../../framework/piral-core/dependencies.codegen ***!
+  \*******************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = function(deps){
+    deps['sample-piral']={};deps["reactstrap"]=__webpack_require__(/*! reactstrap */ "../../../node_modules/reactstrap/es/index.js");deps["reactstrap@8.10.0"]=__webpack_require__(/*! reactstrap */ "../../../node_modules/reactstrap/es/index.js");deps["react"]=__webpack_require__(/*! react */ "../../../node_modules/react/index.js");deps["react@17.0.2"]=__webpack_require__(/*! react */ "../../../node_modules/react/index.js");deps["react-dom"]=__webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");deps["react-dom@17.0.2"]=__webpack_require__(/*! react-dom */ "../../../node_modules/react-dom/index.js");deps["react-router"]=__webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");deps["react-router@5.2.1"]=__webpack_require__(/*! react-router */ "../../../node_modules/react-router/esm/react-router.js");deps["react-router-dom"]=__webpack_require__(/*! react-router-dom */ "../../../node_modules/react-router-dom/esm/react-router-dom.js");deps["react-router-dom@5.3.0"]=__webpack_require__(/*! react-router-dom */ "../../../node_modules/react-router-dom/esm/react-router-dom.js");deps["history"]=__webpack_require__(/*! history */ "../../../node_modules/history/esm/history.js");deps["history@4.10.1"]=__webpack_require__(/*! history */ "../../../node_modules/history/esm/history.js");deps["tslib"]=__webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");deps["tslib@2.3.1"]=__webpack_require__(/*! tslib */ "../../../node_modules/tslib/tslib.es6.js");deps["path-to-regexp"]=__webpack_require__(/*! path-to-regexp */ "../../../node_modules/path-to-regexp/index.js");deps["path-to-regexp@1.8.0"]=__webpack_require__(/*! path-to-regexp */ "../../../node_modules/path-to-regexp/index.js");deps["@libre/atom"]=__webpack_require__(/*! @libre/atom */ "../../../node_modules/@libre/atom/dist/index.esm.js");deps["@libre/atom@1.3.3"]=__webpack_require__(/*! @libre/atom */ "../../../node_modules/@libre/atom/dist/index.esm.js");deps["@dbeining/react-atom"]=__webpack_require__(/*! @dbeining/react-atom */ "../../../node_modules/@dbeining/react-atom/dist/react-atom.js");deps["@dbeining/react-atom@4.1.21"]=__webpack_require__(/*! @dbeining/react-atom */ "../../../node_modules/@dbeining/react-atom/dist/react-atom.js")
+  }
+
 /***/ }),
 
 /***/ "../../../node_modules/bootstrap/dist/css/bootstrap.min.css":
@@ -80307,4 +80367,4 @@ var layout_1 = __webpack_require__(/*! ./layout */ "./src/layout.tsx");
 
 /******/ })()
 ;
-//# sourceMappingURL=index.9b2826.js.map
+//# sourceMappingURL=index.e6e3cd.js.map