sinwan 1.0.0 → 1.1.1

package/dist/esm/server/index.development.js

@@ -99,6 +99,37 @@ function isSafeHtml(value) {
   return value instanceof HtmlEscapedString;
 }
 
+// src/server/attribute-utils.ts
+var PROP_ALIASES = {
+  className: "class",
+  htmlFor: "for",
+  tabIndex: "tabindex",
+  crossOrigin: "crossorigin"
+};
+function renderServerAttribute(key, value) {
+  const attrName = PROP_ALIASES[key] ?? key;
+  if (value == null || value === false) {
+    return "";
+  }
+  if (value === true) {
+    return ` ${attrName}`;
+  }
+  const attrValue = attrName === "class" && typeof value === "object" ? stringifyClass(value) : attrName === "style" && typeof value === "object" ? stringifyStyle(value) : String(value);
+  return ` ${attrName}="${escapeHtml(attrValue)}"`;
+}
+function stringifyClass(value) {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean).join(" ");
+  }
+  return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
+}
+function stringifyStyle(value) {
+  return Object.entries(value).filter(([, val]) => val != null && val !== false).map(([prop, val]) => `${toKebabCase(prop)}:${String(val)}`).join(";");
+}
+function toKebabCase(value) {
+  return value.includes("-") ? value : value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+}
+
 // src/reactivity/scheduler.ts
 var pendingEffects = new Set;
 var flushScheduled = false;
@@ -429,10 +460,41 @@ function bindEvents(el, props) {
   }
   return cleanups;
 }
-
+// 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/component/control-flow.ts
 var SHOW_TYPE = Symbol.for("Sinwan.Show");
 var FOR_TYPE = Symbol.for("Sinwan.For");
