mikuru 1.0.22 → 1.0.24

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 1.0.24 - 2026-05-14
+
+- Added Mikuru-native `m-*` directive syntax across DOM rendering, SSR, and hydration while keeping `v-*` as compatibility aliases.
+- Added debug compiler warnings for `v-*` compatibility aliases, pointing users to the matching `m-*` directive spelling.
+- Updated README, docs, examples, and templates to present `m-*` as the recommended directive syntax.
+- Added shared Debug Inspector diagnostic payloads for compiler, runtime, router, SSR, and hydration warning/error events.
+- Added support for `<template m-if>` / `<template m-else-if>` / `<template m-else>` fragment branches across DOM rendering, SSR, and hydration.
+- Added support for keyed `<template m-for>` fragment rows across DOM rendering, SSR, and hydration.
+- Expanded `<template m-for>` coverage for unkeyed fragments, nested fragment loops, and nested `m-if` / `m-else` branches.
+- Added hydrated `m-for` reconciliation so element and `<template m-for>` lists can append, remove, replace, and recreate rows after SSR hydration.
+
+## 1.0.23 - 2026-05-13
+
+- Added structured hydration diagnostic payloads with warning kind, recovery action, inferred expected/actual values, and DOM path context.
+- Added hydration warning filtering to the dogfood Debug Panel and rendered hydration diagnostics in the SSR/hydration example.
+- Stabilized the dogfood Debug Panel clear-events flow when background component and async debug events arrive after clearing.
+
 ## 1.0.22 - 2026-05-13
 
 - Generalized component slot hydration to pass default, named, dynamic, and scoped slots through `props.children` and `props.slots`.

package/README.md

@@ -132,23 +132,24 @@ declare const Greeting: MikuruComponent<GreetingProps>;
 - `.mikuru` SFCs with `<template>`, `<script>`, and `<style>`
 - Vite plugin support through `mikuru/vite`
 - Template interpolation with `{{ value }}`
-- DOM events with `@click`, `v-on:click`, inline handlers, object-form option modifiers, `.prevent`, `.stop`, `.self`, `.once`, `.capture`, `.passive`, key, mouse button, system, and `.exact` modifiers
+- DOM events with `@click`, `m-on:click`, inline handlers, object-form option modifiers, `.prevent`, `.stop`, `.self`, `.once`, `.capture`, `.passive`, key, mouse button, system, and `.exact` modifiers
 - Component events with `@select` and `.once`
-- Attribute bindings with normalized `:class` and `:style`, boolean/form property sync, direct/object `v-bind` modifiers like `.prop`, `.attr`, and `.camel`, plus dynamic arguments like `:[name]` and `@[event]`
-- `v-if`, `v-else-if`, `v-else`, `v-show`, `v-for`, `v-html`, `v-text`, `v-pre`, and `v-cloak`
-- `v-model` for common form controls, checkbox arrays, radio groups, multiple selects, modifiers, and named child component models
+- Attribute bindings with normalized `:class` and `:style`, boolean/form property sync, direct/object `m-bind` modifiers like `.prop`, `.attr`, and `.camel`, plus dynamic arguments like `:[name]` and `@[event]`
+- `m-if`, `m-else-if`, `m-else`, `m-show`, `m-for`, `m-html`, `m-text`, `m-pre`, and `m-cloak`
+- `m-model` for common form controls, checkbox arrays, radio groups, multiple selects, modifiers, and named child component models
+- `v-*` directive spellings remain available as compatibility aliases for existing components and Vue-oriented migrations
 - Component props, events, DOM attribute fallthrough, `useAttrs`, template refs, `defineProps`, `defineEmits`, default slots, named/dynamic slots, and slot props with simple defaults
-- CSS class transitions with built-in `<Transition name="fade">`, `v-if` chains, dynamic components, class overrides, `appear`, `mode="out-in"`, and `<TransitionGroup>` for keyed lists
+- CSS class transitions with built-in `<Transition name="fade">`, `m-if` chains, dynamic components, class overrides, `appear`, `mode="out-in"`, and `<TransitionGroup>` for keyed lists
 - 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 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
+- SSR through `compileSsr()` and `mikuru/server`, covering escaped text, static and bound attributes, content directives, `m-pre`, `m-cloak`, `m-if` chains, `m-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, `m-show`, DOM and component `m-model`, `m-pre`, `m-cloak`, initial `m-if` / `m-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
-- Debug diagnostics with optional generated `sourceURL`, unstable devtools metadata/events, and hydration warnings that include phase, component, and filename context
+- Debug diagnostics with optional generated `sourceURL`, `v-*` compatibility warnings, unstable devtools metadata/events, and hydration warnings that include phase, component, and filename context
 
 ## Package Exports
 
