mikuru 1.0.20 → 1.0.21

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## Unreleased
+
+## 1.0.21 - 2026-05-13
+
+- Added SSR and hydration support for initial `<ErrorBoundary>` children.
+- Added SSR and hydration support for initial `<Transition>` children and v-if chains.
+- Added SSR and hydration support for initial `<TransitionGroup>` keyed lists.
+- Added hydration structural mismatch recovery with a remount fallback.
+- Added `renderToStream()` for async iterable SSR output.
+- Added SSR loader resolution and error fallback rendering for `defineAsyncComponent()`.
+- Added Vite `.mikuru?ssr` and `.mikuru?hydrate` imports plus an SSR/hydration example and recovery E2E coverage.
+- Added recovery-disabled E2E coverage plus nested built-in wrapper SSR/hydration tests.
+- Added a router SSR/hydration example and browser E2E coverage for route rendering, hydration, redirects, guards, nested routes, and lazy route components.
+- Added SSR and hydration support for generated `<RouterView>` and `<RouterLink>` usage in route components.
+- Added hydration slot forwarding for component children so SSR-rendered `<RouterLink>` child content is preserved during hydration.
+- Expanded RouterLink SSR/hydration E2E coverage for custom active classes, replace links, and child content.
+- Stabilized the dogfood Debug Panel event clearing flow in browser E2E runs.
+
 ## 1.0.20 - 2026-05-13
 
 - Added SSR phase 1 with `compileSsr()` and `mikuru/server` helpers for escaped HTML, attributes, `v-if` chains, and `v-for` output.

package/README.md

@@ -142,10 +142,10 @@ declare const Greeting: MikuruComponent<GreetingProps>;
 - Built-in `<Teleport to="#target">` for rendering content outside the current DOM position
 - Built-in `<AsyncBoundary :loading :fallback :delay :timeout>` for grouped async loading, delayed loading UI, boundary timeouts, and retryable async failures with aggregated fallback errors
 - Built-in `<ErrorBoundary :fallback>` for local component mount, descendant event handler, lifecycle, and cleanup fallbacks, with `errorInfo`, `retry`, `reset`, and `:reset-key` recovery
-- Runtime helpers including `ref`, `isRef`, `unref`, `toRef`, `toRefs`, `reactive`, `readonly`, lazy cached read-only and writable `computed`, `effect` with optional scheduling, `queueJob`/`flushJobs`, `watch`, `watchEffect` with cleanup callbacks, `nextTick`, lifecycle callbacks including KeepAlive activation hooks, `provide`, `inject`, and `defineAsyncComponent` with ErrorBoundary handoff
-- Routing through `mikuru/router` with route matching, history/hash/memory histories, guards, router context helpers, `RouterView`, and `RouterLink`
-- SSR through `compileSsr()` and `mikuru/server`, covering escaped text, static and bound attributes, content directives, `v-pre`, `v-cloak`, `v-if` chains, `v-for`, async child components, props, named/default slots, scoped slot props, component tree context, Teleport collection, and router route rendering with context propagation
-- Hydration through `compileHydration()` and `hydrateRoute()`, reusing existing SSR DOM while attaching events, syncing text/attributes, hydrating component context/lifecycle hooks, `v-show`, DOM and component `v-model`, `v-pre`, `v-cloak`, initial `v-if` / `v-for` DOM, Teleport target and disabled inline content, delegating child and route components to `hydrate()` when available, and optionally starting router history listening after route hydration
+- Runtime helpers including `ref`, `isRef`, `unref`, `toRef`, `toRefs`, `reactive`, `readonly`, lazy cached read-only and writable `computed`, `effect` with optional scheduling, `queueJob`/`flushJobs`, `watch`, `watchEffect` with cleanup callbacks, `nextTick`, lifecycle callbacks including KeepAlive activation hooks, `provide`, `inject`, and `defineAsyncComponent` with ErrorBoundary handoff and SSR loader resolution
+- Routing through `mikuru/router` with route matching, history/hash/memory histories, guards, router context helpers, and `RouterView` / `RouterLink` across mount, SSR, and hydration
+- SSR through `compileSsr()` and `mikuru/server`, covering escaped text, static and bound attributes, content directives, `v-pre`, `v-cloak`, `v-if` chains, `v-for`, async child components, props, named/default slots, scoped slot props, component tree context, Teleport collection, string and async iterable stream rendering, and router route rendering with context propagation
+- Hydration through `compileHydration()` and `hydrateRoute()`, reusing existing SSR DOM while attaching events, syncing text/attributes, recovering structural mismatches with an opt-out remount fallback, hydrating component context/lifecycle hooks, `v-show`, DOM and component `v-model`, `v-pre`, `v-cloak`, initial `v-if` / `v-for` DOM, Teleport target and disabled inline content, delegating child and route components to `hydrate()` when available, and optionally starting router history listening after route hydration
 - Style injection and basic `<style scoped>` selector rewriting
 - Compile errors with filenames, line/column information, code frames, and typo suggestions for built-in attributes, directives, and modifiers
 
@@ -180,7 +180,7 @@ Compiler, runtime, and server entries are public for lower-level integrations:
 ```ts
 import { compile, compileHydration, compileSsr } from "mikuru/compiler";
 import { effect, isRef, nextTick, reactive, readonly, ref, toRef, toRefs, unref, unwrap, watch } from "mikuru/runtime";
-import { hydrateRoute, renderComponentToString, renderRouteToString, renderToString } from "mikuru/server";
+import { hydrateRoute, renderComponentToString, renderRouteToString, renderToStream, renderToString } from "mikuru/server";
 import type { MikuruAsyncBoundaryFallbackProps, MikuruErrorBoundaryFallbackProps, MikuruErrorInfo, MikuruErrorPhase } from "mikuru/runtime";
 ```
 