+var SWITCH_TYPE = Symbol.for("Sinwan.Switch");
+var MATCH_TYPE = Symbol.for("Sinwan.Match");
+var INDEX_TYPE = Symbol.for("Sinwan.Index");
+var KEY_TYPE = Symbol.for("Sinwan.Key");
+var DYNAMIC_TYPE = Symbol.for("Sinwan.Dynamic");
+var PORTAL_TYPE = Symbol.for("Sinwan.Portal");
 function Show(props) {
   return {
     tag: SHOW_TYPE,
@@ -447,12 +509,114 @@ function For(props) {
     children: []
   };
 }
+function Switch(props) {
+  return {
+    tag: SWITCH_TYPE,
+    props,
+    children: []
+  };
+}
+function Match(props) {
+  return {
+    tag: MATCH_TYPE,
+    props,
+    children: []
+  };
+}
+function Index(props) {
+  return {
+    tag: INDEX_TYPE,
+    props,
+    children: []
+  };
+}
+function Key(props) {
+  return {
+    tag: KEY_TYPE,
+    props,
+    children: []
+  };
+}
+function Dynamic(props) {
+  return {
+    tag: DYNAMIC_TYPE,
+    props,
+    children: []
+  };
+}
+function Visible(props) {
+  const {
+    when,
+    as = "span",
+    style,
+    children,
+    ...rest
+  } = props;
+  const visibleStyle = computed(() => {
+    const base = readReactive(style);
+    const visible = Boolean(readReactive(when));
+    if (typeof base === "string") {
+      return visible ? base : appendHiddenDisplay(base);
+    }
+    const styleObject = base && typeof base === "object" ? { ...base } : {};
+    styleObject.display = visible ? styleObject.display : "none";
+    return styleObject;
+  });
+  return {
+    tag: as,
+    props: {
+      ...rest,
+      style: visibleStyle,
+      children
+    },
+    children: normalizeChildren2(children)
+  };
+}
+function Portal(props) {
+  return {
+    tag: PORTAL_TYPE,
+    props,
+    children: []
+  };
+}
 function isShowElement(element) {
   return element.tag === SHOW_TYPE;
 }
 function isForElement(element) {
   return element.tag === FOR_TYPE;
 }
+function isSwitchElement(element) {
+  return element.tag === SWITCH_TYPE;
+}
+function isMatchElement(element) {
+  return element.tag === MATCH_TYPE;
+}
+function isIndexElement(element) {
+  return element.tag === INDEX_TYPE;
+}
+function isKeyElement(element) {
+  return element.tag === KEY_TYPE;
+}
+function isDynamicElement(element) {
+  return element.tag === DYNAMIC_TYPE;
+}
+function isPortalElement(element) {
+  return element.tag === PORTAL_TYPE;
+}
+function normalizeChildren2(children) {
+  if (children == null || typeof children === "boolean") {
+    return [];
+  }
+  return Array.isArray(children) ? children : [children];
+}
+function readReactive(value) {
+  return resolve(value);
+}
+function appendHiddenDisplay(style) {
+  const trimmed = style.trim();
+  const separator = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
+  return `${trimmed}${separator}display:none`;
+}
 
 // src/server/renderer.ts
 var componentCache = new WeakMap;
@@ -501,13 +665,41 @@ async function renderToString(node) {
 }
 async function renderElement(element) {
   const { tag, props, children } = element;
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    return renderElement(tag(props));
+  }
+  if (tag === Visible) {
+    return renderElement(tag(props));
+  }
   if (isShowElement(element)) {
-    const when = readReactive(props.when);
+    const when = readReactive2(props.when);
     return renderToString(when ? resolveShowChildren(element, when) : props.fallback);
   }
   if (isForElement(element)) {
     return renderForElement(element);
   }
+  if (isSwitchElement(element)) {
+    return renderToString(resolveSwitchContent(element));
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive2(props.when);
+    return renderToString(when ? resolveMatchChildren(element, when) : null);
+  }
+  if (isIndexElement(element)) {
+    return renderIndexElement(element);
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive2(props.when);
+    return renderToString(resolveKeyChildren(element, key));
+  }
+  if (isDynamicElement(element)) {
+    const tag2 = readReactive2(props.component);
+    const dynamic = createDynamicElement(element, tag2);
+    return dynamic ? renderElement(dynamic) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
   if (typeof tag === "function") {
     const result = await tag(props);
     return renderToString(result);
@@ -547,17 +739,10 @@ function renderAttributes(props) {
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
       continue;
     }
-    const resolvedValue = readReactive(value);
+    const resolvedValue = readReactive2(value);
     if (resolvedValue == null || resolvedValue === false)
       continue;
-    const attrName = key === "className" ? "class" : key;
-    const finalName = attrName === "htmlFor" ? "for" : attrName;
-    if (resolvedValue === true) {
-      attrs += ` ${finalName}`;
-      continue;
-    }
-    const attrValue = escapeHtml(String(resolvedValue));
-    attrs += ` ${finalName}="${attrValue}"`;
+    attrs += renderServerAttribute(key, resolvedValue);
   }
   return attrs;
 }
@@ -573,13 +758,69 @@ function isSlots(children) {
 }
 async function renderForElement(element) {
   const props = element.props;
-  const each = readReactive(props.each);
+  const each = readReactive2(props.each);
   if (!Array.isArray(each) || typeof props.children !== "function") {
-    return "";
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderToString(props.fallback) : "";
   }
   const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(item, () => index))));
   return rendered.join("");
 }
+async function renderIndexElement(element) {
+  const props = element.props;
+  const each = readReactive2(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(() => item, index))));
+  return rendered.join("");
+}
+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);
+  return {
+    tag,
+    props,
+    children
+  };
+}
 function resolveShowChildren(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -587,9 +828,27 @@ function resolveShowChildren(element, value) {
   }
   return children;
 }
