regor 1.0.9 → 1.1.0

package/dist/regor.es2022.esm.js

@@ -29,7 +29,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];
@@ -42,8 +43,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: {}
@@ -69,8 +69,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) => {
@@ -85,8 +84,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;
@@ -117,8 +115,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,
@@ -137,8 +134,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);
     }
@@ -146,8 +142,7 @@ var unbind = (node) => {
 };
 var unbindSingle = (node) => {
   const bindData = node[bindDataSymbol];
-  if (!bindData)
-    return;
+  if (!bindData) return;
   for (const unbinder of bindData.unbinders) {
     unbinder();
   }
@@ -181,12 +176,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 };
 
@@ -225,11 +217,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);
@@ -285,8 +275,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
@@ -317,8 +306,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 ?? ""}`
     );
@@ -331,8 +319,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);
@@ -354,8 +341,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,
@@ -463,8 +449,7 @@ var bindChildNodes = (binder, childNodes) => {
 };
 var findElements = (element, selector) => {
   const result = element.querySelectorAll(selector);
-  if (element.matches?.(selector))
-    return [element, ...result];
+  if (element.matches?.(selector)) return [element, ...result];
   return result;
 };
 var isTemplate = (node) => node instanceof HTMLTemplateElement;
@@ -486,8 +471,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,
@@ -495,10 +479,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);
@@ -524,33 +506,28 @@ 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);
 });
 
 // src/computed/watchEffect.ts
 var collectedRefs = [];
 var collectRef = (ref2) => {
-  if (collectedRefs.length === 0)
-    return;
+  if (collectedRefs.length === 0) return;
   collectedRefs[collectedRefs.length - 1]?.add(ref2);
 };
 var watchEffect = (effect) => {
-  if (!effect)
-    return () => {
-    };
+  if (!effect) return () => {
+  };
   const terminator = { stop: () => {
   } };
   watchEffectInternal(effect, terminator);
@@ -558,13 +535,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;
   };
@@ -573,8 +548,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();
@@ -614,15 +588,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);
@@ -655,8 +626,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;
     });
   });
@@ -701,17 +671,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);
@@ -732,24 +699,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) => {
@@ -757,15 +722,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);
@@ -780,9 +742,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);
         };
@@ -812,8 +773,7 @@ var sref = (value) => {
   };
   srefFunction[srefSymbol] = 1;
   defineRefValue(srefFunction, false);
-  if (isProxy)
-    attachProxyHandle(value);
+  if (isProxy) attachProxyHandle(value);
   return srefFunction;
 };
 
@@ -840,13 +800,11 @@ 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) {
     const value = this.__getKey(this.__list[index]?.value);
-    if (value)
-      this.__valueMap.delete(value);
+    if (value !== void 0) this.__valueMap.delete(value);
   }
   /**
    * @internal
@@ -866,8 +824,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);
@@ -885,13 +842,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) {
@@ -925,8 +880,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
@@ -934,8 +888,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);
@@ -945,10 +898,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;
     }
@@ -981,8 +932,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);
@@ -1041,8 +991,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);
@@ -1058,8 +1007,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)
             );
@@ -1074,8 +1022,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);
@@ -1106,8 +1053,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);
     };
@@ -1129,19 +1075,16 @@ var ForBinder = class _ForBinder {
     addUnbinder(commentBegin, unbinder);
     observeTailChanges();
   }
-  static __forPathRegex = /\{?\[?\(?([^)}\]]+)\)?\]?\}?([^)]+)?\s+\b(?:in|of)\b\s+([^\s]+)\s*/;
+  static __forPathRegex = /\{?\[?\(?([^)}\]]+)\)?\]?\}?([^)]+)?\s+\b(?:in|of)\b\s+(.*)\s*$/;
   __parseForPath(forPath) {
     const matches = _ForBinder.__forPathRegex.exec(forPath);
-    if (!matches)
-      return;
+    if (!matches) return;
     const keys = (matches[1] + (matches[2] ?? "")).split(",").map((key) => key.trim());
     const indexOfIndex = keys.length > 1 ? keys.length - 1 : -1;
     const index = indexOfIndex !== -1 && (keys[indexOfIndex] === "index" || keys[indexOfIndex]?.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,
@@ -1198,8 +1141,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");
     }
@@ -1256,13 +1198,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);
@@ -1303,8 +1243,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 {
@@ -1334,8 +1273,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 {
@@ -1423,16 +1361,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());
@@ -1455,9 +1391,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,
@@ -1465,8 +1400,7 @@ var singlePropDirective = {
         const value = parseResult.refs[0] ?? 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 {
@@ -1502,28 +1436,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 = element.matches?.(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 ?? 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
       );
@@ -1539,30 +1467,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,
@@ -1592,16 +1514,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;
           }
           head2.onAutoPropsAssigned?.();
         }
@@ -1624,8 +1543,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}]`
@@ -1636,8 +1554,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());
@@ -1646,8 +1563,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, () => {
@@ -1680,8 +1596,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);
@@ -1703,8 +1618,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
         );