@@ -199,8 +200,8 @@ npx mikuru --list-templates
 <template>
   <button @click="open = !open">Toggle</button>
   <Transition name="fade">
-    <p v-if="open">Saved changes</p>
-    <p v-else>Waiting for edits</p>
+    <p m-if="open">Saved changes</p>
+    <p m-else>Waiting for edits</p>
   </Transition>
 </template>
 

package/dist/compiler/compatDiagnostics.d.ts

@@ -0,0 +1,8 @@
+import type { ElementNode } from "./types.js";
+type CompatDirectiveDiagnosticOptions = {
+    debug?: boolean;
+    filename?: string;
+    phase: string;
+};
+export declare function emitCompatDirectiveDiagnostics(ast: ElementNode, options: CompatDirectiveDiagnosticOptions): void;
+export {};

package/dist/compiler/compatDiagnostics.js

@@ -0,0 +1,45 @@
+import { emitDebugDiagnostic } from "../runtime/devtools.js";
+export function emitCompatDirectiveDiagnostics(ast, options) {
+    if (options.debug !== true) {
+        return;
+    }
+    walkElement(ast, (node) => {
+        for (const attr of node.attrs) {
+            if (!isLegacyDirectiveAttr(attr)) {
+                continue;
+            }
+            const sourceName = attr.sourceName ?? attr.name;
+            const preferredName = preferredDirectiveName(sourceName);
+            emitDebugDiagnostic("compiler", "warning", `${sourceName} is supported as a compatibility alias. Prefer ${preferredName} in Mikuru components.`, {
+                phase: options.phase,
+                filename: options.filename,
+                directive: sourceName,
+                preferredDirective: preferredName,
+                tag: node.tag,
+                loc: attr.loc
+            });
+        }
+    });
+}
+function walkElement(node, visit) {
+    visit(node);
+    if (node.attrs.some((attr) => attr.name === "v-pre")) {
+        return;
+    }
+    for (const child of node.children) {
+        if (isElementNode(child)) {
+            walkElement(child, visit);
+        }
+    }
+}
+function isElementNode(node) {
+    return node.type === "element";
+}
+function isLegacyDirectiveAttr(attr) {
+    const sourceName = attr.sourceName ?? attr.name;
+    return sourceName.startsWith("v-");
+}
+function preferredDirectiveName(name) {
+    return name.startsWith("v-") ? `m-${name.slice("v-".length)}` : name;
+}
+//# sourceMappingURL=compatDiagnostics.js.map

package/dist/compiler/compatDiagnostics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compatDiagnostics.js","sourceRoot":"","sources":["../../src/compiler/compatDiagnostics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,MAAM,UAAU,8BAA8B,CAAC,GAAgB,EAAE,OAAyC;IACxG,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;QAC3B,OAAO;IACT,CAAC;IAED,WAAW,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QACxB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjC,SAAS;YACX,CAAC;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC;YAChD,MAAM,aAAa,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;YACzD,mBAAmB,CACjB,UAAU,EACV,SAAS,EACT,GAAG,UAAU,kDAAkD,aAAa,wBAAwB,EACpG;gBACE,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;gBAC1B,SAAS,EAAE,UAAU;gBACrB,kBAAkB,EAAE,aAAa;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,GAAG,EAAE,IAAI,CAAC,GAAG;aACd,CACF,CAAC;QACJ,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,IAAiB,EAAE,KAAkC;IACxE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEZ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,EAAE,CAAC;QACrD,OAAO;IACT,CAAC;IAED,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClC,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,IAAkB;IACvC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;AACjC,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAuB;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC;IAChD,OAAO,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,sBAAsB,CAAC,IAAY;IAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AACvE,CAAC"}

package/dist/compiler/compile.js

@@ -1,24 +1,37 @@
 import { analyzeTemplate } from "./analyzeTemplate.js";
+import { emitCompatDirectiveDiagnostics } from "./compatDiagnostics.js";
 import { generate } from "./generate.js";
 import { parseSfc } from "./parseSfc.js";
 import { parseTemplate } from "./parseTemplate.js";
 import { createSourceMap } from "./sourceMap.js";