-function readReactive(value) {
+function readReactive2(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
+function normalizeContent(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;
+}
 // src/component/instance.ts
 var uidCounter = 0;
 function createComponentInstance(component, props, parent) {
@@ -813,8 +1072,16 @@ async function streamNode(node, controller, encoder) {
 }
 async function streamElement(element, controller, encoder) {
   const { tag, props, children } = element;
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    await streamElement(tag(props), controller, encoder);
+    return;
+  }
+  if (tag === Visible) {
+    await streamElement(tag(props), controller, encoder);
+    return;
+  }
   if (isShowElement(element)) {
-    const when = readReactive2(props.when);
+    const when = readReactive3(props.when);
     await streamNode(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder);
     return;
   }
@@ -822,6 +1089,35 @@ async function streamElement(element, controller, encoder) {
     await streamForElement(element, controller, encoder);
     return;
   }
+  if (isSwitchElement(element)) {
+    await streamNode(resolveSwitchContent2(element), controller, encoder);
+    return;
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive3(props.when);
+    await streamNode(when ? resolveMatchChildren2(element, when) : null, controller, encoder);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamIndexElement(element, controller, encoder);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive3(props.when);
+    await streamNode(resolveKeyChildren2(element, key), controller, encoder);
+    return;
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive3(props.component);
+    const dynamic = createDynamicElement2(element, dynamicTag);
+    if (dynamic) {
+      await streamElement(dynamic, controller, encoder);
+    }
+    return;
+  }
+  if (isPortalElement(element)) {
+    return;
+  }
   if (typeof tag === "function") {
     const result = await tag(props);
     await streamNode(result, controller, encoder);
@@ -856,16 +1152,10 @@ function renderAttributes2(props) {
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
       continue;
     }
-    const resolvedValue = readReactive2(value);
+    const resolvedValue = readReactive3(value);
     if (resolvedValue == null || resolvedValue === false)
       continue;
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    if (resolvedValue === true) {
-      attrs += ` ${attrName}`;
-      continue;
-    }
-    const attrValue = escapeHtml(String(resolvedValue));
-    attrs += ` ${attrName}="${attrValue}"`;
+    attrs += renderServerAttribute(key, resolvedValue);
   }
   return attrs;
 }
@@ -910,12 +1200,16 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
     }
     return;
   }