@@ -1713,11 +1627,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(" "));
@@ -1777,12 +1689,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")) {
@@ -1804,21 +1714,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);
@@ -1855,15 +1762,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);
@@ -1874,12 +1778,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);
@@ -1900,16 +1801,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()) {
@@ -1924,15 +1822,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;
@@ -1945,10 +1840,8 @@ var Binder = class {
     return true;
   }
   __bindToExpression(config, el, valueExpression, option, flags) {
-    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,
@@ -1992,8 +1885,7 @@ var Binder = class {
       return previousOption;
     };
     const observeTailChanges = () => {
-      if (!config.onChange)
-        return;
+      if (!config.onChange) return;
       const stopObserving = observe(result.value, (_) => {
         const pre = previousValues;
         const pre2 = previousOption;
@@ -2008,8 +1900,7 @@ var Binder = class {
         stopObserverList.push(stopObserving2);
       }
     };
-    if (!config.once)
-      observeTailChanges();
+    if (!config.once) observeTailChanges();
     if (config.onBind)
       stopObserverList.push(
         config.onBind(
@@ -2198,8 +2089,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);
@@ -2218,8 +2108,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
@@ -2834,8 +2723,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);
@@ -2854,8 +2742,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)) {
@@ -2871,12 +2758,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,
@@ -2884,8 +2769,7 @@ var Jsep = class {
     };
   }
   __gobbleTemplateLiteral(env) {
-    if (!this.__isCode(BTICK_CODE))
-      return;
+    if (!this.__isCode(BTICK_CODE)) return;
     const node = {
       type: 19 /* TemplateLiteral */,
       quasis: [],
@@ -2955,8 +2839,7 @@ var Jsep = class {
   }
   __gobbleNew(env) {
     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;
@@ -2967,8 +2850,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) {
@@ -3066,8 +2948,7 @@ var evalUnaryOp = {
   // placed here for type safety, never executed,
 };
 var spreadArgs = (args) => {
-  if (!args?.some(shouldSpreadArray))
-    return args;
+  if (!args?.some(shouldSpreadArray)) return args;
   const result = [];
   args.forEach(
     (x) => shouldSpreadArray(x) ? result.push(...x) : result.push(x)
@@ -3076,8 +2957,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 ?? {});
   ctx.$event = e;
   return ctx;
@@ -3232,22 +3112,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);
@@ -3388,8 +3263,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 */) {
@@ -3407,8 +3281,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);
     }
@@ -3424,8 +3297,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) {
@@ -3513,8 +3385,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))
     );
@@ -3564,8 +3435,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) => {
@@ -3673,8 +3543,7 @@ function includeBooleanAttr(value) {
 var attrDirective = {
   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);
       patchAttribute(el, option, values[0], previousOption);
       return;
     }
@@ -3760,25 +3629,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?.split(","));
+        if (isPrevClassString) classList.remove(...prev?.split(","));
         classList.add(...next.split(","));
       }
     } else if (prev) {
-      if (isPrevClassString)
-        classList.remove(...prev?.split(","));
+      if (isPrevClassString) classList.remove(...prev?.split(","));
     }
   }
 };
@@ -3787,17 +3653,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?.toString();
+    if (isFunction(replacer)) replacer(el, value);
+    else el.innerHTML = 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]);
@@ -3805,8 +3668,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) {
@@ -3912,8 +3774,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;
         }
       }
