sinwan 1.0.0 → 1.1.0

package/dist/cjs/index.development.js

@@ -578,9 +578,10 @@ function applyAttributes(el, props) {
     if (SKIP_PROPS.has(key) || isEventProp(key))
       continue;
     if (isSignal(value) || isComputed(value)) {
+      const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value);
+        setSingleAttribute(el, key, value.value, state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -593,10 +594,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 +606,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 +616,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;
@@ -643,10 +681,28 @@ function applyClass(el, value) {
   }
   domOps.setAttribute(el, "class", classStr);
 }
-
+// src/reactivity/batch.ts
+var batchDepth = 0;
+function batch(fn) {
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      flushSync();
+    }
+  }
+}
 // 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 +717,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 isSignal(value) || isComputed(value) ? value.value : 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 +847,8 @@ function getMountedDomNodes(node) {
       ];
     case "component":
       return node.children.flatMap((child) => getMountedDomNodes(child));
+    case "portal":
+      return [node.anchor];
   }
 }
 function unmountNode(node) {
@@ -733,6 +893,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 +914,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 +934,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 +949,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 +963,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 +975,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 +1027,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 +1165,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 +1219,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,9 +1239,43 @@ function fireMountedAndQueueUpdated(owner) {
 function withOptionalInstance(owner, fn) {
   return owner ? withInstance(owner, fn) : fn();
 }
-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;
+}
+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) {
     domOps.insertBefore(parent, child, anchor);
@@ -905,10 +1308,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") {
@@ -1221,6 +1627,37 @@ function isSafeHtml(value) {
   return value instanceof HtmlEscapedString;
 }
 
+// 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;
@@ -1268,13 +1705,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 +1779,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;
 }
@@ -1338,14 +1796,70 @@ async function renderChildren(children, props) {
 function isSlots(children) {
   return children != null && typeof children === "object" && !Array.isArray(children) && !(children instanceof HtmlEscapedString);
 }
-async function renderForElement(element) {
-  const props = element.props;
-  const each = readReactive2(props.each);
-  if (!Array.isArray(each) || typeof props.children !== "function") {
-    return "";
+async function renderForElement(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("");
+}
+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 rendered = await Promise.all(each.map((item, index) => renderToString(props.children(item, () => index))));
-  return rendered.join("");
+  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;
@@ -1354,9 +1868,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 +2013,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 +2030,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 +2093,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 +2141,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 +2158,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 +2229,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 +2279,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 +2294,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 +2337,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 +2468,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 +2550,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 +2573,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 +2600,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 +2708,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 +2873,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 +2925,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 +2944,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 +2987,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 +3152,5 @@ function hydrate(component, container, props) {
   };
 }
 
-//# debugId=82414CC0A24D81DC64756E2164756E21
+//# debugId=B2FFEB8D17EB811D64756E2164756E21
 //# sourceMappingURL=index.development.js.map