sinwan 1.1.0 → 1.1.2

package/dist/cjs/index.development.js

@@ -383,7 +383,6 @@ function signal(initial) {
 function isSignal(value) {
   return value != null && typeof value === "object" && SIGNAL_BRAND in value;
 }
-
 // src/reactivity/computed.ts
 var COMPUTED_BRAND = Symbol("Sinwan:computed");
 
@@ -435,10 +434,35 @@ function computed(getter) {
 function isComputed(value) {
   return value != null && typeof value === "object" && COMPUTED_BRAND in value;
 }
-
+// src/reactivity/batch.ts
+var batchDepth = 0;
+function batch(fn) {
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      flushSync();
+    }
+  }
+}
+// src/reactivity/normalization.ts
+function isReactive(value) {
+  return isSignal(value) || isComputed(value) || typeof value === "function";
+}
+function resolve(value) {
+  if (isSignal(value) || isComputed(value)) {
+    return value.value;
+  }
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}
 // src/renderer/events.ts
 function isEventProp(key) {
-  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
+  return key.length > 2 && key.startsWith("on");
 }
 function toEventName(key) {
   return key.slice(2).toLowerCase();
@@ -515,19 +539,28 @@ function fireMountedHooks(instance) {
   }
 }
 function fireUnmountedHooks(instance) {
-  for (const child of instance.children) {
+  const children = [...instance.children];
+  for (const child of children) {
     fireUnmountedHooks(child);
   }
-  if (instance.isMounted && !instance.isUnmounted) {
+  if (!instance.isUnmounted) {
     instance.isUnmounted = true;
-    instance.isMounted = false;
-    for (const hook of instance._unmountedHooks) {
-      hook();
+    if (instance.isMounted) {
+      instance.isMounted = false;
+      for (const hook of instance._unmountedHooks) {
+        hook();
+      }
     }
     for (const dispose of instance.effects) {
       dispose();
     }
     instance.effects.length = 0;
+    if (instance.parent) {
+      const idx = instance.parent.children.indexOf(instance);
+      if (idx !== -1) {
+        instance.parent.children.splice(idx, 1);
+      }
+    }
   }
 }
 function fireUpdatedHooks(instance) {
@@ -577,11 +610,13 @@ function applyAttributes(el, props) {
   for (const [key, value] of Object.entries(props)) {
     if (SKIP_PROPS.has(key) || isEventProp(key))
       continue;
-    if (isSignal(value) || isComputed(value)) {
+    const attrName = resolveAttributeName(key);
+    const isComplex = attrName === "class" || attrName === "style";
+    if (isReactive(value) || isComplex && containsReactive(value)) {
       const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value, state);
+        setSingleAttribute(el, key, resolve(value), state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -639,19 +674,17 @@ function setSingleAttribute(el, key, value, state) {
 function resolveAttributeName(key) {
   return PROP_ALIASES[key] ?? key;
 }
-function applyStyle(el, styles, state) {
+function applyStyle(el, value, state) {
+  const styleObj = normalizeStyle(value);
   const nextProps = new Set;
-  for (const [prop, val] of Object.entries(styles)) {
+  for (const [prop, val] of Object.entries(styleObj)) {
     nextProps.add(prop);
     if (val == null) {
       removeStyleProperty(el, prop);
       continue;
     }
-    if (prop.includes("-")) {
-      el.style.setProperty(prop, String(val));
-    } else {
-      el.style[prop] = val;
-    }
+    const kebabProp = prop.startsWith("--") ? prop : camelToKebab(prop);
+    el.style.setProperty(kebabProp, String(val));
   }
   if (!state) {
     return;
@@ -663,37 +696,77 @@ function applyStyle(el, styles, state) {
   }
   state.previousStyleProps = nextProps;
 }
+function normalizeStyle(value) {
+  const resolved = resolve(value);
+  if (!resolved)
+    return {};
+  if (typeof resolved === "string") {
+    return parseStyleString(resolved);
+  }
+  if (Array.isArray(resolved)) {
+    return resolved.reduce((acc, item) => {
+      const normalized = normalizeStyle(item);
+      return Object.assign(acc, normalized);
+    }, {});
+  }
+  if (typeof resolved === "object") {
+    const result = {};
+    for (const [k, v] of Object.entries(resolved)) {
+      result[k] = resolve(v);
+    }
+    return result;
+  }
+  return {};
+}
+function parseStyleString(style) {
+  const result = {};
+  style.split(";").forEach((rule) => {
+    const i = rule.indexOf(":");
+    if (i > 0) {
+      const prop = rule.slice(0, i).trim();
+      const val = rule.slice(i + 1).trim();
+      if (prop && val) {
+        result[prop] = val;
+      }
+    }
+  });
+  return result;
+}
 function removeStyleProperty(el, prop) {
-  if (prop.includes("-")) {
-    el.style.removeProperty(prop);
-  } else {
-    el.style[prop] = "";
-  }
+  const kebabProp = prop.startsWith("--") ? prop : camelToKebab(prop);
+  el.style.removeProperty(kebabProp);
 }
 function applyClass(el, value) {
-  let classStr;
-  if (Array.isArray(value)) {
-    classStr = value.filter(Boolean).join(" ");
-  } else if (typeof value === "object" && value !== null) {
-    classStr = Object.entries(value).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ");
-  } else {
-    classStr = String(value);
+  domOps.setAttribute(el, "class", normalizeClass(value));
+}
+function normalizeClass(value) {
+  const resolved = resolve(value);
+  if (!resolved)
+    return "";
+  if (typeof resolved === "string")
+    return resolved;
+  if (Array.isArray(resolved)) {
+    return resolved.map(normalizeClass).filter(Boolean).join(" ");
   }
-  domOps.setAttribute(el, "class", classStr);
+  if (typeof resolved === "object") {
+    return Object.entries(resolved).filter(([, v]) => Boolean(resolve(v))).map(([k]) => k).join(" ");
+  }
+  return String(resolved);
 }
-// src/reactivity/batch.ts
-var batchDepth = 0;
-function batch(fn) {
-  batchDepth++;
-  try {
-    fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flushSync();
-    }
+function containsReactive(value) {
+  if (isReactive(value))
+    return true;
+  if (Array.isArray(value))
+    return value.some(containsReactive);
+  if (typeof value === "object" && value !== null) {
+    return Object.values(value).some(containsReactive);
   }
+  return false;
 }
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+
 // src/component/control-flow.ts
 var SHOW_TYPE = Symbol.for("Sinwan.Show");
 var FOR_TYPE = Symbol.for("Sinwan.For");
@@ -787,6 +860,9 @@ function Portal(props) {
     children: []
   };
 }
+function isElementLike(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
 function isShowElement(element) {
   return element.tag === SHOW_TYPE;
 }
@@ -811,6 +887,107 @@ function isDynamicElement(element) {
 function isPortalElement(element) {
   return element.tag === PORTAL_TYPE;
 }
+function resolveSwitchContent(element) {
+  const props = element.props;
+  const children = normalizeContent(props.children ?? element.children);
+  const match = findTruthyMatch(children);
+  return match !== undefined ? match : props.fallback;
+}
+function findTruthyMatch(nodes) {
+  for (const node of nodes) {
+    if (node == null || typeof node === "boolean")
+      continue;
+    if (Array.isArray(node)) {
+      const match = findTruthyMatch(node);
+      if (match !== undefined)
+        return match;
+      continue;
+    }
+    if (isElementLike(node)) {
+      let element = node;
+      if (typeof element.tag === "function") {
+        const tag = element.tag;
+        if (tag === Match || tag === Show || tag === For || tag === Index || tag === Key || tag === Switch) {
+          element = tag(element.props);
+        }
+      }
+      if (isMatchElement(element)) {
+        const when = readReactive(element.props.when);
+        if (when) {
+          return resolveMatchChildren(element, when);
+        }
+      } else if (isShowElement(element)) {
+        const when = readReactive(element.props.when);
+        if (when) {
+          const content = resolveShowChildren(element, when);
+          const match = findTruthyMatch(normalizeContent(content));
+          if (match !== undefined)
+            return match;
+        } else if (element.props.fallback) {
+          const match = findTruthyMatch(normalizeContent(element.props.fallback));
+          if (match !== undefined)
+            return match;
+        }
+      } else if (isForElement(element)) {
+        const props = element.props;
+        const items = readReactive(props.each);
+        if (Array.isArray(items)) {
+          for (let i = 0;i < items.length; i++) {
+            const child = props.children(items[i], () => i);
+            const match = findTruthyMatch(normalizeContent(child));
+            if (match !== undefined)
+              return match;
+          }
+        }
+      } else if (isIndexElement(element)) {
+        const props = element.props;
+        const items = readReactive(props.each);
+        if (Array.isArray(items)) {
+          for (let i = 0;i < items.length; i++) {
+            const child = props.children(() => items[i], i);
+            const match = findTruthyMatch(normalizeContent(child));
+            if (match !== undefined)
+              return match;
+          }
+        }
+      } else if (isKeyElement(element)) {
+        const key = readReactive(element.props.when);
+        const child = resolveKeyChildren(element, key);
+        const match = findTruthyMatch(normalizeContent(child));
+        if (match !== undefined)
+          return match;
+      }
+    }
+  }
+  return;
+}
+function resolveMatchChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveShowChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function normalizeContent(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
 function normalizeChildren2(children) {
   if (children == null || typeof children === "boolean") {
     return [];
@@ -818,7 +995,7 @@ function normalizeChildren2(children) {
   return Array.isArray(children) ? children : [children];
 }
 function readReactive(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+  return resolve(value);
 }
 function appendHiddenDisplay(style) {
   const trimmed = style.trim();
@@ -950,8 +1127,10 @@ function renderShowBlock(element, block, parent, namespace, owner) {
   return effect(() => {
     clearChildren(block);
     const when = readReactive2(element.props.when);
-    const content = withOptionalInstance(owner, () => when ? resolveShowChildren(element, when) : element.props.fallback);
-    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    block.children = withOptionalInstance(owner, () => {
+      const content = when ? resolveShowChildren(element, when) : element.props.fallback;
+      return renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    });
     if (initialized) {
       fireMountedAndQueueUpdated(owner);
     }
@@ -1138,18 +1317,31 @@ function renderPortal(element, parent, anchor, namespace) {
   insertNode(parent, placeholder, anchor);
   const owner = getCurrentInstance();
   let disposeEffect = () => {};
+  const targetAnchor = domOps.createComment("Sinwan-pa");
+  let lastTarget = null;
   const portal = {
     type: "portal",
     anchor: placeholder,
     children: [],
-    dispose: () => disposeEffect()
+    dispose: () => disposeEffect(),
+    targetAnchor
   };
   let initialized = false;
   disposeEffect = effect(() => {
-    clearPortalChildren(portal);
     const target = resolvePortalTarget(element.props.mount);
+    if (target !== lastTarget) {
+      if (lastTarget) {
+        domOps.remove(targetAnchor);
+      }
+      if (target) {
+        domOps.appendChild(target, targetAnchor);
+      }
+      lastTarget = target;
+      portal.target = target;
+    }
+    clearPortalChildren(portal);
     if (target) {
-      portal.children = renderBlockContent(element.props.children ?? element.children, target, null, namespace, owner);
+      portal.children = renderBlockContent(element.props.children ?? element.children, target, targetAnchor, namespace, owner);
     }
     if (initialized) {
       fireMountedAndQueueUpdated(owner);
@@ -1158,48 +1350,12 @@ function renderPortal(element, parent, anchor, namespace) {
   });
   return portal;
 }
-function resolveShowChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
-function resolveSwitchContent(element) {
-  const props = element.props;
-  const children = normalizeContent(props.children ?? element.children);
-  for (const child of children) {
-    const match = getMatchElement(child);
-    if (!match) {
-      continue;
-    }
-    const when = readReactive2(match.props.when);
-    if (when) {
-      return resolveMatchChildren(match, when);
-    }
-  }
-  return props.fallback;
-}
-function resolveMatchChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
-function resolveKeyChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
 function createDynamicElement(element, tag) {
   if (typeof tag !== "string" && typeof tag !== "function") {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent(props.children ?? element.children);
+  const children = normalizeContent2(props.children ?? element.children);
   return {
     tag,
     props,
@@ -1207,11 +1363,14 @@ function createDynamicElement(element, tag) {
   };
 }
 function renderBlockContent(content, parent, anchor, namespace, owner) {
-  if (content == null || typeof content === "boolean") {
+  if (content == null || typeof content === "boolean")
     return [];
-  }
-  const nodes = Array.isArray(content) ? content : [content];
-  return nodes.map((node) => withOptionalInstance(owner, () => renderNodeToDOM(node, parent, anchor, namespace)));
+  return withOptionalInstance(owner, () => {
+    if (Array.isArray(content)) {
+      return content.map((child) => renderNodeToDOM(child, parent, anchor, namespace));
+    }
+    return [renderNodeToDOM(content, parent, anchor, namespace)];
+  });
 }
 function clearChildren(block) {
   for (const child of block.children) {
@@ -1229,6 +1388,23 @@ function moveBeforeEnd(parent, mounted, endAnchor) {
   for (const node of getMountedDomNodes(mounted)) {
     domOps.insertBefore(parent, node, endAnchor);
   }
+  syncPortalOrder(mounted);
+}
+function syncPortalOrder(mounted) {
+  if (mounted.type === "portal") {
+    if (mounted.target && mounted.targetAnchor) {
+      for (const child of mounted.children) {
+        for (const node of getMountedDomNodes(child)) {
+          domOps.appendChild(mounted.target, node);
+        }
+      }
+      domOps.appendChild(mounted.target, mounted.targetAnchor);
+    }
+  } else if ("children" in mounted && Array.isArray(mounted.children)) {
+    for (const child of mounted.children) {
+      syncPortalOrder(child);
+    }
+  }
 }
 function fireMountedAndQueueUpdated(owner) {
   if (owner) {
@@ -1240,26 +1416,14 @@ function withOptionalInstance(owner, fn) {
   return owner ? withInstance(owner, fn) : fn();
 }
 function readReactive2(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+  return resolve(value);
 }
-function normalizeContent(content) {
+function normalizeContent2(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike(value) {
-  return value != null && typeof value === "object" && "tag" in value;
-}
-function getMatchElement(value) {
-  if (!isElementLike(value)) {
-    return null;
-  }
-  if (isMatchElement(value)) {
-    return value;
-  }
-  return value.tag === Match ? Match(value.props) : null;
-}
 function resolvePortalTarget(value) {
   const target = readReactive2(value);
   if (target == null) {
@@ -1461,19 +1625,8 @@ function renderNodeToDOM(node, parent, anchor = null, namespace = null) {
     insertNode2(parent, text2, anchor);
     return { type: "text", node: text2 };
   }
-  if (isSignal(node) || isComputed(node)) {
-    const text2 = domOps.createTextNode(String(node.value));
-    insertNode2(parent, text2, anchor);
-    const owner = getCurrentInstance();
-    let initialized = false;
-    const dispose = effect(() => {
-      domOps.setTextContent(text2, String(node.value));
-      if (initialized) {
-        queueUpdatedHooks(owner);
-      }
-      initialized = true;
-    });
-    return { type: "reactive-text", node: text2, dispose };
+  if (isReactive(node)) {
+    return renderReactiveNodeToDOM(node, parent, anchor, namespace);
   }
   if (Array.isArray(node)) {
     return renderArrayToDOM(node, parent, anchor, namespace);
@@ -1510,6 +1663,37 @@ function renderChildrenToDOM(children, parent, namespace = null) {
   }
   return mounted;
 }
+function renderReactiveNodeToDOM(reactive, parent, anchor, namespace) {
+  const startAnchor = domOps.createComment("Sinwan-r");
+  const endAnchor = domOps.createComment("/Sinwan-r");
+  insertNode2(parent, startAnchor, anchor);
+  insertNode2(parent, endAnchor, anchor);
+  const owner = getCurrentInstance();
+  let mountedContent = null;
+  let initialized = false;
+  const block = {
+    type: "reactive-block",
+    startAnchor,
+    endAnchor,
+    children: [],
+    dispose: () => {}
+  };
+  block.dispose = effect(() => {
+    if (mountedContent) {
+      removeMountedNode(mountedContent);
+    }
+    const value = resolve(reactive);
+    mountedContent = renderNodeToDOM(value, parent, endAnchor, namespace);
+    block.children = [mountedContent];
+    if (initialized) {
+      if (owner)
+        fireMountedHooks(owner);
+      queueUpdatedHooks(owner);
+    }
+    initialized = true;
+  });
+  return block;
+}
 function insertNode2(parent, child, anchor) {
   if (anchor) {
     domOps.insertBefore(parent, child, anchor);
@@ -1713,24 +1897,24 @@ async function renderElement(element) {
   }
   if (isShowElement(element)) {
     const when = readReactive3(props.when);
-    return renderToString(when ? resolveShowChildren2(element, when) : props.fallback);
+    return renderToString(when ? resolveShowChildren(element, when) : props.fallback);
   }
   if (isForElement(element)) {
     return renderForElement(element);
   }
   if (isSwitchElement(element)) {
-    return renderToString(resolveSwitchContent2(element));
+    return renderToString(resolveSwitchContent(element));
   }
   if (isMatchElement(element)) {
     const when = readReactive3(props.when);
-    return renderToString(when ? resolveMatchChildren2(element, when) : null);
+    return renderToString(when ? resolveMatchChildren(element, when) : null);
   }
   if (isIndexElement(element)) {
     return renderIndexElement(element);
   }
   if (isKeyElement(element)) {
     const key = readReactive3(props.when);
-    return renderToString(resolveKeyChildren2(element, key));
+    return renderToString(resolveKeyChildren(element, key));
   }
   if (isDynamicElement(element)) {
     const tag2 = readReactive3(props.component);
@@ -1820,75 +2004,27 @@ async function renderIndexElement(element) {
   const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(() => item, index))));
   return rendered.join("");
 }
-function resolveSwitchContent2(element) {
-  const props = element.props;
-  const children = normalizeContent2(props.children ?? element.children);
-  for (const child of children) {
-    const match = getMatchElement2(child);
-    if (!match) {
-      continue;
-    }
-    const when = readReactive3(match.props.when);
-    if (when) {
-      return resolveMatchChildren2(match, when);
-    }
-  }
-  return props.fallback;
-}
-function resolveMatchChildren2(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
-function resolveKeyChildren2(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
 function createDynamicElement2(element, tag) {
   if (typeof tag !== "string" && typeof tag !== "function") {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent2(props.children ?? element.children);
+  const children = normalizeContent3(props.children ?? element.children);
   return {
     tag,
     props,
     children
   };
 }
-function resolveShowChildren2(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
 function readReactive3(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
-function normalizeContent2(content) {
+function normalizeContent3(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike2(value) {
-  return value != null && typeof value === "object" && "tag" in value;
-}
-function getMatchElement2(value) {
-  if (!isElementLike2(value)) {
-    return null;
-  }
-  if (isMatchElement(value)) {
-    return value;
-  }
-  return value.tag === Match ? Match(value.props) : null;
-}
 // src/hydration/markers.ts
 var COMP_ID_ATTR = "data-sinwan-id";
 var COMP_ID_PREFIX = "c";
@@ -2023,7 +2159,7 @@ async function streamElement(element, controller, encoder) {
   }
   if (isShowElement(element)) {
     const when = readReactive4(props.when);
-    await streamNode(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder);
+    await streamNode(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder);
     return;
   }
   if (isForElement(element)) {
@@ -2031,12 +2167,12 @@ async function streamElement(element, controller, encoder) {
     return;
   }
   if (isSwitchElement(element)) {
-    await streamNode(resolveSwitchContent3(element), controller, encoder);
+    await streamNode(resolveSwitchContent2(element), controller, encoder);
     return;
   }
   if (isMatchElement(element)) {
     const when = readReactive4(props.when);
-    await streamNode(when ? resolveMatchChildren3(element, when) : null, controller, encoder);
+    await streamNode(when ? resolveMatchChildren2(element, when) : null, controller, encoder);
     return;
   }
   if (isIndexElement(element)) {
@@ -2045,7 +2181,7 @@ async function streamElement(element, controller, encoder) {
   }
   if (isKeyElement(element)) {
     const key = readReactive4(props.when);
-    await streamNode(resolveKeyChildren3(element, key), controller, encoder);
+    await streamNode(resolveKeyChildren2(element, key), controller, encoder);
     return;
   }
   if (isDynamicElement(element)) {
@@ -2151,7 +2287,7 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
   }
   if (isShowElement(element)) {
     const when = readReactive4(props.when);
-    await streamHydratableNodeToController(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
+    await streamHydratableNodeToController(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
     return;
   }
   if (isForElement(element)) {
@@ -2159,12 +2295,12 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
     return;
   }
   if (isSwitchElement(element)) {
-    await streamHydratableNodeToController(resolveSwitchContent3(element), controller, encoder, ctx, isComponentRoot);
+    await streamHydratableNodeToController(resolveSwitchContent2(element), controller, encoder, ctx, isComponentRoot);
     return;
   }
   if (isMatchElement(element)) {
     const when = readReactive4(props.when);
-    await streamHydratableNodeToController(when ? resolveMatchChildren3(element, when) : null, controller, encoder, ctx, isComponentRoot);
+    await streamHydratableNodeToController(when ? resolveMatchChildren2(element, when) : null, controller, encoder, ctx, isComponentRoot);
     return;
   }
   if (isIndexElement(element)) {
@@ -2173,7 +2309,7 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
   }
   if (isKeyElement(element)) {
     const key = readReactive4(props.when);
-    await streamHydratableNodeToController(resolveKeyChildren3(element, key), controller, encoder, ctx, isComponentRoot);
+    await streamHydratableNodeToController(resolveKeyChildren2(element, key), controller, encoder, ctx, isComponentRoot);
     return;
   }
   if (isDynamicElement(element)) {
@@ -2330,36 +2466,36 @@ async function streamIndexElement(element, controller, encoder) {
     await streamNode(props.children(() => each[index], index), controller, encoder);
   }
 }
-function resolveShowChildren3(element, value) {
+function resolveShowChildren2(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveSwitchContent3(element) {
+function resolveSwitchContent2(element) {
   const props = element.props;
-  const children = normalizeContent3(props.children ?? element.children);
+  const children = normalizeContent4(props.children ?? element.children);
   for (const child of children) {
-    const match = getMatchElement3(child);
+    const match = getMatchElement(child);
     if (!match) {
       continue;
     }
     const when = readReactive4(match.props.when);
     if (when) {
-      return resolveMatchChildren3(match, when);
+      return resolveMatchChildren2(match, when);
     }
   }
   return props.fallback;
 }
-function resolveMatchChildren3(element, value) {
+function resolveMatchChildren2(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveKeyChildren3(element, value) {
+function resolveKeyChildren2(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
@@ -2371,7 +2507,7 @@ function createDynamicElement3(element, tag) {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent3(props.children ?? element.children);
+  const children = normalizeContent4(props.children ?? element.children);
   return {
     tag,
     props,
@@ -2381,17 +2517,17 @@ function createDynamicElement3(element, tag) {
 function readReactive4(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
-function normalizeContent3(content) {
+function normalizeContent4(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike3(value) {
+function isElementLike2(value) {
   return value != null && typeof value === "object" && "tag" in value;
 }
-function getMatchElement3(value) {
-  if (!isElementLike3(value)) {
+function getMatchElement(value) {
+  if (!isElementLike2(value)) {
     return null;
   }
   if (isMatchElement(value)) {
@@ -2476,25 +2612,25 @@ function renderElementH(element, ctx, isComponentRoot) {
   }
   if (isShowElement(element)) {
     const when = readReactive5(props.when);
-    const content = when ? resolveShowChildren4(element, when) : props.fallback;
+    const content = when ? resolveShowChildren3(element, when) : props.fallback;
     return renderNodeMaybeRoot(content, ctx, isComponentRoot);
   }
   if (isForElement(element)) {
     return renderForElementH(element, ctx);
   }
   if (isSwitchElement(element)) {
-    return renderNodeMaybeRoot(resolveSwitchContent4(element), ctx, isComponentRoot);
+    return renderNodeMaybeRoot(resolveSwitchContent3(element), ctx, isComponentRoot);
   }
   if (isMatchElement(element)) {
     const when = readReactive5(props.when);
-    return renderNodeMaybeRoot(when ? resolveMatchChildren4(element, when) : null, ctx, isComponentRoot);
+    return renderNodeMaybeRoot(when ? resolveMatchChildren3(element, when) : null, ctx, isComponentRoot);
   }
   if (isIndexElement(element)) {
     return renderIndexElementH(element, ctx);
   }
   if (isKeyElement(element)) {
     const key = readReactive5(props.when);
-    return renderNodeMaybeRoot(resolveKeyChildren4(element, key), ctx, isComponentRoot);
+    return renderNodeMaybeRoot(resolveKeyChildren3(element, key), ctx, isComponentRoot);
   }
   if (isDynamicElement(element)) {
     const dynamicTag = readReactive5(props.component);
@@ -2593,36 +2729,36 @@ function renderIndexElementH(element, ctx) {
   }
   return each.map((item, index) => renderNodeH(props.children(() => item, index), ctx)).join("");
 }
-function resolveShowChildren4(element, value) {
+function resolveShowChildren3(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveSwitchContent4(element) {
+function resolveSwitchContent3(element) {
   const props = element.props;
-  const children = normalizeContent4(props.children ?? element.children);
+  const children = normalizeContent5(props.children ?? element.children);
   for (const child of children) {
-    const match = getMatchElement4(child);
+    const match = getMatchElement2(child);
     if (!match) {
       continue;
     }
     const when = readReactive5(match.props.when);
     if (when) {
-      return resolveMatchChildren4(match, when);
+      return resolveMatchChildren3(match, when);
     }
   }
   return props.fallback;
 }
-function resolveMatchChildren4(element, value) {
+function resolveMatchChildren3(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveKeyChildren4(element, value) {
+function resolveKeyChildren3(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
@@ -2634,7 +2770,7 @@ function createDynamicElement4(element, tag) {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent4(props.children ?? element.children);
+  const children = normalizeContent5(props.children ?? element.children);
   return {
     tag,
     props,
@@ -2644,17 +2780,17 @@ function createDynamicElement4(element, tag) {
 function readReactive5(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
-function normalizeContent4(content) {
+function normalizeContent5(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike4(value) {
+function isElementLike3(value) {
   return value != null && typeof value === "object" && "tag" in value;
 }
-function getMatchElement4(value) {
-  if (!isElementLike4(value)) {
+function getMatchElement2(value) {
+  if (!isElementLike3(value)) {
     return null;
   }
   if (isMatchElement(value)) {
@@ -2945,7 +3081,7 @@ function hydrateAttributes(el, props) {
 function hydrateControlFlow(element, cursor) {
   if (isShowElement(element)) {
     const when = readReactive6(element.props.when);
-    const content = when ? resolveShowChildren5(element, when) : element.props.fallback;
+    const content = when ? resolveShowChildren4(element, when) : element.props.fallback;
     return hydrateContent(content, cursor);
   }
   if (isForElement(element)) {
@@ -2955,7 +3091,7 @@ function hydrateControlFlow(element, cursor) {
     return hydrateArray(children, cursor);
   }
   if (isSwitchElement(element)) {
-    return hydrateContent(resolveSwitchContent5(element), cursor);
+    return hydrateContent(resolveSwitchContent4(element), cursor);
   }
   if (isIndexElement(element)) {
     const props = element.props;
@@ -2965,7 +3101,7 @@ function hydrateControlFlow(element, cursor) {
   }
   if (isKeyElement(element)) {
     const key = readReactive6(element.props.when);
-    return hydrateContent(resolveKeyChildren5(element, key), cursor);
+    return hydrateContent(resolveKeyChildren4(element, key), cursor);
   }
   if (isDynamicElement(element)) {
     const tag = readReactive6(element.props.component);
@@ -2980,36 +3116,36 @@ function hydrateContent(content, cursor) {
   }
   return Array.isArray(content) ? hydrateArray(content, cursor) : hydrateNode(content, cursor);
 }
-function resolveShowChildren5(element, value) {
+function resolveShowChildren4(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveSwitchContent5(element) {
+function resolveSwitchContent4(element) {
   const props = element.props;
-  const children = normalizeContent5(props.children ?? element.children);
+  const children = normalizeContent6(props.children ?? element.children);
   for (const child of children) {
-    const match = getMatchElement5(child);
+    const match = getMatchElement3(child);
     if (!match) {
       continue;
     }
     const when = readReactive6(match.props.when);
     if (when) {
-      return resolveMatchChildren5(match, when);
+      return resolveMatchChildren4(match, when);
     }
   }
   return props.fallback;
 }
-function resolveMatchChildren5(element, value) {
+function resolveMatchChildren4(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
   }
   return children;
 }
-function resolveKeyChildren5(element, value) {
+function resolveKeyChildren4(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
     return children(value);
@@ -3021,7 +3157,7 @@ function createDynamicElement5(element, tag) {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent5(props.children ?? element.children);
+  const children = normalizeContent6(props.children ?? element.children);
   return {
     tag,
     props,
@@ -3031,17 +3167,17 @@ function createDynamicElement5(element, tag) {
 function readReactive6(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
-function normalizeContent5(content) {
+function normalizeContent6(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike5(value) {
+function isElementLike4(value) {
   return value != null && typeof value === "object" && "tag" in value;
 }
-function getMatchElement5(value) {
-  if (!isElementLike5(value)) {
+function getMatchElement3(value) {
+  if (!isElementLike4(value)) {
     return null;
   }
   if (isMatchElement(value)) {
@@ -3152,5 +3288,5 @@ function hydrate(component, container, props) {
   };
 }
 
-//# debugId=B2FFEB8D17EB811D64756E2164756E21
+//# debugId=2A80AE62418E0A4664756E2164756E21
 //# sourceMappingURL=index.development.js.map