sinwan 0.1.0 → 1.1.0

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

@@ -40,22 +40,12 @@ function buildElement(type, props, children) {
   if (type === Fragment) {
     return { tag: "", props: {}, children };
   }
-  if (typeof type === "function") {
-    if (type._SinwanComponent || type._SinwanPage) {
-      const result2 = type(props);
-      if (result2 && typeof result2 === "object" && "tag" in result2) {
-        return result2;
-      }
-      return { tag: "", props: {}, children: normalizeChildren(result2) };
-    }
-    const result = type(props);
-    if (result && typeof result === "object" && "tag" in result) {
-      return result;
+  if (typeof type === "function" || typeof type === "string") {
+    const finalProps = props ?? {};
+    if (children.length > 0 && finalProps.children === undefined) {
+      finalProps.children = children.length === 1 ? children[0] : children;
     }
-    return { tag: "", props: {}, children: normalizeChildren(result) };
-  }
-  if (typeof type === "string") {
-    return { tag: type, props: props || {}, children };
+    return { tag: type, props: finalProps, children };
   }
   return { tag: "", props: {}, children };
 }
@@ -109,221 +99,37 @@ 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) {
-  return pageRegistry.get(name);
-}
-function hasPage(name) {
-  return pageRegistry.has(name);
-}
-async function renderPage(name, data) {
-  const page = getPage(name);
-  if (!page) {
-    throw new Error(`Page "${name}" not found in registry`);
-  }
-  const element = await page(data);
-  return renderToString(element);
-}
-async function renderToString(node) {
-  if (node == null || typeof node === "boolean") {
+// src/server/attribute-utils.ts
+var PROP_ALIASES = {
+  className: "class",
+  htmlFor: "for",
+  tabIndex: "tabindex",
+  crossOrigin: "crossorigin"
+};
+function renderServerAttribute(key, value) {
+  const attrName = PROP_ALIASES[key] ?? key;
+  if (value == null || value === false) {
     return "";
   }
-  if (typeof node === "string") {
-    return escapeHtml(node);
-  }
-  if (typeof node === "number") {
-    return String(node);
-  }
-  if (node instanceof HtmlEscapedString) {
-    return node.value;
-  }
-  if (Array.isArray(node)) {
-    const results = await Promise.all(node.map((child) => renderToString(child)));
-    return results.join("");
-  }
-  if (node instanceof Promise) {
-    return renderElement(await node);
-  }
-  return renderElement(node);
-}
-async function renderElement(element) {
-  const { tag, props, children } = element;
-  if (typeof tag === "function") {
-    const result = await tag(props);
-    return renderToString(result);
-  }
-  if (typeof tag === "string") {
-    return renderIntrinsicElement(tag, props, children);
-  }
-  return renderToString(children);
-}
-var VOID_ELEMENTS2 = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-async function renderIntrinsicElement(tag, props, children) {
-  const attrs = renderAttributes(props);
-  if (VOID_ELEMENTS2.has(tag)) {
-    return attrs ? `<${tag}${attrs}>` : `<${tag}>`;
-  }
-  const childrenHtml = await renderChildren(children, props);
-  return attrs ? `<${tag}${attrs}>${childrenHtml}</${tag}>` : `<${tag}>${childrenHtml}</${tag}>`;
-}
-function renderAttributes(props) {
-  let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children")
-      continue;
-    if (value == null || value === false)
-      continue;
-    if (value === true) {
-      attrs += ` ${key}`;
-      continue;
-    }
-    if (key === "dangerouslySetInnerHTML") {
-      continue;
-    }
-    const attrName = key === "className" ? "class" : key;
-    const finalName = attrName === "htmlFor" ? "for" : attrName;
-    const attrValue = escapeHtml(String(value));
-    attrs += ` ${finalName}="${attrValue}"`;
-  }
-  return attrs;
-}
-async function renderChildren(children, props) {
-  const dangerous = props.dangerouslySetInnerHTML;
-  if (dangerous && typeof dangerous.__html === "string") {
-    return dangerous.__html;
-  }
-  return renderToString(children);
-}
-function isSlots(children) {
-  return children != null && typeof children === "object" && !Array.isArray(children) && !(children instanceof HtmlEscapedString);
-}
-// src/server/stream.ts
-var VOID_ELEMENTS3 = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-]);
-function streamPage(page, data) {
-  const encoder = new TextEncoder;
-  return new ReadableStream({
-    async start(controller) {
-      try {
-        const element = await page(data);
-        await streamNode(element, controller, encoder);
-        controller.close();
-      } catch (error) {
-        controller.error(error);
-      }
-    }
-  });
-}
-async function streamNode(node, controller, encoder) {
-  if (node == null || typeof node === "boolean") {
-    return;
-  }
-  if (typeof node === "string") {
-    controller.enqueue(encoder.encode(escapeHtml(node)));
-    return;
-  }
-  if (typeof node === "number") {
-    controller.enqueue(encoder.encode(String(node)));
-    return;
-  }
-  if (node instanceof HtmlEscapedString) {
-    controller.enqueue(encoder.encode(node.value));
-    return;
-  }
-  if (Array.isArray(node)) {
-    for (const child of node) {
-      await streamNode(child, controller, encoder);
-    }
-    return;
-  }
-  if (node instanceof Promise) {
-    const resolved = await node;
-    await streamElement(resolved, controller, encoder);
-    return;
+  if (value === true) {
+    return ` ${attrName}`;
   }
-  await streamElement(node, controller, encoder);
+  const attrValue = attrName === "class" && typeof value === "object" ? stringifyClass(value) : attrName === "style" && typeof value === "object" ? stringifyStyle(value) : String(value);
+  return ` ${attrName}="${escapeHtml(attrValue)}"`;
 }
-async function streamElement(element, controller, encoder) {
-  const { tag, props, children } = element;
-  if (typeof tag === "function") {
-    const result = await tag(props);
-    await streamNode(result, controller, encoder);
-    return;
-  }
-  if (typeof tag === "string") {
-    await streamIntrinsicElement(tag, props, children, controller, encoder);
-    return;
+function stringifyClass(value) {
+  if (Array.isArray(value)) {
+    return value.filter(Boolean).join(" ");
   }
-  await streamNode(children, controller, encoder);
+  return Object.entries(value).filter(([, enabled]) => Boolean(enabled)).map(([name]) => name).join(" ");
 }
-async function streamIntrinsicElement(tag, props, children, controller, encoder) {
-  const attrs = renderAttributes2(props);
-  const dangerous = props.dangerouslySetInnerHTML;
-  if (VOID_ELEMENTS3.has(tag)) {
-    const html = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
-    controller.enqueue(encoder.encode(html));
-    return;
-  }
-  const openTag = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
-  controller.enqueue(encoder.encode(openTag));
-  if (dangerous && typeof dangerous.__html === "string") {
-    controller.enqueue(encoder.encode(dangerous.__html));
-  } else {
-    await streamNode(children, controller, encoder);
-  }
-  controller.enqueue(encoder.encode(`</${tag}>`));
+function stringifyStyle(value) {
+  return Object.entries(value).filter(([, val]) => val != null && val !== false).map(([prop, val]) => `${toKebabCase(prop)}:${String(val)}`).join(";");
 }
-function renderAttributes2(props) {
-  let attrs = "";
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "dangerouslySetInnerHTML")
-      continue;
-    if (value == null || value === false)
-      continue;
-    if (value === true) {
-      attrs += ` ${key}`;
-      continue;
-    }
-    const attrName = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
-    const attrValue = escapeHtml(String(value));
-    attrs += ` ${attrName}="${attrValue}"`;
-  }
-  return attrs;
+function toKebabCase(value) {
+  return value.includes("-") ? value : value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 }
+
 // src/reactivity/scheduler.ts
 var pendingEffects = new Set;
 var flushScheduled = false;
@@ -566,79 +372,68 @@ function isComputed(value) {
   return value != null && typeof value === "object" && COMPUTED_BRAND in value;
 }
 
-// src/hydration/markers.ts
-var COMP_ID_ATTR = "data-sinwan-id";
-var COMP_ID_PREFIX = "c";
-var TEXT_MARKER_OPEN = "sinwan-t:";
-var TEXT_MARKER_CLOSE = "/sinwan-t";
-var EVENT_ATTR = "data-sinwan-ev";
-function compId(index) {
-  return `${COMP_ID_PREFIX}${index}`;
-}
-function textMarkerOpen(index) {
-  return `<!--${TEXT_MARKER_OPEN}${index}-->`;
+// src/renderer/dom-ops.ts
+function createDefaultDOMOps() {
+  return {
+    createElement(tag) {
+      return document.createElement(tag);
+    },
+    createElementNS(namespace, tag) {
+      return document.createElementNS(namespace, tag);
+    },
+    createTextNode(text) {
+      return document.createTextNode(text);
+    },
+    createComment(text) {
+      return document.createComment(text);
+    },
+    setAttribute(el, key, value) {
+      el.setAttribute(key, value);
+    },
+    removeAttribute(el, key) {
+      el.removeAttribute(key);
+    },
+    setProperty(el, key, value) {
+      el[key] = value;
+    },
+    insertBefore(parent, child, anchor) {
+      parent.insertBefore(child, anchor);
+    },
+    appendChild(parent, child) {
+      parent.appendChild(child);
+    },
+    remove(node) {
+      node.parentNode?.removeChild(node);
+    },
+    setTextContent(node, text) {
+      node.data = text;
+    },
+    addEventListener(el, event, handler) {
+      el.addEventListener(event, handler);
+    },
+    removeEventListener(el, event, handler) {
+      el.removeEventListener(event, handler);
+    },
+    parentNode(node) {
+      return node.parentNode;
+    },
+    nextSibling(node) {
+      return node.nextSibling;
+    }
+  };
 }
-function textMarkerCloseStr() {
-  return `<!--${TEXT_MARKER_CLOSE}-->`;
+var defaultDOMOps = createDefaultDOMOps();
+var domOps = { ...defaultDOMOps };
+function setDOMOps(overrides) {
+  Object.assign(domOps, overrides);
 }
-function parseTextOpenMarker(node) {
-  const data = node.data;
-  if (data.startsWith(TEXT_MARKER_OPEN)) {
-    const idx = parseInt(data.slice(TEXT_MARKER_OPEN.length), 10);
-    return Number.isNaN(idx) ? -1 : idx;
+function resetDOMOps() {
+  for (const key of Object.keys(domOps)) {
+    delete domOps[key];
   }
-  return -1;
-}
-function isTextCloseMarker(node) {
-  return node.data === TEXT_MARKER_CLOSE;
+  Object.assign(domOps, defaultDOMOps);
 }
 
-// src/renderer/dom-ops.ts
-var domOps = {
-  createElement(tag) {
-    return document.createElement(tag);
-  },
-  createTextNode(text) {
-    return document.createTextNode(text);
-  },
-  createComment(text) {
-    return document.createComment(text);
-  },
-  setAttribute(el, key, value) {
-    el.setAttribute(key, value);
-  },
-  removeAttribute(el, key) {
-    el.removeAttribute(key);
-  },
-  setProperty(el, key, value) {
-    el[key] = value;
-  },
-  insertBefore(parent, child, anchor) {
-    parent.insertBefore(child, anchor);
-  },
-  appendChild(parent, child) {
-    parent.appendChild(child);
-  },
-  remove(node) {
-    node.parentNode?.removeChild(node);
-  },
-  setTextContent(node, text) {
-    node.data = text;
-  },
-  addEventListener(el, event, handler) {
-    el.addEventListener(event, handler);
-  },
-  removeEventListener(el, event, handler) {
-    el.removeEventListener(event, handler);
-  },
-  parentNode(node) {
-    return node.parentNode;
-  },
-  nextSibling(node) {
-    return node.nextSibling;
-  }
-};
-
 // src/renderer/events.ts
 function isEventProp(key) {
   return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
@@ -665,77 +460,991 @@ function bindEvents(el, props) {
   }
   return cleanups;
 }
-
-// src/component/instance.ts
-var uidCounter = 0;
-function createComponentInstance(component, props, parent) {
+// 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 {
-    uid: uidCounter++,
-    component,
+    tag: SHOW_TYPE,
     props,
-    element: null,
-    parent,
-    children: [],
-    effects: [],
-    _mountedHooks: [],
-    _unmountedHooks: [],
-    _updatedHooks: [],
-    _errorHooks: [],
-    provides: parent ? Object.create(parent.provides) : Object.create(null),
-    isMounted: false,
-    isUnmounted: false
+    children: []
   };
 }
-var currentInstance = null;
-function getCurrentInstance() {
-  return currentInstance;
+function For(props) {
+  return {
+    tag: FOR_TYPE,
+    props,
+    children: []
+  };
 }
-function setCurrentInstance(instance) {
+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/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) {
+  return pageRegistry.has(name);
+}
+async function renderPage(name, data) {
+  const page = getPage(name);
+  if (!page) {
+    throw new Error(`Page "${name}" not found in registry`);
+  }
+  const element = await page(data);
+  return renderToString(element);
+}
+async function renderToString(node) {
+  if (node == null || typeof node === "boolean") {
+    return "";
+  }
+  if (typeof node === "string") {
+    return escapeHtml(node);
+  }
+  if (typeof node === "number") {
+    return String(node);
+  }
+  if (node instanceof HtmlEscapedString) {
+    return node.value;
+  }
+  if (isSignal(node) || isComputed(node)) {
+    return escapeHtml(String(node.value));
+  }
+  if (Array.isArray(node)) {
+    const results = await Promise.all(node.map((child) => renderToString(child)));
+    return results.join("");
+  }
+  if (node instanceof Promise) {
+    return renderElement(await node);
+  }
+  return renderElement(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);
+    return renderToString(when ? resolveShowChildren(element, when) : props.fallback);
+  }
+  if (isForElement(element)) {
+    return renderForElement(element);
+  }
+  if (isSwitchElement(element)) {
+    return renderToString(resolveSwitchContent(element));
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive2(props.when);
+    return renderToString(when ? resolveMatchChildren(element, when) : null);
+  }
+  if (isIndexElement(element)) {
+    return renderIndexElement(element);
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive2(props.when);
+    return renderToString(resolveKeyChildren(element, key));
+  }
+  if (isDynamicElement(element)) {
+    const tag2 = readReactive2(props.component);
+    const dynamic = createDynamicElement(element, tag2);
+    return dynamic ? renderElement(dynamic) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
+  if (typeof tag === "function") {
+    const result = await tag(props);
+    return renderToString(result);
+  }
+  if (typeof tag === "string") {
+    return renderIntrinsicElement(tag, props, children);
+  }
+  return renderToString(children);
+}
+var VOID_ELEMENTS2 = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+async function renderIntrinsicElement(tag, props, children) {
+  const attrs = renderAttributes(props);
+  if (VOID_ELEMENTS2.has(tag)) {
+    return attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+  }
+  const childrenHtml = await renderChildren(children, props);
+  return attrs ? `<${tag}${attrs}>${childrenHtml}</${tag}>` : `<${tag}>${childrenHtml}</${tag}>`;
+}
+function renderAttributes(props) {
+  let attrs = "";
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
+      continue;
+    }
+    const resolvedValue = readReactive2(value);
+    if (resolvedValue == null || resolvedValue === false)
+      continue;
+    attrs += renderServerAttribute(key, resolvedValue);
+  }
+  return attrs;
+}
+async function renderChildren(children, props) {
+  const dangerous = props.dangerouslySetInnerHTML;
+  if (dangerous && typeof dangerous.__html === "string") {
+    return dangerous.__html;
+  }
+  return renderToString(children);
+}
+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 props.fallback ? renderToString(props.fallback) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(item, () => index))));
+  return rendered.join("");
+}
+async function renderIndexElement(element) {
+  const props = element.props;
+  const each = readReactive2(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderToString(props.fallback) : "";
+  }
+  const rendered = await Promise.all(each.map((item, index) => renderToString(props.children(() => item, index))));
+  return rendered.join("");
+}
+function resolveSwitchContent(element) {
+  const props = element.props;
+  const children = normalizeContent(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive2(match.props.when);
+    if (when) {
+      return resolveMatchChildren(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function resolveShowChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function readReactive2(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+function normalizeContent(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement(value) {
+  if (!isElementLike(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
+}
+// src/component/instance.ts
+var uidCounter = 0;
+function createComponentInstance(component, props, parent) {
+  return {
+    uid: uidCounter++,
+    component,
+    props,
+    element: null,
+    parent,
+    children: [],
+    effects: [],
+    _mountedHooks: [],
+    _unmountedHooks: [],
+    _updatedHooks: [],
+    _errorHooks: [],
+    provides: parent ? Object.create(parent.provides) : Object.create(null),
+    isMounted: false,
+    isUnmounted: false
+  };
+}
+var currentInstance = null;
+function getCurrentInstance() {
+  return currentInstance;
+}
+function setCurrentInstance(instance) {
   const prev = currentInstance;
   currentInstance = instance;
   return prev;
 }
-function fireMountedHooks(instance) {
-  for (const child of instance.children) {
-    fireMountedHooks(child);
+function withInstance(instance, fn) {
+  const prev = setCurrentInstance(instance);
+  try {
+    return fn();
+  } finally {
+    setCurrentInstance(prev);
+  }
+}
+function fireMountedHooks(instance) {
+  if (instance.isUnmounted) {
+    return;
+  }
+  for (const child of instance.children) {
+    fireMountedHooks(child);
+  }
+  if (!instance.isMounted) {
+    instance.isMounted = true;
+    for (const hook of instance._mountedHooks) {
+      hook();
+    }
+  }
+}
+function fireUnmountedHooks(instance) {
+  for (const child of instance.children) {
+    fireUnmountedHooks(child);
+  }
+  if (instance.isMounted && !instance.isUnmounted) {
+    instance.isUnmounted = true;
+    instance.isMounted = false;
+    for (const hook of instance._unmountedHooks) {
+      hook();
+    }
+    for (const dispose of instance.effects) {
+      dispose();
+    }
+    instance.effects.length = 0;
+  }
+}
+function fireUpdatedHooks(instance) {
+  for (const hook of instance._updatedHooks) {
+    hook();
+  }
+}
+var queuedUpdatedHooks = new Set;
+function queueUpdatedHooks(instance) {
+  if (!instance || !instance.isMounted || instance.isUnmounted || instance._updatedHooks.length === 0 || queuedUpdatedHooks.has(instance)) {
+    return;
+  }
+  queuedUpdatedHooks.add(instance);
+  nextTick(() => {
+    queuedUpdatedHooks.delete(instance);
+    if (instance.isMounted && !instance.isUnmounted) {
+      fireUpdatedHooks(instance);
+    }
+  });
+}
+function handleComponentError(instance, err) {
+  let current = instance;
+  while (current) {
+    if (current._errorHooks.length > 0) {
+      for (const hook of current._errorHooks) {
+        hook(err);
+      }
+      return;
+    }
+    current = current.parent;
+  }
+  console.error("[Sinwan] Unhandled component error:", err);
+}
+
+// src/hydration/markers.ts
+var COMP_ID_ATTR = "data-sinwan-id";
+var COMP_ID_PREFIX = "c";
+var TEXT_MARKER_OPEN = "sinwan-t:";
+var TEXT_MARKER_CLOSE = "/sinwan-t";
+var EVENT_ATTR = "data-sinwan-ev";
+function compId(index) {
+  return `${COMP_ID_PREFIX}${index}`;
+}
+function textMarkerOpen(index) {
+  return `<!--${TEXT_MARKER_OPEN}${index}-->`;
+}
+function textMarkerCloseStr() {
+  return `<!--${TEXT_MARKER_CLOSE}-->`;
+}
+function parseTextOpenMarker(node) {
+  const data = node.data;
+  if (data.startsWith(TEXT_MARKER_OPEN)) {
+    const idx = parseInt(data.slice(TEXT_MARKER_OPEN.length), 10);
+    return Number.isNaN(idx) ? -1 : idx;
+  }
+  return -1;
+}
+function isTextCloseMarker(node) {
+  return node.data === TEXT_MARKER_CLOSE;
+}
+
+// src/server/stream.ts
+function createHydratableStreamContext() {
+  return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
+}
+var VOID_ELEMENTS3 = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function streamPage(page, data) {
+  const encoder = new TextEncoder;
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        const element = await page(data);
+        await streamNode(element, controller, encoder);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
+}
+function streamHydratablePage(component, props) {
+  const encoder = new TextEncoder;
+  const ctx = createHydratableStreamContext();
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        await streamHydratableComponent(component, props ?? {}, controller, encoder, ctx, true);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
+}
+function streamHydratableNode(node) {
+  const encoder = new TextEncoder;
+  const ctx = createHydratableStreamContext();
+  return new ReadableStream({
+    async start(controller) {
+      try {
+        await streamHydratableNodeToController(node, controller, encoder, ctx);
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    }
+  });
+}
+async function streamNode(node, controller, encoder) {
+  if (node == null || typeof node === "boolean") {
+    return;
+  }
+  if (typeof node === "string") {
+    controller.enqueue(encoder.encode(escapeHtml(node)));
+    return;
+  }
+  if (typeof node === "number") {
+    controller.enqueue(encoder.encode(String(node)));
+    return;
+  }
+  if (node instanceof HtmlEscapedString) {
+    controller.enqueue(encoder.encode(node.value));
+    return;
+  }
+  if (isSignal(node) || isComputed(node)) {
+    controller.enqueue(encoder.encode(escapeHtml(String(node.value))));
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      await streamNode(child, controller, encoder);
+    }
+    return;
+  }
+  if (node instanceof Promise) {
+    const resolved = await node;
+    await streamElement(resolved, controller, encoder);
+    return;
+  }
+  await streamElement(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);
+    await streamNode(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder);
+    return;
+  }
+  if (isForElement(element)) {
+    await streamForElement(element, controller, encoder);
+    return;
+  }
+  if (isSwitchElement(element)) {
+    await streamNode(resolveSwitchContent2(element), controller, encoder);
+    return;
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive3(props.when);
+    await streamNode(when ? resolveMatchChildren2(element, when) : null, controller, encoder);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamIndexElement(element, controller, encoder);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive3(props.when);
+    await streamNode(resolveKeyChildren2(element, key), controller, encoder);
+    return;
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive3(props.component);
+    const dynamic = createDynamicElement2(element, dynamicTag);
+    if (dynamic) {
+      await streamElement(dynamic, controller, encoder);
+    }
+    return;
+  }
+  if (isPortalElement(element)) {
+    return;
+  }
+  if (typeof tag === "function") {
+    const result = await tag(props);
+    await streamNode(result, controller, encoder);
+    return;
+  }
+  if (typeof tag === "string") {
+    await streamIntrinsicElement(tag, props, children, controller, encoder);
+    return;
+  }
+  await streamNode(children, controller, encoder);
+}
+async function streamIntrinsicElement(tag, props, children, controller, encoder) {
+  const attrs = renderAttributes2(props);
+  const dangerous = props.dangerouslySetInnerHTML;
+  if (VOID_ELEMENTS3.has(tag)) {
+    const html = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+    controller.enqueue(encoder.encode(html));
+    return;
   }
-  if (!instance.isMounted) {
-    instance.isMounted = true;
-    for (const hook of instance._mountedHooks) {
-      hook();
+  const openTag = attrs ? `<${tag}${attrs}>` : `<${tag}>`;
+  controller.enqueue(encoder.encode(openTag));
+  if (dangerous && typeof dangerous.__html === "string") {
+    controller.enqueue(encoder.encode(dangerous.__html));
+  } else {
+    await streamNode(children, controller, encoder);
+  }
+  controller.enqueue(encoder.encode(`</${tag}>`));
+}
+function renderAttributes2(props) {
+  let attrs = "";
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML" || isEventProp(key)) {
+      continue;
     }
+    const resolvedValue = readReactive3(value);
+    if (resolvedValue == null || resolvedValue === false)
+      continue;
+    attrs += renderServerAttribute(key, resolvedValue);
   }
+  return attrs;
 }
-function fireUnmountedHooks(instance) {
-  for (const child of instance.children) {
-    fireUnmountedHooks(child);
+async function streamHydratableNodeToController(node, controller, encoder, ctx, isComponentRoot = false) {
+  if (node == null || typeof node === "boolean") {
+    return;
   }
-  if (instance.isMounted && !instance.isUnmounted) {
-    instance.isUnmounted = true;
-    instance.isMounted = false;
-    for (const hook of instance._unmountedHooks) {
-      hook();
+  if (typeof node === "string") {
+    enqueue(controller, encoder, escapeHtml(node));
+    return;
+  }
+  if (typeof node === "number") {
+    enqueue(controller, encoder, String(node));
+    return;
+  }
+  if (node instanceof HtmlEscapedString) {
+    enqueue(controller, encoder, node.value);
+    return;
+  }
+  if (isSignal(node) || isComputed(node)) {
+    const idx = ctx.textIndex++;
+    enqueue(controller, encoder, `${textMarkerOpen(idx)}${escapeHtml(String(node.value))}${textMarkerCloseStr()}`);
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
     }
-    for (const dispose of instance.effects) {
-      dispose();
+    return;
+  }
+  if (node instanceof Promise) {
+    await streamHydratableElement(await node, controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  await streamHydratableElement(node, controller, encoder, ctx, isComponentRoot);
+}
+async function streamHydratableElement(element, controller, encoder, ctx, isComponentRoot) {
+  const { tag, props, children } = element;
+  if (tag === "") {
+    for (const child of children) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
     }
-    instance.effects.length = 0;
+    return;
+  }
+  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);
+    await streamHydratableNodeToController(when ? resolveShowChildren2(element, when) : props.fallback, controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isForElement(element)) {
+    await streamHydratableForElement(element, controller, encoder, ctx);
+    return;
+  }
+  if (isSwitchElement(element)) {
+    await streamHydratableNodeToController(resolveSwitchContent2(element), controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive3(props.when);
+    await streamHydratableNodeToController(when ? resolveMatchChildren2(element, when) : null, controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  if (isIndexElement(element)) {
+    await streamHydratableIndexElement(element, controller, encoder, ctx);
+    return;
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive3(props.when);
+    await streamHydratableNodeToController(resolveKeyChildren2(element, key), controller, encoder, ctx, isComponentRoot);
+    return;
   }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive3(props.component);
+    const dynamic = createDynamicElement2(element, dynamicTag);
+    if (dynamic) {
+      await streamHydratableElement(dynamic, controller, encoder, ctx, isComponentRoot);
+    }
+    return;
+  }
+  if (isPortalElement(element)) {
+    return;
+  }
+  if (typeof tag === "function") {
+    await streamHydratableComponent(tag, props, controller, encoder, ctx, true);
+    return;
+  }
+  if (typeof tag === "string") {
+    await streamHydratableIntrinsic(tag, props, children, controller, encoder, ctx, isComponentRoot);
+    return;
+  }
+  await streamHydratableNodeToController(children, controller, encoder, ctx);
 }
-function handleComponentError(instance, err) {
-  let current = instance;
-  while (current) {
-    if (current._errorHooks.length > 0) {
-      for (const hook of current._errorHooks) {
-        hook(err);
-      }
-      return;
+async function streamHydratableComponent(component, props, controller, encoder, ctx, isComponentRoot) {
+  const parentInstance = getCurrentInstance();
+  const instance = createComponentInstance(component, props, parentInstance);
+  if (parentInstance) {
+    parentInstance.children.push(instance);
+  }
+  const prev = setCurrentInstance(instance);
+  try {
+    const result = await component(props);
+    await streamHydratableNodeToController(result, controller, encoder, ctx, isComponentRoot);
+  } finally {
+    setCurrentInstance(prev);
+  }
+}
+async function streamHydratableIntrinsic(tag, props, children, controller, encoder, ctx, isComponentRoot) {
+  const attrs = renderHydratableAttributes(props, ctx, isComponentRoot);
+  const dangerous = props.dangerouslySetInnerHTML;
+  enqueue(controller, encoder, attrs ? `<${tag}${attrs}>` : `<${tag}>`);
+  if (VOID_ELEMENTS3.has(tag)) {
+    return;
+  }
+  if (dangerous && typeof dangerous.__html === "string") {
+    enqueue(controller, encoder, dangerous.__html);
+  } else {
+    for (const child of children) {
+      await streamHydratableNodeToController(child, controller, encoder, ctx);
     }
-    current = current.parent;
   }
-  console.error("[Sinwan] Unhandled component error:", err);
+  enqueue(controller, encoder, `</${tag}>`);
+}
+async function streamHydratableForElement(element, controller, encoder, ctx) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamHydratableNodeToController(props.children(each[index], () => index), controller, encoder, ctx);
+  }
+}
+async function streamHydratableIndexElement(element, controller, encoder, ctx) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamHydratableNodeToController(props.fallback, controller, encoder, ctx);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamHydratableNodeToController(props.children(() => each[index], index), controller, encoder, ctx);
+  }
+}
+function renderHydratableAttributes(props, ctx, isComponentRoot) {
+  let attrs = "";
+  if (isComponentRoot) {
+    attrs += ` ${COMP_ID_ATTR}="${compId(ctx.componentIndex++)}"`;
+  }
+  const eventParts = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML") {
+      continue;
+    }
+    if (isEventProp(key)) {
+      eventParts.push(`${toEventName(key)}:${ctx.eventIndex++}`);
+      continue;
+    }
+    const resolvedValue = readReactive3(value);
+    if (resolvedValue == null || resolvedValue === false)
+      continue;
+    attrs += renderServerAttribute(key, resolvedValue);
+  }
+  if (eventParts.length > 0) {
+    attrs += ` ${EVENT_ATTR}="${eventParts.join(",")}"`;
+  }
+  return attrs;
+}
+function enqueue(controller, encoder, html) {
+  controller.enqueue(encoder.encode(html));
+}
+async function streamForElement(element, controller, encoder) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamNode(props.children(each[index], () => index), controller, encoder);
+  }
+}
+async function streamIndexElement(element, controller, encoder) {
+  const props = element.props;
+  const each = readReactive3(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  if (each.length === 0) {
+    if (props.fallback) {
+      await streamNode(props.fallback, controller, encoder);
+    }
+    return;
+  }
+  for (let index = 0;index < each.length; index++) {
+    await streamNode(props.children(() => each[index], index), controller, encoder);
+  }
+}
+function resolveShowChildren2(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveSwitchContent2(element) {
+  const props = element.props;
+  const children = normalizeContent2(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement2(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive3(match.props.when);
+    if (when) {
+      return resolveMatchChildren2(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren2(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren2(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement2(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent2(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive3(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+function normalizeContent2(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike2(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement2(value) {
+  if (!isElementLike2(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
 }
-
 // src/server/hydration-markers.ts
 function createHydrationContext() {
   return { componentIndex: 0, textIndex: 0, eventIndex: 0 };
@@ -744,13 +1453,16 @@ async function renderToHydratableString(component, props) {
   const ctx = createHydrationContext();
   const mergedProps = props ?? {};
   const instance = createComponentInstance(component, mergedProps, null);
-  setCurrentInstance(instance);
-  const result = await component(mergedProps);
-  setCurrentInstance(null);
-  if (result && typeof result === "object" && "tag" in result) {
-    return renderElementH(result, ctx, true);
+  const prev = setCurrentInstance(instance);
+  try {
+    const result = await component(mergedProps);
+    if (result && typeof result === "object" && "tag" in result) {
+      return renderElementH(result, ctx, true);
+    }
+    return renderNodeH(result, ctx);
+  } finally {
+    setCurrentInstance(prev);
   }
-  return renderNodeH(result, ctx);
 }
 async function renderNodeToHydratableString(node) {
   const ctx = createHydrationContext();
@@ -802,6 +1514,42 @@ function renderElementH(element, ctx, isComponentRoot) {
   if (tag === "") {
     return children.map((child) => renderNodeH(child, ctx)).join("");
   }
+  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 content = when ? resolveShowChildren3(element, when) : props.fallback;
+    return renderNodeMaybeRoot(content, ctx, isComponentRoot);
+  }
+  if (isForElement(element)) {
+    return renderForElementH(element, ctx);
+  }
+  if (isSwitchElement(element)) {
+    return renderNodeMaybeRoot(resolveSwitchContent3(element), ctx, isComponentRoot);
+  }
+  if (isMatchElement(element)) {
+    const when = readReactive4(props.when);
+    return renderNodeMaybeRoot(when ? resolveMatchChildren3(element, when) : null, ctx, isComponentRoot);
+  }
+  if (isIndexElement(element)) {
+    return renderIndexElementH(element, ctx);
+  }
+  if (isKeyElement(element)) {
+    const key = readReactive4(props.when);
+    return renderNodeMaybeRoot(resolveKeyChildren3(element, key), ctx, isComponentRoot);
+  }
+  if (isDynamicElement(element)) {
+    const dynamicTag = readReactive4(props.component);
+    const dynamic = createDynamicElement3(element, dynamicTag);
+    return dynamic ? renderElementH(dynamic, ctx, isComponentRoot) : "";
+  }
+  if (isPortalElement(element)) {
+    return "";
+  }
   if (typeof tag === "function") {
     return renderComponentH(tag, props, ctx);
   }
@@ -811,15 +1559,21 @@ function renderElementH(element, ctx, isComponentRoot) {
   return children.map((child) => renderNodeH(child, ctx)).join("");
 }
 function renderComponentH(component, props, ctx) {
-  const parentInstance = globalThis.__SinwanCurrentInstance;
-  const instance = createComponentInstance(component, props, null);
+  const parentInstance = getCurrentInstance();
+  const instance = createComponentInstance(component, props, parentInstance);
+  if (parentInstance) {
+    parentInstance.children.push(instance);
+  }
   const prev = setCurrentInstance(instance);
-  const result = component(props);
-  setCurrentInstance(prev);
-  if (result && typeof result === "object" && "tag" in result) {
-    return renderElementH(result, ctx, true);
+  try {
+    const result = component(props);
+    if (result && typeof result === "object" && "tag" in result) {
+      return renderElementH(result, ctx, true);
+    }
+    return renderNodeH(result, ctx);
+  } finally {
+    setCurrentInstance(prev);
   }
-  return renderNodeH(result, ctx);
 }
 function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
   let attrs = "";
@@ -828,8 +1582,9 @@ function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
   }
   const eventParts = [];
   for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "dangerouslySetInnerHTML")
+    if (key === "children" || key === "key" || key === "ref" || key === "dangerouslySetInnerHTML") {
       continue;
+    }
     if (isEventProp(key)) {
       const eventName = toEventName(key);
       eventParts.push(`${eventName}:${ctx.eventIndex++}`);
@@ -841,13 +1596,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(",")}"`;
@@ -862,8 +1611,107 @@ function renderIntrinsicH(tag, props, children, ctx, isComponentRoot) {
   const childrenHtml = children.map((child) => renderNodeH(child, ctx)).join("");
   return `<${tag}${attrs}>${childrenHtml}</${tag}>`;
 }
+function renderNodeMaybeRoot(node, ctx, isComponentRoot) {
+  if (isComponentRoot && node && typeof node === "object" && !Array.isArray(node) && "tag" in node) {
+    return renderElementH(node, ctx, true);
+  }
+  return renderNodeH(node, ctx);
+}
+function renderForElementH(element, ctx) {
+  const props = element.props;
+  const each = readReactive4(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  return each.map((item, index) => renderNodeH(props.children(item, () => index), ctx)).join("");
+}
+function renderIndexElementH(element, ctx) {
+  const props = element.props;
+  const each = readReactive4(props.each);
+  if (!Array.isArray(each) || typeof props.children !== "function") {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  if (each.length === 0) {
+    return props.fallback ? renderNodeH(props.fallback, ctx) : "";
+  }
+  return each.map((item, index) => renderNodeH(props.children(() => item, index), ctx)).join("");
+}
+function resolveShowChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveSwitchContent3(element) {
+  const props = element.props;
+  const children = normalizeContent3(props.children ?? element.children);
+  for (const child of children) {
+    const match = getMatchElement3(child);
+    if (!match) {
+      continue;
+    }
+    const when = readReactive4(match.props.when);
+    if (when) {
+      return resolveMatchChildren3(match, when);
+    }
+  }
+  return props.fallback;
+}
+function resolveMatchChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren3(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function createDynamicElement3(element, tag) {
+  if (typeof tag !== "string" && typeof tag !== "function") {
+    return null;
+  }
+  const { component, ...props } = element.props;
+  const children = normalizeContent3(props.children ?? element.children);
+  return {
+    tag,
+    props,
+    children
+  };
+}
+function readReactive4(value) {
+  return isSignal(value) || isComputed(value) ? value.value : value;
+}
+function normalizeContent3(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
+function isElementLike3(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
+function getMatchElement3(value) {
+  if (!isElementLike3(value)) {
+    return null;
+  }
+  if (isMatchElement(value)) {
+    return value;
+  }
+  return value.tag === Match ? Match(value.props) : null;
+}
 export {
   streamPage,
+  streamHydratablePage,
+  streamHydratableNode,
   renderToString,
   renderToHydratableString,
   renderPage,
@@ -874,5 +1722,5 @@ export {
   getPage
 };
 
-//# debugId=46FB02649D98C84264756E2164756E21
+//# debugId=46896ED83A2048E464756E2164756E21
 //# sourceMappingURL=index.development.js.map