sinwan 1.0.0 → 1.1.1

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,7 +434,32 @@ 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";
@@ -577,10 +601,11 @@ 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)) {
+    if (isReactive(value)) {
+      const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value);
+        setSingleAttribute(el, key, resolve(value), state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -593,10 +618,10 @@ function applyAttributes(el, props) {
   }
   return disposers;
 }
-function setSingleAttribute(el, key, value) {
-  const attrName = PROP_ALIASES[key] ?? key;
+function setSingleAttribute(el, key, value, state) {
+  const attrName = resolveAttributeName(key);
   if (attrName === "style" && typeof value === "object" && value !== null) {
-    applyStyle(el, value);
+    applyStyle(el, value, state);
     return;
   }
   if (attrName === "class" && typeof value === "object" && value !== null) {
@@ -605,6 +630,9 @@ function setSingleAttribute(el, key, value) {
   }
   if (value == null || value === false) {
     domOps.removeAttribute(el, attrName);
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     if (DOM_PROPERTIES.has(attrName)) {
       domOps.setProperty(el, attrName, attrName === "value" ? "" : false);
     }
@@ -612,25 +640,59 @@ function setSingleAttribute(el, key, value) {
   }
   if (value === true) {
     domOps.setAttribute(el, attrName, "");
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     if (DOM_PROPERTIES.has(attrName)) {
       domOps.setProperty(el, attrName, true);
     }
     return;
   }
   if (DOM_PROPERTIES.has(attrName)) {
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     domOps.setProperty(el, attrName, value);
     return;
   }
+  if (attrName === "style" && state) {
+    state.previousStyleProps.clear();
+  }
   domOps.setAttribute(el, attrName, String(value));
 }
-function applyStyle(el, styles) {
+function resolveAttributeName(key) {
+  return PROP_ALIASES[key] ?? key;
+}
+function applyStyle(el, styles, state) {
+  const nextProps = new Set;
   for (const [prop, val] of Object.entries(styles)) {
+    nextProps.add(prop);
+    if (val == null) {
+      removeStyleProperty(el, prop);
+      continue;
+    }
     if (prop.includes("-")) {
-      el.style.setProperty(prop, val);
+      el.style.setProperty(prop, String(val));
     } else {
       el.style[prop] = val;
     }
   }
+  if (!state) {
+    return;
+  }
+  for (const previousProp of state.previousStyleProps) {
+    if (!nextProps.has(previousProp)) {
+      removeStyleProperty(el, previousProp);
+    }
+  }
+  state.previousStyleProps = nextProps;
+}
+function removeStyleProperty(el, prop) {
+  if (prop.includes("-")) {
+    el.style.removeProperty(prop);
+  } else {
+    el.style[prop] = "";
+  }
 }
 function applyClass(el, value) {
   let classStr;
@@ -647,6 +709,12 @@ function applyClass(el, 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,
@@ -661,12 +729,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/renderer/unmount.ts
 function getMountedDomNodes(node) {
@@ -689,6 +859,8 @@ function getMountedDomNodes(node) {
       ];
     case "component":
       return node.children.flatMap((child) => getMountedDomNodes(child));
+    case "portal":
+      return [node.anchor];
   }
 }
 function unmountNode(node) {
@@ -733,6 +905,13 @@ function unmountNode(node) {
         unmountNode(child);
       }
       break;
+    case "portal":
+      node.dispose();
+      for (const child of node.children) {
+        removeMountedNode(child);
+      }
+      node.children = [];
+      break;
   }
 }
 function removeMountedNode(node) {
@@ -747,6 +926,9 @@ function removeMountedNode(node) {
 
 // src/renderer/render-control-flow.ts
 function renderControlFlowToDOM(element, parent, anchor, namespace) {
+  if (isPortalElement(element)) {
+    return renderPortal(element, parent, anchor, namespace);
+  }
   const startAnchor = domOps.createComment("Sinwan-b");
   const endAnchor = domOps.createComment("/Sinwan-b");
   insertNode(parent, startAnchor, anchor);
@@ -764,6 +946,14 @@ function renderControlFlowToDOM(element, parent, anchor, namespace) {
     disposeEffect = renderShowBlock(element, block, parent, namespace, owner);
   } else if (isForElement(element)) {
     disposeEffect = renderForBlock(element, block, parent, namespace, owner);
+  } else if (isSwitchElement(element)) {
+    disposeEffect = renderSwitchBlock(element, block, parent, namespace, owner);
+  } else if (isIndexElement(element)) {
+    disposeEffect = renderIndexBlock(element, block, parent, namespace, owner);
+  } else if (isKeyElement(element)) {
+    disposeEffect = renderKeyBlock(element, block, parent, namespace, owner);
+  } else if (isDynamicElement(element)) {
+    disposeEffect = renderDynamicBlock(element, block, parent, namespace, owner);
   }
   return block;
 }
@@ -771,7 +961,7 @@ function renderShowBlock(element, block, parent, namespace, owner) {
   let initialized = false;
   return effect(() => {
     clearChildren(block);
-    const when = readReactive(element.props.when);
+    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);
     if (initialized) {
@@ -785,7 +975,7 @@ function renderForBlock(element, block, parent, namespace, owner) {
   let records = [];
   return effect(() => {
     const props = element.props;
-    const items = readReactive(props.each);
+    const items = readReactive2(props.each);
     const list = Array.isArray(items) ? items : [];
     const renderChild = props.children;
     if (typeof renderChild !== "function") {
@@ -797,6 +987,19 @@ function renderForBlock(element, block, parent, namespace, owner) {
       initialized = true;
       return;
     }
+    if (list.length === 0) {
+      clearChildren(block);
+      records = [];
+      block.children = renderBlockContent(props.fallback, parent, block.endAnchor, namespace, owner);
+      if (initialized) {
+        fireMountedAndQueueUpdated(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (records.length === 0 && block.children.length > 0) {
+      clearChildren(block);
+    }
     const oldByKey = new Map;
     for (const record of records) {
       oldByKey.set(record.key, record);
@@ -836,6 +1039,137 @@ function renderForBlock(element, block, parent, namespace, owner) {
     initialized = true;
   });
 }
+function renderSwitchBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  return effect(() => {
+    clearChildren(block);
+    const content = withOptionalInstance(owner, () => resolveSwitchContent(element));
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderIndexBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let records = [];
+  return effect(() => {
+    const props = element.props;
+    const items = readReactive2(props.each);
+    const list = Array.isArray(items) ? items : [];
+    const renderChild = props.children;
+    if (typeof renderChild !== "function") {
+      clearChildren(block);
+      records = [];
+      if (initialized) {
+        queueUpdatedHooks(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (list.length === 0) {
+      clearChildren(block);
+      records = [];
+      block.children = renderBlockContent(props.fallback, parent, block.endAnchor, namespace, owner);
+      if (initialized) {
+        fireMountedAndQueueUpdated(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (records.length === 0 && block.children.length > 0) {
+      clearChildren(block);
+    }
+    for (let index = 0;index < list.length; index++) {
+      const existing = records[index];
+      if (existing) {
+        existing.item.value = list[index];
+        continue;
+      }
+      const itemSignal = signal(list[index]);
+      const record = {
+        item: itemSignal,
+        mounted: withOptionalInstance(owner, () => renderNodeToDOM(renderChild(() => itemSignal.value, index), parent, block.endAnchor, namespace))
+      };
+      records.push(record);
+    }
+    while (records.length > list.length) {
+      const removed = records.pop();
+      removeMountedNode(removed.mounted);
+    }
+    block.children = records.map((record) => record.mounted);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderKeyBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let hasKey = false;
+  let currentKey;
+  return effect(() => {
+    const key = readReactive2(element.props.when);
+    if (hasKey && Object.is(currentKey, key)) {
+      return;
+    }
+    currentKey = key;
+    hasKey = true;
+    clearChildren(block);
+    const content = withOptionalInstance(owner, () => resolveKeyChildren(element, key));
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderDynamicBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let hasTag = false;
+  let currentTag;
+  return effect(() => {
+    const tag = readReactive2(element.props.component);
+    if (hasTag && Object.is(currentTag, tag)) {
+      return;
+    }
+    currentTag = tag;
+    hasTag = true;
+    clearChildren(block);
+    const content = tag ? createDynamicElement(element, tag) : null;
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderPortal(element, parent, anchor, namespace) {
+  const placeholder = domOps.createComment("Sinwan-p");
+  insertNode(parent, placeholder, anchor);
+  const owner = getCurrentInstance();
+  let disposeEffect = () => {};
+  const portal = {
+    type: "portal",
+    anchor: placeholder,
+    children: [],
+    dispose: () => disposeEffect()
+  };
+  let initialized = false;
+  disposeEffect = effect(() => {
+    clearPortalChildren(portal);
+    const target = resolvePortalTarget(element.props.mount);
+    if (target) {
+      portal.children = renderBlockContent(element.props.children ?? element.children, target, null, namespace, owner);
+    }
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+  return portal;
+}
 function resolveShowChildren(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -843,6 +1177,47 @@ function resolveShowChildren(element, 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);
+  return {
+    tag,
+    props,
+    children
+  };
+}
 function renderBlockContent(content, parent, anchor, namespace, owner) {
   if (content == null || typeof content === "boolean") {
     return [];
@@ -856,6 +1231,12 @@ function clearChildren(block) {
   }
   block.children = [];
 }
+function clearPortalChildren(portal) {
+  for (const child of portal.children) {
+    removeMountedNode(child);
+  }
+  portal.children = [];
+}
 function moveBeforeEnd(parent, mounted, endAnchor) {
   for (const node of getMountedDomNodes(mounted)) {
     domOps.insertBefore(parent, node, endAnchor);
@@ -870,8 +1251,42 @@ function fireMountedAndQueueUpdated(owner) {
 function withOptionalInstance(owner, fn) {
   return owner ? withInstance(owner, fn) : fn();
 }
-function readReactive(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+function readReactive2(value) {
+  return resolve(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;
+}
+function resolvePortalTarget(value) {
+  const target = readReactive2(value);
+  if (target == null) {
+    return typeof document === "undefined" ? null : document.body;
+  }
+  if (typeof target === "string") {
+    return document.querySelector(target);
+  }
+  if (typeof target === "function") {
+    return target();
+  }
+  if (typeof target === "object" && "nodeType" in target) {
+    return target;
+  }
+  return null;
 }
 function insertNode(parent, child, anchor) {
   if (anchor) {
@@ -905,10 +1320,13 @@ function renderElementToDOM(element, parent, anchor = null, namespace = null) {
   if (tag === "" || tag === Fragment) {
     return renderFragmentToDOM(children, parent, anchor, namespace);
   }
-  if (tag === Show || tag === For) {
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    return renderElementToDOM(tag(props), parent, anchor, namespace);
+  }
+  if (tag === Visible) {
     return renderElementToDOM(tag(props), parent, anchor, namespace);
   }
-  if (isShowElement(element) || isForElement(element)) {
+  if (isShowElement(element) || isForElement(element) || isSwitchElement(element) || isIndexElement(element) || isKeyElement(element) || isDynamicElement(element) || isPortalElement(element)) {
     return renderControlFlowToDOM(element, parent, anchor, namespace);
   }
   if (typeof tag === "function") {
@@ -1055,19 +1473,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);
@@ -1104,6 +1511,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);
@@ -1221,13 +1659,44 @@ function isSafeHtml(value) {
   return value instanceof HtmlEscapedString;
 }
 
-// src/server/renderer.ts
-var componentCache = new WeakMap;
-var pageRegistry = new Map;
-function registerPage(name, page) {
-  pageRegistry.set(name, page);
-}
-function getPage(name) {
+// src/server/attribute-utils.ts
+var PROP_ALIASES2 = {
+  className: "class",
+  htmlFor: "for",
+  tabIndex: "tabindex",
+  crossOrigin: "crossorigin"
+};
+function renderServerAttribute(key, value) {
+  const attrName = PROP_ALIASES2[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/server/renderer.ts
+var componentCache = new WeakMap;
+var pageRegistry = new Map;
+function registerPage(name, page) {
+  pageRegistry.set(name, page);
+}
+function getPage(name) {
   return pageRegistry.get(name);
 }
 function hasPage(name) {
@@ -1268,13 +1737,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 = readReactive2(props.when);
+    const when = readReactive3(props.when);
     return renderToString(when ? resolveShowChildren2(element, when) : props.fallback);
   }
   if (isForElement(element)) {
     return renderForElement(element);
   }
+  if (isSwitchElement(element)) {
+    return renderToString(resolveSwitchContent2(element));
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive3(props.when);
+    return renderToString(when ? resolveMatchChildren2(element, when) : null);
+  }
+  if (isIndexElement(element)) {
+    return renderIndexElement(element);
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive3(props.when);
+    return renderToString(resolveKeyChildren2(element, key));
+  }
+  if (isDynamicElement(element)) {
+    const tag2 = readReactive3(props.component);
+    const dynamic = createDynamicElement2(element, tag2);
+    return dynamic ? renderElement(dynamic) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
   if (typeof tag === "function") {
     const result = await tag(props);
     return renderToString(result);
@@ -1314,17 +1811,10 @@ function renderAttributes(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;
-    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;
 }
@@ -1340,13 +1830,69 @@ function isSlots(children) {
 }
 async function renderForElement(element) {
   const props = element.props;
-  const each = readReactive2(props.each);
+  const each = readReactive3(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 = readReactive3(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 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 resolveShowChildren2(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -1354,9 +1900,27 @@ function resolveShowChildren2(element, value) {
   }
   return children;
 }
-function readReactive2(value) {
+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/hydration/markers.ts
 var COMP_ID_ATTR = "data-sinwan-id";
 var COMP_ID_PREFIX = "c";
@@ -1481,8 +2045,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 = readReactive3(props.when);
+    const when = readReactive4(props.when);
     await streamNode(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder);
     return;
   }
@@ -1490,6 +2062,35 @@ async function streamElement(element, controller, encoder) {
     await streamForElement(element, controller, encoder);
     return;
   }
+  if (isSwitchElement(element)) {
+    await streamNode(resolveSwitchContent3(element), controller, encoder);
+    return;
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive4(props.when);
+    await streamNode(when ? resolveMatchChildren3(element, when) : null, controller, encoder);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamIndexElement(element, controller, encoder);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive4(props.when);
+    await streamNode(resolveKeyChildren3(element, key), controller, encoder);
+    return;
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive4(props.component);
+    const dynamic = createDynamicElement3(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);
@@ -1524,16 +2125,10 @@ function renderAttributes2(props) {
     if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
       continue;
     }
-    const resolvedValue = readReactive3(value);
+    const resolvedValue = readReactive4(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;
 }
@@ -1578,12 +2173,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 = readReactive3(props.when);
+    const when = readReactive4(props.when);
     await streamHydratableNodeToController(when ? resolveShowChildren3(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
     return;
   }
@@ -1591,6 +2190,35 @@ async function streamHydratableElement(element, controller, encoder, ctx, isComp
     await streamHydratableForElement(element, controller, encoder, ctx);
     return;
   }
+  if (isSwitchElement(element)) {
+    await streamHydratableNodeToController(resolveSwitchContent3(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);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamHydratableIndexElement(element, controller, encoder, ctx);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive4(props.when);
+    await streamHydratableNodeToController(resolveKeyChildren3(element, key), controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive4(props.component);
+    const dynamic = createDynamicElement3(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;
@@ -1633,14 +2261,42 @@ async function streamHydratableIntrinsic(tag, props, children, controller, encod
 }
 async function streamHydratableForElement(element, controller, encoder, ctx) {
   const props = element.props;
-  const each = readReactive3(props.each);
+  const each = readReactive4(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 = readReactive4(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) {
@@ -1655,15 +2311,10 @@ function renderHydratableAttributes(props, ctx, isComponentRoot) {
       eventParts.push(`${toEventName(key)}:${ctx.eventIndex++}`);
       continue;
     }
-    const resolvedValue = readReactive3(value);
+    const resolvedValue = readReactive4(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(",")}"`;
@@ -1675,14 +2326,42 @@ function enqueue(controller, encoder, html) {
 }
 async function streamForElement(element, controller, encoder) {
   const props = element.props;
-  const each = readReactive3(props.each);
+  const each = readReactive4(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 = readReactive4(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 resolveShowChildren3(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -1690,9 +2369,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;
+}
 // src/server/hydration-markers.ts
 function createHydrationContext() {
   return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
@@ -1762,17 +2500,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 = readReactive4(props.when);
+    const when = readReactive5(props.when);
     const content = when ? resolveShowChildren4(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);
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive5(props.when);
+    return renderNodeMaybeRoot(when ? resolveMatchChildren4(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);
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive5(props.component);
+    const dynamic = createDynamicElement4(element, dynamicTag);
+    return dynamic ? renderElementH(dynamic, ctx, isComponentRoot) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
   if (typeof tag === "function") {
     return renderComponentH(tag, props, ctx);
   }
@@ -1819,13 +2582,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(",")}"`;
@@ -1848,12 +2605,26 @@ function renderNodeMaybeRoot(node, ctx, isComponentRoot) {
 }
 function renderForElementH(element, ctx) {
   const props = element.props;
-  const each = readReactive4(props.each);
+  const each = readReactive5(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 = readReactive5(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 resolveShowChildren4(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -1861,9 +2632,68 @@ function resolveShowChildren4(element, value) {
   }
   return children;
 }
-function readReactive4(value) {
+function resolveSwitchContent4(element) {
+  const props = element.props;
+  const children = normalizeContent4(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement4(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive5(match.props.when);
+    if (when) {
+      return resolveMatchChildren4(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren4(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren4(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement4(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent4(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive5(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
+function normalizeContent4(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike4(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement4(value) {
+  if (!isElementLike4(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
+}
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
@@ -1910,25 +2740,19 @@ __export(exports_src, {
   createComponent: () => createComponent,
   computed: () => computed,
   batch: () => batch,
+  Visible: () => Visible,
+  Switch: () => Switch,
   Show: () => Show,
+  Portal: () => Portal,
+  Match: () => Match,
+  Key: () => Key,
+  Index: () => Index,
   HtmlEscapedString: () => HtmlEscapedString,
   Fragment: () => Fragment,
-  For: () => For
+  For: () => For,
+  Dynamic: () => Dynamic
 });
 module.exports = __toCommonJS(exports_src);
-// src/reactivity/batch.ts
-var batchDepth = 0;
-function batch(fn) {
-  batchDepth++;
-  try {
-    fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flushSync();
-    }
-  }
-}
 // src/component/lifecycle.ts
 function onMounted(fn) {
   const instance = getCurrentInstance();
@@ -2081,10 +2905,16 @@ function hydrateElement(element, cursor) {
   if (tag === "") {
     return hydrateArray(children, cursor);
   }
-  if (tag === Show || tag === For) {
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
+    return hydrateElement(tag(props), cursor);
+  }
+  if (tag === Visible) {
     return hydrateElement(tag(props), cursor);
   }
-  if (isShowElement(element) || isForElement(element)) {
+  if (isPortalElement(element)) {
+    return renderControlFlowToDOM(element, cursor.parent, cursor.current, null);
+  }
+  if (isShowElement(element) || isForElement(element) || isSwitchElement(element) || isIndexElement(element) || isKeyElement(element) || isDynamicElement(element)) {
     return hydrateControlFlow(element, cursor);
   }
   if (typeof tag === "function") {
@@ -2127,20 +2957,13 @@ function hydrateAttributes(el, props) {
   const disposers = [];
   const owner = getCurrentInstance();
   for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "key" || key === "ref" || isEventProp(key))
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key))
       continue;
     if (isSignal(value) || isComputed(value)) {
+      const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        const v = value.value;
-        const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-        if (v == null || v === false) {
-          el.removeAttribute(attrName);
-        } else if (v === true) {
-          el.setAttribute(attrName, "");
-        } else {
-          el.setAttribute(attrName, String(v));
-        }
+        setSingleAttribute(el, key, value.value, state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -2153,16 +2976,34 @@ function hydrateAttributes(el, props) {
 }
 function hydrateControlFlow(element, cursor) {
   if (isShowElement(element)) {
-    const when = readReactive5(element.props.when);
+    const when = readReactive6(element.props.when);
     const content = when ? resolveShowChildren5(element, when) : element.props.fallback;
     return hydrateContent(content, cursor);
   }
   if (isForElement(element)) {
     const props = element.props;
-    const items = readReactive5(props.each);
-    const children = Array.isArray(items) && typeof props.children === "function" ? items.map((item, index) => props.children(item, () => index)) : [];
+    const items = readReactive6(props.each);
+    const children = Array.isArray(items) && typeof props.children === "function" ? items.map((item, index) => props.children(item, () => index)) : props.fallback ? [props.fallback] : [];
+    return hydrateArray(children, cursor);
+  }
+  if (isSwitchElement(element)) {
+    return hydrateContent(resolveSwitchContent5(element), cursor);
+  }
+  if (isIndexElement(element)) {
+    const props = element.props;
+    const items = readReactive6(props.each);
+    const children = Array.isArray(items) && typeof props.children === "function" ? items.map((item, index) => props.children(() => item, index)) : props.fallback ? [props.fallback] : [];
     return hydrateArray(children, cursor);
   }
+  if (isKeyElement(element)) {
+    const key = readReactive6(element.props.when);
+    return hydrateContent(resolveKeyChildren5(element, key), cursor);
+  }
+  if (isDynamicElement(element)) {
+    const tag = readReactive6(element.props.component);
+    const dynamic = createDynamicElement5(element, tag);
+    return dynamic ? hydrateElement(dynamic, cursor) : hydrateArray([], cursor);
+  }
   return hydrateArray(element.children, cursor);
 }
 function hydrateContent(content, cursor) {
@@ -2178,9 +3019,68 @@ function resolveShowChildren5(element, value) {
   }
   return children;
 }
-function readReactive5(value) {
+function resolveSwitchContent5(element) {
+  const props = element.props;
+  const children = normalizeContent5(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement5(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive6(match.props.when);
+    if (when) {
+      return resolveMatchChildren5(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren5(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren5(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement5(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent5(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive6(value) {
   return isSignal(value) || isComputed(value) ? value.value : value;
 }
+function normalizeContent5(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike5(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement5(value) {
+  if (!isElementLike5(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
+}
 function applyRef2(el, ref) {
   const value = ref;
   if (!value) {
@@ -2284,5 +3184,5 @@ function hydrate(component, container, props) {
   };
 }
 
-//# debugId=82414CC0A24D81DC64756E2164756E21
+//# debugId=446E2FDDC310248664756E2164756E21
 //# sourceMappingURL=index.development.js.map