mikuru 1.0.20 → 1.0.22

package/dist/compiler/generateHydration.js

@@ -1,5 +1,6 @@
+import { createCompileError } from "./errors.js";
 import { compileTemplateExpression, parseForExpression, validateAssignableExpression } from "./parseExpression.js";
-export function generateHydration(descriptor, root) {
+export function generateHydration(descriptor, root, options = {}) {
     const context = {
         lines: [],
         index: 0,
@@ -8,11 +9,13 @@ export function generateHydration(descriptor, root) {
         filename: descriptor.filename
     };
     const script = splitScript(descriptor.script ?? "");
-    for (const importLine of script.imports) {
-        emit(context, 0, importLine);
+    if (options.includeImports !== false) {
+        for (const importLine of script.imports) {
+            emit(context, 0, importLine);
+        }
+        emit(context, 0, "import { effect, setAttribute, unwrap } from \"mikuru/runtime\";");
+        emit(context, 0, "");
     }
-    emit(context, 0, "import { effect, setAttribute, unwrap } from \"mikuru/runtime\";");
-    emit(context, 0, "");
     emit(context, 0, "export function hydrate(target, props = {}) {");
     emit(context, 1, `const __mikuru_componentInfo = { component: ${quote(descriptor.filename ?? "anonymous.mikuru")}, filename: ${quote(descriptor.filename ?? "anonymous.mikuru")} };`);
     emit(context, 1, "const __mikuru_cleanup = [];");
@@ -34,8 +37,23 @@ export function generateHydration(descriptor, root) {
     emit(context, 2, "},");
     emit(context, 2, "registerEffect: (fn) => Promise.resolve().then(fn)");
     emit(context, 1, "};");
-    emit(context, 1, "const __mikuru_warn = (message) => { if (typeof console !== \"undefined\" && console.warn) console.warn(`[Mikuru hydration] ${message}`); };");
+    emit(context, 1, "const __mikuru_emitDebug = (type, payload) => { const hook = globalThis.__MIKURU_DEVTOOLS__; if (!hook) return; const event = { type, timestamp: Date.now(), payload }; hook.events ??= []; hook.events.push(event); if (typeof hook.emit === \"function\") hook.emit(event); for (const listener of hook.listeners ?? []) { try { listener(event); } catch (error) { setTimeout(() => { throw error; }); } } };");
+    emit(context, 1, "const __mikuru_hydrationDiagnostic = (message, details = {}) => ({ ...__mikuru_componentInfo, phase: \"hydration\", message, ...details });");
+    emit(context, 1, "const __mikuru_warn = (message, details = {}) => { const diagnostic = __mikuru_hydrationDiagnostic(message, details); __mikuru_emitDebug(\"hydration:warning\", diagnostic); if (typeof console !== \"undefined\" && console.warn) console.warn(`[Mikuru hydration] ${message} (phase: ${diagnostic.phase}, component: ${diagnostic.component}, file: ${diagnostic.filename})`); };");
     emit(context, 1, "const __mikuru_describeNode = (node) => { if (!node) return \"missing\"; if (node.nodeType === 1) return `<${node.tagName?.toLowerCase?.() ?? \"element\"}>`; if (node.nodeType === 3) return `text(${JSON.stringify(node.nodeValue ?? \"\")})`; if (node.nodeType === 8) return `comment(${JSON.stringify(node.nodeValue ?? \"\")})`; return `nodeType(${node.nodeType})`; };");
+    emit(context, 1, "const __mikuru_restoreRegistrar = () => { if (__mikuru_previousRegistrar === undefined) { delete globalThis.__mikuru_currentRegistrar; } else { globalThis.__mikuru_currentRegistrar = __mikuru_previousRegistrar; } };");
+    emit(context, 1, "const __mikuru_recovery = {};");
+    emit(context, 1, "let __mikuru_recovered;");
+    emit(context, 1, "const __mikuru_recover = (message) => {");
+    emit(context, 2, "if (props.__mikuru_hydration?.recover === false) { __mikuru_warn(message + \".\"); return; }");
+    emit(context, 2, "__mikuru_warn(message + \"; remounting.\");");
+    emit(context, 2, "for (const cleanup of __mikuru_cleanup.splice(0).reverse()) __mikuru_try(cleanup);");
+    emit(context, 2, "for (const cb of __mikuru_afterUnmount.splice(0).reverse()) __mikuru_try(cb);");
+    emit(context, 2, "__mikuru_restoreRegistrar();");
+    emit(context, 2, "if (target.nodeType === 1) { target.innerHTML = \"\"; }");
+    emit(context, 2, "__mikuru_recovered = mount(target, props);");
+    emit(context, 2, "throw __mikuru_recovery;");
+    emit(context, 1, "};");
     emit(context, 1, "const __mikuru_findComment = (parent, value) => Array.from(parent.childNodes ?? []).find((node) => node.nodeType === 8 && node.nodeValue === value);");
     emit(context, 1, "const __mikuru_findNextComment = (node, value) => { for (let cursor = node.nextSibling; cursor; cursor = cursor.nextSibling) { if (cursor.nodeType === 8 && cursor.nodeValue === value) return cursor; } return undefined; };");
     emit(context, 1, "const __mikuru_setRef = (target, value, multiple = false) => {");
@@ -60,10 +78,15 @@ export function generateHydration(descriptor, root) {
         emit(context, 1, "");
     }
     emit(context, 1, "const __mikuru_root = target.nodeType === 1 && target.tagName?.toLowerCase() === " + quote(root.tag.toLowerCase()) + " ? target : target.firstElementChild;");
-    emit(context, 1, `if (!__mikuru_root || __mikuru_root.tagName?.toLowerCase() !== ${quote(root.tag.toLowerCase())}) { __mikuru_warn("Root mismatch: expected <${root.tag.toLowerCase()}>, got " + __mikuru_describeNode(__mikuru_root) + "; falling back to mount()."); if (__mikuru_previousRegistrar === undefined) { delete globalThis.__mikuru_currentRegistrar; } else { globalThis.__mikuru_currentRegistrar = __mikuru_previousRegistrar; } return mount(target, props); }`);
-    hydrateElement(context, root, "__mikuru_root", 1);
+    emit(context, 1, `if (!__mikuru_root || __mikuru_root.tagName?.toLowerCase() !== ${quote(root.tag.toLowerCase())}) { __mikuru_warn("Root mismatch: expected <${root.tag.toLowerCase()}>, got " + __mikuru_describeNode(__mikuru_root) + "; falling back to mount()."); __mikuru_restoreRegistrar(); return mount(target, props); }`);
+    emit(context, 1, "try {");
+    hydrateElement(context, root, "__mikuru_root", 2);
+    emit(context, 1, "} catch (error) {");
+    emit(context, 2, "if (error === __mikuru_recovery) { return __mikuru_recovered; }");
+    emit(context, 2, "throw error;");
+    emit(context, 1, "}");
     emit(context, 1, "for (const cb of __mikuru_mounted.splice(0)) { __mikuru_try(cb); }");
-    emit(context, 1, "if (__mikuru_previousRegistrar === undefined) { delete globalThis.__mikuru_currentRegistrar; } else { globalThis.__mikuru_currentRegistrar = __mikuru_previousRegistrar; }");
+    emit(context, 1, "__mikuru_restoreRegistrar();");
     emit(context, 1, "return {");
     emit(context, 2, "element: __mikuru_root,");
     emit(context, 2, "unmount() { for (const cleanup of __mikuru_cleanup.splice(0).reverse()) __mikuru_try(cleanup); for (const cb of __mikuru_afterUnmount.splice(0).reverse()) __mikuru_try(cb); }");
@@ -95,6 +118,18 @@ function hydrateElement(context, node, elementVar, indent) {
         hydrateAsyncBoundaryElement(context, node, elementVar, indent);
         return;
     }
+    if (node.tag === "ErrorBoundary") {
+        hydrateErrorBoundaryElement(context, node, elementVar, indent);
+        return;
+    }
+    if (node.tag === "TransitionGroup") {
+        hydrateTransitionGroupElement(context, node, elementVar, indent);
+        return;
+    }
+    if (node.tag === "Transition") {
+        hydrateTransitionElement(context, node, elementVar, indent);
+        return;
+    }
     if (isComponentTag(node.tag)) {
         hydrateComponent(context, node, elementVar, indent);
         return;
@@ -102,6 +137,7 @@ function hydrateElement(context, node, elementVar, indent) {
     hydrateAttrs(context, node, elementVar, indent);
     hydrateEvents(context, node, elementVar, indent);
     const contentDirective = getContentDirectiveAttr(node);
+    const textareaModel = node.tag === "textarea" && hasElementModel(node);
     const hydrateChildrenBeforeModel = node.tag === "select" && !contentDirective;
     if (hydrateChildrenBeforeModel) {
         hydrateChildren(context, node.children, elementVar, indent);
@@ -109,7 +145,10 @@ function hydrateElement(context, node, elementVar, indent) {
     hydrateModelAndShow(context, node, elementVar, indent);
     hydrateContentDirective(context, node, elementVar, indent);
     hydrateTemplateRef(context, node, elementVar, indent);
-    if (!contentDirective && !hydrateChildrenBeforeModel) {
+    if (textareaModel) {
+        emit(context, indent, `if (${elementVar}.childNodes.length > 0) { const __mikuru_textarea_value = ${elementVar}.value; ${elementVar}.textContent = ""; ${elementVar}.value = __mikuru_textarea_value; }`);
+    }
+    if (!contentDirective && !hydrateChildrenBeforeModel && !textareaModel) {
         hydrateChildren(context, node.children, elementVar, indent);
     }
 }
@@ -134,6 +173,18 @@ function hydrateChildren(context, rawChildren, parentVar, indent) {
             hydrateAsyncBoundaryAtIndex(context, child, parentVar, domIndexVar, indent);
             return;
         }
+        if (child.type === "element" && child.tag === "ErrorBoundary") {
+            hydrateErrorBoundaryAtIndex(context, child, parentVar, domIndexVar, indent);
+            return;
+        }
+        if (child.type === "element" && child.tag === "TransitionGroup") {
+            hydrateTransitionGroupAtIndex(context, child, parentVar, domIndexVar, indent);
+            return;
+        }
+        if (child.type === "element" && child.tag === "Transition") {
+            hydrateTransitionAtIndex(context, child, parentVar, domIndexVar, indent);
+            return;
+        }
         if (child.type === "element" && getAttr(child, "v-if") && !getAttr(child, "v-pre")) {
             hydrateIf(context, child, parentVar, domIndexVar, indent);
             emit(context, indent, `${domIndexVar} += 1;`);
@@ -149,12 +200,12 @@ function hydrateChildren(context, rawChildren, parentVar, indent) {
             const elementCheck = isComponentTag(child.tag)
                 ? `!${childVar} || ${childVar}.nodeType !== 1`
                 : `!${childVar} || ${childVar}.nodeType !== 1 || ${childVar}.tagName?.toLowerCase() !== ${quote(child.tag.toLowerCase())}`;
-            emit(context, indent, `if (${elementCheck}) { __mikuru_warn(${quote(`Element mismatch: expected <${child.tag.toLowerCase()}>, got `)} + __mikuru_describeNode(${childVar}) + "."); } else {`);
+            emit(context, indent, `if (${elementCheck}) { __mikuru_recover(${quote(`Element mismatch: expected <${child.tag.toLowerCase()}>, got `)} + __mikuru_describeNode(${childVar})); } else {`);
             hydrateNode(context, child, childVar, indent + 1);
             emit(context, indent, "}");
         }
         else {
-            emit(context, indent, `if (!${childVar} || ${childVar}.nodeType !== 3) { __mikuru_warn("Text mismatch: expected text, got " + __mikuru_describeNode(${childVar}) + "."); } else {`);
+            emit(context, indent, `if (!${childVar} || ${childVar}.nodeType !== 3) { __mikuru_recover("Text mismatch: expected text, got " + __mikuru_describeNode(${childVar})); } else {`);
             hydrateNode(context, child, childVar, indent + 1);
             emit(context, indent, "}");
         }
@@ -179,14 +230,14 @@ function hydrateTeleportAtIndex(context, node, parentVar, domIndex, indent) {
     emit(context, indent, `const ${startVar} = ${parentVar}.childNodes[${domIndex}];`);
     emit(context, indent, `const ${endVar} = ${startVar} ? __mikuru_findNextComment(${startVar}, ${quote(`/teleport:${id}`)}) : undefined;`);
     emit(context, indent, `if (!${startVar} || ${startVar}.nodeType !== 8 || ${startVar}.nodeValue !== ${quote(`teleport:${id}`)} || !${endVar}) {`);
-    emit(context, indent + 1, "__mikuru_warn(\"Teleport marker mismatch.\");");
+    emit(context, indent + 1, "__mikuru_recover(\"Teleport marker mismatch\");");
     emit(context, indent, "} else {");
     emit(context, indent + 1, `const ${disabledVar} = Boolean(unwrap(${disabledExpression}));`);
     emit(context, indent + 1, `const ${targetVar} = ${disabledVar} ? undefined : (typeof unwrap(${toExpression}) === "string" ? document.querySelector(unwrap(${toExpression})) : unwrap(${toExpression}));`);
     emit(context, indent + 1, `if (!${disabledVar} && !${targetVar}) { __mikuru_warn("Teleport target was not found."); } else {`);
     emit(context, indent + 2, `const ${contentStartVar} = ${disabledVar} ? ${startVar} : __mikuru_findComment(${targetVar}, ${quote(`teleport content:${id}`)});`);
     emit(context, indent + 2, `const ${contentEndVar} = ${disabledVar} ? ${endVar} : __mikuru_findComment(${targetVar}, ${quote(`/teleport content:${id}`)});`);
-    emit(context, indent + 2, `if (!${contentStartVar} || !${contentEndVar}) { __mikuru_warn("Teleport content marker mismatch."); } else {`);
+    emit(context, indent + 2, `if (!${contentStartVar} || !${contentEndVar}) { __mikuru_recover("Teleport content marker mismatch"); } else {`);
     emit(context, indent + 3, `const ${nodesVar} = [];`);
     emit(context, indent + 3, `let ${cursorVar} = ${contentStartVar}.nextSibling;`);
     emit(context, indent + 3, `while (${cursorVar} && ${cursorVar} !== ${contentEndVar}) { ${nodesVar}.push(${cursorVar}); ${cursorVar} = ${cursorVar}.nextSibling; }`);
@@ -211,11 +262,11 @@ function hydrateIf(context, node, parentVar, domIndex, indent) {
         : `!${childVar} || ${childVar}.nodeType !== 1 || ${childVar}.tagName?.toLowerCase() !== ${quote(node.tag.toLowerCase())}`;
     emit(context, indent, `const ${childVar} = ${parentVar}.childNodes[${domIndex}];`);
     emit(context, indent, `if (unwrap(${compileHydrationExpression(context, condition, "v-if")})) {`);
-    emit(context, indent + 1, `if (${elementCheck}) { __mikuru_warn("Branch mismatch; dynamic v-if hydration will remount in a future phase."); } else {`);
+    emit(context, indent + 1, `if (${elementCheck}) { __mikuru_recover("Branch mismatch: dynamic v-if expected " + __mikuru_describeNode(${childVar})); } else {`);
     hydrateElement(context, withoutAttrs(node, ["v-if"]), childVar, indent + 2);
     emit(context, indent + 1, "}");
     emit(context, indent, `} else if (${childVar}) {`);
-    emit(context, indent + 1, "__mikuru_warn(\"Branch mismatch; expected no v-if DOM for initial state.\");");
+    emit(context, indent + 1, "__mikuru_recover(\"Branch mismatch: expected no v-if DOM for initial state\");");
     emit(context, indent, "}");
 }
 function hydrateFor(context, node, parentVar, domIndex, indent, advanceVar) {
@@ -237,7 +288,7 @@ function hydrateFor(context, node, parentVar, domIndex, indent, advanceVar) {
         emit(context, indent + 1, `const ${forExpression.index} = __mikuru_index;`);
     }
     emit(context, indent + 1, `const ${childVar} = ${parentVar}.childNodes[${domIndex} + __mikuru_index];`);
-    emit(context, indent + 1, `if (${elementCheck}) { __mikuru_warn("List mismatch; dynamic v-for hydration will remount in a future phase."); } else {`);
+    emit(context, indent + 1, `if (${elementCheck}) { __mikuru_recover("List mismatch: dynamic v-for expected row, got " + __mikuru_describeNode(${childVar})); } else {`);
     withTemplateRefMode(context, "array", () => {
         hydrateElement(context, withoutAttrs(node, ["v-for"]), childVar, indent + 2);
     });
@@ -374,6 +425,8 @@ function hydrateComponent(context, node, elementVar, indent) {
     emit(context, indent, `const ${propsVar} = {};`);
     hydrateComponentProps(context, node, propsVar, indent);
     emit(context, indent, `${propsVar}.__mikuru_context = __mikuru_context;`);
+    emitHydrationComponentSlots(context, node, propsVar, indent);
+    emitRouterViewRouteSlot(context, node, propsVar, indent);
     emit(context, indent, `if (${node.tag} && typeof ${node.tag}.hydrate === "function") {`);
     emit(context, indent + 1, `const __mikuru_child = ${node.tag}.hydrate(${elementVar}, ${propsVar});`);
     emit(context, indent + 1, `if (__mikuru_child?.unmount) __mikuru_cleanup.push(() => __mikuru_child.unmount());`);
@@ -391,9 +444,246 @@ function hydrateComponent(context, node, elementVar, indent) {
     emit(context, indent + 1, `if (__mikuru_child?.unmount) __mikuru_cleanup.push(() => __mikuru_child.unmount());`);
     hydrateTemplateRef(context, node, "__mikuru_child", indent + 1);
     emit(context, indent, "} else {");
-    emit(context, indent + 1, `__mikuru_warn(${quote(`Component mismatch at <${node.tag}>.`)});`);
+    emit(context, indent + 1, `__mikuru_recover(${quote(`Component mismatch at <${node.tag}>`)});`);
     emit(context, indent, "}");
 }
+function emitRouterViewRouteSlot(context, node, propsVar, indent) {
+    if (node.tag !== "RouterView")
+        return;
+    emit(context, indent, `if (typeof props.children === "function") { ${propsVar}.children = props.children; ${propsVar}.slots = { ...(${propsVar}.slots ?? {}), default: props.children }; }`);
+}
+function emitHydrationComponentSlots(context, node, propsVar, indent) {
+    const slots = collectHydrationComponentSlots(context, node);
+    if (slots.length === 0) {
+        return;
+    }
+    const defaultSlot = slots.find((slot) => !slot.nameExpression && slot.name === "default");
+    if (defaultSlot) {
+        emitHydrationSlotFunction(context, `${propsVar}.children`, defaultSlot, indent);
+    }
+    emit(context, indent, `${propsVar}.slots = { ...(${propsVar}.slots ?? {}) };`);
+    for (const slot of slots) {
+        const property = slot.nameExpression ? `[${slot.nameExpression}]` : `[${quote(slot.name)}]`;
+        emitHydrationSlotFunction(context, `${propsVar}.slots${property}`, slot, indent);
+    }
+}
+function emitHydrationSlotFunction(context, target, slot, indent) {
+    const slotTargetVar = nextName(context, "slotTarget");
+    const slotPropsVar = nextName(context, "slotProps");
+    emit(context, indent, `${target} = (${slotTargetVar}, ${slotPropsVar} = {}) => {`);
+    emitHydrationSlotScopeBindings(context, slot, slotPropsVar, indent + 1);
+    hydrateChildren(context, slot.children, slotTargetVar, indent + 1);
+    emit(context, indent, "};");
+}
+function emitHydrationSlotScopeBindings(context, slot, slotPropsVar, indent) {
+    for (const binding of parseHydrationSlotScopeBindings(slot.scope, context, slot.scopeLoc ?? slot.loc)) {
+        if (binding.kind === "props") {
+            emit(context, indent, `const ${binding.alias} = ${slotPropsVar};`);
+            continue;
+        }
+        if (binding.kind === "rest") {
+            emit(context, indent, `const ${binding.alias} = { get value() { const rest = { ...${slotPropsVar} }; ${binding.exclude.map((key) => `delete rest[${quote(key)}];`).join(" ")} return rest; } };`);
+            continue;
+        }
+        const valueExpression = slotScopePathExpression(slotPropsVar, binding.path);
+        if (binding.defaultValue) {
+            emit(context, indent, `const ${binding.alias} = { get value() { const value = ${valueExpression}; return value === undefined ? (${binding.defaultValue}) : value; } };`);
+            continue;
+        }
+        emit(context, indent, `const ${binding.alias} = { get value() { return ${valueExpression}; } };`);
+    }
+}
+function slotScopePathExpression(rootVar, path) {
+    return path.reduce((expression, key, index) => {
+        const property = /^[A-Za-z_$][\w$]*$/.test(key) ? `.${key}` : `[${quote(key)}]`;
+        return `${expression}${index === 0 ? property : `?.${property.slice(1)}`}`;
+    }, rootVar);
+}
+function collectHydrationComponentSlots(context, node) {
+    const slots = [];
+    const usedNames = new Set();
+    const defaultChildren = [];
+    for (const child of node.children) {
+        if (child.type === "element" && child.tag === "template") {
+            const slotDirective = getHydrationSlotTemplateDirective(child, context);
+            if (slotDirective) {
+                if (usedNames.has(slotDirective.name)) {
+                    throwTemplateError(`Duplicate slot template: ${slotDirective.name}`, context, slotDirective.loc);
+                }
+                usedNames.add(slotDirective.name);
+                slots.push({
+                    name: slotDirective.name,
+                    nameExpression: slotDirective.nameExpression,
+                    children: child.children,
+                    scope: slotDirective.scope,
+                    loc: child.loc,
+                    scopeLoc: slotDirective.scopeLoc
+                });
+                continue;
+            }
+        }
+        defaultChildren.push(child);
+    }
+    if (hasMeaningfulHydrationChildren(defaultChildren)) {
+        if (usedNames.has("default")) {
+            throwTemplateError("Duplicate slot template: default", context, node.loc);
+        }
+        slots.unshift({
+            name: "default",
+            children: defaultChildren,
+            scope: true,
+            loc: node.loc
+        });
+    }
+    return slots;
+}
+function getHydrationSlotTemplateDirective(node, context) {
+    const slotAttrs = node.attrs.filter((attr) => isSlotTemplateAttr(attr));
+    if (slotAttrs.length === 0) {
+        return undefined;
+    }
+    if (slotAttrs.length > 1) {
+        throwTemplateError("A slot template can only declare one slot target", context, slotAttrs[1]?.loc);
+    }
+    const attr = slotAttrs[0];
+    const name = getHydrationSlotTemplateName(attr, context);
+    return {
+        ...name,
+        scope: attr.value,
+        loc: attr.loc,
+        scopeLoc: attr.valueLoc
+    };
+}
+function getHydrationSlotTemplateName(attr, context) {
+    if (attr.name === "v-slot") {
+        return { name: "default" };
+    }
+    if (attr.name.startsWith("v-slot:")) {
+        return parseHydrationSlotTemplateName(attr.name.slice("v-slot:".length) || "default", attr, context);
+    }
+    if (attr.name.startsWith("#")) {
+        return parseHydrationSlotTemplateName(attr.name.slice(1) || "default", attr, context);
+    }
+    return { name: "default" };
+}
+function parseHydrationSlotTemplateName(rawName, attr, context) {
+    const name = rawName.trim();
+    const dynamicStart = name.indexOf("[");
+    const dynamicEnd = name.lastIndexOf("]");
+    if (dynamicStart >= 0 && dynamicEnd > dynamicStart) {
+        const expression = name.slice(dynamicStart + 1, dynamicEnd).trim();
+        if (!expression) {
+            throwTemplateError("Dynamic slot name requires an expression", context, attr.loc);
+        }
+        return {
+            name: `[${expression}]`,
+            nameExpression: compileTemplateExpression(expression, attr.name, toExpressionContext(context, attr.loc))
+        };
+    }
+    return { name };
+}
+function isSlotTemplateAttr(attr) {
+    return attr.name === "v-slot" || attr.name.startsWith("v-slot:") || attr.name.startsWith("#");
+}
+function hasMeaningfulHydrationChildren(children) {
+    return children.some((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
+}
+function parseHydrationSlotScopeBindings(scope, context, location) {
+    if (scope === true || !scope.trim()) {
+        return [];
+    }
+    const source = scope.trim();
+    if (isIdentifier(source)) {
+        return [{ kind: "props", alias: source }];
+    }
+    if (!source.startsWith("{") || !source.endsWith("}")) {
+        throwTemplateError("Slot scope must be an identifier or object destructuring pattern", context, location);
+    }
+    const body = source.slice(1, -1).trim();
+    if (!body) {
+        return [];
+    }
+    return parseHydrationSlotScopeObjectPattern(body, context, location, []);
+}
+function parseHydrationSlotScopeObjectPattern(body, context, location, pathPrefix) {
+    const bindings = [];
+    const excludedTopLevelKeys = [];
+    for (const part of splitTopLevel(body, ",")) {
+        const sourcePart = part.trim();
+        if (!sourcePart) {
+            continue;
+        }
+        if (sourcePart.startsWith("...")) {
+            const alias = sourcePart.slice(3).trim();
+            if (pathPrefix.length > 0) {
+                throwTemplateError("Slot scope rest destructuring is only supported at the top level", context, location);
+            }
+            if (!isIdentifier(alias)) {
+                throwTemplateError("Slot scope rest destructuring must use a simple identifier like ...rest", context, location);
+            }
+            bindings.push({ kind: "rest", alias, exclude: excludedTopLevelKeys });
+            continue;
+        }
+        const { left, right } = splitHydrationSlotScopeEntry(sourcePart, context, location);
+        if (!isIdentifier(left)) {
+            throwTemplateError(`Unsupported slot scope key "${left}". Use identifier keys in slot scope destructuring`, context, location);
+        }
+        if (pathPrefix.length === 0) {
+            excludedTopLevelKeys.push(left);
+        }
+        const path = [...pathPrefix, left];
+        if (right === undefined) {
+            bindings.push(...hydrationSlotScopeLeafBindings(left, path, context, location));
+            continue;
+        }
+        const value = right.trim();
+        if (value.startsWith("{") && value.endsWith("}")) {
+            bindings.push(...parseHydrationSlotScopeObjectPattern(value.slice(1, -1), context, location, path));
+            continue;
+        }
+        if (value.startsWith("[") || value.includes("{")) {
+            throwTemplateError("Slot scope destructuring supports nested object patterns only; array and mixed patterns are not supported", context, location);
+        }
+        bindings.push(...hydrationSlotScopeLeafBindings(value, path, context, location));
+    }
+    return bindings;
+}
+function splitHydrationSlotScopeEntry(source, context, location) {
+    const colonIndex = findTopLevelToken(source, ":");
+    if (colonIndex >= 0) {
+        return {
+            left: source.slice(0, colonIndex).trim(),
+            right: source.slice(colonIndex + 1).trim()
+        };
+    }
+    const equalsIndex = findTopLevelToken(source, "=");
+    if (equalsIndex >= 0) {
+        const left = source.slice(0, equalsIndex).trim();
+        if (!isIdentifier(left)) {
+            throwTemplateError("Slot scope default values can only be assigned to simple identifiers", context, location);
+        }
+        return { left, right: source };
+    }
+    return { left: source.trim() };
+}
+function hydrationSlotScopeLeafBindings(source, path, context, location) {
+    const equalsIndex = findTopLevelToken(source, "=");
+    const localSource = equalsIndex >= 0 ? source.slice(0, equalsIndex).trim() : source.trim();
+    const defaultSource = equalsIndex >= 0 ? source.slice(equalsIndex + 1).trim() : undefined;
+    if (!isIdentifier(localSource)) {
+        throwTemplateError(`Unsupported slot scope binding "${source}". Use identifiers, aliases, defaults, nested objects, or top-level ...rest`, context, location);
+    }
+    return [
+        {
+            kind: "property",
+            path,
+            alias: localSource,
+            defaultValue: defaultSource
+                ? compileTemplateExpression(defaultSource, "slot scope default", toExpressionContext(context, location))
+                : undefined
+        }
+    ];
+}
 function hydrateDynamicComponentAtIndex(context, node, parentVar, domIndex, indent) {
     const isAttr = getDynamicComponentIsAttr(node);
     if (!isAttr) {
@@ -404,7 +694,7 @@ function hydrateDynamicComponentAtIndex(context, node, parentVar, domIndex, inde
     emit(context, indent, `const ${componentTypeVar} = unwrap(${compileHydrationExpression(context, requireAttrValue(isAttr), isAttr.name)});`);
     emit(context, indent, `if (${componentTypeVar}) {`);
     emit(context, indent + 1, `const ${childVar} = ${parentVar}.childNodes[${domIndex}];`);
-    emit(context, indent + 1, `if (!${childVar} || ${childVar}.nodeType !== 1) { __mikuru_warn("Element mismatch: expected dynamic component root, got " + __mikuru_describeNode(${childVar}) + "."); } else {`);
+    emit(context, indent + 1, `if (!${childVar} || ${childVar}.nodeType !== 1) { __mikuru_recover("Element mismatch: expected dynamic component root, got " + __mikuru_describeNode(${childVar})); } else {`);
     hydrateDynamicComponent(context, node, childVar, componentTypeVar, indent + 2);
     emit(context, indent + 1, "}");
     emit(context, indent + 1, `${domIndex} += 1;`);
@@ -416,6 +706,8 @@ function hydrateDynamicComponent(context, node, elementVar, componentType, inden
     emit(context, indent, `const ${propsVar} = {};`);
     hydrateComponentProps(context, dynamicNode, propsVar, indent);
     emit(context, indent, `${propsVar}.__mikuru_context = __mikuru_context;`);
+    emitHydrationComponentSlots(context, dynamicNode, propsVar, indent);
+    emitRouterViewRouteSlot(context, dynamicNode, propsVar, indent);
     emit(context, indent, `if (${componentType} && typeof ${componentType}.hydrate === "function") {`);
     emit(context, indent + 1, `const __mikuru_child = ${componentType}.hydrate(${elementVar}, ${propsVar});`);
     emit(context, indent + 1, `if (__mikuru_child?.unmount) __mikuru_cleanup.push(() => __mikuru_child.unmount());`);
@@ -433,7 +725,7 @@ function hydrateDynamicComponent(context, node, elementVar, componentType, inden
     emit(context, indent + 1, `if (__mikuru_child?.unmount) __mikuru_cleanup.push(() => __mikuru_child.unmount());`);
     hydrateTemplateRef(context, dynamicNode, "__mikuru_child", indent + 1);
     emit(context, indent, "} else {");
-    emit(context, indent + 1, "__mikuru_warn(\"Dynamic component mismatch; :is did not resolve to hydrate() or mount().\");");
+    emit(context, indent + 1, "__mikuru_recover(\"Dynamic component mismatch: :is did not resolve to hydrate() or mount()\");");
     emit(context, indent, "}");
 }
 function hydrateKeepAliveAtIndex(context, node, parentVar, domIndex, indent) {
@@ -474,6 +766,84 @@ function hydrateAsyncBoundaryElement(context, node, elementVar, indent) {
     hydrateFragmentChildrenAtIndex(context, getAsyncBoundaryChildren(node), parentVar, indexVar, indent + 1);
     emit(context, indent, "}");
 }
+function hydrateErrorBoundaryAtIndex(context, node, parentVar, domIndex, indent) {
+    validateErrorBoundaryAttributes(node);
+    getErrorBoundaryFallbackAttr(node);
+    hydrateFragmentChildrenAtIndex(context, [getSingleElementChild(node, "<ErrorBoundary>")], parentVar, domIndex, indent);
+}
+function hydrateErrorBoundaryElement(context, node, elementVar, indent) {
+    validateErrorBoundaryAttributes(node);
+    getErrorBoundaryFallbackAttr(node);
+    const parentVar = nextName(context, "errorBoundaryParent");
+    const indexVar = nextName(context, "errorBoundaryIndex");
+    emit(context, indent, `const ${parentVar} = ${elementVar}.parentNode;`);
+    emit(context, indent, `let ${indexVar} = ${parentVar} ? Array.prototype.indexOf.call(${parentVar}.childNodes, ${elementVar}) : 0;`);
+    emit(context, indent, `if (${parentVar}) {`);
+    hydrateFragmentChildrenAtIndex(context, [getSingleElementChild(node, "<ErrorBoundary>")], parentVar, indexVar, indent + 1);
+    emit(context, indent, "}");
+}
+function hydrateTransitionAtIndex(context, node, parentVar, domIndex, indent) {
+    validateTransitionAttributes(node);
+    const children = getTransitionChildren(node);
+    if (getAttr(children[0], "v-if")) {
+        hydrateTransitionIfChainAtIndex(context, children, parentVar, domIndex, indent);
+        return;
+    }
+    hydrateFragmentChildrenAtIndex(context, [children[0]], parentVar, domIndex, indent);
+}
+function hydrateTransitionElement(context, node, elementVar, indent) {
+    validateTransitionAttributes(node);
+    const parentVar = nextName(context, "transitionParent");
+    const indexVar = nextName(context, "transitionIndex");
+    emit(context, indent, `const ${parentVar} = ${elementVar}.parentNode;`);
+    emit(context, indent, `let ${indexVar} = ${parentVar} ? Array.prototype.indexOf.call(${parentVar}.childNodes, ${elementVar}) : 0;`);
+    emit(context, indent, `if (${parentVar}) {`);
+    hydrateTransitionAtIndex(context, node, parentVar, indexVar, indent + 1);
+    emit(context, indent, "}");
+}
+function hydrateTransitionIfChainAtIndex(context, children, parentVar, domIndex, indent) {
+    children.forEach((child, index) => {
+        if (index === 0) {
+            emit(context, indent, `if (unwrap(${compileHydrationExpression(context, getAttrValue(child, "v-if"), "v-if")})) {`);
+        }
+        else if (getAttr(child, "v-else-if")) {
+            emit(context, indent, `else if (unwrap(${compileHydrationExpression(context, getAttrValue(child, "v-else-if"), "v-else-if")})) {`);
+        }
+        else {
+            emit(context, indent, "else {");
+        }
+        hydrateFragmentChildrenAtIndex(context, [withoutAttrs(child, ["v-if", "v-else-if", "v-else"])], parentVar, domIndex, indent + 1);
+        emit(context, indent, "}");
+    });
+}
+function hydrateTransitionGroupAtIndex(context, node, parentVar, domIndex, indent) {
+    validateTransitionGroupAttributes(node);
+    const child = getTransitionGroupChild(node);
+    const groupVar = nextName(context, "transitionGroup");
+    const expectedTagVar = nextName(context, "transitionGroupTag");
+    const groupIndexVar = nextName(context, "transitionGroupIndex");
+    emit(context, indent, `const ${groupVar} = ${parentVar}.childNodes[${domIndex}];`);
+    emit(context, indent, `const ${expectedTagVar} = String(unwrap(${getTransitionGroupTagExpression(context, node)}) ?? "span").toLowerCase();`);
+    emit(context, indent, `if (!${groupVar} || ${groupVar}.nodeType !== 1 || ${groupVar}.tagName?.toLowerCase() !== ${expectedTagVar}) {`);
+    emit(context, indent + 1, `__mikuru_recover("TransitionGroup mismatch: expected <" + ${expectedTagVar} + ">, got " + __mikuru_describeNode(${groupVar}));`);
+    emit(context, indent, "} else {");
+    emit(context, indent + 1, `let ${groupIndexVar} = 0;`);
+    hydrateFor(context, withoutAttrs(child, [":key", "v-bind:key"]), groupVar, groupIndexVar, indent + 1, groupIndexVar);
+    emit(context, indent + 1, `if (${groupVar}.childNodes.length > ${groupIndexVar}) { __mikuru_warn("Extra DOM nodes after TransitionGroup hydration: " + Array.from(${groupVar}.childNodes).slice(${groupIndexVar}).map(__mikuru_describeNode).join(", ") + "."); }`);
+    emit(context, indent, "}");
+    emit(context, indent, `${domIndex} += 1;`);
+}
+function hydrateTransitionGroupElement(context, node, elementVar, indent) {
+    validateTransitionGroupAttributes(node);
+    const child = getTransitionGroupChild(node);
+    const expectedTagVar = nextName(context, "transitionGroupTag");
+    const groupIndexVar = nextName(context, "transitionGroupIndex");
+    emit(context, indent, `const ${expectedTagVar} = String(unwrap(${getTransitionGroupTagExpression(context, node)}) ?? "span").toLowerCase();`);
+    emit(context, indent, `if (${elementVar}.tagName?.toLowerCase() !== ${expectedTagVar}) { __mikuru_recover("TransitionGroup mismatch: expected <" + ${expectedTagVar} + ">, got " + __mikuru_describeNode(${elementVar})); }`);
+    emit(context, indent, `let ${groupIndexVar} = 0;`);
+    hydrateFor(context, withoutAttrs(child, [":key", "v-bind:key"]), elementVar, groupIndexVar, indent, groupIndexVar);
+    emit(context, indent, `if (${elementVar}.childNodes.length > ${groupIndexVar}) { __mikuru_warn("Extra DOM nodes after TransitionGroup hydration: " + Array.from(${elementVar}.childNodes).slice(${groupIndexVar}).map(__mikuru_describeNode).join(", ") + "."); }`);
+}
 function hydrateFragmentChildrenAtIndex(context, rawChildren, parentVar, domIndex, indent) {
     const children = rawChildren.filter(isHydratableNode);
     children.forEach((child) => {
@@ -493,6 +863,18 @@ function hydrateFragmentChildrenAtIndex(context, rawChildren, parentVar, domInde
             hydrateAsyncBoundaryAtIndex(context, child, parentVar, domIndex, indent);
             return;
         }
+        if (child.type === "element" && child.tag === "ErrorBoundary") {
+            hydrateErrorBoundaryAtIndex(context, child, parentVar, domIndex, indent);
+            return;
+        }
+        if (child.type === "element" && child.tag === "TransitionGroup") {
+            hydrateTransitionGroupAtIndex(context, child, parentVar, domIndex, indent);
+            return;
+        }
+        if (child.type === "element" && child.tag === "Transition") {
+            hydrateTransitionAtIndex(context, child, parentVar, domIndex, indent);
+            return;
+        }
         if (child.type === "element" && getAttr(child, "v-if") && !getAttr(child, "v-pre")) {
             hydrateIf(context, child, parentVar, domIndex, indent);
             emit(context, indent, `${domIndex} += 1;`);
@@ -508,12 +890,12 @@ function hydrateFragmentChildrenAtIndex(context, rawChildren, parentVar, domInde
             const elementCheck = isComponentTag(child.tag)
                 ? `!${childVar} || ${childVar}.nodeType !== 1`
                 : `!${childVar} || ${childVar}.nodeType !== 1 || ${childVar}.tagName?.toLowerCase() !== ${quote(child.tag.toLowerCase())}`;
-            emit(context, indent, `if (${elementCheck}) { __mikuru_warn(${quote(`Element mismatch: expected <${child.tag.toLowerCase()}>, got `)} + __mikuru_describeNode(${childVar}) + "."); } else {`);
+            emit(context, indent, `if (${elementCheck}) { __mikuru_recover(${quote(`Element mismatch: expected <${child.tag.toLowerCase()}>, got `)} + __mikuru_describeNode(${childVar})); } else {`);
             hydrateNode(context, child, childVar, indent + 1);
             emit(context, indent, "}");
         }
         else {
-            emit(context, indent, `if (!${childVar} || ${childVar}.nodeType !== 3) { __mikuru_warn("Text mismatch: expected text, got " + __mikuru_describeNode(${childVar}) + "."); } else {`);
+            emit(context, indent, `if (!${childVar} || ${childVar}.nodeType !== 3) { __mikuru_recover("Text mismatch: expected text, got " + __mikuru_describeNode(${childVar})); } else {`);
             hydrateNode(context, child, childVar, indent + 1);
             emit(context, indent, "}");
         }
@@ -892,6 +1274,62 @@ function validateAsyncBoundaryAttributes(node) {
         throw new Error(`Unsupported attribute "${attr.name}" on <AsyncBoundary>. Supported attributes: loading, fallback, delay, and timeout.`);
     }
 }
+function validateErrorBoundaryAttributes(node) {
+    for (const attr of node.attrs) {
+        const name = parseBindDirective(attr.name)?.name ?? attr.name;
+        if (name === "fallback" || name === "reset-key") {
+            continue;
+        }
+        throw new Error(`Unsupported attribute "${attr.name}" on <ErrorBoundary>. Supported attributes: fallback and reset-key.`);
+    }
+}
+function validateTransitionAttributes(node) {
+    const supported = new Set([
+        "name",
+        "appear",
+        "mode",
+        "enter-from-class",
+        "enter-active-class",
+        "enter-to-class",
+        "leave-from-class",
+        "leave-active-class",
+        "leave-to-class"
+    ]);
+    for (const attr of node.attrs) {
+        const name = parseBindDirective(attr.name)?.name ?? attr.name;
+        if (supported.has(name)) {
+            continue;
+        }
+        throw new Error(`Unsupported attribute "${attr.name}" on <Transition>. Supported attributes: name, appear, mode, and CSS class override attributes.`);
+    }
+}
+function validateTransitionGroupAttributes(node) {
+    const supported = new Set([
+        "name",
+        "tag",
+        "enter-from-class",
+        "enter-active-class",
+        "enter-to-class",
+        "leave-from-class",
+        "leave-active-class",
+        "leave-to-class",
+        "move-class"
+    ]);
+    for (const attr of node.attrs) {
+        const name = parseBindDirective(attr.name)?.name ?? attr.name;
+        if (supported.has(name)) {
+            continue;
+        }
+        throw new Error(`Unsupported attribute "${attr.name}" on <TransitionGroup>. Supported attributes: name, tag, and CSS class override attributes.`);
+    }
+}
+function getErrorBoundaryFallbackAttr(node) {
+    const attr = node.attrs.find((candidate) => parseBindDirective(candidate.name)?.name === "fallback");
+    if (!attr) {
+        throw new Error("<ErrorBoundary> requires :fallback to resolve to a component object");
+    }
+    return attr;
+}
 function getAsyncBoundaryChildren(node) {
     const meaningful = node.children.filter((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
     if (meaningful.length === 0) {
@@ -899,6 +1337,42 @@ function getAsyncBoundaryChildren(node) {
     }
     return node.children;
 }
+function getTransitionChildren(node) {
+    const meaningful = node.children.filter((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
+    if (meaningful.length === 0 || meaningful.some((child) => child.type !== "element")) {
+        throw new Error("<Transition> requires exactly one element/component child or one v-if chain");
+    }
+    const children = meaningful;
+    if (children.length === 1) {
+        return children;
+    }
+    if (!getAttr(children[0], "v-if")) {
+        throw new Error("<Transition> requires exactly one element/component child or one v-if chain");
+    }
+    for (const child of children.slice(1)) {
+        if (!getAttr(child, "v-else-if") && !getAttr(child, "v-else")) {
+            throw new Error("<Transition> only accepts multiple children when they form a v-if chain");
+        }
+    }
+    return children;
+}
+function getTransitionGroupChild(node) {
+    const child = getSingleElementChild(node, "<TransitionGroup>");
+    if (!getAttr(child, "v-for") || !getKeyExpression(child)) {
+        throw new Error("<TransitionGroup> requires a single keyed v-for child in v1");
+    }
+    return child;
+}
+function getTransitionGroupTagExpression(context, node) {
+    const dynamicTag = node.attrs.find((attr) => parseBindDirective(attr.name)?.name === "tag");
+    if (dynamicTag) {
+        return compileHydrationExpression(context, requireAttrValue(dynamicTag), dynamicTag.name);
+    }
+    return quote(getStaticAttrValue(node, "tag") ?? "span");
+}
+function getKeyExpression(node) {
+    return getStaticAttrValue(node, ":key") ?? getStaticAttrValue(node, "v-bind:key");
+}
 function getSingleElementChild(node, label) {
     const meaningful = node.children.filter((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
     if (meaningful.length !== 1 || meaningful[0]?.type !== "element") {
@@ -1166,6 +1640,9 @@ function parseModelDirective(name) {
     const [argument = "", ...modifiers] = name.slice("v-model:".length).split(".");
     return { argument, modifiers: modifiers.filter(Boolean) };
 }
+function hasElementModel(node) {
+    return node.attrs.some((attr) => Boolean(parseModelDirective(attr.name)));
+}
 function toComponentEventProp(eventName) {
     return `on${eventName.split(":").map((part) => part ? part[0].toUpperCase() + part.slice(1) : "").join("")}`;
 }
@@ -1238,9 +1715,90 @@ function compileHydrationExpression(context, expression, usage) {
         filename: context.filename
     });
 }
+function toExpressionContext(context, location) {
+    if (!context.source || !location) {
+        return undefined;
+    }
+    return {
+        source: context.source,
+        offset: location.offset,
+        filename: context.filename
+    };
+}
+function throwTemplateError(message, context, location) {
+    if (context.source && location) {
+        throw createCompileError(message, context.source, location.offset, context.filename);
+    }
+    throw new Error(message);
+}
 function isIdentifier(value) {
     return /^[A-Za-z_$][\w$]*$/.test(value);
 }
+function splitTopLevel(source, delimiter) {
+    const parts = [];
+    let depth = 0;
+    let quoteChar = "";
+    let start = 0;
+    for (let index = 0; index < source.length; index += 1) {
+        const char = source[index];
+        const previous = source[index - 1];
+        if (quoteChar) {
+            if (char === quoteChar && previous !== "\\") {
+                quoteChar = "";
+            }
+            continue;
+        }
+        if (char === "\"" || char === "'" || char === "`") {
+            quoteChar = char;
+            continue;
+        }
+        if (char === "{" || char === "[" || char === "(") {
+            depth += 1;
+            continue;
+        }
+        if (char === "}" || char === "]" || char === ")") {
+            depth -= 1;
+            continue;
+        }
+        if (depth === 0 && source.startsWith(delimiter, index)) {
+            parts.push(source.slice(start, index));
+            start = index + delimiter.length;
+            index += delimiter.length - 1;
+        }
+    }
+    parts.push(source.slice(start));
+    return parts;
+}
+function findTopLevelToken(source, token) {
+    let depth = 0;
+    let quoteChar = "";
+    for (let index = 0; index < source.length; index += 1) {
+        const char = source[index];
+        const previous = source[index - 1];
+        if (quoteChar) {
+            if (char === quoteChar && previous !== "\\") {
+                quoteChar = "";
+            }
+            continue;
+        }
+        if (char === "\"" || char === "'" || char === "`") {
+            quoteChar = char;
+            continue;
+        }
+        if (char === "{" || char === "[" || char === "(") {
+            depth += 1;
+            continue;
+        }
+        if (char === "}" || char === "]" || char === ")") {
+            depth -= 1;
+            continue;
+        }
+        if (depth === 0 && source.startsWith(token, index)) {
+            return index;
+        }
+    }
+    return -1;
+}
 function withTemplateRefMode(context, mode, callback) {
     const previousMode = context.templateRefMode;
     context.templateRefMode = mode;