+import { emitDebugDiagnostic } from "../runtime/devtools.js";
 export function compile(source, options = {}) {
-    const descriptor = parseSfc(source, options.filename);
-    const ast = parseTemplate(descriptor.template, {
-        filename: options.filename,
-        source,
-        offset: descriptor.templateOffset
-    });
-    const bindings = analyzeTemplate(ast, { source, filename: options.filename });
-    const code = generate(descriptor, ast, { debug: options.debug === true, batchedUpdates: options.batchedUpdates === true });
-    const map = createSourceMap(code, descriptor, ast);
-    return {
-        code,
-        map,
-        descriptor,
-        ast,
-        bindings
-    };
+    try {
+        const descriptor = parseSfc(source, options.filename);
+        const ast = parseTemplate(descriptor.template, {
+            filename: options.filename,
+            source,
+            offset: descriptor.templateOffset
+        });
+        emitCompatDirectiveDiagnostics(ast, { debug: options.debug === true, filename: options.filename, phase: "compile" });
+        const bindings = analyzeTemplate(ast, { source, filename: options.filename });
+        const code = generate(descriptor, ast, { debug: options.debug === true, batchedUpdates: options.batchedUpdates === true });
+        const map = createSourceMap(code, descriptor, ast);
+        return {
+            code,
+            map,
+            descriptor,
+            ast,
+            bindings
+        };
+    }
+    catch (error) {
+        emitDebugDiagnostic("compiler", "error", error instanceof Error ? error.message : String(error), {
+            phase: "compile",
+            filename: options.filename,
+            error
+        });
+        throw error;
+    }
 }
 //# sourceMappingURL=compile.js.map

package/dist/compiler/compile.js.map

