sproutjs-core 2.8.0 → 2.9.2

package/sprout-core.strict.js

@@ -128,7 +128,7 @@
                 throw Error("Can't use ".concat(methodName, " in ReadonlySet"));
             }
         } ]);
-    }(_wrapNativeSuper(Set)), OBSERVED_ATTRIBUTES = [ "ref", "hidden" ], BOOLEAN_ATTRIBUTES = new ReadonlySet([ "hidden", "checked", "disabled", "required", "selected" ]), AUTO_ATTRIBUTES_TO_PROPS = new ReadonlySet([ "checked", "disabled", "selected", "src" ]), SUPPORTED_ATTRIBUTES_FOR_BINDING = new ReadonlySet([ "value", "checked" ]), BUILT_IN_STATE_PROPS = new ReadonlySet([ "_global", "_gettingDependenciesFor", "_localStateManager", "_stateManager", "_binding", "_populate", "_isActive", "_isStateManager", "_isStatefulArray", "hasOwnProperty" ]), GLOBAL_STATE_NOT_SET_YET = "Global State Not Set Yet", HTML_ELEMENT_CLASSES_MAP = (Object.freeze({
+    }(_wrapNativeSuper(Set)), OBSERVED_ATTRIBUTES = [ "ref", "hidden" ], BOOLEAN_ATTRIBUTES = new ReadonlySet([ "hidden", "checked", "disabled", "required", "selected" ]), AUTO_ATTRIBUTES_TO_PROPS = new ReadonlySet([ "checked", "disabled", "selected", "src" ]), SUPPORTED_ATTRIBUTES_FOR_BINDING = new ReadonlySet([ "value", "checked" ]), BUILT_IN_STATE_PROPS = new ReadonlySet([ "$host", "_global", "_stateManager", "_isActive", "_isStateManager", "populate", "hasOwnProperty" ]), GLOBAL_STATE_NOT_SET_YET = "Global State Not Set Yet", HTML_ELEMENT_CLASSES_MAP = (Object.freeze({
         NO_DEPENDENCIES_ARRAY_IN_SET_HOOK: function NO_DEPENDENCIES_ARRAY_IN_SET_HOOK(stateProp) {
             return "State set hook, must include a dependencies array! None was found for ".concat(stateProp);
         }
@@ -327,6 +327,7 @@
         for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
         return n;
     }
+    new CustomElementRegistry;
     var pendingPaintNodeManagers = NODES_STATE.pendingPaintNodeManagers, rafIds = new Map;
     function queueAnimationFrame(functionsToRun, type, afterRunFn) {
         var rafId;
@@ -715,21 +716,42 @@
         host.propAttributes.has(propName) || host.propAttributes.set(propName, new Set), 
         host.propAttributes.get(propName).add(attrNode);
     }
+    function parse_utils_arrayLikeToArray(r, a) {
+        (null == a || a > r.length) && (a = r.length);
+        for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+        return n;
+    }
     function parseStateExpression(expression) {
         if (0 === expression.indexOf("@")) return [ "property", [ expression.substring(1) ] ];
         if (0 === expression.indexOf("!")) return [ "negation", [ expression.substring(1) ] ];
         for (var _char, charIndex = 0, parsed = expression[charIndex]; charIndex++ < expression.length; ) {
             if (_char = expression[charIndex], 3 == charIndex && "is_" == parsed) return [ "equality", expression.substring(3).split(":") ];
-            if ("?" === _char) return [ "ternary", parsed, expression.substring(charIndex + 1).split(":") ];
+            if ("?" === _char) return [ "ternary", [ parsed ].concat((r = expression.substring(charIndex + 1).split(":"), 
+            function parse_utils_arrayWithoutHoles(r) {
+                if (Array.isArray(r)) return parse_utils_arrayLikeToArray(r);
+            }(r) || function parse_utils_iterableToArray(r) {
+                if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+            }(r) || function parse_utils_unsupportedIterableToArray(r, a) {
+                if (r) {
+                    if ("string" == typeof r) return parse_utils_arrayLikeToArray(r, a);
+                    var t = {}.toString.call(r).slice(8, -1);
+                    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? parse_utils_arrayLikeToArray(r, a) : void 0;
+                }
+            }(r) || function parse_utils_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.");
+            }())) ];
             parsed += _char;
         }
+        var r;
         return [ "literal", [ expression ] ];
     }
     function fromAttributeValue(value) {
         return "" === value || null !== value && value;
     }
     function state_utils_slicedToArray(r, e) {
-        return state_utils_arrayWithHoles(r) || function state_utils_iterableToArrayLimit(r, l) {
+        return function state_utils_arrayWithHoles(r) {
+            if (Array.isArray(r)) return r;
+        }(r) || function state_utils_iterableToArrayLimit(r, l) {
             var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
             if (null != t) {
                 var e, n, i, u, a = [], f = !0, o = !1;
@@ -749,31 +771,21 @@
                 }
                 return a;
             }
-        }(r, e) || state_utils_unsupportedIterableToArray(r, e) || state_utils_nonIterableRest();
-    }
-    function _toArray(r) {
-        return state_utils_arrayWithHoles(r) || function state_utils_iterableToArray(r) {
-            if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-        }(r) || state_utils_unsupportedIterableToArray(r) || state_utils_nonIterableRest();
-    }
-    function state_utils_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 state_utils_unsupportedIterableToArray(r, a) {
-        if (r) {
-            if ("string" == typeof r) return state_utils_arrayLikeToArray(r, a);
-            var t = {}.toString.call(r).slice(8, -1);
-            return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? state_utils_arrayLikeToArray(r, a) : void 0;
-        }
+        }(r, e) || function state_utils_unsupportedIterableToArray(r, a) {
+            if (r) {
+                if ("string" == typeof r) return state_utils_arrayLikeToArray(r, a);
+                var t = {}.toString.call(r).slice(8, -1);
+                return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? state_utils_arrayLikeToArray(r, a) : void 0;
+            }
+        }(r, e) || function state_utils_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 state_utils_arrayLikeToArray(r, a) {
         (null == a || a > r.length) && (a = r.length);
         for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
         return n;
     }
-    function state_utils_arrayWithHoles(r) {
-        if (Array.isArray(r)) return r;
-    }
     "undefined" != typeof window && (window.SproutWaitIdle = function waitForIdle() {
         return new Promise((function(resolve) {
             requestAnimationFrame((function check() {
@@ -791,7 +803,7 @@
             return BOOLEAN_ATTRIBUTES.has(attributeName);
         }(attrName) ? elementSetAttribute.call(this, attrName, attrValue) : "false" === attrValue ? this.removeAttribute(attrName) : elementSetAttribute.call(this, attrName, "");
     }, setStateAttribute = function setStateAttribute(attrName, statePropExpression) {
-        var _parseStateExpression2 = _toArray(parseStateExpression(statePropExpression)), type = _parseStateExpression2[0], args = _parseStateExpression2.slice(1), stateProp = args[0], _this$getState2 = state_utils_slicedToArray(this.getState(stateProp, !0), 2), stateVal = _this$getState2[0], theState = _this$getState2[1], stateManager = theState._stateManager, valueToSet = "literal" === type ? stateVal : stateManager.bindStatePropExpression(statePropExpression, type, args);
+        var _parseStateExpression2 = state_utils_slicedToArray(parseStateExpression(statePropExpression), 2), type = _parseStateExpression2[0], args = _parseStateExpression2[1], stateProp = args[0], _this$getState2 = state_utils_slicedToArray(this.getState(stateProp, !0), 2), stateVal = _this$getState2[0], theState = _this$getState2[1], stateManager = theState._stateManager, valueToSet = "literal" === type ? stateVal : stateManager.bindStatePropExpression(statePropExpression, type, args);
         this.removeAttribute(attrName);
         var stateAttrNode = document.createAttribute(attrName);
         stateAttrNode.nodeValue = valueToSet, setHiddenProperty(stateAttrNode, "isStateAttribute", !0), 
@@ -803,7 +815,7 @@
             once: !0
         });
     }, setStateText = function setStateText(statePropExpression) {
-        var _parseStateExpression4 = _toArray(parseStateExpression(statePropExpression)), type = _parseStateExpression4[0], args = _parseStateExpression4.slice(1), stateProp = args[0], _this$getState4 = state_utils_slicedToArray(this.getState(stateProp, !0), 2), stateVal = _this$getState4[0], theState = _this$getState4[1], stateManager = theState._stateManager, valueToSet = "literal" === type ? stateVal : stateManager.bindStatePropExpression(statePropExpression, type, args), textNode = document.createTextNode(valueToSet);
+        var _parseStateExpression4 = state_utils_slicedToArray(parseStateExpression(statePropExpression), 2), type = _parseStateExpression4[0], args = _parseStateExpression4[1], stateProp = args[0], _this$getState4 = state_utils_slicedToArray(this.getState(stateProp, !0), 2), stateVal = _this$getState4[0], theState = _this$getState4[1], stateManager = theState._stateManager, valueToSet = "literal" === type ? stateVal : stateManager.bindStatePropExpression(statePropExpression, type, args), textNode = document.createTextNode(valueToSet);
         setHiddenProperty(textNode, "isStateAttribute", !0), theState._stateManager.addStateNode(statePropExpression, textNode), 
         this.appendChild(textNode), this.addEventListener("disconnected", (function() {
             theState._stateManager.removeStateNode(statePropExpression, textNode);
@@ -826,7 +838,7 @@
         }));
     }
     function handleStateChange(stateManager, stateProp, changedValue) {
-        var _descrp$get;
+        var _descrp$get, _stateManager$stateHo, _stateManager$stateHo2;
         if (!isBuiltInStateProp(stateProp)) {
             var newValue = null != changedValue ? changedValue : stateManager.state[stateProp], descrp = Object.getOwnPropertyDescriptor(stateManager.state, stateProp);
             null == descrp || null === (_descrp$get = descrp.get) || void 0 === _descrp$get || _descrp$get.isStateGetter, 
@@ -841,11 +853,16 @@
                 });
                 state.dispatchEvent(stateChangeEvent);
             }(stateManager.state, stateProp, newValue), generateStateNodeActions(stateManager, stateProp, newValue), 
-            stateProp.startsWith("!") || generateStateNodeActions(stateManager, "!".concat(stateProp), !newValue);
+            stateProp.startsWith("!") || generateStateNodeActions(stateManager, "!".concat(stateProp), !newValue), 
+            null === (_stateManager$stateHo = stateManager.stateHooks.get(stateProp)) || void 0 === _stateManager$stateHo || _stateManager$stateHo.forEach((function(hookFn) {
+                hookFn(stateProp, newValue);
+            })), null === (_stateManager$stateHo2 = stateManager.stateHooks.get("$$ALL")) || void 0 === _stateManager$stateHo2 || _stateManager$stateHo2.forEach((function(hookFn) {
+                hookFn(stateProp, newValue);
+            }));
         }
     }
     function isBuiltInStateProp(stateProp) {
-        return BUILT_IN_STATE_PROPS.has(stateProp);
+        return "string" == typeof stateProp && (0 === stateProp.indexOf("$$") || BUILT_IN_STATE_PROPS.has(stateProp));
     }
     function isSetterHook(stateProp) {
         return 0 === stateProp.indexOf("set_");
@@ -1741,11 +1758,10 @@
             return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
         }, StateManager_typeof(o);
     }
-    function StateManager_iterableToArray(r) {
-        if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-    }
     function StateManager_slicedToArray(r, e) {
-        return StateManager_arrayWithHoles(r) || function StateManager_iterableToArrayLimit(r, l) {
+        return function StateManager_arrayWithHoles(r) {
+            if (Array.isArray(r)) return r;
+        }(r) || function StateManager_iterableToArrayLimit(r, l) {
             var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
             if (null != t) {
                 var e, n, i, u, a = [], f = !0, o = !1;
@@ -1765,10 +1781,9 @@
                 }
                 return a;
             }
-        }(r, e) || StateManager_unsupportedIterableToArray(r, e) || StateManager_nonIterableRest();
-    }
-    function StateManager_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.");
+        }(r, e) || StateManager_unsupportedIterableToArray(r, e) || function StateManager_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 StateManager_unsupportedIterableToArray(r, a) {
         if (r) {
@@ -1782,9 +1797,6 @@
         for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
         return n;
     }
-    function StateManager_arrayWithHoles(r) {
-        if (Array.isArray(r)) return r;
-    }
     function StateManager_defineProperties(e, r) {
         for (var t = 0; t < r.length; t++) {
             var o = r[t];
@@ -1833,7 +1845,8 @@
             StateManager_defineProperty(this, "privateState", {}), StateManager_defineProperty(this, "state", new EventTarget), 
             StateManager_defineProperty(this, "stateDependencies", new Map), StateManager_defineProperty(this, "parentStateProp", void 0), 
             StateManager_defineProperty(this, "parentStateManager", void 0), StateManager_defineProperty(this, "dirtyProps", new Set), 
-            StateManager_defineProperty(this, "nodeManager", new NodeManager), function StateManager_classPrivateFieldInitSpec(e, t, a) {
+            StateManager_defineProperty(this, "nodeManager", new NodeManager), StateManager_defineProperty(this, "stateHooks", new Map), 
+            function StateManager_classPrivateFieldInitSpec(e, t, a) {
                 (function StateManager_checkPrivateRedeclaration(e, t) {
                     if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
                 })(e, t), t.set(e, a);
@@ -1841,7 +1854,10 @@
             this.parentStateManager = parentStateManager, this.handleStateChange = handleStateFunction, 
             this.appScope = appScope, setHiddenProperty(this.state, "_stateManager", this, !0), 
             this.state.$$isInitializing = !0, this.state.populate = function(populateObject) {
-                for (var property in populateObject) this.hasOwnProperty(property) && (this[property] = populateObject[property]);
+                for (var property in populateObject) if (this.hasOwnProperty(property)) {
+                    if (isBuiltInStateProp(property)) continue;
+                    this[property] = populateObject[property];
+                }
             }, parentStateProp && parentStateManager && (this.state = function makeReactive(stateObject) {
                 var appScope = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : window;
                 return new Proxy(stateObject, function StateObjectValueHandler(rootStateObj, objPropertyName) {
@@ -1926,7 +1942,7 @@
                                 set: function set(value) {
                                     value !== stateManager.privateState[stateProp] && (value = statifyValue(value, stateProp, stateManager, appScope), 
                                     stateManager.privateState[stateProp] = value, stateManager.setDirtyProp(stateProp), 
-                                    stateManager.setDirtyProp("".concat(stateProp, ".length")));
+                                    Array.isArray(value) && stateManager.setDirtyProp("".concat(stateProp, ".length")));
                                 },
                                 get: function get() {
                                     return stateManager.privateState[stateProp];
@@ -1991,7 +2007,9 @@
                 return function StateManager_toConsumableArray(r) {
                     return function StateManager_arrayWithoutHoles(r) {
                         if (Array.isArray(r)) return StateManager_arrayLikeToArray(r);
-                    }(r) || StateManager_iterableToArray(r) || StateManager_unsupportedIterableToArray(r) || function StateManager_nonIterableSpread() {
+                    }(r) || function StateManager_iterableToArray(r) {
+                        if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+                    }(r) || StateManager_unsupportedIterableToArray(r) || function StateManager_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.");
                     }();
                 }(stateProps).toSorted((function(a, b) {
@@ -2054,13 +2072,11 @@
         }, {
             key: "bindStatePropExpression",
             value: function bindStatePropExpression(statePropExpression, type, args) {
+                var contextStateProp = args[0];
                 if (!type || !args) {
-                    var _parseStateExpression2 = function StateManager_toArray(r) {
-                        return StateManager_arrayWithHoles(r) || StateManager_iterableToArray(r) || StateManager_unsupportedIterableToArray(r) || StateManager_nonIterableRest();
-                    }(parseStateExpression(statePropExpression));
-                    type = _parseStateExpression2[0], args = _parseStateExpression2.slice(1);
+                    var _parseStateExpression2 = StateManager_slicedToArray(parseStateExpression(statePropExpression), 2);
+                    type = _parseStateExpression2[0], args = _parseStateExpression2[1], contextStateProp = args[0];
                 }
-                var contextStateProp = args[0];
                 if (!contextStateProp) throw Error("Must specify state property name for State expression: ".concat(statePropExpression));
                 var stateObj = this.state, descriptor = Object.getOwnPropertyDescriptor(stateObj, contextStateProp);
                 if (descriptor || (stateObj = stateObj._global, descriptor = Object.getOwnPropertyDescriptor(stateObj, contextStateProp)), 
@@ -2111,6 +2127,17 @@
             value: function isUsing(pluginName) {
                 return StateManager_classPrivateFieldGet(_plugins, this).has(pluginName);
             }
+        }, {
+            key: "addStateHook",
+            value: function addStateHook(hookFunction) {
+                var _this$stateHooks$get, _this5 = this, stateProps = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [];
+                stateProps.length ? stateProps.forEach((function(stateProp) {
+                    var _this5$stateHooks$get;
+                    (null !== (_this5$stateHooks$get = _this5.stateHooks.get(stateProp)) && void 0 !== _this5$stateHooks$get ? _this5$stateHooks$get : (_this5.stateHooks.set(stateProp, new Set), 
+                    _this5.stateHooks.get(stateProp))).add(hookFunction);
+                })) : (null !== (_this$stateHooks$get = this.stateHooks.get("$$ALL")) && void 0 !== _this$stateHooks$get ? _this$stateHooks$get : (this.stateHooks.set("$$ALL", new Set), 
+                this.stateHooks.get("$$ALL"))).add(hookFunction);
+            }
         } ]);
     }();
     const Cougar_StateManager = StateManager;
@@ -2263,9 +2290,10 @@
             this.bindAttributeToState(attributeName, statePropName);
         },
         bindprop: function bindprop(commandValue) {
-            var _commandValue$split6 = commands_slicedToArray(commandValue.split(":"), 2), statePropName = _commandValue$split6[0], elementPropName = _commandValue$split6[1], _this$getState2 = commands_slicedToArray(this.getState(statePropName, !0), 2), stateObject = (_this$getState2[0], 
-            _this$getState2[1]);
-            this[elementPropName] = stateObject[statePropName];
+            var _this = this, _commandValue$split6 = commands_slicedToArray(commandValue.split(":"), 2), statePropName = _commandValue$split6[0], elementPropName = _commandValue$split6[1], _this$getState2 = commands_slicedToArray(this.getState(statePropName, !0), 2), stateValue = _this$getState2[0], stateObject = _this$getState2[1];
+            this[elementPropName] = stateValue, stateObject._stateManager.addStateHook((function(_, newValue) {
+                _this[elementPropName] = newValue;
+            }), [ statePropName ]);
         }
     };
     function ReactiveElement_typeof(o) {
@@ -2400,10 +2428,16 @@
                     ReactiveElement_checkPrivateRedeclaration(e, a), a.add(e);
                 }(_this = ReactiveElement_callSuper(this, ReactiveElement), _ReactiveElement_brand), 
                 ReactiveElement_defineProperty(_this, "host", null), ReactiveElement_classPrivateFieldInitSpec(_this, _wasMounted, !1), 
-                ReactiveElement_defineProperty(_this, "refName", void 0), ReactiveElement_classPrivateFieldInitSpec(_this, _pendingAttributeChanges, []), 
+                ReactiveElement_defineProperty(_this, "refName", void 0), ReactiveElement_defineProperty(_this, "boundStateToProperties", new Map), 
+                ReactiveElement_classPrivateFieldInitSpec(_this, _pendingAttributeChanges, []), 
                 _this.isReactiveElement = !0, _this.isNativeElement = !0, _this;
             }
             return ReactiveElement_inherits(ReactiveElement, _elementClass), ReactiveElement_createClass(ReactiveElement, [ {
+                key: "bindStateToProperty",
+                value: function bindStateToProperty(statePropName, elementProprtyName) {
+                    this.boundStateToProperties.set(statePropName, elementProprtyName);
+                }
+            }, {
                 key: "activate",
                 value: function activate() {
                     var _step, _this2 = this, commands = [], _iterator = function ReactiveElement_createForOfIteratorHelper(r, e) {
@@ -2505,6 +2539,9 @@
                     var _this$host, host = null !== (_this$host = this.host) && void 0 !== _this$host ? _this$host : this;
                     host.ref && delete host.ref[this.refName];
                 }
+            }, {
+                key: "connectedMoveCallback",
+                value: function connectedMoveCallback() {}
             }, {
                 key: "attributeChangedCallback",
                 value: function attributeChangedCallback(attributeName, oldValue, newValue) {
@@ -2547,13 +2584,13 @@
                     }(attributeName), valueToSet = attributeValue;
                     if (isStateAttr) {
                         var stateProp = attributeValue, attrName = attributeName.substring(1);
-                        "textContent" === attrName ? this.initialSetText(stateProp) : setStateAttribute.call(this, attrName, stateProp);
+                        "textcontent" === attrName ? this.initialSetText(stateProp) : setStateAttribute.call(this, attrName, stateProp);
                     } else {
                         if (isPropAttr) {
                             var host = this.getHost(), propName = attributeValue.substring(1);
                             valueToSet = host.getAttribute(propName);
                         }
-                        "textContent" === attributeName ? this.initialSetText(valueToSet) : setAttribute.call(this, attributeName, valueToSet);
+                        "textcontent" === attributeName ? this.textContent = valueToSet : setAttribute.call(this, attributeName, valueToSet);
                     }
                 }
             }, {
@@ -3638,11 +3675,8 @@
         }
         return ReactiveCustomElement;
     }(appScope), function build(appScope, appName) {
-        function defineCustomElementFromTemplate(_x3, _x4, _x5) {
-            return _defineCustomElementFromTemplate.apply(this, arguments);
-        }
         function _defineCustomElementFromTemplate() {
-            return (_defineCustomElementFromTemplate = function _asyncToGenerator(n) {
+            return _defineCustomElementFromTemplate = function _asyncToGenerator(n) {
                 return function() {
                     var t = this, e = arguments;
                     return new Promise((function(r, o) {
@@ -3656,49 +3690,45 @@
                         _next(void 0);
                     }));
                 };
-            }(_regeneratorRuntime().mark((function _callee2(template, elemName, globalStylesheet) {
+            }(_regeneratorRuntime().mark((function _callee(template, elemName, globalStylesheet) {
                 var templateContent, style, runtime, runtimeScript, runtimeCode;
-                return _regeneratorRuntime().wrap((function _callee2$(_context2) {
-                    for (;;) switch (_context2.prev = _context2.next) {
+                return _regeneratorRuntime().wrap((function _callee$(_context) {
+                    for (;;) switch (_context.prev = _context.next) {
                       case 0:
                         if (templateContent = template.content, (style = templateContent.querySelector("style")) && templateContent.removeChild(style), 
                         (runtimeScript = templateContent.querySelector("script")) && (runtimeCode = runtimeScript.textContent, 
                         templateContent.removeChild(runtimeScript), runtimeCode && 0 !== runtimeCode.trim().length)) try {
                             runtime = Function(runtimeCode)();
                         } catch (e) {}
-                        customElements.define(elemName, function(_appScope$ReactiveCus3) {
-                            function _class3() {
+                        customElements.define(elemName, function(_appScope$ReactiveCus) {
+                            function _class() {
                                 var _style;
-                                return build_classCallCheck(this, _class3), build_callSuper(this, _class3, [ templateContent, runtime, null === (_style = style) || void 0 === _style ? void 0 : _style.textContent, globalStylesheet ]);
+                                return build_classCallCheck(this, _class), build_callSuper(this, _class, [ templateContent, runtime, null === (_style = style) || void 0 === _style ? void 0 : _style.textContent, globalStylesheet ]);
                             }
-                            return build_inherits(_class3, _appScope$ReactiveCus3), build_createClass(_class3);
-                        }(appScope.ReactiveCustomElement)), customElements.define("".concat(elemName, "-dsd"), function(_appScope$ReactiveCus4) {
-                            function _class4() {
-                                return build_classCallCheck(this, _class4), build_callSuper(this, _class4, [ templateContent, runtime, null, globalStylesheet, !0 ]);
+                            return build_inherits(_class, _appScope$ReactiveCus), build_createClass(_class);
+                        }(appScope.ReactiveCustomElement)), customElements.define("".concat(elemName, "-dsd"), function(_appScope$ReactiveCus2) {
+                            function _class2() {
+                                return build_classCallCheck(this, _class2), build_callSuper(this, _class2, [ templateContent, runtime, null, globalStylesheet, !0 ]);
                             }
-                            return build_inherits(_class4, _appScope$ReactiveCus4), build_createClass(_class4);
+                            return build_inherits(_class2, _appScope$ReactiveCus2), build_createClass(_class2);
                         }(appScope.ReactiveCustomElement));
 
                       case 7:
                       case "end":
-                        return _context2.stop();
+                        return _context.stop();
                     }
-                }), _callee2);
-            })))).apply(this, arguments);
+                }), _callee);
+            }))), _defineCustomElementFromTemplate.apply(this, arguments);
         }
-        !function build() {
-            var _globalThis$SPROUT_CO2, globalStylesheet = new CSSStyleSheet, globalStyle = document.querySelector('head > style[app="'.concat(appName, '"]'));
-            if (globalStyle) globalStylesheet.replaceSync(globalStyle.textContent); else {
-                var _globalThis$SPROUT_CO, compiledStyle = null === (_globalThis$SPROUT_CO = globalThis.SPROUT_COMPILED_STYLES) || void 0 === _globalThis$SPROUT_CO ? void 0 : _globalThis$SPROUT_CO[appName];
-                globalStylesheet.replaceSync(compiledStyle || "");
-            }
-            globalStylesheet.insertRule(SPROUT_FROZEN_CLASS_CSS), "function" == typeof globalThis["".concat(appName, "_runtime")] && globalThis["".concat(appName, "_runtime")].call(appScope);
-            var compiledTemplates = null === (_globalThis$SPROUT_CO2 = globalThis.SPROUT_COMPILED_TEMPLATES) || void 0 === _globalThis$SPROUT_CO2 ? void 0 : _globalThis$SPROUT_CO2[appName];
-            compiledTemplates && "function" == typeof compiledTemplates.forEach ? compiledTemplates.forEach((function(templateEl, componentName) {
-                componentName && templateEl && defineCustomElementFromTemplate(templateEl, componentName, globalStylesheet);
-            })) : Array.prototype.forEach.call(document.querySelectorAll('template[app="'.concat(appName, '"]')), (function(template) {
+        appScope.scopedCustomElementRegistry, function build() {
+            var globalStylesheet = new CSSStyleSheet, globalStyle = document.querySelector('head > style[app="'.concat(appName, '"]'));
+            globalStyle ? globalStylesheet.replaceSync(globalStyle.textContent) : globalStylesheet.replaceSync(""), 
+            globalStylesheet.insertRule(SPROUT_FROZEN_CLASS_CSS), "function" == typeof globalThis["".concat(appName, "_runtime")] && globalThis["".concat(appName, "_runtime")].call(appScope), 
+            Array.prototype.forEach.call(document.querySelectorAll('template[app="'.concat(appName, '"]')), (function(template) {
                 var componentName = template.getAttribute("for");
-                componentName && defineCustomElementFromTemplate(template, componentName, globalStylesheet);
+                componentName && function defineCustomElementFromTemplate(_x, _x2, _x3) {
+                    _defineCustomElementFromTemplate.apply(this, arguments);
+                }(template, componentName, globalStylesheet);
             }));
         }();
     }(appScope, config.appName), HTML_ELEMENT_CLASSES_MAP.forEach((function(itemDefinition) {