@@ -3926,10 +3787,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,
@@ -3963,7 +3822,7 @@ var attachDOMChangeListener = (el, parseResult, directiveFlags) => {
   const f1 = getFlags(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
@@ -3995,8 +3854,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) => {
@@ -4019,8 +3877,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) {
@@ -4031,15 +3888,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();
@@ -4096,8 +3950,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) => {
@@ -4139,8 +3992,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);
@@ -4191,9 +4043,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),
@@ -4217,18 +4068,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"];
@@ -4252,22 +4100,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();
         }
       ];
@@ -4291,15 +4134,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?.prevent)
-      return;
+    if (!shouldExecuteEvent(e)) return;
+    if (!method && eventType === "submit" && 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);
@@ -4310,22 +4149,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);
@@ -4336,8 +4168,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;
     }
@@ -4420,18 +4251,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?.(el);
-    else
-      result.context[expr] = el;
+    if (isAnArray) value.push(el);
+    else if (sref2) sref2?.(el);
+    else result.context[expr] = el;
     return () => {
       if (isAnArray) {
         const i = value.indexOf(el);
         i !== -1 && value.splice(i, 1);
-      } else
-        sref2?.(null);
+      } else sref2?.(null);
     };
   }
 };
@@ -4445,10 +4272,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";
   }
 };
 
@@ -4494,8 +4319,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;
   }
 };
@@ -4506,8 +4330,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 {
@@ -4549,11 +4372,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);
   }
@@ -4566,14 +4387,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;
 };
@@ -4600,8 +4423,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;
@@ -4616,21 +4438,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;
@@ -4763,8 +4582,7 @@ var RegorConfig = class _RegorConfig {
 
 // src/bind/interpolation.ts
 var interpolate = (element, config) => {
-  if (!element)
-    return;
+  if (!element) return;
   const builtInNames = (config ?? RegorConfig.getDefault()).__builtInNames;
   for (const textNode of getTextNodes(element, builtInNames.pre)) {
     interpolateTextNode(textNode, builtInNames.text);
@@ -4773,12 +4591,10 @@ var interpolate = (element, config) => {
 var interpolationRegex = /({{[^]*?}})/g;
 var interpolateTextNode = (textNode, textDirective2) => {
   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 (textNode.parentElement?.childNodes.length === 1 && parts.length === 3) {
     const part = parts[1];
     if (isNullOrWhitespace(parts[0]) && isNullOrWhitespace(parts[2]) && part.startsWith("{{") && part.endsWith("}}")) {
@@ -4809,8 +4625,7 @@ var getTextNodes = (node, preDirective) => {
         textNodes.push(node2);
       }
     } else {
-      if (node2?.hasAttribute?.(preDirective))
-        return;
+      if (node2?.hasAttribute?.(preDirective)) return;
       for (const child of getChildNodes(node2)) {
         traverseTextNodes(child);
       }
@@ -4825,10 +4640,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) => {
   const tag = json.t;
@@ -4848,8 +4661,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;
@@ -4865,10 +4677,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) => {
@@ -4885,16 +4695,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);
@@ -4905,22 +4712,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, () => {
@@ -4961,13 +4767,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();
@@ -4986,50 +4789,47 @@ var toJsonTemplate = (node) => {
 };
 
 // src/app/createComponent.ts
-var createComponent = (context, templateOptions, options = {}) => {
-  if (isArray(options))
-    options = { props: options };
-  if (isString(templateOptions))
-    templateOptions = { template: templateOptions };
+var createComponent = (context, template, options = {}) => {
+  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 (options.useInterpolation ?? true)
-    interpolate(templateOptions.element);
-  const element = templateOptions.element;
-  if (!svgHandled && ((templateOptions.isSVG ?? (isHTMLElement(element) && element.hasAttribute?.("isSVG"))) || isHTMLElement(element) && !!element.querySelector("[isSVG]"))) {
-    const content = templateOptions.element.content;
+  if (!template.element)
+    template.element = document.createDocumentFragment();
+  if (options.useInterpolation ?? true) interpolate(template.element);
+  const element = template.element;
+  if (!svgHandled && ((template.isSVG ?? (isHTMLElement(element) && element.hasAttribute?.("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: options.inheritAttrs ?? true,
     props: options.props,
     defaultName: options.defaultName
@@ -5043,8 +4843,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);
   };
@@ -5080,8 +4879,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);
   };
@@ -5127,8 +4925,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);
   };
@@ -5169,31 +4966,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;
 
@@ -5206,8 +5016,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();
@@ -5220,7 +5029,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 */);
 };
@@ -5235,14 +5044,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);