@@ -246,6 +246,8 @@ npm run test:create
 npm run test:package
 npm run test:pack
 npm run test:e2e
+npm run test:e2e:router-ssr-hydration
+npm run test:e2e:ssr-hydration
 ```
 
 Examples can be run from the repository root:
@@ -254,6 +256,8 @@ Examples can be run from the repository root:
 npm run dev:basic
 npm run dev:realworld
 npm run dev:dogfood
+npm run dev:router-ssr-hydration
+npm run dev:ssr-hydration
 npm run dev:mikuru-sample
 npm run dev:mikuru-vue-like
 ```

package/dist/compiler/compileHydration.js

@@ -13,8 +13,8 @@ export function compileHydration(source, options = {}) {
     });
     const bindings = analyzeTemplate(ast, { source, filename: options.filename });
     const mountCode = generate(descriptor, ast, { debug: options.debug === true, batchedUpdates: options.batchedUpdates === true });
-    const hydrationCode = generateHydration(descriptor, ast);
-    const code = mountCode.replace("export default __mikuru_component;", `${hydrationCode}\nexport { hydrate };\nconst __mikuru_hydrationComponent = { ...__mikuru_component, hydrate };\nexport default __mikuru_hydrationComponent;`);
+    const hydrationCode = generateHydration(descriptor, ast, { includeImports: false });
+    const code = mountCode.replace("export default __mikuru_component;", `${hydrationCode}\nconst __mikuru_hydrationComponent = { ...__mikuru_component, hydrate };\nexport default __mikuru_hydrationComponent;`);
     const map = createSourceMap(code, descriptor, ast);
     return {
         code,

package/dist/compiler/compileHydration.js.map

@@ -1 +1 @@
-{"version":3,"file":"compileHydration.js","sourceRoot":"","sources":["../../src/compiler/compileHydration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,UAA0B,EAAE;IAC3E,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;QAC7C,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,MAAM;QACN,MAAM,EAAE,UAAU,CAAC,cAAc;KAClC,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC,CAAC;IAChI,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACzD,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,oCAAoC,EAAE,GAAG,aAAa,6IAA6I,CAAC,CAAC;IACpO,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC;IAEnD,OAAO;QACL,IAAI;QACJ,GAAG;QACH,UAAU;QACV,GAAG;QACH,QAAQ;KACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"compileHydration.js","sourceRoot":"","sources":["../../src/compiler/compileHydration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,UAA0B,EAAE;IAC3E,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;QAC7C,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,MAAM;QACN,MAAM,EAAE,UAAU,CAAC,cAAc;KAClC,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9E,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC,CAAC;IAChI,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,oCAAoC,EAAE,GAAG,aAAa,wHAAwH,CAAC,CAAC;IAC/M,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC;IAEnD,OAAO;QACL,IAAI;QACJ,GAAG;QACH,UAAU;QACV,GAAG;QACH,QAAQ;KACT,CAAC;AACJ,CAAC"}

package/dist/compiler/generateHydration.d.ts

@@ -1,2 +1,6 @@
 import type { ElementNode, SfcDescriptor } from "./types.js";
-export declare function generateHydration(descriptor: SfcDescriptor, root: ElementNode): string;
+type GenerateHydrationOptions = {
+    includeImports?: boolean;
+};
+export declare function generateHydration(descriptor: SfcDescriptor, root: ElementNode, options?: GenerateHydrationOptions): string;
+export {};

package/dist/compiler/generateHydration.js

@@ -1,5 +1,5 @@
 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 +8,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 = [];");
@@ -36,6 +38,19 @@ export function generateHydration(descriptor, root) {
     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_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 +75,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 +115,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;
@@ -134,6 +166,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 +193,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 +223,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 +255,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 +281,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 +418,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 +437,51 @@ 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 children = getDefaultHydrationSlotChildren(node);
+    if (!children || !hasMeaningfulHydrationChildren(children)) {
+        return;
+    }
+    const slotTargetVar = nextName(context, "slotTarget");
+    const slotPropsVar = nextName(context, "slotProps");
+    emit(context, indent, `${propsVar}.children = (${slotTargetVar}, ${slotPropsVar} = {}) => {`);
+    hydrateChildren(context, children, slotTargetVar, indent + 1);
+    emit(context, indent, "};");
+    emit(context, indent, `${propsVar}.slots = { ...(${propsVar}.slots ?? {}), default: ${propsVar}.children };`);
+}
+function getDefaultHydrationSlotChildren(node) {
+    const defaultChildren = [];
+    for (const child of node.children) {
+        if (child.type === "element" && child.tag === "template") {
+            const defaultSlotAttr = child.attrs.find(isDefaultSlotTemplateAttr);
+            if (defaultSlotAttr) {
+                return child.children;
+            }
+            if (child.attrs.some(isSlotTemplateAttr)) {
+                continue;
+            }
+        }
+        defaultChildren.push(child);
+    }
+    return defaultChildren;
+}
+function isDefaultSlotTemplateAttr(attr) {
+    return attr.name === "v-slot" || attr.name === "v-slot:default" || attr.name === "#default";
+}
+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 hydrateDynamicComponentAtIndex(context, node, parentVar, domIndex, indent) {
     const isAttr = getDynamicComponentIsAttr(node);
     if (!isAttr) {
@@ -404,7 +492,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 +504,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 +523,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 +564,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 +661,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 +688,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 +1072,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 +1135,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") {