@@ -1 +1 @@
-{"version":3,"file":"compile.js","sourceRoot":"","sources":["../../src/compiler/compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,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,OAAO,CAAC,MAAc,EAAE,UAA0B,EAAE;IAClE,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,IAAI,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;IAC3H,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":"compile.js","sourceRoot":"","sources":["../../src/compiler/compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,UAA0B,EAAE;IAClE,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;YAC7C,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,MAAM;YACN,MAAM,EAAE,UAAU,CAAC,cAAc;SAClC,CAAC,CAAC;QACH,8BAA8B,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACrH,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9E,MAAM,IAAI,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;QAC3H,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO;YACL,IAAI;YACJ,GAAG;YACH,UAAU;YACV,GAAG;YACH,QAAQ;SACT,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mBAAmB,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC/F,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,KAAK;SACN,CAAC,CAAC;QACH,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}

package/dist/compiler/compileHydration.js

@@ -1,27 +1,40 @@
 import { analyzeTemplate } from "./analyzeTemplate.js";
+import { emitCompatDirectiveDiagnostics } from "./compatDiagnostics.js";
 import { generate } from "./generate.js";
 import { generateHydration } from "./generateHydration.js";
 import { parseSfc } from "./parseSfc.js";
 import { parseTemplate } from "./parseTemplate.js";
 import { createSourceMap } from "./sourceMap.js";
+import { emitDebugDiagnostic } from "../runtime/devtools.js";
 export function compileHydration(source, options = {}) {
-    const descriptor = parseSfc(source, options.filename);
-    const ast = parseTemplate(descriptor.template, {
-        filename: options.filename,
-        source,
-        offset: descriptor.templateOffset
-    });
-    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, { 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,
-        map,
-        descriptor,
-        ast,
-        bindings
-    };
+    try {
+        const descriptor = parseSfc(source, options.filename);
+        const ast = parseTemplate(descriptor.template, {
+            filename: options.filename,
+            source,
+            offset: descriptor.templateOffset
+        });
+        emitCompatDirectiveDiagnostics(ast, { debug: options.debug === true, filename: options.filename, phase: "compile-hydration" });
+        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, { 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,
+            map,
+            descriptor,
+            ast,
+            bindings
+        };
+    }
+    catch (error) {
+        emitDebugDiagnostic("compiler", "error", error instanceof Error ? error.message : String(error), {
+            phase: "compile-hydration",
+            filename: options.filename,
+            error
+        });
+        throw error;
+    }
 }
 //# sourceMappingURL=compileHydration.js.map

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,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"}
+{"version":3,"file":"compileHydration.js","sourceRoot":"","sources":["../../src/compiler/compileHydration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,wBAAwB,CAAC;AACxE,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;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,UAA0B,EAAE;IAC3E,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;YAC7C,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,MAAM;YACN,MAAM,EAAE,UAAU,CAAC,cAAc;SAClC,CAAC,CAAC;QACH,8BAA8B,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAC/H,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9E,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;QAChI,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QACpF,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,oCAAoC,EAAE,GAAG,aAAa,wHAAwH,CAAC,CAAC;QAC/M,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO;YACL,IAAI;YACJ,GAAG;YACH,UAAU;YACV,GAAG;YACH,QAAQ;SACT,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mBAAmB,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC/F,KAAK,EAAE,mBAAmB;YAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,KAAK;SACN,CAAC,CAAC;QACH,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}

package/dist/compiler/compileSsr.js

@@ -1,21 +1,34 @@
 import { analyzeTemplate } from "./analyzeTemplate.js";
+import { emitCompatDirectiveDiagnostics } from "./compatDiagnostics.js";
 import { generateSsr } from "./generateSsr.js";
 import { parseSfc } from "./parseSfc.js";
 import { parseTemplate } from "./parseTemplate.js";
+import { emitDebugDiagnostic } from "../runtime/devtools.js";
 export function compileSsr(source, options = {}) {
-    const descriptor = parseSfc(source, options.filename);
-    const ast = parseTemplate(descriptor.template, {
-        filename: options.filename,
-        source,
-        offset: descriptor.templateOffset
-    });
-    const bindings = analyzeTemplate(ast, { source, filename: options.filename });
-    const code = generateSsr(descriptor, ast);
-    return {
-        code,
-        descriptor,
-        ast,
-        bindings
-    };
+    try {
+        const descriptor = parseSfc(source, options.filename);
+        const ast = parseTemplate(descriptor.template, {
+            filename: options.filename,
+            source,
+            offset: descriptor.templateOffset
+        });
+        emitCompatDirectiveDiagnostics(ast, { debug: options.debug === true, filename: options.filename, phase: "compile-ssr" });
+        const bindings = analyzeTemplate(ast, { source, filename: options.filename });
+        const code = generateSsr(descriptor, ast);
+        return {
+            code,
+            descriptor,
+            ast,
+            bindings
+        };
+    }
+    catch (error) {
+        emitDebugDiagnostic("compiler", "error", error instanceof Error ? error.message : String(error), {
+            phase: "compile-ssr",
+            filename: options.filename,
+            error
+        });
+        throw error;
+    }
 }
 //# sourceMappingURL=compileSsr.js.map

package/dist/compiler/compileSsr.js.map

@@ -1 +1 @@
-{"version":3,"file":"compileSsr.js","sourceRoot":"","sources":["../../src/compiler/compileSsr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,UAA0B,EAAE;IACrE,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,IAAI,GAAG,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAE1C,OAAO;QACL,IAAI;QACJ,UAAU;QACV,GAAG;QACH,QAAQ;KACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"compileSsr.js","sourceRoot":"","sources":["../../src/compiler/compileSsr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,8BAA8B,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,UAA0B,EAAE;IACrE,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,GAAG,GAAG,aAAa,CAAC,UAAU,CAAC,QAAQ,EAAE;YAC7C,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,MAAM;YACN,MAAM,EAAE,UAAU,CAAC,cAAc;SAClC,CAAC,CAAC;QACH,8BAA8B,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;QACzH,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9E,MAAM,IAAI,GAAG,WAAW,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAE1C,OAAO;YACL,IAAI;YACJ,UAAU;YACV,GAAG;YACH,QAAQ;SACT,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mBAAmB,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;YAC/F,KAAK,EAAE,aAAa;YACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,KAAK;SACN,CAAC,CAAC;QACH,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}

package/dist/compiler/generate.d.ts

@@ -1,7 +1,23 @@
-import type { ElementNode, SfcDescriptor } from "./types.js";
+import type { ElementNode, SfcDescriptor, TemplateNode } from "./types.js";
+export type GenerateContext = {
+    lines: string[];
+    index: number;
+    source?: string;
+    filename?: string;
+    scopeAttr?: string;
+    templateRefMode?: "single" | "array";
+    componentContextVar?: string;
+    debug?: boolean;
+    batchedUpdates?: boolean;
+    once?: boolean;
+};
 type GenerateOptions = {
     debug?: boolean;
     batchedUpdates?: boolean;
 };
 export declare function generate(descriptor: SfcDescriptor, root: ElementNode, options?: GenerateOptions): string;
+export declare function generateNode(context: GenerateContext, node: TemplateNode, parentVar: string, cleanupVar: string, indent: number, beforeVar?: string): string;
+export declare function generateChildren(context: GenerateContext, children: TemplateNode[], parentVar: string, cleanupVar: string, indent: number, beforeVar?: string): void;
+export declare function withoutForAttrs(node: ElementNode): ElementNode;
+export declare function createScopeAttr(descriptor: SfcDescriptor): string;
 export {};

package/dist/compiler/generate.js

@@ -20,7 +20,7 @@ export function generate(descriptor, root, options = {}) {
         runtimeBaseImports.push("queueJob");
     }
     if (context.debug) {
-        runtimeBaseImports.push("emitDebugEvent", "registerDebugComponent");
+        runtimeBaseImports.push("createDebugDiagnostic", "emitDebugEvent", "registerDebugComponent");
     }
     const runtimeImports = mergeRuntimeImports(runtimeBaseImports, script.runtimeImports);
     emit(context, 0, `import { ${runtimeImports.join(", ")} } from "mikuru/runtime";`);
@@ -41,7 +41,7 @@ export function generate(descriptor, root, options = {}) {
     emit(context, 1, "const __mikuru_errorInfo = (phase) => ({ ...__mikuru_componentInfo, phase });");
     emit(context, 1, "const __mikuru_reportError = (error, errorHandler = __mikuru_context.errorHandler, phase = \"runtime\") => {");
     if (context.debug) {
-        emit(context, 2, "emitDebugEvent(\"component:error\", { component: __mikuru_componentInfo, error, errorInfo: __mikuru_errorInfo(phase), componentId: __mikuru_debug.id });");
+        emit(context, 2, "emitDebugEvent(\"component:error\", { component: __mikuru_componentInfo, error, errorInfo: __mikuru_errorInfo(phase), componentId: __mikuru_debug.id, diagnostic: createDebugDiagnostic(\"runtime\", \"error\", error instanceof Error ? error.message : String(error), { ...__mikuru_errorInfo(phase), error }) });");
     }
     emit(context, 2, "if (typeof errorHandler === \"function\") { Promise.resolve().then(() => errorHandler(error, __mikuru_errorInfo(phase))); return; }");
     emit(context, 2, "setTimeout(() => { throw error; });");
@@ -235,7 +235,7 @@ function emitDevtoolsRootUpdate(context, rootVar, indent) {
     emit(context, indent, `__mikuru_debug.update({ root: ${rootVar} });`);
     emit(context, indent, "emitDebugEvent(\"component:mount\", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, root: __mikuru_debug.metadata.root, props: __mikuru_debug.metadata.props, attrs: __mikuru_debug.metadata.attrs });");
 }
-function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
+export function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
     if (node.type === "text") {
         return generateText(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
@@ -286,8 +286,28 @@ function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
     if (node.tag === "slot") {
         return generateSlot(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
+    if (node.tag === "template") {
+        return generateTemplateFragment(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
     return generateElement(context, node, parentVar, cleanupVar, indent, beforeVar);
 }
+function generateTemplateFragment(context, node, parentVar, cleanupVar, indent, beforeVar) {
+    validatePlainTemplate(context, node);
+    const startVar = nextVar(context, "templateStart");
+    const endVar = nextVar(context, "templateEnd");
+    emit(context, indent, `const ${startVar} = document.createComment("template");`);
+    emit(context, indent, `const ${endVar} = document.createComment("/template");`);
+    appendNode(context, parentVar, startVar, indent, beforeVar);
+    appendNode(context, parentVar, endVar, indent, beforeVar);
+    generateChildren(context, node.children, parentVar, cleanupVar, indent, endVar);
+    return startVar;
+}
+function validatePlainTemplate(context, node) {
+    const slotAttr = node.attrs.find((attr) => isSlotDirectiveAttr(attr));
+    if (slotAttr) {
+        throwTemplateError("Slot templates must be direct children of a component", context, slotAttr.loc);
+    }
+}
 function generateTransition(context, node, parentVar, cleanupVar, indent, beforeVar) {
     validateTransitionAttributes(context, node);
     const children = getTransitionChildren(context, node);
@@ -420,7 +440,7 @@ function generateErrorBoundary(context, node, parentVar, cleanupVar, indent, bef
     emit(context, indent + 1, `if (!${fallbackVar} || typeof ${fallbackVar}.mount !== "function") { throw ${errorVar}; }`);
     emit(context, indent + 1, `const ${normalizedErrorInfoVar} = ${errorInfoVar} && typeof ${errorInfoVar} === "object" ? ${errorInfoVar} : {};`);
     if (context.debug) {
-        emit(context, indent + 1, `emitDebugEvent("component:error", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, error: ${errorVar}, errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo } });`);
+        emit(context, indent + 1, `emitDebugEvent("component:error", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, error: ${errorVar}, errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo }, diagnostic: createDebugDiagnostic("runtime", "error", ${errorVar} instanceof Error ? ${errorVar}.message : String(${errorVar}), { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo, error: ${errorVar} }) });`);
     }
     emit(context, indent + 1, `const ${fallbackFragmentVar} = document.createDocumentFragment();`);
     emit(context, indent + 1, `const ${fallbackInstanceVar} = ${fallbackVar}.mount(${fallbackFragmentVar}, { error: ${errorVar}, errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo }, retry: ${renderVar}, reset: ${renderVar}, __mikuru_context });`);
@@ -546,7 +566,7 @@ function generateAsyncBoundary(context, node, parentVar, cleanupVar, indent, bef
     emit(context, indent + 1, `if (!${fallbackVar} || typeof ${fallbackVar}.mount !== "function") { throw ${errorVar}; }`);
     emit(context, indent + 1, `const ${normalizedErrorInfoVar} = ${errorInfoVar} && typeof ${errorInfoVar} === "object" ? ${errorInfoVar} : {};`);
     if (context.debug) {
-        emit(context, indent + 1, `emitDebugEvent("async:rejected", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, error: ${errorVar}, errors: [...${errorsVar}], pending: ${pendingVar}, errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo } });`);
+        emit(context, indent + 1, `emitDebugEvent("async:rejected", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, error: ${errorVar}, errors: [...${errorsVar}], pending: ${pendingVar}, errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo }, diagnostic: createDebugDiagnostic("runtime", "error", ${errorVar} instanceof Error ? ${errorVar}.message : String(${errorVar}), { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo, error: ${errorVar} }) });`);
     }
     emit(context, indent + 1, `const ${fallbackFragmentVar} = document.createDocumentFragment();`);
     emit(context, indent + 1, `const ${fallbackInstanceVar} = ${fallbackVar}.mount(${fallbackFragmentVar}, { error: ${errorVar}, errors: [...${errorsVar}], errorInfo: { ...${normalizedErrorInfoVar}, boundary: __mikuru_componentInfo }, pending: ${pendingVar}, retry: ${lastRetryVar}, reset: ${lastRetryVar}, __mikuru_context });`);
@@ -1545,7 +1565,7 @@ function emitObjectListeners(context, elementVar, attr, cleanupVar, indent) {
     emit(context, indent + 1, `${listenersVar}.clear();`);
     emit(context, indent, "});");
 }
-function generateChildren(context, children, parentVar, cleanupVar, indent, beforeVar) {
+export function generateChildren(context, children, parentVar, cleanupVar, indent, beforeVar) {
     let index = 0;
     while (index < children.length) {
         const child = children[index];
@@ -1656,6 +1676,9 @@ function generateFor(context, node, parentVar, cleanupVar, indent, expression, b
     const { item: itemName, index: indexName, source: sourceExpression } = parseForExpression(expression, toExpressionContext(context, getStringAttrLocation(node, "v-for")));
     const keyExpression = getKeyExpression(node);
     if (keyExpression) {
+        if (node.tag === "template") {
+            return generateKeyedTemplateFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar);
+        }
         return generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar);
     }
     const startVar = nextVar(context, "forStart");
@@ -1696,6 +1719,110 @@ function generateFor(context, node, parentVar, cleanupVar, indent, expression, b
     emit(context, indent, "});");
     return startVar;
 }
+function generateKeyedTemplateFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar) {
+    validatePlainTemplate(context, node);
+    const startVar = nextVar(context, "forStart");
+    const endVar = nextVar(context, "forEnd");
+    const recordsVar = nextVar(context, "forRecords");
+    const stopVar = nextVar(context, "stop");
+    const compiledSource = compileTemplateExpression(sourceExpression, "v-for source", toExpressionContext(context, getStringAttrLocation(node, "v-for")));
+    const compiledKey = compileTemplateExpression(keyExpression, "v-for key", toExpressionContext(context, getKeyAttrLocation(node)));
+    const compiledMemo = getMemoExpression(context, node) ?? getOnceMemoExpression(context, node);
+    emit(context, indent, `const ${recordsVar} = new Map();`);
+    emit(context, indent, `const ${startVar} = document.createComment("for");`);
+    emit(context, indent, `const ${endVar} = document.createComment("/for");`);
+    appendNode(context, parentVar, startVar, indent, beforeVar);
+    appendNode(context, parentVar, endVar, indent, beforeVar);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    const sourceVar = nextVar(context, "forSource");
+    const nextRecordsVar = nextVar(context, "nextRecords");
+    const indexVar = nextVar(context, "forIndex");
+    const rawItemVar = nextVar(context, "forItem");
+    const rawIndexVar = nextVar(context, "forIndexValue");
+    const keyVar = nextVar(context, "forKey");
+    const recordVar = nextVar(context, "forRecord");
+    const recordCleanupVar = nextVar(context, "forRecordCleanup");
+    const itemRefVar = nextVar(context, "forItemRef");
+    const indexRefVar = nextVar(context, "forIndexRef");
+    const recordStartVar = nextVar(context, "forRecordStart");
+    const recordEndVar = nextVar(context, "forRecordEnd");
+    const memoVar = compiledMemo ? nextVar(context, "forMemo") : undefined;
+    const memoChangedVar = compiledMemo ? nextVar(context, "forMemoChanged") : undefined;
+    emit(context, indent + 1, `const ${sourceVar} = unwrap(${compiledSource}) ?? [];`);
+    emit(context, indent + 1, `const ${nextRecordsVar} = new Map();`);
+    emit(context, indent + 1, `for (let ${indexVar} = 0; ${indexVar} < ${sourceVar}.length; ${indexVar} += 1) {`);
+    emit(context, indent + 2, `const ${rawItemVar} = ${sourceVar}[${indexVar}];`);
+    emit(context, indent + 2, `const ${rawIndexVar} = ${indexVar};`);
+    emit(context, indent + 2, `const ${itemName} = ${rawItemVar};`);
+    if (indexName) {
+        emit(context, indent + 2, `const ${indexName} = ${rawIndexVar};`);
+    }
+    emit(context, indent + 2, `const ${keyVar} = unwrap(${compiledKey});`);
+    if (compiledMemo && memoVar) {
+        emit(context, indent + 2, `const ${memoVar} = ${compiledMemo};`);
+    }
+    emit(context, indent + 2, `let ${recordVar} = ${recordsVar}.get(${keyVar});`);
+    emit(context, indent + 2, `if (!${recordVar}) {`);
+    emit(context, indent + 3, `const ${recordCleanupVar} = [];`);
+    emit(context, indent + 3, `const ${itemRefVar} = ref(${rawItemVar});`);
+    if (indexName) {
+        emit(context, indent + 3, `const ${indexRefVar} = ref(${rawIndexVar});`);
+    }
+    emit(context, indent + 3, `const ${recordStartVar} = document.createComment("for item");`);
+    emit(context, indent + 3, `const ${recordEndVar} = document.createComment("/for item");`);
+    emit(context, indent + 3, `${parentVar}.insertBefore(${recordStartVar}, ${endVar});`);
+    emit(context, indent + 3, `${parentVar}.insertBefore(${recordEndVar}, ${endVar});`);
+    emit(context, indent + 3, `{`);
+    emit(context, indent + 4, `const ${itemName} = ${itemRefVar};`);
+    if (indexName) {
+        emit(context, indent + 4, `const ${indexName} = ${indexRefVar};`);
+    }
+    withTemplateRefMode(context, "array", () => {
+        generateChildren(context, node.children, parentVar, recordCleanupVar, indent + 4, recordEndVar);
+    });
+    emit(context, indent + 4, `${recordVar} = { start: ${recordStartVar}, end: ${recordEndVar}, cleanups: ${recordCleanupVar}, item: ${itemRefVar}${indexName ? `, index: ${indexRefVar}` : ""}${compiledMemo && memoVar ? `, memo: ${memoVar}` : ""} };`);
+    emit(context, indent + 3, `}`);
+    emit(context, indent + 2, `} else {`);
+    if (compiledMemo && memoVar && memoChangedVar) {
+        emit(context, indent + 3, `const ${memoChangedVar} = !__mikuru_memoEqual(${recordVar}.memo, ${memoVar});`);
+        emit(context, indent + 3, `if (${memoChangedVar}) {`);
+        emit(context, indent + 4, `${recordVar}.memo = ${memoVar};`);
+        emit(context, indent + 4, `${recordVar}.item.value = ${rawItemVar};`);
+        if (indexName) {
+            emit(context, indent + 4, `${recordVar}.index.value = ${rawIndexVar};`);
+        }
+        emit(context, indent + 3, "}");
+    }
+    else {
+        emit(context, indent + 3, `${recordVar}.item.value = ${rawItemVar};`);
+        if (indexName) {
+            emit(context, indent + 3, `${recordVar}.index.value = ${rawIndexVar};`);
+        }
+    }
+    emitMoveRangeBefore(context, indent + 3, `${recordVar}.start`, `${recordVar}.end`, parentVar, endVar);
+    emit(context, indent + 2, `}`);
+    emit(context, indent + 2, `${nextRecordsVar}.set(${keyVar}, ${recordVar});`);
+    emit(context, indent + 1, `}`);
+    emit(context, indent + 1, `for (const [${keyVar}, ${recordVar}] of ${recordsVar}) {`);
+    emit(context, indent + 2, `if (!${nextRecordsVar}.has(${keyVar})) {`);
+    emit(context, indent + 3, `__mikuru_runCleanup(${recordVar}.cleanups);`);
+    emitRemoveRange(context, indent + 3, `${recordVar}.start`, `${recordVar}.end`);
+    emit(context, indent + 2, `}`);
+    emit(context, indent + 1, `}`);
+    emit(context, indent + 1, `${recordsVar}.clear();`);
+    emit(context, indent + 1, `for (const [${keyVar}, ${recordVar}] of ${nextRecordsVar}) {`);
+    emit(context, indent + 2, `${recordsVar}.set(${keyVar}, ${recordVar});`);
+    emit(context, indent + 1, `}`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(() => {`);
+    emit(context, indent + 1, `${stopVar}();`);
+    emit(context, indent + 1, `for (const ${recordVar} of ${recordsVar}.values()) {`);
+    emit(context, indent + 2, `__mikuru_runCleanup(${recordVar}.cleanups);`);
+    emit(context, indent + 1, `}`);
+    emit(context, indent + 1, `${recordsVar}.clear();`);
+    emit(context, indent, "});");
+    return startVar;
+}
 function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar, transitionVar) {
     const startVar = nextVar(context, "forStart");
     const endVar = nextVar(context, "forEnd");
@@ -1807,6 +1934,31 @@ function emitRemoveBetween(context, indent, startVar, endVar) {
     emit(context, indent + 1, `${currentVar} = ${nextVarName};`);
     emit(context, indent, "}");
 }
+function emitRemoveRange(context, indent, startExpression, endExpression) {
+    const currentVar = nextVar(context, "current");
+    const nextVarName = nextVar(context, "next");
+    emit(context, indent, `let ${currentVar} = ${startExpression};`);
+    emit(context, indent, `while (${currentVar}) {`);
+    emit(context, indent + 1, `const ${nextVarName} = ${currentVar}.nextSibling;`);
+    emit(context, indent + 1, `__mikuru_removeNode(${currentVar});`);
+    emit(context, indent + 1, `if (${currentVar} === ${endExpression}) { break; }`);
+    emit(context, indent + 1, `${currentVar} = ${nextVarName};`);
+    emit(context, indent, "}");
+}
+function emitMoveRangeBefore(context, indent, startExpression, endExpression, parentVar, beforeExpression) {
+    const fragmentVar = nextVar(context, "fragment");
+    const currentVar = nextVar(context, "current");
+    const nextVarName = nextVar(context, "next");
+    emit(context, indent, `const ${fragmentVar} = document.createDocumentFragment();`);
+    emit(context, indent, `let ${currentVar} = ${startExpression};`);
+    emit(context, indent, `while (${currentVar}) {`);
+    emit(context, indent + 1, `const ${nextVarName} = ${currentVar}.nextSibling;`);
+    emit(context, indent + 1, `${fragmentVar}.appendChild(${currentVar});`);
+    emit(context, indent + 1, `if (${currentVar} === ${endExpression}) { break; }`);
+    emit(context, indent + 1, `${currentVar} = ${nextVarName};`);
+    emit(context, indent, "}");
+    emit(context, indent, `${parentVar}.insertBefore(${fragmentVar}, ${beforeExpression});`);
+}
 function emitTransitionRegistration(context, nodeVar, transitionVar, indent) {
     emit(context, indent, `if (${nodeVar}?.nodeType === 1) {`);
     emit(context, indent + 1, `${nodeVar}.__mikuru_transition = ${transitionVar};`);
@@ -2558,7 +2710,7 @@ function toExpressionContext(context, location) {
 function withoutAttr(node, name) {
     return withoutAttrs(node, [name]);
 }
-function withoutForAttrs(node) {
+export function withoutForAttrs(node) {
     return withoutAttrs(node, ["v-for", "key", ":key", "v-bind:key", "v-memo", "v-once"]);
 }
 function withoutAttrs(node, names) {
@@ -3728,7 +3880,7 @@ function quote(value) {
 function quotePropertyName(value) {
     return /^[A-Za-z_$][\w$]*$/.test(value) ? value : quote(value);
 }
-function createScopeAttr(descriptor) {
+export function createScopeAttr(descriptor) {
     return `data-mikuru-scope-${hash(`${descriptor.filename ?? ""}\n${descriptor.style ?? ""}`)}`;
 }
 function scopeCssSelectors(css, scopeAttr) {