regor 1.0.9 → 1.1.1

package/dist/regor.es2019.cjs.js

@@ -17,14 +17,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   ComponentHead: () => ComponentHead,
   RegorConfig: () => RegorConfig,
   addUnbinder: () => addUnbinder,
@@ -67,7 +64,7 @@ __export(src_exports, {
   warningHandler: () => warningHandler,
   watchEffect: () => watchEffect
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/common/is-what.ts
 var isFunction = (value) => {
@@ -100,7 +97,8 @@ var errors = {
   [1 /* ComponentTemplateNotFound */]: (selector) => `Component template cannot be found. selector: ${selector} .`,
   [2 /* ComposablesRequireScope */]: "Use composables in scope. usage: useScope(() => new MyApp()).",
   [3 /* RequiresRefSourceArgument */]: (name2) => `${name2} requires ref source argument`,
-  [4 /* ComputedIsReadOnly */]: "computed is readonly."
+  [4 /* ComputedIsReadOnly */]: "computed is readonly.",
+  [5 /* PersistRequiresKey */]: "persist requires a string key."
 };
 var getError = (type, ...args) => {
   const msg = errors[type];
@@ -113,8 +111,7 @@ var bindDataSymbol = Symbol(":regor");
 // src/cleanup/getBindData.ts
 var getBindData = (node) => {
   const bindData = node[bindDataSymbol];
-  if (bindData)
-    return bindData;
+  if (bindData) return bindData;
   const newBindData = {
     unbinders: [],
     data: {}
@@ -140,8 +137,7 @@ var pushScope = () => {
 };
 var peekScope = (noThrow) => {
   const scope = scopes[scopes.length - 1];
-  if (!scope && !noThrow)
-    throw getError(2 /* ComposablesRequireScope */);
+  if (!scope && !noThrow) throw getError(2 /* ComposablesRequireScope */);
   return scope;
 };
 var popScope = (context) => {
@@ -156,8 +152,7 @@ var setScope = (context) => {
   const existing = data[scopeSymbol];
   if (existing) {
     const cs = peekScope();
-    if (existing === cs)
-      return;
+    if (existing === cs) return;
     cs.onMounted.length > 0 && existing.onMounted.push(...cs.onMounted);
     cs.onUnmounted.length > 0 && existing.onUnmounted.push(...cs.onUnmounted);
     return;
@@ -189,8 +184,7 @@ var isRef = (value) => {
 var observe = (source, observer, init) => {
   if (!isRef(source))
     throw getError(3 /* RequiresRefSourceArgument */, "observe");
-  if (init)
-    observer(source());
+  if (init) observer(source());
   const srefImpl = source;
   const stop = srefImpl(
     void 0,
@@ -209,8 +203,7 @@ var unbind = (node) => {
     const currentElement = queue.shift();
     unbindSingle(currentElement);
     const childNodes = currentElement.childNodes;
-    if (!childNodes)
-      continue;
+    if (!childNodes) continue;
     for (const item of childNodes) {
       queue.push(item);
     }
@@ -218,8 +211,7 @@ var unbind = (node) => {
 };
 var unbindSingle = (node) => {
   const bindData = node[bindDataSymbol];
-  if (!bindData)
-    return;
+  if (!bindData) return;
   for (const unbinder of bindData.unbinders) {
     unbinder();
   }
@@ -253,12 +245,9 @@ var warning = (type, ...args) => {
   const msg = warnings[type];
   const item = isFunction(msg) ? msg.call(warnings, ...args) : msg;
   const handler = warningHandler.warning;
-  if (!handler)
-    return;
-  if (isString(item))
-    handler(item);
-  else
-    handler(item, ...item.args);
+  if (!handler) return;
+  if (isString(item)) handler(item);
+  else handler(item, ...item.args);
 };
 var warningHandler = { warning: console.warn };
 
@@ -297,11 +286,9 @@ var getSwitches = (nodes) => {
   return [...set];
 };
 var setSwitchOwner = (owner, switchNodes) => {
-  if (!hasSwitch())
-    return;
+  if (!hasSwitch()) return;
   const switches2 = getSwitches(switchNodes);
-  if (switches2.length === 0)
-    return;
+  if (switches2.length === 0) return;
   switches2.forEach(refSwitch);
   addUnbinder(owner, () => {
     switches2.forEach(removeSwitch);
@@ -357,8 +344,7 @@ var IfBinder = class {
     return isIfElement;
   }
   __isProcessedOrMark(el) {
-    if (el[ifMarker])
-      return true;
+    if (el[ifMarker]) return true;
     el[ifMarker] = true;
     findElements(el, this.__ifSelector).forEach(
       (x) => x[ifMarker] = true
@@ -389,8 +375,7 @@ var IfBinder = class {
       removeNode(x);
     });
     el.remove();
-    if (type !== "if")
-      el[elseMarker] = 1;
+    if (type !== "if") el[elseMarker] = 1;
     const commentEnd = document.createComment(
       `__end__ :${type}${expression != null ? expression : ""}`
     );
@@ -403,8 +388,7 @@ var IfBinder = class {
     };
   }
   __collectElses(el, refresh) {
-    if (!el)
-      return [];
+    if (!el) return [];
     const nextElement = el.nextElementSibling;
     if (el.hasAttribute(this.__else)) {
       el.removeAttribute(this.__else);
@@ -426,8 +410,7 @@ var IfBinder = class {
       ];
     } else {
       const expression = el.getAttribute(this.__elseif);
-      if (!expression)
-        return [];
+      if (!expression) return [];
       el.removeAttribute(this.__elseif);
       const { nodes, parent, commentBegin, commentEnd } = this.__createRegion(
         el,
@@ -536,8 +519,7 @@ var bindChildNodes = (binder, childNodes) => {
 var findElements = (element, selector) => {
   var _a;
   const result = element.querySelectorAll(selector);
-  if ((_a = element.matches) == null ? void 0 : _a.call(element, selector))
-    return [element, ...result];
+  if ((_a = element.matches) == null ? void 0 : _a.call(element, selector)) return [element, ...result];
   return result;
 };
 var isTemplate = (node) => node instanceof HTMLTemplateElement;
@@ -559,8 +541,7 @@ var defineRefValue = (result, isReadOnly) => {
       return result();
     },
     set(value) {
-      if (isReadOnly)
-        throw new Error("value is readonly.");
+      if (isReadOnly) throw new Error("value is readonly.");
       return result(value);
     },
     enumerable: true,
@@ -568,10 +549,8 @@ var defineRefValue = (result, isReadOnly) => {
   });
 };
 var isOptionDynamic = (option, dynamic) => {
-  if (!option)
-    return false;
-  if (option.startsWith("["))
-    return option.substring(1, option.length - 1);
+  if (!option) return false;
+  if (option.startsWith("[")) return option.substring(1, option.length - 1);
   const len = dynamic.length;
   if (option.startsWith(dynamic)) {
     return option.substring(len, option.length - len);
@@ -597,19 +576,16 @@ var cacheStringFunction = (fn) => {
 };
 var camelizeRE = /-(\w)/g;
 var camelize = cacheStringFunction((str) => {
-  if (!str)
-    return str;
+  if (!str) return str;
   return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
 });
 var hyphenateRE = /\B([A-Z])/g;
 var hyphenate = cacheStringFunction((str) => {
-  if (!str)
-    return str;
+  if (!str) return str;
   return str.replace(hyphenateRE, "-$1").toLowerCase();
 });
 var capitalize = cacheStringFunction((str) => {
-  if (!str)
-    return str;
+  if (!str) return str;
   return str.charAt(0).toUpperCase() + str.slice(1);
 });
 
@@ -617,14 +593,12 @@ var capitalize = cacheStringFunction((str) => {
 var collectedRefs = [];
 var collectRef = (ref2) => {
   var _a;
-  if (collectedRefs.length === 0)
-    return;
+  if (collectedRefs.length === 0) return;
   (_a = collectedRefs[collectedRefs.length - 1]) == null ? void 0 : _a.add(ref2);
 };
 var watchEffect = (effect) => {
-  if (!effect)
-    return () => {
-    };
+  if (!effect) return () => {
+  };
   const terminator = { stop: () => {
   } };
   watchEffectInternal(effect, terminator);
@@ -632,13 +606,11 @@ var watchEffect = (effect) => {
   return terminator.stop;
 };
 var watchEffectInternal = (effect, terminator) => {
-  if (!effect)
-    return;
+  if (!effect) return;
   let stopObservingList = [];
   let isStopped = false;
   const stopWatch = () => {
-    for (const stop of stopObservingList)
-      stop();
+    for (const stop of stopObservingList) stop();
     stopObservingList = [];
     isStopped = true;
   };
@@ -647,8 +619,7 @@ var watchEffectInternal = (effect, terminator) => {
     const set = /* @__PURE__ */ new Set();
     collectedRefs.push(set);
     effect((onCleanup) => stopObservingList.push(onCleanup));
-    if (isStopped)
-      return;
+    if (isStopped) return;
     for (const r of [...set]) {
       const stopObserving = observe(r, () => {
         stopWatch();
@@ -688,15 +659,12 @@ var isRaw = (value) => {
 
 // src/reactivity/trigger.ts
 var trigger = (source, eventSource, isRecursive) => {
-  if (!isRef(source))
-    return;
+  if (!isRef(source)) return;
   const srefImpl = source;
   srefImpl(void 0, eventSource, 1 /* trigger */);
-  if (!isRecursive)
-    return;
+  if (!isRecursive) return;
   const obj = srefImpl();
-  if (!obj)
-    return;
+  if (!obj) return;
   if (isArray(obj) || isSet(obj)) {
     for (const el of obj) {
       trigger(el, eventSource, true);
@@ -729,8 +697,7 @@ var createProxy = (originalProto, proxyProto, methodsToPatch4) => {
     define(proxyProto, method, function mutator(...args) {
       const result = original.apply(this, args);
       const subscribers = this[srefSymbol];
-      for (const subscriber of subscribers)
-        trigger(subscriber);
+      for (const subscriber of subscribers) trigger(subscriber);
       return result;
     });
   });
@@ -775,17 +742,14 @@ createProxy(setProto, proxySetProto, methodsToPatch3);
 // src/reactivity/sref.ts
 var batchCollector = {};
 var sref = (value) => {
-  if (isRef(value) || isRaw(value))
-    return value;
+  if (isRef(value) || isRaw(value)) return value;
   const refObj = {
     auto: true,
     _value: value
   };
   const createProxy2 = (value2) => {
-    if (!isObject(value2))
-      return false;
-    if (srefSymbol in value2)
-      return true;
+    if (!isObject(value2)) return false;
+    if (srefSymbol in value2) return true;
     const isAnArray = isArray(value2);
     if (isAnArray) {
       Object.setPrototypeOf(value2, proxyArrayProto);
@@ -806,24 +770,22 @@ var sref = (value) => {
   const isProxy = createProxy2(value);
   const observers = /* @__PURE__ */ new Set();
   const trigger2 = (newValue, eventSource) => {
-    if (batchCollector.set) {
-      batchCollector.set.add(srefFunction);
+    if (batchCollector.stack && batchCollector.stack.length) {
+      const current = batchCollector.stack[batchCollector.stack.length - 1];
+      current.add(srefFunction);
       return;
     }
-    if (observers.size === 0)
-      return;
+    if (observers.size === 0) return;
     silence(() => {
       for (const callback of [...observers.keys()]) {
-        if (!observers.has(callback))
-          continue;
+        if (!observers.has(callback)) continue;
         callback(newValue, eventSource);
       }
     });
   };
   const attachProxyHandle = (value2) => {
     let proxyHandle = value2[srefSymbol];
-    if (!proxyHandle)
-      value2[srefSymbol] = proxyHandle = /* @__PURE__ */ new Set();
+    if (!proxyHandle) value2[srefSymbol] = proxyHandle = /* @__PURE__ */ new Set();
     proxyHandle.add(srefFunction);
   };
   const srefFunction = (...args) => {
@@ -831,15 +793,12 @@ var sref = (value) => {
       let newValue = args[0];
       const eventSource = args[1];
       if (0 in args) {
-        if (refObj._value === newValue)
-          return newValue;
+        if (refObj._value === newValue) return newValue;
         if (isRef(newValue)) {
           newValue = newValue();
-          if (refObj._value === newValue)
-            return newValue;
+          if (refObj._value === newValue) return newValue;
         }
-        if (createProxy2(newValue))
-          attachProxyHandle(newValue);
+        if (createProxy2(newValue)) attachProxyHandle(newValue);
         refObj._value = newValue;
         if (refObj.auto) {
           trigger2(newValue, eventSource);
@@ -854,9 +813,8 @@ var sref = (value) => {
     switch (operation) {
       case 0 /* observe */: {
         const observer = args[3];
-        if (!observer)
-          return () => {
-          };
+        if (!observer) return () => {
+        };
         const removeObserver = (observer2) => {
           observers.delete(observer2);
         };
@@ -886,8 +844,7 @@ var sref = (value) => {
   };
   srefFunction[srefSymbol] = 1;
   defineRefValue(srefFunction, false);
-  if (isProxy)
-    attachProxyHandle(value);
+  if (isProxy) attachProxyHandle(value);
   return srefFunction;
 };
 
@@ -914,14 +871,12 @@ var MountList = class {
   }
   __setValueMap(item) {
     const value = this.__getKey(item.value);
-    if (value)
-      this.__valueMap.set(value, item);
+    if (value !== void 0) this.__valueMap.set(value, item);
   }
   __deleteValueMap(index) {
     var _a;
     const value = this.__getKey((_a = this.__list[index]) == null ? void 0 : _a.value);
-    if (value)
-      this.__valueMap.delete(value);
+    if (value !== void 0) this.__valueMap.delete(value);
   }
   /**
    * @internal
@@ -941,8 +896,7 @@ var MountList = class {
   }
   __insertAt(index, item) {
     const len = this.__length;
-    for (let i = index; i < len; ++i)
-      this.__list[i].order = i + 1;
+    for (let i = index; i < len; ++i) this.__list[i].order = i + 1;
     item.order = index;
     this.__list.splice(index, 0, item);
     this.__setValueMap(item);
@@ -960,13 +914,11 @@ var MountList = class {
     this.__deleteValueMap(index);
     this.__list.splice(index, 1);
     const len = this.__length;
-    for (let i = index; i < len; ++i)
-      this.__list[i].order = i;
+    for (let i = index; i < len; ++i) this.__list[i].order = i;
   }
   __removeAllAfter(index) {
     const len = this.__length;
-    for (let i = index; i < len; ++i)
-      this.__deleteValueMap(i);
+    for (let i = index; i < len; ++i) this.__deleteValueMap(i);
     this.__list.splice(index);
   }
   __isValueMounted(value) {
@@ -1001,8 +953,7 @@ var _ForBinder = class _ForBinder {
     return isForElement;
   }
   __isProcessedOrMark(el) {
-    if (el[forMarker])
-      return true;
+    if (el[forMarker]) return true;
     el[forMarker] = true;
     findElements(el, this.__forSelector).forEach(
       (x) => x[forMarker] = true
@@ -1010,8 +961,7 @@ var _ForBinder = class _ForBinder {
     return false;
   }
   __bindFor(el) {
-    if (el.hasAttribute(this.__pre) || this.__isProcessedOrMark(el))
-      return;
+    if (el.hasAttribute(this.__pre) || this.__isProcessedOrMark(el)) return;
     const forPath = el.getAttribute(this.__for);
     if (!forPath) {
       warning(0 /* MissingBindingExpression */, this.__for, el);
@@ -1021,10 +971,8 @@ var _ForBinder = class _ForBinder {
     this.__bindForToPath(el, forPath);
   }
   __getIterable(obj) {
-    if (isNullOrUndefined(obj))
-      return [];
-    if (isFunction(obj))
-      obj = obj();
+    if (isNullOrUndefined(obj)) return [];
+    if (isFunction(obj)) obj = obj();
     if (Symbol.iterator in Object(obj)) {
       return obj;
     }
@@ -1061,8 +1009,7 @@ var _ForBinder = class _ForBinder {
     const areEqual = (a, b) => getKey(a) === getKey(b);
     const nodes = getNodes(el);
     const parent = el.parentNode;
-    if (!parent)
-      return;
+    if (!parent) return;
     const title = `${this.__for} => ${forPath}`;
     const commentBegin = new Comment(`__begin__ ${title}`);
     parent.insertBefore(commentBegin, el);
@@ -1121,8 +1068,7 @@ var _ForBinder = class _ForBinder {
     };
     const updateDom = (newValues) => {
       let len = mountList.__length;
-      if (isFunction(newValues))
-        newValues = newValues();
+      if (isFunction(newValues)) newValues = newValues();
       const unrefedNewValue = unref(newValues[0]);
       if (isArray(unrefedNewValue) && unrefedNewValue.length === 0) {
         unmount(commentBegin, commentEnd);
@@ -1138,8 +1084,7 @@ var _ForBinder = class _ForBinder {
         const modify = () => {
           if (i2 < len) {
             const mountItem = mountList.__get(i2++);
-            if (areEqual(mountItem.value, newValue))
-              return;
+            if (areEqual(mountItem.value, newValue)) return;
             const newValueMountPosition = mountList.__lookupValueOrderIfMounted(
               getKey(newValue)
             );
@@ -1154,8 +1099,7 @@ var _ForBinder = class _ForBinder {
               --len;
               if (newValueMountPosition > i2 + 1) {
                 for (let j2 = i2; j2 < newValueMountPosition - 1 && j2 < len; ) {
-                  if (areEqual(mountList.__get(i2).value, newValue))
-                    break;
+                  if (areEqual(mountList.__get(i2).value, newValue)) break;
                   ++j2;
                   remove(i2);
                   mountList.__removeAt(i2);
@@ -1186,8 +1130,7 @@ var _ForBinder = class _ForBinder {
       }
       const j = i2;
       len = mountList.__length;
-      while (i2 < len)
-        remove(i2++);
+      while (i2 < len) remove(i2++);
       mountList.__removeAllAfter(j);
       updateIndexes(firstRemovalOrInsertionIndex);
     };
@@ -1212,16 +1155,13 @@ var _ForBinder = class _ForBinder {
   __parseForPath(forPath) {
     var _a, _b;
     const matches = _ForBinder.__forPathRegex.exec(forPath);
-    if (!matches)
-      return;
+    if (!matches) return;
     const keys = (matches[1] + ((_a = matches[2]) != null ? _a : "")).split(",").map((key) => key.trim());
     const indexOfIndex = keys.length > 1 ? keys.length - 1 : -1;
     const index = indexOfIndex !== -1 && (keys[indexOfIndex] === "index" || ((_b = keys[indexOfIndex]) == null ? void 0 : _b.startsWith("#"))) ? keys[indexOfIndex] : "";
-    if (index)
-      keys.splice(indexOfIndex, 1);
+    if (index) keys.splice(indexOfIndex, 1);
     const list = matches[3];
-    if (!list || keys.length === 0)
-      return;
+    if (!list || keys.length === 0) return;
     const hasDestructuring = /[{[]/.test(forPath);
     return {
       list,
@@ -1249,7 +1189,7 @@ var _ForBinder = class _ForBinder {
     };
   }
 };
-__publicField(_ForBinder, "__forPathRegex", /\{?\[?\(?([^)}\]]+)\)?\]?\}?([^)]+)?\s+\b(?:in|of)\b\s+([^\s]+)\s*/);
+__publicField(_ForBinder, "__forPathRegex", /\{?\[?\(?([^)}\]]+)\)?\]?\}?([^)]+)?\s+\b(?:in|of)\b\s+(.*)\s*$/);
 var ForBinder = _ForBinder;
 
 // src/bind/DynamicBinder.ts
@@ -1280,8 +1220,7 @@ var DynamicBinder = class {
     let expression = el.getAttribute(this.__is);
     if (!expression) {
       expression = el.getAttribute("is");
-      if (!expression || !expression.startsWith("regor:"))
-        return;
+      if (!expression || !expression.startsWith("regor:")) return;
       expression = `'${expression.slice(6)}'`;
       el.removeAttribute("is");
     }
@@ -1339,13 +1278,11 @@ var DynamicBinder = class {
           unmount(commentBegin, commentEnd);
           return;
         }
-        if (mounted.name === name2)
-          return;
+        if (mounted.name === name2) return;
         unmount(commentBegin, commentEnd);
         const componentElement = document.createElement(name2);
         for (const attr of el.getAttributeNames()) {
-          if (attr === this.__is)
-            continue;
+          if (attr === this.__is) continue;
           componentElement.setAttribute(attr, el.getAttribute(attr));
         }
         mount2(componentChildNodes, componentElement);
@@ -1386,8 +1323,7 @@ var propsDirective = {
           const key = item[0];
           const value2 = item[1];
           const ctxKey = ctx[key];
-          if (ctxKey === value2)
-            continue;
+          if (ctxKey === value2) continue;
           if (isRef(ctxKey)) {
             ctxKey(value2);
           } else {
@@ -1417,8 +1353,7 @@ var propsOnceDirective = {
       const key = item[0];
       const value2 = item[1];
       const ctxKey = ctx[key];
-      if (ctxKey === value2)
-        continue;
+      if (ctxKey === value2) continue;
       if (isRef(ctxKey)) {
         ctxKey(value2);
       } else {
@@ -1507,16 +1442,14 @@ var useScope = (context) => {
   }
 };
 var isScope = (value) => {
-  if (!isObject(value))
-    return false;
+  if (!isObject(value)) return false;
   return scopeSymbol2 in value;
 };
 
 // src/reactivity/entangle.ts
 var entangle = (r1, r2) => {
-  if (r1 === r2)
-    return () => {
-    };
+  if (r1 === r2) return () => {
+  };
   const stop1 = observe(r1, (v) => r2(v));
   const stop2 = observe(r2, (v) => r1(v));
   r2(r1());
@@ -1540,9 +1473,8 @@ var callMounted = (context) => {
 var singlePropDirective = {
   collectRefObj: true,
   onBind: (_, parseResult, _expr, option, _dynamicOption, _flags) => {
-    if (!option)
-      return () => {
-      };
+    if (!option) return () => {
+    };
     const key = camelize(option);
     const stopObserving = observe(
       parseResult.value,
@@ -1551,8 +1483,7 @@ var singlePropDirective = {
         const value = (_a = parseResult.refs[0]) != null ? _a : parseResult.value()[0];
         const ctx = parseResult.context;
         const ctxKey = ctx[option];
-        if (ctxKey === value)
-          return;
+        if (ctxKey === value) return;
         if (isRef(ctxKey)) {
           ctxKey(value);
         } else {
@@ -1589,28 +1520,22 @@ var ComponentBinder = class {
       ...[...registeredComponents.keys()].map(hyphenate),
       ...[...Object.keys(contextComponents)].map(hyphenate)
     ].join(",");
-    if (isNullOrWhitespace(selector))
-      return;
+    if (isNullOrWhitespace(selector)) return;
     const list = element.querySelectorAll(selector);
     const components = ((_a = element.matches) == null ? void 0 : _a.call(element, selector)) ? [element, ...list] : list;
     for (const component of components) {
-      if (component.hasAttribute(binder.__pre))
-        continue;
+      if (component.hasAttribute(binder.__pre)) continue;
       const parent = component.parentNode;
-      if (!parent)
-        continue;
+      if (!parent) continue;
       const nextSibling = component.nextSibling;
       const tagName = camelize(component.tagName).toUpperCase();
       const contextComponent = contextComponents[tagName];
       const registeredComponent = contextComponent != null ? contextComponent : registeredComponentsUpperCase.get(tagName);
-      if (!registeredComponent)
-        continue;
+      if (!registeredComponent) continue;
       const templateElement = registeredComponent.template;
-      if (!templateElement)
-        continue;
+      if (!templateElement) continue;
       const componentParent = component.parentElement;
-      if (!componentParent)
-        continue;
+      if (!componentParent) continue;
       const startOfComponent = new Comment(
         " begin component: " + component.tagName
       );
@@ -1626,30 +1551,24 @@ var ComponentBinder = class {
         const hasPropsOnce = component2.hasAttribute(propsOnceName);
         parser.__scoped(capturedContext2, () => {
           parser.__push(props);
-          if (hasProps)
-            binder.__bind(propsDirective, component2, propsName);
+          if (hasProps) binder.__bind(propsDirective, component2, propsName);
           if (hasPropsOnce)
             binder.__bind(propsOnceDirective, component2, propsOnceName);
           let definedProps = registeredComponent.props;
-          if (!definedProps || definedProps.length === 0)
-            return;
+          if (!definedProps || definedProps.length === 0) return;
           definedProps = definedProps.map(camelize);
           for (const name2 of definedProps.concat(definedProps.map(hyphenate))) {
             const value = component2.getAttribute(name2);
-            if (value === null)
-              continue;
+            if (value === null) continue;
             props[camelize(name2)] = value;
             component2.removeAttribute(name2);
           }
           const map = binder.__directiveCollector.__collect(component2, false);
           for (const [attrName, item] of map.entries()) {
             const [name2, option] = item.__terms;
-            if (!option)
-              continue;
-            if (!definedProps.includes(camelize(option)))
-              continue;
-            if (name2 !== "." && name2 !== ":" && name2 !== bindName)
-              continue;
+            if (!option) continue;
+            if (!definedProps.includes(camelize(option))) continue;
+            if (name2 !== "." && name2 !== ":" && name2 !== bindName) continue;
             binder.__bind(
               singlePropDirective,
               component2,
@@ -1681,16 +1600,13 @@ var ComponentBinder = class {
           for (const [key, propsValue] of Object.entries(props)) {
             if (key in componentCtx2) {
               const compValue = componentCtx2[key];
-              if (compValue === propsValue)
-                continue;
+              if (compValue === propsValue) continue;
               if (head2.entangle && isRef(compValue) && isRef(propsValue)) {
                 addUnbinder(startOfComponent, entangle(propsValue, compValue));
               } else if (isRef(compValue)) {
                 compValue(propsValue);
-              } else
-                componentCtx2[key] = unref(propsValue);
-            } else
-              componentCtx2[key] = propsValue;
+              } else componentCtx2[key] = unref(propsValue);
+            } else componentCtx2[key] = propsValue;
           }
           (_a2 = head2.onAutoPropsAssigned) == null ? void 0 : _a2.call(head2);
         }
@@ -1713,8 +1629,7 @@ var ComponentBinder = class {
           name2 = slot.getAttributeNames().filter((x) => x.startsWith("#"))[0];
           if (isNullOrWhitespace(name2)) {
             name2 = "default";
-          } else
-            name2 = name2.substring(1);
+          } else name2 = name2.substring(1);
         }
         let compTemplate = component.querySelector(
           `template[name='${name2}'], template[\\#${name2}]`
@@ -1725,8 +1640,7 @@ var ComponentBinder = class {
             compTemplate = null;
         }
         const createSwitchContext = (childNodes2) => {
-          if (head.disableSwitch)
-            return;
+          if (head.disableSwitch) return;
           parser.__scoped(capturedContext, () => {
             parser.__push(componentCtx);
             const props = getProps(slot, parser.__capture());
@@ -1735,8 +1649,7 @@ var ComponentBinder = class {
               const switchContext = parser.__capture();
               const id = addSwitch(switchContext);
               for (const child of childNodes2) {
-                if (!isElement(child))
-                  continue;
+                if (!isElement(child)) continue;
                 child.setAttribute(rswitch, id);
                 refSwitch(id);
                 addUnbinder(child, () => {
@@ -1769,8 +1682,7 @@ var ComponentBinder = class {
         }
       };
       const expandNestedSlots = (node) => {
-        if (!isElement(node))
-          return;
+        if (!isElement(node)) return;
         const slots = node.querySelectorAll("slot");
         if (isSlot(node)) {
           expandSlot(node);
@@ -1792,8 +1704,7 @@ var ComponentBinder = class {
       expandSlots();
       componentParent.insertBefore(endOfComponent, nextSibling);
       const transferAttributesToTheComponentChild = () => {
-        if (!registeredComponent.inheritAttrs)
-          return;
+        if (!registeredComponent.inheritAttrs) return;
         let inheritorChildNodes = childNodes.filter(
           (x) => x.nodeType === Node.ELEMENT_NODE
         );
@@ -1802,11 +1713,9 @@ var ComponentBinder = class {
             (x) => x.hasAttribute(this.__inherit)
           );
         const inheritor = inheritorChildNodes[0];
-        if (!inheritor)
-          return;
+        if (!inheritor) return;
         for (const attrName of component.getAttributeNames()) {
-          if (attrName === propsName || attrName === propsOnceName)
-            continue;
+          if (attrName === propsName || attrName === propsOnceName) continue;
           const value = component.getAttribute(attrName);
           if (attrName === "class") {
             inheritor.classList.add(...value.split(" "));
@@ -1866,12 +1775,10 @@ var DirectiveElement = class {
   __parse() {
     let name2 = this.__name;
     const isPropShortcut = name2.startsWith(".");
-    if (isPropShortcut)
-      name2 = ":" + name2.slice(1);
+    if (isPropShortcut) name2 = ":" + name2.slice(1);
     const firstFlagIndex = name2.indexOf(".");
     const terms = this.__terms = (firstFlagIndex < 0 ? name2 : name2.substring(0, firstFlagIndex)).split(/[:@]/);
-    if (isNullOrWhitespace(terms[0]))
-      terms[0] = isPropShortcut ? "." : name2[0];
+    if (isNullOrWhitespace(terms[0])) terms[0] = isPropShortcut ? "." : name2[0];
     if (firstFlagIndex >= 0) {
       const flags = this.__flags = name2.slice(firstFlagIndex + 1).split(".");
       if (flags.includes("camel")) {
@@ -1893,21 +1800,18 @@ var DirectiveCollector = class {
   }
   __collect(element, isRecursive) {
     const map = /* @__PURE__ */ new Map();
-    if (!isHTMLElement(element))
-      return map;
+    if (!isHTMLElement(element)) return map;
     const prefixes2 = this.__prefixes;
     const processNode = (node) => {
       const names = node.getAttributeNames().filter((name2) => prefixes2.some((p) => name2.startsWith(p)));
       for (const name2 of names) {
-        if (!map.has(name2))
-          map.set(name2, new DirectiveElement(name2));
+        if (!map.has(name2)) map.set(name2, new DirectiveElement(name2));
         const item = map.get(name2);
         item.__elements.push(node);
       }
     };
     processNode(element);
-    if (!isRecursive)
-      return map;
+    if (!isRecursive) return map;
     const nodes = element.querySelectorAll("*");
     for (const node of nodes) {
       processNode(node);
@@ -1944,15 +1848,12 @@ var Binder = class {
   __unwrapTemplates(element) {
     const templates = isTemplate(element) ? [element] : element.querySelectorAll("template");
     for (const template of templates) {
-      if (template.hasAttribute(this.__pre))
-        continue;
+      if (template.hasAttribute(this.__pre)) continue;
       const parent = template.parentNode;
-      if (!parent)
-        continue;
+      if (!parent) continue;
       const nextSibling = template.nextSibling;
       template.remove();
-      if (!template.content)
-        continue;
+      if (!template.content) continue;
       const childNodes = [...template.content.childNodes];
       for (const child of childNodes) {
         parent.insertBefore(child, nextSibling);
@@ -1963,12 +1864,9 @@ var Binder = class {
   __bindDefault(element) {
     if (element.nodeType !== Node.ELEMENT_NODE || element.hasAttribute(this.__pre))
       return;
-    if (this.__ifBinder.__bindAll(element))
-      return;
-    if (this.__forBinder.__bindAll(element))
-      return;
-    if (this.__dynamicBinder.__bindAll(element))
-      return;
+    if (this.__ifBinder.__bindAll(element)) return;
+    if (this.__forBinder.__bindAll(element)) return;
+    if (this.__dynamicBinder.__bindAll(element)) return;
     this.__componentBinder.__bindAll(element);
     this.__unwrapTemplates(element);
     this.__bindAttributes(element, true);
@@ -1990,16 +1888,13 @@ var Binder = class {
     }
   }
   __bind(config, el, attribute, _noWarning, option, flags) {
-    if (el.hasAttribute(this.__pre))
-      return;
+    if (el.hasAttribute(this.__pre)) return;
     const bindExpression = el.getAttribute(attribute);
     el.removeAttribute(attribute);
     const getParentSwitch = (el2) => {
       const switchId = el2.getAttribute(rswitch);
-      if (switchId)
-        return switchId;
-      if (!el2.parentElement)
-        return null;
+      if (switchId) return switchId;
+      if (!el2.parentElement) return null;
       return getParentSwitch(el2.parentElement);
     };
     if (hasSwitch()) {
@@ -2014,15 +1909,12 @@ var Binder = class {
     this.__bindToExpression(config, el, bindExpression, option, flags);
   }
   __handleTeleport(config, el, valueExpression) {
-    if (config !== teleportDirective)
-      return false;
-    if (isNullOrWhitespace(valueExpression))
-      return true;
+    if (config !== teleportDirective) return false;
+    if (isNullOrWhitespace(valueExpression)) return true;
     const teleportTo = document.querySelector(valueExpression);
     if (teleportTo) {
       const parent = el.parentElement;
-      if (!parent)
-        return true;
+      if (!parent) return true;
       const placeholder = new Comment(`teleported => '${valueExpression}'`);
       parent.insertBefore(placeholder, el);
       el.teleportedFrom = placeholder;
@@ -2036,10 +1928,8 @@ var Binder = class {
   }
   __bindToExpression(config, el, valueExpression, option, flags) {
     var _a;
-    if (el.nodeType !== Node.ELEMENT_NODE || valueExpression == null)
-      return;
-    if (this.__handleTeleport(config, el, valueExpression))
-      return;
+    if (el.nodeType !== Node.ELEMENT_NODE || valueExpression == null) return;
+    if (this.__handleTeleport(config, el, valueExpression)) return;
     const result = this.__parser.__parse(
       valueExpression,
       config.isLazy,
@@ -2083,8 +1973,7 @@ var Binder = class {
       return previousOption;
     };
     const observeTailChanges = () => {
-      if (!config.onChange)
-        return;
+      if (!config.onChange) return;
       const stopObserving = observe(result.value, (_) => {
         var _a2;
         const pre = previousValues;
@@ -2101,8 +1990,7 @@ var Binder = class {
         stopObserverList.push(stopObserving2);
       }
     };
-    if (!config.once)
-      observeTailChanges();
+    if (!config.once) observeTailChanges();
     if (config.onBind)
       stopObserverList.push(
         config.onBind(
@@ -2292,8 +2180,7 @@ var Jsep = class {
   }
   __runHook(hookType, hookCalltype, node) {
     const hook = this.__hooks[hookType];
-    if (!hook)
-      return node;
+    if (!hook) return node;
     const env = { node };
     const hookFn = (f) => {
       f.call(this, env);
@@ -2312,8 +2199,7 @@ var Jsep = class {
   }
   parse() {
     const nodes = this.__gobbleExpressions();
-    if (nodes.length === 1)
-      return nodes[0];
+    if (nodes.length === 1) return nodes[0];
     return {
       type: 0 /* Compound */,
       body: nodes
@@ -2929,8 +2815,7 @@ var Jsep = class {
     this.__updateBinariesToArrows(env.node);
   }
   __updateBinariesToArrows(node) {
-    if (!node)
-      return;
+    if (!node) return;
     Object.values(node).forEach((val) => {
       if (val && typeof val === "object") {
         this.__updateBinariesToArrows(val);
@@ -2949,8 +2834,7 @@ var Jsep = class {
     }
   }
   __fixAssignmentOperators(env) {
-    if (env.node)
-      this.__updateBinariesToAssignments(env.node);
+    if (env.node) this.__updateBinariesToAssignments(env.node);
   }
   __updateBinariesToAssignments(node) {
     if (assigmentOperatorsSet.has(node.operator)) {
@@ -2966,12 +2850,10 @@ var Jsep = class {
     }
   }
   __gobbleTaggedTemplateIdentifier(env) {
-    if (!env.node)
-      return;
+    if (!env.node) return;
     const type = env.node.type;
     const condition = (type === 2 /* Identifier */ || type === 3 /* Member */) && this.__isCode(BTICK_CODE);
-    if (!condition)
-      return;
+    if (!condition) return;
     env.node = {
       type: 17 /* TaggedTemplateExpression */,
       tag: env.node,
@@ -2979,8 +2861,7 @@ var Jsep = class {
     };
   }
   __gobbleTemplateLiteral(env) {
-    if (!this.__isCode(BTICK_CODE))
-      return;
+    if (!this.__isCode(BTICK_CODE)) return;
     const node = {
       type: 19 /* TemplateLiteral */,
       quasis: [],
@@ -3051,8 +2932,7 @@ var Jsep = class {
   __gobbleNew(env) {
     var _a;
     const node = env.node;
-    if (!node || node.operator !== "new" || !node.argument)
-      return;
+    if (!node || node.operator !== "new" || !node.argument) return;
     if (!node.argument || ![6 /* Call */, 3 /* Member */].includes(node.argument.type))
       throw this.__getError("Expected new function()");
     env.node = node.argument;
@@ -3063,8 +2943,7 @@ var Jsep = class {
     callNode.type = 20 /* NewExpression */;
   }
   __gobbleRegexLiteral(env) {
-    if (!this.__isCode(FSLASH_CODE))
-      return;
+    if (!this.__isCode(FSLASH_CODE)) return;
     const patternIndex = ++this.__index;
     let inCharSet = false;
     while (this.__index < this.__expr.length) {
@@ -3165,8 +3044,7 @@ var evalUnaryOp = {
   // placed here for type safety, never executed,
 };
 var spreadArgs = (args) => {
-  if (!(args == null ? void 0 : args.some(shouldSpreadArray)))
-    return args;
+  if (!(args == null ? void 0 : args.some(shouldSpreadArray))) return args;
   const result = [];
   args.forEach(
     (x) => shouldSpreadArray(x) ? result.push(...x) : result.push(x)
@@ -3175,8 +3053,7 @@ var spreadArgs = (args) => {
 };
 var arrayEvaluator = (...args) => spreadArgs(args);
 var createLazyContext = (e, context) => {
-  if (!e)
-    return context;
+  if (!e) return context;
   const ctx = Object.create(context != null ? context : {});
   ctx.$event = e;
   return ctx;
@@ -3331,22 +3208,17 @@ var RegorEval = class {
     this.__collectRefObj = !!collectRefObj;
   }
   __findContext(name2, context) {
-    if (context && name2 in context)
-      return context;
+    if (context && name2 in context) return context;
     for (const ctx of this.__contexts) {
-      if (name2 in ctx)
-        return ctx;
+      if (name2 in ctx) return ctx;
     }
     return void 0;
   }
   [2 /* Identifier */](expr, _, context) {
     const name2 = expr.name;
-    if (name2 === "$root")
-      return this.__contexts[this.__contexts.length - 1];
-    if (name2 === "$parent")
-      return this.__contexts[1];
-    if (name2 === "$ctx")
-      return [...this.__contexts];
+    if (name2 === "$root") return this.__contexts[this.__contexts.length - 1];
+    if (name2 === "$parent") return this.__contexts[1];
+    if (name2 === "$ctx") return [...this.__contexts];
     if (context && name2 in context) {
       this.__lastEvaluatedValueBeforeUnref = context[name2];
       return associateThis(unref(context[name2]), context);
@@ -3488,8 +3360,7 @@ var RegorEval = class {
     if (arg.type === 2 /* Identifier */) {
       const name2 = arg.name;
       const ctx = this.__findContext(name2, context);
-      if (isNullOrUndefined(ctx))
-        return void 0;
+      if (isNullOrUndefined(ctx)) return void 0;
       return updater[op](ctx, name2);
     }
     if (arg.type === 3 /* Member */) {
@@ -3507,8 +3378,7 @@ var RegorEval = class {
     if (arg.type === 2 /* Identifier */) {
       const name2 = arg.name;
       const ctx = this.__findContext(name2, context);
-      if (isNullOrUndefined(ctx))
-        return void 0;
+      if (isNullOrUndefined(ctx)) return void 0;
       const value = this.__eval(expr.right, depth, context);
       return applyAssigment[op](ctx, name2, value);
     }
@@ -3524,8 +3394,7 @@ var RegorEval = class {
   }
   [14 /* Spread */](expr, depth, context) {
     const spreaded = this.__eval(expr.argument, depth, context);
-    if (isArray(spreaded))
-      spreaded.s = spreadElementSymbol;
+    if (isArray(spreaded)) spreaded.s = spreadElementSymbol;
     return spreaded;
   }
   [17 /* TaggedTemplateExpression */](expr, depth, context) {
@@ -3613,8 +3482,7 @@ var RegorEval = class {
   }
   __transformLazy(depth, context, evaluator, ...args) {
     const isLazy = this.__isLazy;
-    if (!isLazy)
-      return this.__transform(depth, context, evaluator, ...args);
+    if (!isLazy) return this.__transform(depth, context, evaluator, ...args);
     const evaluatedArgs = args.map(
       (arg, i) => arg && (arg.type !== 15 /* Arrow */ && isLazy(i, depth) ? (e) => this.__eval(arg, depth, createLazyContext(e, context)) : this.__eval(arg, depth, context))
     );
@@ -3666,8 +3534,7 @@ var Parser = class {
       refs: [],
       context: this.__contexts[0]
     };
-    if (isNullOrWhitespace(expression))
-      return result;
+    if (isNullOrWhitespace(expression)) return result;
     const globalContext = this.__config.globalContext;
     const refs = [];
     const evaluate = (expr, contexts, collectRefs2, context) => {
@@ -3776,8 +3643,7 @@ var attrDirective = {
   onChange: (el, values, previousValues, option, previousOption, flags) => {
     var _a;
     if (option) {
-      if (flags && flags.includes("camel"))
-        option = camelize(option);
+      if (flags && flags.includes("camel")) option = camelize(option);
       patchAttribute(el, option, values[0], previousOption);
       return;
     }
@@ -3863,25 +3729,22 @@ var patchClass = (el, next, prev) => {
   if (next && !isClassString) {
     if (prev && !isPrevClassString) {
       for (const key in prev) {
-        if (!(key in next)) {
+        if (!(key in next) || !next[key]) {
           classList.remove(key);
         }
       }
     }
     for (const key in next) {
-      if (next[key])
-        classList.add(key);
+      if (next[key]) classList.add(key);
     }
   } else {
     if (isClassString) {
       if (prev !== next) {
-        if (isPrevClassString)
-          classList.remove(...prev == null ? void 0 : prev.split(","));
+        if (isPrevClassString) classList.remove(...prev == null ? void 0 : prev.split(","));
         classList.add(...next.split(","));
       }
     } else if (prev) {
-      if (isPrevClassString)
-        classList.remove(...prev == null ? void 0 : prev.split(","));
+      if (isPrevClassString) classList.remove(...prev == null ? void 0 : prev.split(","));
     }
   }
 };
@@ -3890,17 +3753,14 @@ var patchClass = (el, next, prev) => {
 var htmlDirective = {
   onChange: (el, values) => {
     const [value, replacer] = values;
-    if (isFunction(replacer))
-      replacer(el, value);
-    else
-      el.innerHTML = value == null ? void 0 : value.toString();
+    if (isFunction(replacer)) replacer(el, value);
+    else el.innerHTML = value == null ? void 0 : value.toString();
   }
 };
 
 // src/common/looseEqual.ts
 function looseCompareArrays(a, b) {
-  if (a.length !== b.length)
-    return false;
+  if (a.length !== b.length) return false;
   let equal = true;
   for (let i = 0; equal && i < a.length; i++) {
     equal = looseEqual(a[i], b[i]);
@@ -3908,8 +3768,7 @@ function looseCompareArrays(a, b) {
   return equal;
 }
 function looseEqual(a, b) {
-  if (a === b)
-    return true;
+  if (a === b) return true;
   let aValidType = isDate(a);
   let bValidType = isDate(b);
   if (aValidType || bValidType) {
@@ -4015,8 +3874,7 @@ var updateDomElementValue = (el, value) => {
         }
       } else {
         if (looseEqual(getValue(option), value)) {
-          if (el.selectedIndex !== i)
-            el.selectedIndex = i;
+          if (el.selectedIndex !== i) el.selectedIndex = i;
           return;
         }
       }
@@ -4029,10 +3887,8 @@ var updateDomElementValue = (el, value) => {
   }
 };
 var getFlags = (flag) => {
-  if (isRef(flag))
-    flag = flag();
-  if (isFunction(flag))
-    flag = flag();
+  if (isRef(flag)) flag = flag();
+  if (isFunction(flag)) flag = flag();
   if (!flag)
     return {
       trim: false,
@@ -4066,7 +3922,7 @@ var attachDOMChangeListener = (el, parseResult, directiveFlags) => {
   const f1 = getFlags(directiveFlags == null ? void 0 : directiveFlags.join(","));
   const f2 = getFlags(parsedValue()[1]);
   const flags = {
-    int: f1.int || f1.int,
+    int: f1.int || f2.int,
     lazy: f1.lazy || f2.lazy,
     number: f1.number || f2.number,
     trim: f1.trim || f2.trim
@@ -4098,8 +3954,7 @@ var handleInputAndTextArea = (el, flags, modelRef, parsedValue) => {
   const eventType = isLazy ? "change" : "input";
   const isNumber = isNumberInput(el);
   const trimmer = () => {
-    if (!flags.trim && !getFlags(parsedValue()[1]).trim)
-      return;
+    if (!flags.trim && !getFlags(parsedValue()[1]).trim) return;
     el.value = el.value.trim();
   };
   const onCompositionStart = (e) => {
@@ -4122,8 +3977,7 @@ var handleInputAndTextArea = (el, flags, modelRef, parsedValue) => {
   };
   const listener = (event) => {
     const target = event.target;
-    if (!target || target.composing)
-      return;
+    if (!target || target.composing) return;
     let value = target.value;
     const flags2 = getFlags(parsedValue()[1]);
     if (isNumber || flags2.number || flags2.int) {
@@ -4134,15 +3988,12 @@ var handleInputAndTextArea = (el, flags, modelRef, parsedValue) => {
         if (endsWithDecimalSeparator) {
           value += "0";
           value = parseFloat(value);
-          if (isNaN(value))
-            value = "";
-          else if (modelRef() === value)
-            return;
+          if (isNaN(value)) value = "";
+          else if (modelRef() === value) return;
         }
         value = parseFloat(value);
       }
-      if (isNaN(value))
-        value = "";
+      if (isNaN(value)) value = "";
       el.value = value;
     } else if (flags2.trim) {
       value = value.trim();
@@ -4199,8 +4050,7 @@ var getCheckboxValue = (el, checked) => {
     return el[key];
   }
   const attrKey = checked ? trueValueAttrKey : falseValueAttrKey;
-  if (el.hasAttribute(attrKey))
-    return el.getAttribute(attrKey);
+  if (el.hasAttribute(attrKey)) return el.getAttribute(attrKey);
   return checked;
 };
 var getCheckboxChecked = (el, value) => {
@@ -4242,8 +4092,7 @@ var handleSelect = (el, modelRef, parsedValue) => {
         pause(modelRef);
         if (isSet(modelValue)) {
           modelValue.clear();
-          for (const sel of selectedValue)
-            modelValue.add(sel);
+          for (const sel of selectedValue) modelValue.add(sel);
         } else if (isArray(modelValue)) {
           modelValue.splice(0);
           modelValue.push(...selectedValue);
@@ -4295,9 +4144,8 @@ var onDirective = {
     if (dynamicOption) {
       const values2 = parseResult.value();
       const option2 = unref(dynamicOption.value()[0]);
-      if (!isString(option2))
-        return () => {
-        };
+      if (!isString(option2)) return () => {
+      };
       return attachEventListener(
         el,
         camelize(option2),
@@ -4321,18 +4169,15 @@ var onDirective = {
     const len = values.length;
     for (let i = 0; i < len; ++i) {
       let next = values[i];
-      if (isFunction(next))
-        next = next();
+      if (isFunction(next)) next = next();
       if (isObject(next)) {
         for (const item of Object.entries(next)) {
           const eventType = item[0];
           const method = () => {
             let obj = parseResult.value()[i];
-            if (isFunction(obj))
-              obj = obj();
+            if (isFunction(obj)) obj = obj();
             obj = obj[eventType];
-            if (isFunction(obj))
-              obj = obj();
+            if (isFunction(obj)) obj = obj();
             return obj;
           };
           const flags2 = next[eventType + "_flags"];
@@ -4356,22 +4201,17 @@ var getShouldExecuteEvent = (eventType, flags) => {
     const isAlt = parts.includes("alt");
     const isMeta = parts.includes("meta");
     const checkModifiers = (e) => {
-      if (isCtrl && !e.ctrlKey)
-        return false;
-      if (isShift && !e.shiftKey)
-        return false;
-      if (isAlt && !e.altKey)
-        return false;
-      if (isMeta && !e.metaKey)
-        return false;
+      if (isCtrl && !e.ctrlKey) return false;
+      if (isShift && !e.shiftKey) return false;
+      if (isAlt && !e.altKey) return false;
+      if (isMeta && !e.metaKey) return false;
       return true;
     };
     if (keyType) {
       return [
         eventType,
         (e) => {
-          if (!checkModifiers(e))
-            return false;
+          if (!checkModifiers(e)) return false;
           return e.key.toUpperCase() === keyType.toUpperCase();
         }
       ];
@@ -4395,15 +4235,11 @@ var attachEventListener = (el, eventType, method, flags) => {
   let shouldExecuteEvent;
   [eventType, shouldExecuteEvent] = getShouldExecuteEvent(eventType, flags);
   const execute = (e) => {
-    if (!shouldExecuteEvent(e))
-      return;
-    if (!method && eventType === "submit" && (flag == null ? void 0 : flag.prevent))
-      return;
+    if (!shouldExecuteEvent(e)) return;
+    if (!method && eventType === "submit" && (flag == null ? void 0 : flag.prevent)) return;
     let r = method(e);
-    if (isFunction(r))
-      r = r(e);
-    if (isFunction(r))
-      r(e);
+    if (isFunction(r)) r = r(e);
+    if (isFunction(r)) r(e);
   };
   const unbinder = () => {
     el.removeEventListener(eventType, listener, options);
@@ -4414,22 +4250,15 @@ var attachEventListener = (el, eventType, method, flags) => {
       return;
     }
     try {
-      if (flag.left && e.button !== 1)
-        return;
-      if (flag.middle && e.button !== 2)
-        return;
-      if (flag.right && e.button !== 3)
-        return;
-      if (flag.self && e.target !== el)
-        return;
-      if (flag.stop)
-        e.stopPropagation();
-      if (flag.prevent)
-        e.preventDefault();
+      if (flag.left && e.button !== 0) return;
+      if (flag.middle && e.button !== 1) return;
+      if (flag.right && e.button !== 2) return;
+      if (flag.self && e.target !== el) return;
+      if (flag.stop) e.stopPropagation();
+      if (flag.prevent) e.preventDefault();
       execute(e);
     } finally {
-      if (flag.once)
-        unbinder();
+      if (flag.once) unbinder();
     }
   };
   el.addEventListener(eventType, listener, options);
@@ -4440,8 +4269,7 @@ var attachEventListener = (el, eventType, method, flags) => {
 var propDirective = {
   onChange: (el, values, _previousValues, option, _previousOption, flags) => {
     if (option) {
-      if (flags && flags.includes("camel"))
-        option = camelize(option);
+      if (flags && flags.includes("camel")) option = camelize(option);
       patchProp(el, option, values[0]);
       return;
     }
@@ -4524,18 +4352,14 @@ var refDirective = {
     const value = result.value()[0];
     const isAnArray = isArray(value);
     const sref2 = result.refs[0];
-    if (isAnArray)
-      value.push(el);
-    else if (sref2)
-      sref2 == null ? void 0 : sref2(el);
-    else
-      result.context[expr] = el;
+    if (isAnArray) value.push(el);
+    else if (sref2) sref2 == null ? void 0 : sref2(el);
+    else result.context[expr] = el;
     return () => {
       if (isAnArray) {
         const i = value.indexOf(el);
         i !== -1 && value.splice(i, 1);
-      } else
-        sref2 == null ? void 0 : sref2(null);
+      } else sref2 == null ? void 0 : sref2(null);
     };
   }
 };
@@ -4549,10 +4373,8 @@ var showDirective = {
       originalDisplay = data._ord = el.style.display;
     }
     const isVisible = !!values[0];
-    if (isVisible)
-      el.style.display = originalDisplay;
-    else
-      el.style.display = "none";
+    if (isVisible) el.style.display = originalDisplay;
+    else el.style.display = "none";
   }
 };
 
@@ -4598,8 +4420,7 @@ var patchStyle = (el, next, prev) => {
       el.removeAttribute("style");
     }
     const data = getBindData(el).data;
-    if ("_ord" in data)
-      return;
+    if ("_ord" in data) return;
     style.display = currentDisplay;
   }
 };
@@ -4610,8 +4431,7 @@ function setStyle(style, name2, val) {
       setStyle(style, name2, v);
     });
   } else {
-    if (val == null)
-      val = "";
+    if (val == null) val = "";
     if (name2.startsWith("--")) {
       style.setProperty(name2, val);
     } else {
@@ -4653,11 +4473,9 @@ function autoPrefix(style, rawName) {
 var flatten = (reference) => {
   return flattenContent(unref(reference));
 };
-var flattenContent = (value) => {
-  if (!value)
-    return value;
-  if (!isObject(value))
-    return value;
+var flattenContent = (value, weakMap = /* @__PURE__ */ new WeakMap()) => {
+  if (!value) return value;
+  if (!isObject(value)) return value;
   if (isArray(value)) {
     return value.map(flatten);
   }
@@ -4670,14 +4488,16 @@ var flattenContent = (value) => {
   }
   if (isMap(value)) {
     const map = /* @__PURE__ */ new Map();
-    for (const el of map) {
+    for (const el of value) {
       map.set(flatten(el[0]), flatten(el[1]));
     }
     return map;
   }
+  if (weakMap.has(value)) return unref(weakMap.get(value));
   const result = { ...value };
+  weakMap.set(value, result);
   for (const entry of Object.entries(result)) {
-    result[entry[0]] = flatten(entry[1]);
+    result[entry[0]] = flattenContent(unref(entry[1]), weakMap);
   }
   return result;
 };
@@ -4705,8 +4525,7 @@ var isDeepRef = (value) => {
 
 // src/reactivity/ref.ts
 var ref = (value) => {
-  if (isRaw(value))
-    return value;
+  if (isRaw(value)) return value;
   let result;
   if (isRef(value)) {
     result = value;
@@ -4721,21 +4540,18 @@ var ref = (value) => {
     const len = value.length;
     for (let i = 0; i < len; ++i) {
       const item = value[i];
-      if (isDeepRef(item))
-        continue;
+      if (isDeepRef(item)) continue;
       value[i] = ref(item);
     }
     return result;
   }
-  if (!isObject(value))
-    return result;
+  if (!isObject(value)) return result;
   for (const item of Object.entries(value)) {
     const val = item[1];
-    if (isDeepRef(val))
-      continue;
+    if (isDeepRef(val)) continue;
     const key = item[0];
-    if (isSymbol(key))
-      continue;
+    if (isSymbol(key)) continue;
+    value[key] = null;
     value[key] = ref(val);
   }
   return result;
@@ -4870,8 +4686,7 @@ var RegorConfig = _RegorConfig;
 
 // src/bind/interpolation.ts
 var interpolate = (element, config) => {
-  if (!element)
-    return;
+  if (!element) return;
   const builtInNames = (config != null ? config : RegorConfig.getDefault()).__builtInNames;
   for (const textNode of getTextNodes(element, builtInNames.pre)) {
     interpolateTextNode(textNode, builtInNames.text);
@@ -4881,12 +4696,10 @@ var interpolationRegex = /({{[^]*?}})/g;
 var interpolateTextNode = (textNode, textDirective2) => {
   var _a;
   const text = textNode.textContent;
-  if (!text)
-    return;
+  if (!text) return;
   const mustacheRegex = interpolationRegex;
   const parts = text.split(mustacheRegex);
-  if (parts.length <= 1)
-    return;
+  if (parts.length <= 1) return;
   if (((_a = textNode.parentElement) == null ? void 0 : _a.childNodes.length) === 1 && parts.length === 3) {
     const part = parts[1];
     if (isNullOrWhitespace(parts[0]) && isNullOrWhitespace(parts[2]) && part.startsWith("{{") && part.endsWith("}}")) {
@@ -4918,8 +4731,7 @@ var getTextNodes = (node, preDirective) => {
         textNodes.push(node2);
       }
     } else {
-      if ((_b = node2 == null ? void 0 : node2.hasAttribute) == null ? void 0 : _b.call(node2, preDirective))
-        return;
+      if ((_b = node2 == null ? void 0 : node2.hasAttribute) == null ? void 0 : _b.call(node2, preDirective)) return;
       for (const child of getChildNodes(node2)) {
         traverseTextNodes(child);
       }
@@ -4934,10 +4746,8 @@ var svgTags = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-
 var svgSet = new Set(svgTags.toUpperCase().split(","));
 var svgNamespace = "http://www.w3.org/2000/svg";
 var appendChild = (parent, el) => {
-  if (isTemplate(parent))
-    parent.content.appendChild(el);
-  else
-    parent.appendChild(el);
+  if (isTemplate(parent)) parent.content.appendChild(el);
+  else parent.appendChild(el);
 };
 var render = (json, parent, isSVG, config) => {
   var _a;
@@ -4958,8 +4768,7 @@ var render = (json, parent, isSVG, config) => {
     }
     const children = json.c;
     if (children) {
-      for (const child of children)
-        render(child, el, isSVG, config);
+      for (const child of children) render(child, el, isSVG, config);
     }
     appendChild(parent, el);
     return;
@@ -4975,10 +4784,8 @@ var render = (json, parent, isSVG, config) => {
         node = document.createTextNode(textData);
         break;
     }
-    if (node)
-      appendChild(parent, node);
-    else
-      throw new Error("unsupported node type.");
+    if (node) appendChild(parent, node);
+    else throw new Error("unsupported node type.");
   }
 };
 var toFragment = (json, isSVG, config) => {
@@ -4995,16 +4802,13 @@ var toFragment = (json, isSVG, config) => {
 };
 
 // src/app/createApp.ts
-var createApp = (context, templateOptions = { selector: "#app" }, config) => {
-  if (isString(templateOptions))
-    templateOptions = { selector: "#app", template: templateOptions };
-  if (isScope(context))
-    context = context.context;
-  const root = templateOptions.element ? templateOptions.element : templateOptions.selector ? document.querySelector(templateOptions.selector) : null;
-  if (!root || !isElement(root))
-    throw getError(0 /* AppRootElementMissing */);
-  if (!config)
-    config = RegorConfig.getDefault();
+var createApp = (context, template = { selector: "#app" }, config) => {
+  if (isString(template))
+    template = { selector: "#app", template };
+  if (isScope(context)) context = context.context;
+  const root = template.element ? template.element : template.selector ? document.querySelector(template.selector) : null;
+  if (!root || !isElement(root)) throw getError(0 /* AppRootElementMissing */);
+  if (!config) config = RegorConfig.getDefault();
   const cleanRoot = () => {
     for (const child of [...root.childNodes]) {
       removeNode(child);
@@ -5015,22 +4819,21 @@ var createApp = (context, templateOptions = { selector: "#app" }, config) => {
       root.appendChild(child);
     }
   };
-  if (templateOptions.template) {
-    const element = document.createRange().createContextualFragment(templateOptions.template);
+  if (template.template) {
+    const element = document.createRange().createContextualFragment(template.template);
     cleanRoot();
     appendChildren(element.childNodes);
-    templateOptions.element = element;
-  } else if (templateOptions.json) {
+    template.element = element;
+  } else if (template.json) {
     const element = toFragment(
-      templateOptions.json,
-      templateOptions.isSVG,
+      template.json,
+      template.isSVG,
       config
     );
     cleanRoot();
     appendChildren(element.childNodes);
   }
-  if (config.useInterpolation)
-    interpolate(root, config);
+  if (config.useInterpolation) interpolate(root, config);
   const app = new RegorApp(context, root, config);
   app.__bind();
   addUnbinder(root, () => {
@@ -5071,13 +4874,10 @@ var toJsonTemplate = (node) => {
     return node.map((x) => toJsonTemplate(x));
   }
   const json = {};
-  if (node.tagName)
-    json.t = node.tagName;
+  if (node.tagName) json.t = node.tagName;
   else {
-    if (node.nodeType === Node.COMMENT_NODE)
-      json.n = Node.COMMENT_NODE;
-    if (node.textContent)
-      json.d = node.textContent;
+    if (node.nodeType === Node.COMMENT_NODE) json.n = Node.COMMENT_NODE;
+    if (node.textContent) json.d = node.textContent;
     return json;
   }
   const attrNames = node.getAttributeNames();
@@ -5096,51 +4896,48 @@ var toJsonTemplate = (node) => {
 };
 
 // src/app/createComponent.ts
-var createComponent = (context, templateOptions, options = {}) => {
+var createComponent = (context, template, options = {}) => {
   var _a, _b, _c, _d;
-  if (isArray(options))
-    options = { props: options };
-  if (isString(templateOptions))
-    templateOptions = { template: templateOptions };
+  if (isArray(options)) options = { props: options };
+  if (isString(template)) template = { template };
   let svgHandled = false;
-  if (templateOptions.element) {
-    const element2 = templateOptions.element;
+  if (template.element) {
+    const element2 = template.element;
     element2.remove();
-    templateOptions.element = element2;
-  } else if (templateOptions.selector) {
-    const element2 = document.querySelector(templateOptions.selector);
+    template.element = element2;
+  } else if (template.selector) {
+    const element2 = document.querySelector(template.selector);
     if (!element2)
       throw getError(
         1 /* ComponentTemplateNotFound */,
-        templateOptions.selector
+        template.selector
       );
     element2.remove();
-    templateOptions.element = element2;
-  } else if (templateOptions.template) {
-    const element2 = document.createRange().createContextualFragment(templateOptions.template);
-    templateOptions.element = element2;
-  } else if (templateOptions.json) {
-    templateOptions.element = toFragment(
-      templateOptions.json,
-      templateOptions.isSVG,
+    template.element = element2;
+  } else if (template.template) {
+    const element2 = document.createRange().createContextualFragment(template.template);
+    template.element = element2;
+  } else if (template.json) {
+    template.element = toFragment(
+      template.json,
+      template.isSVG,
       options.config
     );
     svgHandled = true;
   }
-  if (!templateOptions.element)
-    templateOptions.element = document.createDocumentFragment();
-  if ((_a = options.useInterpolation) != null ? _a : true)
-    interpolate(templateOptions.element);
-  const element = templateOptions.element;
-  if (!svgHandled && (((_c = templateOptions.isSVG) != null ? _c : isHTMLElement(element) && ((_b = element.hasAttribute) == null ? void 0 : _b.call(element, "isSVG"))) || isHTMLElement(element) && !!element.querySelector("[isSVG]"))) {
-    const content = templateOptions.element.content;
+  if (!template.element)
+    template.element = document.createDocumentFragment();
+  if ((_a = options.useInterpolation) != null ? _a : true) interpolate(template.element);
+  const element = template.element;
+  if (!svgHandled && (((_c = template.isSVG) != null ? _c : isHTMLElement(element) && ((_b = element.hasAttribute) == null ? void 0 : _b.call(element, "isSVG"))) || isHTMLElement(element) && !!element.querySelector("[isSVG]"))) {
+    const content = template.element.content;
     const nodes = content ? [...content.childNodes] : [...element.childNodes];
     const json = toJsonTemplate(nodes);
-    templateOptions.element = toFragment(json, true, options.config);
+    template.element = toFragment(json, true, options.config);
   }
   return {
     context,
-    template: templateOptions.element,
+    template: template.element,
     inheritAttrs: (_d = options.inheritAttrs) != null ? _d : true,
     props: options.props,
     defaultName: options.defaultName
@@ -5154,8 +4951,7 @@ var computed = (compute) => {
   const result = (...args) => {
     if (args.length <= 2 && 0 in args)
       throw getError(4 /* ComputedIsReadOnly */);
-    if (computer && !status.isStopped)
-      return computer(...args);
+    if (computer && !status.isStopped) return computer(...args);
     computer = computedOnce(compute, status);
     return computer(...args);
   };
@@ -5195,8 +4991,7 @@ var computeMany = (sources, compute) => {
   const result = (...args) => {
     if (args.length <= 2 && 0 in args)
       throw getError(4 /* ComputedIsReadOnly */);
-    if (computer && !status.isStopped)
-      return computer(...args);
+    if (computer && !status.isStopped) return computer(...args);
     computer = computeManyOnce(sources, compute, status);
     return computer(...args);
   };
@@ -5246,8 +5041,7 @@ var computeRef = (source, compute) => {
   const result = (...args) => {
     if (args.length <= 2 && 0 in args)
       throw getError(4 /* ComputedIsReadOnly */);
-    if (computer && !status.isStopped)
-      return computer(...args);
+    if (computer && !status.isStopped) return computer(...args);
     computer = computeRefOnce(source, compute, status);
     return computer(...args);
   };
@@ -5292,31 +5086,44 @@ var markRaw = (value) => {
 
 // src/misc/persist.ts
 var persist = (anyRef, key) => {
-  if (!key)
-    throw new Error("persist requires a string key.");
+  if (!key) throw getError(5 /* PersistRequiresKey */);
   const deepRef = isDeepRef(anyRef);
   const makeRef = deepRef ? ref : (x) => x;
   const store = () => localStorage.setItem(key, JSON.stringify(flatten(anyRef())));
   const existing = localStorage.getItem(key);
   if (existing != null) {
-    anyRef(makeRef(JSON.parse(existing)));
+    try {
+      anyRef(makeRef(JSON.parse(existing)));
+    } catch (e) {
+      warning(
+        6 /* ErrorLog */,
+        `persist: failed to parse data for key ${key}`,
+        e
+      );
+      store();
+    }
   } else {
     store();
   }
   const stopObserving = watchEffect(store);
-  onUnmounted(() => stopObserving, true);
+  onUnmounted(stopObserving, true);
   return anyRef;
 };
 
 // src/misc/tagged-html.ts
 var html = (templates, ...args) => {
-  let str = "";
-  if (args.length === 0)
-    return templates.join();
-  templates.forEach((template, i) => {
-    str += template + args[i];
-  });
-  return str;
+  let result = "";
+  const tpl = templates;
+  const a = args;
+  const tplLen = tpl.length;
+  const argLen = a.length;
+  for (let i = 0; i < tplLen; ++i) {
+    result += tpl[i];
+    if (i < argLen) {
+      result += a[i];
+    }
+  }
+  return result;
 };
 var raw = html;
 
@@ -5329,8 +5136,7 @@ var observeMany = (sources, observer, init) => {
   for (const source of sources) {
     stopObservingList.push(observe(source, callObserver));
   }
-  if (init)
-    callObserver();
+  if (init) callObserver();
   const stop = () => {
     for (const stopObserving of stopObservingList) {
       stopObserving();
@@ -5343,7 +5149,7 @@ var observeMany = (sources, observer, init) => {
 // src/observer/observerCount.ts
 var observerCount = (source) => {
   if (!isRef(source))
-    throw getError(3 /* RequiresRefSourceArgument */, "observe");
+    throw getError(3 /* RequiresRefSourceArgument */, "observerCount");
   const srefImpl = source;
   return srefImpl(void 0, void 0, 2 /* observerCount */);
 };
@@ -5358,14 +5164,19 @@ var batch = (updater) => {
   }
 };
 var startBatch = () => {
-  if (!batchCollector.set)
-    batchCollector.set = /* @__PURE__ */ new Set();
+  if (!batchCollector.stack) batchCollector.stack = [];
+  batchCollector.stack.push(/* @__PURE__ */ new Set());
 };
 var endBatch = () => {
-  const set = batchCollector.set;
-  if (!set)
+  const stack = batchCollector.stack;
+  if (!stack || stack.length === 0) return;
+  const set = stack.pop();
+  if (stack.length) {
+    const parent = stack[stack.length - 1];
+    for (const ref2 of set) parent.add(ref2);
     return;
-  delete batchCollector.set;
+  }
+  delete batchCollector.stack;
   for (const ref2 of set) {
     try {
       trigger(ref2);