-  if (tag === Show || tag === For) {
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    await streamHydratableElement(tag(props), controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (tag === Visible) {
     await streamHydratableElement(tag(props), controller, encoder, ctx, isComponentRoot);
     return;
   }
   if (isShowElement(element)) {
-    const when = readReactive2(props.when);
+    const when = readReactive3(props.when);
     await streamHydratableNodeToController(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
     return;
   }
@@ -923,6 +1217,35 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
     await streamHydratableForElement(element, controller, encoder, ctx);
     return;
   }
+  if (isSwitchElement(element)) {
+    await streamHydratableNodeToController(resolveSwitchContent2(element), controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive3(props.when);
+    await streamHydratableNodeToController(when ? resolveMatchChildren2(element, when) : null, controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamHydratableIndexElement(element, controller, encoder, ctx);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive3(props.when);
+    await streamHydratableNodeToController(resolveKeyChildren2(element, key), controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive3(props.component);
+    const dynamic = createDynamicElement2(element, dynamicTag);
+    if (dynamic) {
+      await streamHydratableElement(dynamic, controller, encoder, ctx, isComponentRoot);
+    }
+    return;
+  }
+  if (isPortalElement(element)) {
+    return;
+  }
   if (typeof tag === "function") {
     await streamHydratableComponent(tag, props, controller, encoder, ctx, true);
     return;
@@ -965,14 +1288,42 @@ async function streamHydratableIntrinsic(tag, props, children, controller, encod
 }
 async function streamHydratableForElement(element, controller, encoder, ctx) {
   const props = element.props;
-  const each = readReactive2(props.each);
+  const each = readReactive3(props.each);
   if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
     return;
   }
   for (let index = 0;index < each.length; index++) {
     await streamHydratableNodeToController(props.children(each[index], () => index), controller, encoder, ctx);
   }
 }
+async function streamHydratableIndexElement(element, controller, encoder, ctx) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamHydratableNodeToController(props.children(() => each[index], index), controller, encoder, ctx);
+  }
+}
 function renderHydratableAttributes(props, ctx, isComponentRoot) {
   let attrs = "";
   if (isComponentRoot) {
@@ -987,15 +1338,10 @@ function renderHydratableAttributes(props, ctx, isComponentRoot) {
       eventParts.push(`${toEventName(key)}:${ctx.eventIndex++}`);
       continue;
     }
-    const resolvedValue = readReactive2(value);
+    const resolvedValue = readReactive3(value);
     if (resolvedValue == null || resolvedValue === false)
       continue;
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    if (resolvedValue === true) {
-      attrs += ` ${attrName}`;
-      continue;
-    }
-    attrs += ` ${attrName}="${escapeHtml(String(resolvedValue))}"`;
+    attrs += renderServerAttribute(key, resolvedValue);
   }
   if (eventParts.length > 0) {
     attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
@@ -1007,14 +1353,42 @@ function enqueue(controller, encoder, html) {
 }
 async function streamForElement(element, controller, encoder) {
   const props = element.props;
-  const each = readReactive2(props.each);
+  const each = readReactive3(props.each);
   if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
     return;
   }
   for (let index = 0;index < each.length; index++) {
     await streamNode(props.children(each[index], () => index), controller, encoder);
   }
 }
+async function streamIndexElement(element, controller, encoder) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamNode(props.children(() => each[index], index), controller, encoder);
+  }
+}
 function resolveShowChildren2(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -1022,9 +1396,68 @@ function resolveShowChildren2(element, value) {
   }
   return children;
 }
-function readReactive2(value) {
+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);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive3(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
+function normalizeContent2(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/server/hydration-markers.ts
 function createHydrationContext() {
   return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
@@ -1094,17 +1527,42 @@ function renderElementH(element, ctx, isComponentRoot) {
   if (tag === "") {
     return children.map((child) => renderNodeH(child, ctx)).join("");
   }
-  if (tag === Show || tag === For) {
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    return renderElementH(tag(props), ctx, isComponentRoot);
+  }
+  if (tag === Visible) {
     return renderElementH(tag(props), ctx, isComponentRoot);
   }
   if (isShowElement(element)) {
-    const when = readReactive3(props.when);
+    const when = readReactive4(props.when);
     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(resolveSwitchContent3(element), ctx, isComponentRoot);
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive4(props.when);
+    return renderNodeMaybeRoot(when ? resolveMatchChildren3(element, when) : null, ctx, isComponentRoot);
+  }
+  if (isIndexElement(element)) {
+    return renderIndexElementH(element, ctx);
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive4(props.when);
+    return renderNodeMaybeRoot(resolveKeyChildren3(element, key), ctx, isComponentRoot);
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive4(props.component);
+    const dynamic = createDynamicElement3(element, dynamicTag);
+    return dynamic ? renderElementH(dynamic, ctx, isComponentRoot) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
   if (typeof tag === "function") {
     return renderComponentH(tag, props, ctx);
   }
@@ -1151,13 +1609,7 @@ function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
     if (isSignal(value) || isComputed(value)) {
       resolvedValue = value.value;
     }
-    if (resolvedValue === true) {
-      const attrName2 = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-      attrs += ` ${attrName2}`;
-      continue;
-    }
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    attrs += ` ${attrName}="${escapeHtml(String(resolvedValue))}"`;
+    attrs += renderServerAttribute(key, resolvedValue);
   }
   if (eventParts.length > 0) {
     attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
@@ -1180,12 +1632,26 @@ function renderNodeMaybeRoot(node, ctx, isComponentRoot) {
 }
 function renderForElementH(element, ctx) {
   const props = element.props;
-  const each = readReactive3(props.each);
+  const each = readReactive4(props.each);
   if (!Array.isArray(each) || typeof props.children !== "function") {
-    return "";
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
   }
   return each.map((item, index) => renderNodeH(props.children(item, () => index), ctx)).join("");
 }
+function renderIndexElementH(element, ctx) {
+  const props = element.props;
+  const each = readReactive4(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  return each.map((item, index) => renderNodeH(props.children(() => item, index), ctx)).join("");
+}
 function resolveShowChildren3(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -1193,9 +1659,68 @@ function resolveShowChildren3(element, value) {
   }
   return children;
 }
-function readReactive3(value) {
+function resolveSwitchContent3(element) {
+  const props = element.props;
+  const children = normalizeContent3(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement3(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive4(match.props.when);
+    if (when) {
+      return resolveMatchChildren3(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement3(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent3(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive4(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
+function normalizeContent3(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike3(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement3(value) {
+  if (!isElementLike3(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
+}
 export {
   streamPage,
   streamHydratablePage,
@@ -1210,5 +1735,5 @@ export {
   getPage
 };
 
-//# debugId=E47F9E2EB5705D1864756E2164756E21
+//# debugId=F305883ADDC8E25564756E2164756E21
 //# sourceMappingURL=index.development.js.map