sproutjs-core 2.9.1 → 2.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sproutjs-core",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "keywords": [],
   "author": "",
   "license": "ISC",

package/sprout-core.js

@@ -60,8 +60,8 @@ var AUTO_ATTRIBUTES_TO_PROPS = new ReadonlySet(['checked', 'disabled', 'selected
 var SUPPORTED_ATTRIBUTES_FOR_BINDING = new ReadonlySet(['value', 'checked']);
 
 // These are "built-in" state props that are automatically added to state objects,
-// and should not be included in the normal state change/check flow
-var BUILT_IN_STATE_PROPS = new ReadonlySet(['_global', '_gettingDependenciesFor', '_localStateManager', '_stateManager', '_binding', '_populate', '_isActive', '_isStateManager', '_isStatefulArray', 'hasOwnProperty']);
+// and should not be treated as user state props.
+var BUILT_IN_STATE_PROPS = new ReadonlySet(['$host', '_global', '_stateManager', '_isActive', '_isStateManager', 'populate', 'hasOwnProperty']);
 var GLOBAL_STATE_VAR_NAME = "SproutGlobalState";
 var GLOBAL_STATE_FUNCTION_NAME = "getGlobalState";
 var GLOBAL_STATE_NOT_SET_YET = "Global State Not Set Yet";
@@ -333,6 +333,9 @@ var FRAME_BUDGET = 8;
 
 // CSS to always put on each Shadow DOM root
 var SHADOW_ROOT_CSS = ':host { contain: layout paint; }';
+
+// Maybe allow completely scoped app in the fure
+var SproutCustomElementRegistry = new CustomElementRegistry();
 ;// ./src/core/attr_utils.js
 
 
@@ -709,13 +712,14 @@ var COMMANDS = {
     this.bindAttributeToState(attributeName, statePropName);
   },
   bindprop: function bindprop(commandValue) {
+    var _this = this;
     var _commandValue$split5 = commandValue.split(':'),
       _commandValue$split6 = _slicedToArray(_commandValue$split5, 2),
       statePropName = _commandValue$split6[0],
       elementPropName = _commandValue$split6[1];
     var _this$getState = this.getState(statePropName, true),
       _this$getState2 = _slicedToArray(_this$getState, 2),
-      _ = _this$getState2[0],
+      stateValue = _this$getState2[0],
       stateObject = _this$getState2[1];
     if (true) {
       if (!stateObject) {
@@ -723,10 +727,20 @@ var COMMANDS = {
         return;
       }
     }
-    this[elementPropName] = stateObject[statePropName];
+    this[elementPropName] = stateValue;
+    var stateManager = stateObject._stateManager;
+    stateManager.addStateHook(function (_, newValue) {
+      _this[elementPropName] = newValue;
+    }, [statePropName]);
   }
 };
 ;// ./src/shared/parse_utils.js
+function parse_utils_toConsumableArray(r) { return parse_utils_arrayWithoutHoles(r) || parse_utils_iterableToArray(r) || parse_utils_unsupportedIterableToArray(r) || parse_utils_nonIterableSpread(); }
+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."); }
+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; } }
+function parse_utils_iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function parse_utils_arrayWithoutHoles(r) { if (Array.isArray(r)) return parse_utils_arrayLikeToArray(r); }
+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; }
 /* Possible expression:
  * literal: straight state prop,.
  * negation: !something (not something)
@@ -749,7 +763,7 @@ function parseStateExpression(expression) {
       return ["equality", expression.substring(3).split(':')];
     }
     if (_char === '?') {
-      return ["ternary", parsed, expression.substring(charIndex + 1).split(':')];
+      return ["ternary", [parsed].concat(parse_utils_toConsumableArray(expression.substring(charIndex + 1).split(':')))];
     }
     parsed += _char;
   }
@@ -818,10 +832,6 @@ function extendElementClassWithReactiveElementClass(elementClass) {
       var _this;
       ReactiveElement_classCallCheck(this, ReactiveElement);
       _this = ReactiveElement_callSuper(this, ReactiveElement);
-      // This is for when using moveBefore for detaching and reattaching DOM
-      // We considered using it - but it is not widely supported,
-      // and you have to move it to another DOM for it to work correctly
-      // connectedMoveCallback() {}
       _classPrivateMethodInitSpec(_this, _ReactiveElement_brand);
       // Should contain the parent (containing) custom element (a ReactiveCustomElement instance)
       _defineProperty(_this, "host", null);
@@ -829,6 +839,7 @@ function extendElementClassWithReactiveElementClass(elementClass) {
       _classPrivateFieldInitSpec(_this, _wasMounted, false);
       // The name used for the ref property
       _defineProperty(_this, "refName", void 0);
+      _defineProperty(_this, "boundStateToProperties", new Map());
       _classPrivateFieldInitSpec(_this, _pendingAttributeChanges, []);
       _this.isReactiveElement = true;
       _this.isNativeElement = true;
@@ -836,6 +847,11 @@ function extendElementClassWithReactiveElementClass(elementClass) {
     }
     ReactiveElement_inherits(ReactiveElement, _elementClass);
     return ReactiveElement_createClass(ReactiveElement, [{
+      key: "bindStateToProperty",
+      value: function bindStateToProperty(statePropName, elementProprtyName) {
+        this.boundStateToProperties.set(statePropName, elementProprtyName);
+      }
+    }, {
       key: "activate",
       value: function activate() {
         var _this2 = this;
@@ -943,6 +959,13 @@ function extendElementClassWithReactiveElementClass(elementClass) {
           delete host.ref[this.refName];
         }
       }
+
+      // Including this will run this when "moving" the elements
+      // in the same document, i.e. instead of calling connectedCallback/disoconnectedCallback
+      // It keeps the element "alive"
+    }, {
+      key: "connectedMoveCallback",
+      value: function connectedMoveCallback() {}
     }, {
       key: "attributeChangedCallback",
       value: function attributeChangedCallback(attributeName, oldValue, newValue) {
@@ -1253,6 +1276,7 @@ function extendElementClassWithReactiveElementClass(elementClass) {
 }
 ;// ./src/core/DOM_utils.js
 
+
 function isElementAList(element) {
   return element.tagName === "OL" || element.tagName === "UL";
 }
@@ -1263,6 +1287,11 @@ function getCustomElementFromMappedElement(element) {
   if (isReactiveCustomElement(element)) return element;
   if (isReactiveCustomElement(element.firstElementChild)) return element.firstElementChild;
 }
+function createSproutElement(elementName) {
+  return document.createElement(elementName, {
+    customElementRegistry: SproutCustomElementRegistry
+  });
+}
 ;// ./src/shared/paint_utils.js
 function paint_utils_createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = paint_utils_unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function paint_utils_slicedToArray(r, e) { return paint_utils_arrayWithHoles(r) || paint_utils_iterableToArrayLimit(r, e) || paint_utils_unsupportedIterableToArray(r, e) || paint_utils_nonIterableRest(); }
@@ -1934,7 +1963,7 @@ function generateStateNodeActions(stateManager, stateProp, newValue) {
   // The actual array of state objects is in state[stateProp]
   var stateMapElements = stateManager.stateArrayMaps[stateProp];
   var conditionallyRenderingElements = stateManager.nodeManager.conditionallyRenderingElements[stateProp];
-
+  //const elementsWithPropertyBind = stateManager.elementsWithPropertyBind.get(stateProp);
   // Note, since the value change is handled by a custom setter - that setter checks if the set value is the same - 
   // if it is - it won't call , and it won't reach here.
   if (stateNodes) {
@@ -2111,12 +2140,10 @@ function setHiddenProperty(obj, propName, propValue) {
 ;// ./src/shared/state_utils.js
 function state_utils_typeof(o) { "@babel/helpers - typeof"; return state_utils_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, state_utils_typeof(o); }
 function state_utils_slicedToArray(r, e) { return state_utils_arrayWithHoles(r) || state_utils_iterableToArrayLimit(r, e) || state_utils_unsupportedIterableToArray(r, e) || state_utils_nonIterableRest(); }
-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; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _toArray(r) { return state_utils_arrayWithHoles(r) || state_utils_iterableToArray(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; } }
 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_iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(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; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function state_utils_arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
@@ -2151,10 +2178,12 @@ var setAttribute = function setAttribute(attrName, attrValue) {
 // This creates the binding to state props on "State attributes".
 // This function is called when a custom element instance ic connected to the DOM
 var setStateAttribute = function setStateAttribute(attrName, statePropExpression) {
+  // In state expressions it is expected for the first "argument"
+  // to always be the stateProp itself
   var _parseStateExpression = parseStateExpression(statePropExpression),
-    _parseStateExpression2 = _toArray(_parseStateExpression),
+    _parseStateExpression2 = state_utils_slicedToArray(_parseStateExpression, 2),
     type = _parseStateExpression2[0],
-    args = _parseStateExpression2.slice(1);
+    args = _parseStateExpression2[1];
   var stateProp = args[0];
   var _this$getState = this.getState(stateProp, true),
     _this$getState2 = state_utils_slicedToArray(_this$getState, 2),
@@ -2202,9 +2231,9 @@ var setStateAttribute = function setStateAttribute(attrName, statePropExpression
 };
 var setStateText = function setStateText(statePropExpression) {
   var _parseStateExpression3 = parseStateExpression(statePropExpression),
-    _parseStateExpression4 = _toArray(_parseStateExpression3),
+    _parseStateExpression4 = state_utils_slicedToArray(_parseStateExpression3, 2),
     type = _parseStateExpression4[0],
-    args = _parseStateExpression4.slice(1);
+    args = _parseStateExpression4[1];
   var stateProp = args[0];
   var _this$getState3 = this.getState(stateProp, true),
     _this$getState4 = state_utils_slicedToArray(_this$getState3, 2),
@@ -2278,10 +2307,12 @@ function mapStateArrayToElements(stateItems, elemName, wrapInElement, parentElem
 
 // Main function that handles all state changes in a state object
 function handleStateChange(stateManager, stateProp, changedValue) {
-  var _descrp$get;
+  var _descrp$get, _stateManager$stateHo, _stateManager$stateHo2;
   if (isBuiltInStateProp(stateProp)) return;
   console.log("Handling state change for: " + stateProp);
   // At this point, if the value is taken from state, it should be a getter value
+  // We are SURE the value is new and has been changed at this point
+  // (we validate this earlier)
   var newValue = changedValue !== null && changedValue !== void 0 ? changedValue : stateManager.state[stateProp];
   var descrp = Object.getOwnPropertyDescriptor(stateManager.state, stateProp);
   var isGetter = descrp === null || descrp === void 0 || (_descrp$get = descrp.get) === null || _descrp$get === void 0 ? void 0 : _descrp$get.isStateGetter;
@@ -2292,6 +2323,14 @@ function handleStateChange(stateManager, stateProp, changedValue) {
   if (!stateProp.startsWith('!')) {
     generateStateNodeActions(stateManager, "!".concat(stateProp), !newValue, isGetter);
   }
+
+  // Run state hooks 
+  (_stateManager$stateHo = stateManager.stateHooks.get(stateProp)) === null || _stateManager$stateHo === void 0 || _stateManager$stateHo.forEach(function (hookFn) {
+    hookFn(stateProp, newValue);
+  });
+  (_stateManager$stateHo2 = stateManager.stateHooks.get("$$ALL")) === null || _stateManager$stateHo2 === void 0 || _stateManager$stateHo2.forEach(function (hookFn) {
+    hookFn(stateProp, newValue);
+  });
 }
 function handleStateDependency(stateManager, depStateProp) {
   var appScope = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window;
@@ -2313,6 +2352,8 @@ function handleStateDependency(stateManager, depStateProp) {
   }
 }
 function isBuiltInStateProp(stateProp) {
+  if (typeof stateProp !== "string") return false;
+  if (stateProp.indexOf("$$") === 0) return true;
   return BUILT_IN_STATE_PROPS.has(stateProp);
 }
 function dispatchStateChangEvent(state, property, newValue) {
@@ -3225,7 +3266,9 @@ function populateStateFromInitialState(stateManager, initialState) {
 
           // If an array value was set to a new array, 
           // then also count it as an array.length change!
-          stateManager.setDirtyProp("".concat(stateProp, ".length"));
+          if (Array.isArray(value)) {
+            stateManager.setDirtyProp("".concat(stateProp, ".length"));
+          }
         },
         get: function get() {
           // Value is always retrieved from the "private" state
@@ -3535,7 +3578,6 @@ function makeReactive(stateObject) {
 }
 ;// ./src/Cougar/StateManager.js
 function StateManager_typeof(o) { "@babel/helpers - typeof"; return StateManager_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, StateManager_typeof(o); }
-function StateManager_toArray(r) { return StateManager_arrayWithHoles(r) || StateManager_iterableToArray(r) || StateManager_unsupportedIterableToArray(r) || StateManager_nonIterableRest(); }
 function StateManager_toConsumableArray(r) { return StateManager_arrayWithoutHoles(r) || StateManager_iterableToArray(r) || StateManager_unsupportedIterableToArray(r) || StateManager_nonIterableSpread(); }
 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."); }
 function StateManager_iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -3611,6 +3653,9 @@ var StateManager = /*#__PURE__*/function () {
     // Node Manager saves bindings between Nodes and state,
     // translates state chanages into DOM actions and queue them for next paint.
     StateManager_defineProperty(this, "nodeManager", new NodeManager());
+    // Each key in the map is a stateProp, value is a set of callback functions
+    // to run when the state changes
+    StateManager_defineProperty(this, "stateHooks", new Map());
     // Names of "plugins" that are turned on for the State Manager instance (e.g. "map", "conditional-element");
     StateManager_classPrivateFieldInitSpec(this, _plugins, new Set());
     this.isInitializing = true;
@@ -3626,6 +3671,10 @@ var StateManager = /*#__PURE__*/function () {
     this.state.populate = function (populateObject) {
       for (var property in populateObject) {
         if (this.hasOwnProperty(property)) {
+          if (isBuiltInStateProp(property)) {
+            if (false) {}
+            continue;
+          }
           this[property] = populateObject[property];
         }
       }
@@ -3887,13 +3936,14 @@ var StateManager = /*#__PURE__*/function () {
   }, {
     key: "bindStatePropExpression",
     value: function bindStatePropExpression(statePropExpression, type, args) {
+      var contextStateProp = args[0];
       if (!type || !args) {
         var _parseStateExpression = parseStateExpression(statePropExpression);
-        var _parseStateExpression2 = StateManager_toArray(_parseStateExpression);
+        var _parseStateExpression2 = StateManager_slicedToArray(_parseStateExpression, 2);
         type = _parseStateExpression2[0];
-        args = _parseStateExpression2.slice(1);
+        args = _parseStateExpression2[1];
+        contextStateProp = args[0];
       }
-      var contextStateProp = args[0];
       if (!contextStateProp) {
         throw Error("Must specify state property name for State expression: ".concat(statePropExpression));
       }
@@ -3972,6 +4022,31 @@ var StateManager = /*#__PURE__*/function () {
     value: function isUsing(pluginName) {
       return StateManager_classPrivateFieldGet(_plugins, this).has(pluginName);
     }
+
+    // State Hook functions are function that
+    // run if stateProps change their value
+    // they can be used by "plug-ins" to add extra
+    // functionalities. If stateProps is undefined
+    // they hook function will run for ANY state change.
+    // stateProps can be an array of State props, to trigger
+    // the State hook functions only for when those state props change
+  }, {
+    key: "addStateHook",
+    value: function addStateHook(hookFunction) {
+      var _this5 = this;
+      var stateProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      if (!stateProps.length) {
+        var _this$stateHooks$get;
+        var allPropsHooks = (_this$stateHooks$get = this.stateHooks.get("$$ALL")) !== null && _this$stateHooks$get !== void 0 ? _this$stateHooks$get : (this.stateHooks.set("$$ALL", new Set()), this.stateHooks.get("$$ALL"));
+        allPropsHooks.add(hookFunction);
+      } else {
+        stateProps.forEach(function (stateProp) {
+          var _this5$stateHooks$get;
+          var propHooks = (_this5$stateHooks$get = _this5.stateHooks.get(stateProp)) !== null && _this5$stateHooks$get !== void 0 ? _this5$stateHooks$get : (_this5.stateHooks.set(stateProp, new Set()), _this5.stateHooks.get(stateProp));
+          propHooks.add(hookFunction);
+        });
+      }
+    }
   }]);
 }();
 /* harmony default export */ const Cougar_StateManager = (StateManager);
@@ -4578,52 +4653,16 @@ function toCamelCase(str) {
 
 // This is the script that takes Template elements from the page and defines Reactive Custom Elements
 /* harmony default export */ function build(appScope, appName) {
-  function defineCustomElementFromScript(_x, _x2) {
-    return _defineCustomElementFromScript.apply(this, arguments);
-  } // Create custom elements from templates
-  function _defineCustomElementFromScript() {
-    _defineCustomElementFromScript = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(elemName, globalStylesheet) {
-      var runtimeFnName, runtimeFn;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            runtimeFnName = "SPROUT_".concat(toCamelCase(elemName), "_Runtime");
-            runtimeFn = globalThis[runtimeFnName];
-            customElements.define(elemName, /*#__PURE__*/function (_appScope$ReactiveCus) {
-              function _class() {
-                build_classCallCheck(this, _class);
-                return build_callSuper(this, _class, [undefined, runtimeFn, undefined, globalStylesheet]);
-              }
-              build_inherits(_class, _appScope$ReactiveCus);
-              return build_createClass(_class);
-            }(appScope.ReactiveCustomElement));
-
-            // Also define the -dsd variation - to support Declartive Shadow DOM
-            customElements.define("".concat(elemName, "-dsd"), /*#__PURE__*/function (_appScope$ReactiveCus2) {
-              function _class2() {
-                build_classCallCheck(this, _class2);
-                return build_callSuper(this, _class2, [undefined, runtimeFn, undefined, globalStylesheet]);
-              }
-              build_inherits(_class2, _appScope$ReactiveCus2);
-              return build_createClass(_class2);
-            }(appScope.ReactiveCustomElement));
-            delete window[runtimeFnName];
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return _defineCustomElementFromScript.apply(this, arguments);
-  }
-  function defineCustomElementFromTemplate(_x3, _x4, _x5) {
+  var sprouteCustomElements = appScope.scopedCustomElementRegistry;
+  // Create custom elements from templates
+  function defineCustomElementFromTemplate(_x, _x2, _x3) {
     return _defineCustomElementFromTemplate.apply(this, arguments);
   }
   function _defineCustomElementFromTemplate() {
-    _defineCustomElementFromTemplate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(template, elemName, globalStylesheet) {
+    _defineCustomElementFromTemplate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(template, elemName, globalStylesheet) {
       var templateContent, style, runtime, runtimeScript, runtimeCode;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             templateContent = template.content;
             style = templateContent.querySelector('style');
@@ -4640,30 +4679,30 @@ function toCamelCase(str) {
                 }
               }
             }
-            customElements.define(elemName, /*#__PURE__*/function (_appScope$ReactiveCus3) {
-              function _class3() {
+            customElements.define(elemName, /*#__PURE__*/function (_appScope$ReactiveCus) {
+              function _class() {
                 var _style;
-                build_classCallCheck(this, _class3);
-                return build_callSuper(this, _class3, [templateContent, runtime, (_style = style) === null || _style === void 0 ? void 0 : _style.textContent, globalStylesheet]);
+                build_classCallCheck(this, _class);
+                return build_callSuper(this, _class, [templateContent, runtime, (_style = style) === null || _style === void 0 ? void 0 : _style.textContent, globalStylesheet]);
               }
-              build_inherits(_class3, _appScope$ReactiveCus3);
-              return build_createClass(_class3);
+              build_inherits(_class, _appScope$ReactiveCus);
+              return build_createClass(_class);
             }(appScope.ReactiveCustomElement));
 
             // Also define the -dsd variation - to support Declartive Shadow DOM
-            customElements.define("".concat(elemName, "-dsd"), /*#__PURE__*/function (_appScope$ReactiveCus4) {
-              function _class4() {
-                build_classCallCheck(this, _class4);
-                return build_callSuper(this, _class4, [templateContent, runtime, null, globalStylesheet, true]);
+            customElements.define("".concat(elemName, "-dsd"), /*#__PURE__*/function (_appScope$ReactiveCus2) {
+              function _class2() {
+                build_classCallCheck(this, _class2);
+                return build_callSuper(this, _class2, [templateContent, runtime, null, globalStylesheet, true]);
               }
-              build_inherits(_class4, _appScope$ReactiveCus4);
-              return build_createClass(_class4);
+              build_inherits(_class2, _appScope$ReactiveCus2);
+              return build_createClass(_class2);
             }(appScope.ReactiveCustomElement));
           case 7:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2);
+      }, _callee);
     }));
     return _defineCustomElementFromTemplate.apply(this, arguments);
   }