mikuru 1.0.19 → 1.0.21

package/dist/compiler/generate.js

@@ -1,33 +1,53 @@
-import { parse } from "acorn";
+import { parse, parseExpressionAt } from "acorn";
 import { createCompileError } from "./errors.js";
 import { compileTemplateExpression, parseForExpression, validateAssignableExpression, validateTemplateExpression } from "./parseExpression.js";
-export function generate(descriptor, root) {
+export function generate(descriptor, root, options = {}) {
     const context = {
         lines: [],
         index: 0,
         source: descriptor.source,
         filename: descriptor.filename,
-        scopeAttr: descriptor.styleScoped ? createScopeAttr(descriptor) : undefined
+        scopeAttr: descriptor.styleScoped ? createScopeAttr(descriptor) : undefined,
+        debug: options.debug === true,
+        batchedUpdates: options.batchedUpdates === true
     };
     const script = normalizeScript(descriptor);
     for (const importLine of script.imports) {
         emit(context, 0, importLine);
     }
-    const runtimeImports = mergeRuntimeImports(["computed", "effect", "ref", "setAttribute", "unwrap"], script.runtimeImports);
+    const runtimeBaseImports = ["computed", "effect", "ref", "setAttribute", "unwrap"];
+    if (context.batchedUpdates) {
+        runtimeBaseImports.push("queueJob");
+    }
+    if (context.debug) {
+        runtimeBaseImports.push("emitDebugEvent", "registerDebugComponent");
+    }
+    const runtimeImports = mergeRuntimeImports(runtimeBaseImports, script.runtimeImports);
     emit(context, 0, `import { ${runtimeImports.join(", ")} } from "mikuru/runtime";`);
     emit(context, 0, "");
+    if (context.batchedUpdates) {
+        emit(context, 0, "const __mikuru_effect = (fn) => effect(fn, { scheduler: queueJob });");
+        emit(context, 0, "");
+    }
     emit(context, 0, "export function mount(target, props = {}) {");
     emit(context, 1, `const __mikuru_componentInfo = { component: ${quote(descriptor.filename ?? "anonymous.mikuru")}, filename: ${quote(descriptor.filename ?? "anonymous.mikuru")} };`);
+    emitDevtoolsRegistration(context, 1);
     emit(context, 1, "const __mikuru_cleanup = [];");
     emit(context, 1, "const __mikuru_afterUnmount = [];");
     emit(context, 1, "const __mikuru_mounted = [];");
-    emit(context, 1, "const __mikuru_context = { parent: props.__mikuru_context, provides: new Map(), errorHandler: props.__mikuru_context?.errorHandler, ...__mikuru_componentInfo };");
+    emit(context, 1, "const __mikuru_activated = [];");
+    emit(context, 1, "const __mikuru_deactivated = [];");
+    emit(context, 1, `const __mikuru_context = { parent: props.__mikuru_context, provides: new Map(), errorHandler: props.__mikuru_context?.errorHandler${context.debug ? ", debugId: __mikuru_debug.id" : ""}, ...__mikuru_componentInfo };`);
     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, "if (typeof errorHandler === \"function\") { Promise.resolve().then(() => errorHandler(error, __mikuru_errorInfo(phase))); return; }");
     emit(context, 2, "setTimeout(() => { throw error; });");
     emit(context, 1, "};");
     emit(context, 1, "const __mikuru_try = (fn, errorHandler, phase) => { try { return fn(); } catch (error) { __mikuru_reportError(error, errorHandler, phase); } };");
+    emit(context, 1, "const __mikuru_memoEqual = (previous, next) => Array.isArray(previous) && Array.isArray(next) && previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));");
     emit(context, 1, "const __mikuru_guardEventHandler = (fn, errorHandler = __mikuru_context.errorHandler) => (...args) => __mikuru_try(() => fn(...args), errorHandler, \"event\");");
     emit(context, 1, "const __mikuru_runCleanup = (cleanups) => {");
     emit(context, 2, "for (const cleanup of cleanups.splice(0).reverse()) {");
@@ -66,6 +86,12 @@ export function generate(descriptor, root) {
     emit(context, 3, "__mikuru_transitionDone(element, () => element.classList.remove(active, to));");
     emit(context, 2, "});");
     emit(context, 1, "};");
+    emit(context, 1, "const __mikuru_applyTransitionMove = (element, transition) => {");
+    emit(context, 2, "if (!element || element.nodeType !== 1 || !transition?.name) { return; }");
+    emit(context, 2, "const move = transition.moveClass || `${transition.name}-move`;");
+    emit(context, 2, "element.classList.add(move);");
+    emit(context, 2, "__mikuru_transitionFrame(() => __mikuru_transitionDone(element, () => element.classList.remove(move)));");
+    emit(context, 1, "};");
     emit(context, 1, "const __mikuru_removeNode = (node) => {");
     emit(context, 2, "if (!node || !node.parentNode) { return; }");
     emit(context, 2, "if (node.nodeType !== 1 || !node.__mikuru_transition || node.__mikuru_transitionLeaving) { node.remove(); return; }");
@@ -102,6 +128,8 @@ export function generate(descriptor, root) {
     emit(context, 1, "const __mikuru_previousRegistrar = globalThis.__mikuru_currentRegistrar;");
     emit(context, 1, "globalThis.__mikuru_currentRegistrar = {");
     emit(context, 2, "registerMounted: (fn) => __mikuru_mounted.push(fn),");
+    emit(context, 2, "registerActivated: (fn) => __mikuru_activated.push(fn),");
+    emit(context, 2, "registerDeactivated: (fn) => __mikuru_deactivated.push(fn),");
     emit(context, 2, "registerBeforeUnmount: (fn) => __mikuru_cleanup.push(fn),");
     emit(context, 2, "registerUnmounted: (fn) => __mikuru_afterUnmount.push(fn),");
     emit(context, 2, "provide: (key, value) => __mikuru_context.provides.set(key, value),");
@@ -140,12 +168,23 @@ export function generate(descriptor, root) {
         emit(context, 1, "");
     }
     const rootVar = generateNode(context, root, "target", "__mikuru_cleanup", 1);
+    emitDevtoolsRootUpdate(context, rootVar, 1);
     emit(context, 1, "// call mounted callbacks registered during setup and remove registrar");
     emit(context, 1, "for (const cb of __mikuru_mounted.splice(0)) { __mikuru_try(cb, undefined, \"mounted\"); }");
     emit(context, 1, "if (__mikuru_previousRegistrar === undefined) { delete globalThis.__mikuru_currentRegistrar; } else { globalThis.__mikuru_currentRegistrar = __mikuru_previousRegistrar; }");
     emit(context, 1, "return {");
     emit(context, 2, `element: ${rootVar},`);
+    emit(context, 2, "activate() {");
+    emit(context, 3, "for (const cb of __mikuru_activated) { __mikuru_try(cb, undefined, \"activated\"); }");
+    emit(context, 2, "},");
+    emit(context, 2, "deactivate() {");
+    emit(context, 3, "for (const cb of __mikuru_deactivated) { __mikuru_try(cb, undefined, \"deactivated\"); }");
+    emit(context, 2, "},");
     emit(context, 2, "unmount() {");
+    if (context.debug) {
+        emit(context, 3, "emitDebugEvent(\"component:unmount\", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id });");
+        emit(context, 3, "__mikuru_unregisterDevtools();");
+    }
     emit(context, 3, "__mikuru_runCleanup(__mikuru_cleanup);");
     emit(context, 3, "for (const cb of __mikuru_afterUnmount.splice(0).reverse()) { __mikuru_try(cb, undefined, \"unmounted\"); }");
     emit(context, 3, `__mikuru_removeNode(${rootVar});`);
@@ -155,7 +194,10 @@ export function generate(descriptor, root) {
     emit(context, 0, "");
     emit(context, 0, `const __mikuru_component = { mount${script.inheritAttrs ? "" : ", inheritAttrs: false"} };`);
     emit(context, 0, "export default __mikuru_component;");
-    return `${context.lines.join("\n")}\n`;
+    const lines = context.batchedUpdates
+        ? context.lines.map((line) => line.replace("= effect(() => {", "= __mikuru_effect(() => {"))
+        : context.lines;
+    return `${lines.join("\n")}\n`;
 }
 function emitStyleInjection(context, descriptor, indent) {
     const styleId = `mikuru-${hash(`${descriptor.filename ?? ""}\n${descriptor.style ?? ""}`)}`;
@@ -169,10 +211,42 @@ function emitStyleInjection(context, descriptor, indent) {
     emit(context, indent + 1, "document.head.appendChild(style);");
     emit(context, indent, "}");
 }
+function emitDevtoolsRegistration(context, indent) {
+    if (!context.debug) {
+        return;
+    }
+    emit(context, indent, "const __mikuru_publicProps = Object.fromEntries(Object.entries(props).filter(([key]) => !key.startsWith(\"__mikuru_\")));");
+    emit(context, indent, "const __mikuru_debugAttrs = props.__mikuru_attrs && typeof props.__mikuru_attrs === \"object\" ? { ...props.__mikuru_attrs } : {};");
+    emit(context, indent, "const __mikuru_debug = registerDebugComponent({");
+    emit(context, indent + 1, "name: __mikuru_componentInfo.component,");
+    emit(context, indent + 1, "filename: __mikuru_componentInfo.filename,");
+    emit(context, indent + 1, "parentId: props.__mikuru_context?.debugId,");
+    emit(context, indent + 1, "props: __mikuru_publicProps,");
+    emit(context, indent + 1, "propKeys: Object.keys(__mikuru_publicProps),");
+    emit(context, indent + 1, "attrs: __mikuru_debugAttrs,");
+    emit(context, indent + 1, "attrKeys: Object.keys(__mikuru_debugAttrs)");
+    emit(context, indent, "});");
+    emit(context, indent, "const __mikuru_unregisterDevtools = () => __mikuru_debug.unregister();");
+}
+function emitDevtoolsRootUpdate(context, rootVar, indent) {
+    if (!context.debug) {
+        return;
+    }
+    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) {
     if (node.type === "text") {
         return generateText(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
+    if (hasAttr(node, "v-pre")) {
+        validatePreAttribute(context, node);
+        return generatePreElement(context, node, parentVar, indent, beforeVar);
+    }
+    if (hasAttr(node, "v-once") && !hasAttr(node, "v-for")) {
+        validateOnceAttribute(context, node);
+        return withOnceMode(context, () => generateNode(context, withoutAttrs(node, ["v-once"]), parentVar, cleanupVar, indent, beforeVar));
+    }
     const forExpression = getStringAttr(node, "v-for");
     if (forExpression) {
         return generateFor(context, node, parentVar, cleanupVar, indent, forExpression, beforeVar);
@@ -191,12 +265,21 @@ function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
     if (node.tag === "Transition") {
         return generateTransition(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
+    if (node.tag === "TransitionGroup") {
+        return generateTransitionGroup(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
     if (node.tag === "Teleport") {
         return generateTeleport(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
+    if (node.tag === "AsyncBoundary") {
+        return generateAsyncBoundary(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
     if (node.tag === "ErrorBoundary") {
         return generateErrorBoundary(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
+    if (node.tag === "KeepAlive") {
+        return generateKeepAlive(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
     if (isComponentTag(node.tag)) {
         return generateComponent(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
@@ -221,6 +304,30 @@ function generateTransition(context, node, parentVar, cleanupVar, indent, before
     emitTransitionRegistration(context, childVar, transitionVar, indent);
     return childVar;
 }
+function generateTransitionGroup(context, node, parentVar, cleanupVar, indent, beforeVar) {
+    validateTransitionGroupAttributes(context, node);
+    const children = getSingleElementChild(context, node, "<TransitionGroup>");
+    const child = children[0];
+    const forExpression = getStringAttr(child, "v-for");
+    const keyExpression = getKeyExpression(child);
+    if (!forExpression || !keyExpression) {
+        throwTemplateError("<TransitionGroup> requires a single keyed v-for child in v1", context, child.loc);
+    }
+    const { item: itemName, index: indexName, source: sourceExpression } = parseForExpression(forExpression, toExpressionContext(context, getStringAttrLocation(child, "v-for")));
+    const groupVar = nextVar(context, "transitionGroup");
+    const groupCleanupVar = nextVar(context, "transitionGroupCleanup");
+    const transitionVar = nextVar(context, "transition");
+    emit(context, indent, `const ${transitionVar} = ${getTransitionOptionsExpression(context, node)};`);
+    emit(context, indent, `const ${groupVar} = document.createElement(String(unwrap(${getTransitionAttrExpression(context, node, "tag", "span")}) ?? "span"));`);
+    appendNode(context, parentVar, groupVar, indent, beforeVar);
+    emit(context, indent, `const ${groupCleanupVar} = [];`);
+    generateKeyedFor(context, child, groupVar, groupCleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, undefined, transitionVar);
+    emit(context, indent, `${cleanupVar}.push(() => {`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${groupCleanupVar});`);
+    emit(context, indent + 1, `__mikuru_removeNode(${groupVar});`);
+    emit(context, indent, "});");
+    return groupVar;
+}
 function generateTeleport(context, node, parentVar, cleanupVar, indent, beforeVar) {
     validateTeleportAttributes(context, node);
     const toExpression = getTeleportToExpression(context, node);
@@ -312,6 +419,9 @@ function generateErrorBoundary(context, node, parentVar, cleanupVar, indent, bef
     emit(context, indent + 1, `const ${fallbackVar} = unwrap(${fallbackExpression});`);
     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, `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 });`);
     emit(context, indent + 1, `${boundaryCleanupVar}.push(() => ${fallbackInstanceVar}.unmount());`);
@@ -354,6 +464,171 @@ function generateErrorBoundary(context, node, parentVar, cleanupVar, indent, bef
     emit(context, indent, "});");
     return startVar;
 }
+function generateAsyncBoundary(context, node, parentVar, cleanupVar, indent, beforeVar) {
+    validateAsyncBoundaryAttributes(context, node);
+    const children = getAsyncBoundaryChildren(context, node);
+    const loadingExpression = getAsyncBoundaryLoadingExpression(context, node);
+    const fallbackExpression = getAsyncBoundaryFallbackExpression(context, node);
+    const delayExpression = getAsyncBoundaryDelayExpression(context, node);
+    const timeoutExpression = getAsyncBoundaryTimeoutExpression(context, node);
+    const startVar = nextVar(context, "asyncBoundaryStart");
+    const endVar = nextVar(context, "asyncBoundaryEnd");
+    const boundaryCleanupVar = nextVar(context, "asyncBoundaryCleanup");
+    const loadingCleanupVar = nextVar(context, "asyncBoundaryLoadingCleanup");
+    const fallbackCleanupVar = nextVar(context, "asyncBoundaryFallbackCleanup");
+    const pendingVar = nextVar(context, "asyncBoundaryPending");
+    const failedVar = nextVar(context, "asyncBoundaryFailed");
+    const lastRetryVar = nextVar(context, "asyncBoundaryRetry");
+    const renderLoadingVar = nextVar(context, "renderAsyncBoundaryLoading");
+    const clearLoadingVar = nextVar(context, "clearAsyncBoundaryLoading");
+    const renderFallbackVar = nextVar(context, "renderAsyncBoundaryFallback");
+    const clearFallbackVar = nextVar(context, "clearAsyncBoundaryFallback");
+    const scheduleLoadingVar = nextVar(context, "scheduleAsyncBoundaryLoading");
+    const scheduleTimeoutVar = nextVar(context, "scheduleAsyncBoundaryTimeout");
+    const clearTimersVar = nextVar(context, "clearAsyncBoundaryTimers");
+    const renderVar = nextVar(context, "renderAsyncBoundary");
+    const loadingVar = nextVar(context, "asyncBoundaryLoading");
+    const loadingFragmentVar = nextVar(context, "asyncBoundaryLoading");
+    const loadingInstanceVar = nextVar(context, "asyncBoundaryLoading");
+    const fallbackVar = nextVar(context, "asyncBoundaryFallback");
+    const fallbackFragmentVar = nextVar(context, "asyncBoundaryFallback");
+    const fallbackInstanceVar = nextVar(context, "asyncBoundaryFallback");
+    const errorVar = nextVar(context, "error");
+    const errorInfoVar = nextVar(context, "errorInfo");
+    const errorsVar = nextVar(context, "asyncBoundaryErrors");
+    const normalizedErrorInfoVar = nextVar(context, "errorInfo");
+    const retryVar = nextVar(context, "retry");
+    const settledVar = nextVar(context, "settled");
+    const delayVar = nextVar(context, "asyncBoundaryDelay");
+    const timeoutVar = nextVar(context, "asyncBoundaryTimeout");
+    const delayTimerVar = nextVar(context, "asyncBoundaryDelayTimer");
+    const timeoutTimerVar = nextVar(context, "asyncBoundaryTimeoutTimer");
+    const timeoutErrorVar = nextVar(context, "asyncBoundaryTimeoutError");
+    const asyncContextVar = nextVar(context, "asyncBoundaryContext");
+    const previousComponentContextVar = context.componentContextVar;
+    emit(context, indent, `const ${startVar} = document.createComment("async-boundary");`);
+    emit(context, indent, `const ${endVar} = document.createComment("/async-boundary");`);
+    appendNode(context, parentVar, startVar, indent, beforeVar);
+    appendNode(context, parentVar, endVar, indent, beforeVar);
+    emit(context, indent, `const ${boundaryCleanupVar} = [];`);
+    emit(context, indent, `const ${loadingCleanupVar} = [];`);
+    emit(context, indent, `const ${fallbackCleanupVar} = [];`);
+    emit(context, indent, `let ${pendingVar} = 0;`);
+    emit(context, indent, `let ${failedVar} = false;`);
+    emit(context, indent, `let ${errorsVar} = [];`);
+    emit(context, indent, `let ${lastRetryVar} = () => {};`);
+    emit(context, indent, `let ${delayTimerVar};`);
+    emit(context, indent, `let ${timeoutTimerVar};`);
+    emit(context, indent, `const ${clearLoadingVar} = () => __mikuru_runCleanup(${loadingCleanupVar});`);
+    emit(context, indent, `const ${clearFallbackVar} = () => __mikuru_runCleanup(${fallbackCleanupVar});`);
+    emit(context, indent, `const ${clearTimersVar} = () => {`);
+    emit(context, indent + 1, `if (${delayTimerVar}) { clearTimeout(${delayTimerVar}); ${delayTimerVar} = undefined; }`);
+    emit(context, indent + 1, `if (${timeoutTimerVar}) { clearTimeout(${timeoutTimerVar}); ${timeoutTimerVar} = undefined; }`);
+    emit(context, indent, "};");
+    emit(context, indent, `const ${renderLoadingVar} = () => {`);
+    emit(context, indent + 1, `if (${failedVar}) { return; }`);
+    emit(context, indent + 1, `${clearLoadingVar}();`);
+    emit(context, indent + 1, `const ${loadingVar} = unwrap(${loadingExpression});`);
+    emit(context, indent + 1, `if (!${loadingVar} || typeof ${loadingVar}.mount !== "function") { return; }`);
+    emit(context, indent + 1, `const ${loadingFragmentVar} = document.createDocumentFragment();`);
+    emit(context, indent + 1, `const ${loadingInstanceVar} = ${loadingVar}.mount(${loadingFragmentVar}, { pending: ${pendingVar}, __mikuru_context });`);
+    emit(context, indent + 1, `${loadingCleanupVar}.push(() => ${loadingInstanceVar}.unmount());`);
+    appendNode(context, parentVar, loadingFragmentVar, indent + 1, endVar);
+    emit(context, indent, "};");
+    emit(context, indent, `const ${renderFallbackVar} = (${errorVar}, ${errorInfoVar} = __mikuru_errorInfo("async-loader")) => {`);
+    emit(context, indent + 1, `${failedVar} = true;`);
+    emit(context, indent + 1, `${clearTimersVar}();`);
+    emit(context, indent + 1, `${clearLoadingVar}();`);
+    emit(context, indent + 1, `${clearFallbackVar}();`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${boundaryCleanupVar});`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    emit(context, indent + 1, `const ${fallbackVar} = unwrap(${fallbackExpression});`);
+    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, `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 });`);
+    emit(context, indent + 1, `${fallbackCleanupVar}.push(() => ${fallbackInstanceVar}.unmount());`);
+    appendNode(context, parentVar, fallbackFragmentVar, indent + 1, endVar);
+    emit(context, indent, "};");
+    emit(context, indent, `const ${scheduleLoadingVar} = () => {`);
+    emit(context, indent + 1, `const ${delayVar} = Number(unwrap(${delayExpression}) ?? 0);`);
+    emit(context, indent + 1, `if (${delayVar} <= 0) { ${renderLoadingVar}(); return; }`);
+    emit(context, indent + 1, `if (${delayTimerVar}) { return; }`);
+    emit(context, indent + 1, `${delayTimerVar} = setTimeout(() => {`);
+    emit(context, indent + 2, `${delayTimerVar} = undefined;`);
+    emit(context, indent + 2, `if (${pendingVar} > 0 && !${failedVar}) { ${renderLoadingVar}(); }`);
+    emit(context, indent + 1, `}, ${delayVar});`);
+    emit(context, indent, "};");
+    emit(context, indent, `const ${scheduleTimeoutVar} = () => {`);
+    emit(context, indent + 1, `const ${timeoutVar} = unwrap(${timeoutExpression});`);
+    emit(context, indent + 1, `if (${timeoutVar} == null || Number(${timeoutVar}) <= 0 || ${timeoutTimerVar}) { return; }`);
+    emit(context, indent + 1, `${timeoutTimerVar} = setTimeout(() => {`);
+    emit(context, indent + 2, `${timeoutTimerVar} = undefined;`);
+    emit(context, indent + 2, `if (${pendingVar} <= 0 || ${failedVar}) { return; }`);
+    emit(context, indent + 2, `const ${timeoutErrorVar} = new Error("Async boundary timed out");`);
+    emit(context, indent + 2, `${errorsVar}.push(${timeoutErrorVar});`);
+    emit(context, indent + 2, `${renderFallbackVar}(${timeoutErrorVar}, __mikuru_errorInfo("async-timeout"));`);
+    emit(context, indent + 1, `}, Number(${timeoutVar}));`);
+    emit(context, indent, "};");
+    emit(context, indent, `const ${asyncContextVar} = { parent: __mikuru_context, provides: new Map(), errorHandler: __mikuru_context.errorHandler, asyncBoundary: {`);
+    emit(context, indent + 1, `start({ retry: ${retryVar} }) {`);
+    emit(context, indent + 2, `${pendingVar} += 1;`);
+    emit(context, indent + 2, `${lastRetryVar} = ${renderVar};`);
+    if (context.debug) {
+        emit(context, indent + 2, `emitDebugEvent("async:pending", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, pending: ${pendingVar} });`);
+    }
+    emit(context, indent + 2, `if (${pendingVar} === 1) { ${scheduleLoadingVar}(); ${scheduleTimeoutVar}(); } else if (${loadingCleanupVar}.length > 0) { ${renderLoadingVar}(); }`);
+    emit(context, indent + 2, `let ${settledVar} = false;`);
+    emit(context, indent + 2, "return {");
+    emit(context, indent + 3, "resolve() {");
+    emit(context, indent + 4, `if (${settledVar}) { return; }`);
+    emit(context, indent + 4, `${settledVar} = true;`);
+    emit(context, indent + 4, `${pendingVar} = Math.max(0, ${pendingVar} - 1);`);
+    if (context.debug) {
+        emit(context, indent + 4, `emitDebugEvent("async:resolved", { component: __mikuru_componentInfo, componentId: __mikuru_debug.id, pending: ${pendingVar} });`);
+    }
+    emit(context, indent + 4, `if (${pendingVar} === 0) { ${clearTimersVar}(); ${clearLoadingVar}(); } else if (${loadingCleanupVar}.length > 0) { ${renderLoadingVar}(); }`);
+    emit(context, indent + 3, "},");
+    emit(context, indent + 3, `reject(${errorVar}, ${errorInfoVar}) {`);
+    emit(context, indent + 4, `if (${settledVar}) { return; }`);
+    emit(context, indent + 4, `${settledVar} = true;`);
+    emit(context, indent + 4, `${pendingVar} = Math.max(0, ${pendingVar} - 1);`);
+    emit(context, indent + 4, `${errorsVar}.push(${errorVar});`);
+    emit(context, indent + 4, `${clearTimersVar}();`);
+    emit(context, indent + 4, `${renderFallbackVar}(${errorVar}, ${errorInfoVar});`);
+    emit(context, indent + 3, "}");
+    emit(context, indent + 2, "};");
+    emit(context, indent + 1, "}");
+    emit(context, indent, `}, ...__mikuru_componentInfo };`);
+    emit(context, indent, `const ${renderVar} = () => {`);
+    emit(context, indent + 1, `${failedVar} = false;`);
+    emit(context, indent + 1, `${pendingVar} = 0;`);
+    emit(context, indent + 1, `${errorsVar} = [];`);
+    emit(context, indent + 1, `${lastRetryVar} = ${renderVar};`);
+    emit(context, indent + 1, `${clearTimersVar}();`);
+    emit(context, indent + 1, `${clearLoadingVar}();`);
+    emit(context, indent + 1, `${clearFallbackVar}();`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${boundaryCleanupVar});`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    context.componentContextVar = asyncContextVar;
+    generateChildren(context, children, parentVar, boundaryCleanupVar, indent + 1, endVar);
+    context.componentContextVar = previousComponentContextVar;
+    emit(context, indent, "};");
+    emit(context, indent, `${renderVar}();`);
+    emit(context, indent, `${cleanupVar}.push(() => {`);
+    emit(context, indent + 1, `${clearTimersVar}();`);
+    emit(context, indent + 1, `${clearLoadingVar}();`);
+    emit(context, indent + 1, `${clearFallbackVar}();`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${boundaryCleanupVar});`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    emit(context, indent + 1, `${startVar}.remove();`);
+    emit(context, indent + 1, `${endVar}.remove();`);
+    emit(context, indent, "});");
+    return startVar;
+}
 function generateSlot(context, node, parentVar, cleanupVar, indent, beforeVar) {
     const slotCleanupVar = nextVar(context, "slotCleanup");
     const slotCleanupResultVar = nextVar(context, "slotCleanup");
@@ -500,6 +775,149 @@ function generateDynamicComponent(context, node, parentVar, cleanupVar, indent,
     emit(context, indent, "});");
     return startVar;
 }
+function generateKeepAlive(context, node, parentVar, cleanupVar, indent, beforeVar) {
+    validateKeepAliveAttributes(context, node);
+    const children = getSingleElementChild(context, node, "<KeepAlive>");
+    const child = children[0];
+    if (child.tag !== "component") {
+        throwTemplateError("<KeepAlive> requires a single <component :is=\"...\" /> child in v1", context, child.loc);
+    }
+    const isAttr = child.attrs.find((attr) => getBindingName(attr.name) === "is");
+    if (!isAttr) {
+        throwTemplateError("<KeepAlive> dynamic child requires :is to resolve to a component object", context, child.loc);
+    }
+    const expression = compileTemplateExpression(requireAttrValue(isAttr), isAttr.name, toExpressionContext(context, isAttr.valueLoc));
+    const includeExpression = getKeepAliveOptionExpression(context, node, "include");
+    const excludeExpression = getKeepAliveOptionExpression(context, node, "exclude");
+    const maxExpression = getKeepAliveOptionExpression(context, node, "max");
+    const dynamicNode = withoutAttrs(child, ["is", ":is", "v-bind:is"]);
+    const startVar = nextVar(context, "keepAliveStart");
+    const endVar = nextVar(context, "keepAliveEnd");
+    const cacheVar = nextVar(context, "keepAliveCache");
+    const currentTypeVar = nextVar(context, "keepAliveCurrent");
+    const currentRecordVar = nextVar(context, "keepAliveCurrent");
+    const componentTypeVar = nextVar(context, "keepAliveType");
+    const componentNameVar = nextVar(context, "keepAliveName");
+    const componentNameHelperVar = nextVar(context, "keepAliveName");
+    const matchHelperVar = nextVar(context, "keepAliveMatches");
+    const includeVar = nextVar(context, "keepAliveInclude");
+    const excludeVar = nextVar(context, "keepAliveExclude");
+    const maxVar = nextVar(context, "keepAliveMax");
+    const cacheableVar = nextVar(context, "keepAliveCacheable");
+    const recordVar = nextVar(context, "keepAliveRecord");
+    const recordNodesVar = nextVar(context, "keepAliveNodes");
+    const activateRecordVar = nextVar(context, "keepAliveActivate");
+    const deactivateRecordVar = nextVar(context, "keepAliveDeactivate");
+    const collectNodesVar = nextVar(context, "keepAliveCollectNodes");
+    const collectNodeVar = nextVar(context, "keepAliveNode");
+    const staleKeyVar = nextVar(context, "keepAliveStaleKey");
+    const staleRecordVar = nextVar(context, "keepAliveStaleRecord");
+    const fragmentVar = nextVar(context, "fragment");
+    const attrsVar = nextVar(context, "attrs");
+    const propsVar = nextVar(context, "props");
+    const componentVar = nextVar(context, "component");
+    const recordCleanupVar = nextVar(context, "keepAliveCleanup");
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `const ${startVar} = document.createComment("keep-alive");`);
+    emit(context, indent, `const ${endVar} = document.createComment("/keep-alive");`);
+    appendNode(context, parentVar, startVar, indent, beforeVar);
+    appendNode(context, parentVar, endVar, indent, beforeVar);
+    emit(context, indent, `const ${cacheVar} = new Map();`);
+    emit(context, indent, `let ${currentTypeVar};`);
+    emit(context, indent, `let ${currentRecordVar};`);
+    emit(context, indent, `const ${componentNameHelperVar} = (component) => component?.name ?? component?.displayName ?? component?.__name ?? component?.constructor?.name ?? "";`);
+    emit(context, indent, `const ${matchHelperVar} = (pattern, name) => pattern == null ? false : typeof pattern === "string" ? pattern.split(",").map((part) => part.trim()).filter(Boolean).includes(name) : Array.isArray(pattern) ? pattern.some((entry) => ${matchHelperVar}(entry, name)) : pattern instanceof RegExp ? pattern.test(name) : false;`);
+    emit(context, indent, `const ${activateRecordVar} = (record) => { if (record && !record.active) { record.active = true; record.instance.activate?.(); } };`);
+    emit(context, indent, `const ${deactivateRecordVar} = (record) => { if (record?.active) { record.active = false; record.instance.deactivate?.(); } };`);
+    emit(context, indent, `const ${collectNodesVar} = () => { const nodes = []; for (let ${collectNodeVar} = ${startVar}.nextSibling; ${collectNodeVar} && ${collectNodeVar} !== ${endVar}; ${collectNodeVar} = ${collectNodeVar}.nextSibling) { nodes.push(${collectNodeVar}); } return nodes; };`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `const ${componentTypeVar} = unwrap(${expression});`);
+    emit(context, indent + 1, `if (${componentTypeVar} === ${currentTypeVar}) { return; }`);
+    emit(context, indent + 1, `if (${currentRecordVar}) { ${currentRecordVar}.nodes = ${collectNodesVar}(); }`);
+    emit(context, indent + 1, `if (${currentRecordVar}?.transient) { __mikuru_runCleanup(${currentRecordVar}.cleanups); } else { ${deactivateRecordVar}(${currentRecordVar}); }`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    emit(context, indent + 1, `if (!${componentTypeVar}) { ${currentTypeVar} = ${componentTypeVar}; ${currentRecordVar} = undefined; return; }`);
+    emit(context, indent + 1, `if (typeof ${componentTypeVar} !== "object" || typeof ${componentTypeVar}.mount !== "function") {`);
+    emit(context, indent + 2, `throw new Error("KeepAlive child :is must resolve to a component object with mount()");`);
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `const ${componentNameVar} = ${componentNameHelperVar}(${componentTypeVar});`);
+    emit(context, indent + 1, `const ${includeVar} = unwrap(${includeExpression ?? "undefined"});`);
+    emit(context, indent + 1, `const ${excludeVar} = unwrap(${excludeExpression ?? "undefined"});`);
+    emit(context, indent + 1, `const ${maxVar} = Number(unwrap(${maxExpression ?? "undefined"}));`);
+    emit(context, indent + 1, `const ${cacheableVar} = (${includeVar} == null || ${matchHelperVar}(${includeVar}, ${componentNameVar})) && !${matchHelperVar}(${excludeVar}, ${componentNameVar});`);
+    emit(context, indent + 1, `if (!${cacheableVar}) {`);
+    emit(context, indent + 2, `const ${fragmentVar} = document.createDocumentFragment();`);
+    emit(context, indent + 2, `const ${recordCleanupVar} = [];`);
+    emitComponentAttrs(context, dynamicNode, attrsVar, indent + 2);
+    emitComponentProps(context, dynamicNode, propsVar, attrsVar, indent + 2);
+    emit(context, indent + 2, `const ${componentVar} = ${componentTypeVar}.mount(${fragmentVar}, ${propsVar});`);
+    if (context.scopeAttr) {
+        emit(context, indent + 2, `if (${componentVar}.element?.nodeType === 1) {`);
+        emit(context, indent + 3, `${componentVar}.element.setAttribute(${quote(context.scopeAttr)}, "");`);
+        emit(context, indent + 2, "}");
+    }
+    emit(context, indent + 2, `if (${componentTypeVar}.inheritAttrs !== false) {`);
+    emitComponentFallthrough(context, dynamicNode, componentVar, recordCleanupVar, indent + 3);
+    emit(context, indent + 2, "}");
+    emitComponentShow(context, dynamicNode, componentVar, recordCleanupVar, indent + 2);
+    emitTemplateRef(context, dynamicNode, componentVar, recordCleanupVar, indent + 2);
+    emit(context, indent + 2, `const ${recordNodesVar} = Array.from(${fragmentVar}.childNodes);`);
+    appendNode(context, parentVar, fragmentVar, indent + 2, endVar);
+    emit(context, indent + 2, `${currentTypeVar} = ${componentTypeVar};`);
+    emit(context, indent + 2, `${currentRecordVar} = { instance: ${componentVar}, element: ${componentVar}.element, nodes: ${recordNodesVar}, cleanups: ${recordCleanupVar}, transient: true };`);
+    emit(context, indent + 2, `${recordCleanupVar}.push(() => ${componentVar}.unmount());`);
+    emit(context, indent + 2, "return;");
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `let ${recordVar} = ${cacheVar}.get(${componentTypeVar});`);
+    emit(context, indent + 1, `if (!${recordVar}) {`);
+    emit(context, indent + 2, `const ${fragmentVar} = document.createDocumentFragment();`);
+    emit(context, indent + 2, `const ${recordCleanupVar} = [];`);
+    emitComponentAttrs(context, dynamicNode, attrsVar, indent + 2);
+    emitComponentProps(context, dynamicNode, propsVar, attrsVar, indent + 2);
+    emit(context, indent + 2, `const ${componentVar} = ${componentTypeVar}.mount(${fragmentVar}, ${propsVar});`);
+    if (context.scopeAttr) {
+        emit(context, indent + 2, `if (${componentVar}.element?.nodeType === 1) {`);
+        emit(context, indent + 3, `${componentVar}.element.setAttribute(${quote(context.scopeAttr)}, "");`);
+        emit(context, indent + 2, "}");
+    }
+    emit(context, indent + 2, `if (${componentTypeVar}.inheritAttrs !== false) {`);
+    emitComponentFallthrough(context, dynamicNode, componentVar, recordCleanupVar, indent + 3);
+    emit(context, indent + 2, "}");
+    emitComponentShow(context, dynamicNode, componentVar, recordCleanupVar, indent + 2);
+    emitTemplateRef(context, dynamicNode, componentVar, recordCleanupVar, indent + 2);
+    emit(context, indent + 2, `const ${recordNodesVar} = Array.from(${fragmentVar}.childNodes);`);
+    emit(context, indent + 2, `${recordVar} = { instance: ${componentVar}, element: ${componentVar}.element, nodes: ${recordNodesVar}, cleanups: ${recordCleanupVar}, active: false };`);
+    emit(context, indent + 2, `${cacheVar}.set(${componentTypeVar}, ${recordVar});`);
+    emit(context, indent + 2, `if (Number.isFinite(${maxVar}) && ${maxVar} > 0) {`);
+    emit(context, indent + 3, `while (${cacheVar}.size > ${maxVar}) {`);
+    emit(context, indent + 4, `const ${staleKeyVar} = ${cacheVar}.keys().next().value;`);
+    emit(context, indent + 4, `if (${staleKeyVar} === ${componentTypeVar}) { break; }`);
+    emit(context, indent + 4, `const ${staleRecordVar} = ${cacheVar}.get(${staleKeyVar});`);
+    emit(context, indent + 4, `${cacheVar}.delete(${staleKeyVar});`);
+    emit(context, indent + 4, `if (${staleRecordVar}) { ${deactivateRecordVar}(${staleRecordVar}); __mikuru_runCleanup(${staleRecordVar}.cleanups); ${staleRecordVar}.instance.unmount(); }`);
+    emit(context, indent + 3, "}");
+    emit(context, indent + 2, "}");
+    appendNode(context, parentVar, fragmentVar, indent + 2, endVar);
+    emit(context, indent + 1, "} else {");
+    emit(context, indent + 2, `${cacheVar}.delete(${componentTypeVar});`);
+    emit(context, indent + 2, `${cacheVar}.set(${componentTypeVar}, ${recordVar});`);
+    emit(context, indent + 2, `for (const node of ${recordVar}.nodes) { ${parentVar}.insertBefore(node, ${endVar}); }`);
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `${currentTypeVar} = ${componentTypeVar};`);
+    emit(context, indent + 1, `${currentRecordVar} = ${recordVar};`);
+    emit(context, indent + 1, `${activateRecordVar}(${recordVar});`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(() => {`);
+    emit(context, indent + 1, `${stopVar}();`);
+    emit(context, indent + 1, `if (${currentRecordVar}?.transient) { __mikuru_runCleanup(${currentRecordVar}.cleanups); } else { ${deactivateRecordVar}(${currentRecordVar}); }`);
+    emit(context, indent + 1, `for (const ${recordVar} of ${cacheVar}.values()) { __mikuru_runCleanup(${recordVar}.cleanups); ${recordVar}.instance.unmount(); }`);
+    emit(context, indent + 1, `${cacheVar}.clear();`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    emit(context, indent + 1, `${startVar}.remove();`);
+    emit(context, indent + 1, `${endVar}.remove();`);
+    emit(context, indent, "});");
+    return startVar;
+}
 function emitComponentShow(context, node, componentVar, cleanupVar, indent) {
     const showAttr = node.attrs.find((attr) => attr.name === "v-show");
     if (!showAttr) {
@@ -521,7 +939,10 @@ function emitComponentShow(context, node, componentVar, cleanupVar, indent) {
 function emitComponentAttrs(context, node, attrsVar, indent) {
     const objectBindExpressions = node.attrs
         .filter((attr) => isObjectBindAttr(attr))
-        .map((attr) => compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc)));
+        .map((attr) => {
+        validateObjectBindModifiers(parseObjectBindDirective(attr.name) ?? { modifiers: [] }, attr, context, "component");
+        return compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+    });
     const classParts = componentFallthroughExpressions(context, node, "class", objectBindExpressions);
     const styleParts = componentFallthroughExpressions(context, node, "style", objectBindExpressions);
     const directAttrs = componentDirectAttributeFallthroughs(context, node);
@@ -595,7 +1016,10 @@ function emitComponentAttrsProxy(context, attrsVar, baseVar, objectBindExpressio
 function emitComponentFallthrough(context, node, componentVar, cleanupVar, indent) {
     const objectBindExpressions = node.attrs
         .filter((attr) => isObjectBindAttr(attr))
-        .map((attr) => compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc)));
+        .map((attr) => {
+        validateObjectBindModifiers(parseObjectBindDirective(attr.name) ?? { modifiers: [] }, attr, context, "component");
+        return compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+    });
     const classParts = componentFallthroughExpressions(context, node, "class", objectBindExpressions);
     const styleParts = componentFallthroughExpressions(context, node, "style", objectBindExpressions);
     const directAttrs = componentDirectAttributeFallthroughs(context, node);
@@ -730,7 +1154,7 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
     if (slotDirectiveAttr) {
         throwTemplateError("v-slot must be used on a <template> child in Mikuru", context, slotDirectiveAttr.loc);
     }
-    validateAttributes(node);
+    validateAttributes(context, node);
     const elementVar = nextVar(context, "el");
     emit(context, indent, `const ${elementVar} = document.createElement(${quote(node.tag)});`);
     if (context.scopeAttr) {
@@ -746,11 +1170,20 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
         emit(context, indent, `setAttribute(${elementVar}, ${quote(attr.name)}, ${quote(attr.value === true ? "" : attr.value)});`);
     }
     emitTemplateRef(context, node, elementVar, cleanupVar, indent);
-    generateChildren(context, node.children, elementVar, cleanupVar, indent);
+    const contentDirective = getContentDirectiveAttr(node);
+    if (contentDirective) {
+        emitContentDirective(context, node, elementVar, contentDirective, cleanupVar, indent);
+    }
+    else {
+        generateChildren(context, node.children, elementVar, cleanupVar, indent);
+    }
     for (const attr of node.attrs) {
         const modelDirective = parseModelDirective(attr.name);
         if (modelDirective) {
             validateModelModifiers(modelDirective, attr, context);
+            if (modelDirective.argument) {
+                throwTemplateError("v-model arguments are only supported on components in v1", context, attr.loc);
+            }
             const expression = validateAssignableExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
             const stopVar = nextVar(context, "stop");
             const handlerVar = nextVar(context, "handler");
@@ -768,15 +1201,17 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
             const eventName = modelMode === "text" && !modelDirective.modifiers.includes("lazy") ? "input" : "change";
             const propertyName = modelMode === "checkbox" || modelMode === "radio" ? "checked" : "value";
             const renderedValue = modelMode === "checkbox"
-                ? `Boolean(unwrap(${expression}))`
+                ? `(() => { const value = unwrap(${expression}); const checkboxValue = ${modelElementValueExpression(`${elementVar}`, modelDirective.modifiers)}; return Array.isArray(value) ? value.some((item) => Object.is(item, checkboxValue)) : Boolean(value); })()`
                 : modelMode === "radio"
-                    ? `(${modelDirective.modifiers.includes("number") ? `Number(${elementVar}.getAttribute("value") ?? "on")` : `(${elementVar}.getAttribute("value") ?? "on")`} === unwrap(${expression}))`
+                    ? `Object.is(${modelElementValueExpression(`${elementVar}`, modelDirective.modifiers)}, unwrap(${expression}))`
                     : modelMode === "select-multiple"
-                        ? `Array.from(${elementVar}.options).forEach((option) => { option.selected = (unwrap(${expression}) ?? []).map(String).includes(option.getAttribute("value") ?? option.textContent ?? ""); })`
-                        : `String(unwrap(${expression}) ?? "")`;
-            const assignedValue = modelAssignedValue(modelMode, modelDirective.modifiers);
+                        ? `Array.from(${elementVar}.options).forEach((option) => { const optionValue = ${modelElementValueExpression("option", modelDirective.modifiers)}; option.selected = (unwrap(${expression}) ?? []).some((item) => Object.is(item, optionValue)); })`
+                        : modelMode === "select"
+                            ? `Array.from(${elementVar}.options).forEach((option) => { option.selected = Object.is(${modelElementValueExpression("option", modelDirective.modifiers)}, unwrap(${expression})); })`
+                            : `String(unwrap(${expression}) ?? "")`;
+            const assignedValue = modelAssignedValue(modelMode, modelDirective.modifiers, expression);
             emit(context, indent, `const ${stopVar} = effect(() => {`);
-            if (modelMode === "select-multiple") {
+            if (modelMode === "select-multiple" || modelMode === "select") {
                 emit(context, indent + 1, renderedValue);
             }
             else {
@@ -795,11 +1230,16 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
         }
         if (attr.name === "v-show") {
             const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
-            const stopVar = nextVar(context, "stop");
-            emit(context, indent, `const ${stopVar} = effect(() => {`);
-            emit(context, indent + 1, `${elementVar}.style.display = unwrap(${expression}) ? "" : "none";`);
-            emit(context, indent, "});");
-            emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+            if (context.once) {
+                emit(context, indent, `${elementVar}.style.display = unwrap(${expression}) ? "" : "none";`);
+            }
+            else {
+                const stopVar = nextVar(context, "stop");
+                emit(context, indent, `const ${stopVar} = effect(() => {`);
+                emit(context, indent + 1, `${elementVar}.style.display = unwrap(${expression}) ? "" : "none";`);
+                emit(context, indent, "});");
+                emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+            }
             continue;
         }
         if (isObjectBindAttr(attr)) {
@@ -813,7 +1253,7 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
         const event = parseEventDirective(attr.name);
         if (event) {
             validateEventModifiers(event, attr, context);
-            const handler = validateTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+            const handler = validateEventHandlerExpression(requireAttrValue(attr), context, attr.valueLoc);
             const handlerVar = nextVar(context, "handler");
             const handlerExpression = eventHandlerExpression(handler, context, attr.valueLoc);
             if (event.modifiers.length) {
@@ -825,6 +1265,10 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
                 if (event.modifiers.includes("self")) {
                     emit(context, indent + 1, `if ($event.target !== ${elementVar}) { return; }`);
                 }
+                const modifierGuard = eventModifierGuardExpression(event);
+                if (modifierGuard) {
+                    emit(context, indent + 1, `if (${modifierGuard}) { return; }`);
+                }
                 if (event.modifiers.includes("prevent")) {
                     emit(context, indent + 1, "$event.preventDefault();");
                 }
@@ -837,30 +1281,133 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
             else {
                 emit(context, indent, `const ${handlerVar} = __mikuru_guardEventHandler(${handlerExpression});`);
             }
-            const eventOptions = eventListenerOptions(event);
-            emit(context, indent, `${elementVar}.addEventListener(${quote(event.name)}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""});`);
-            emit(context, indent, `${cleanupVar}.push(() => ${elementVar}.removeEventListener(${quote(event.name)}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""}));`);
+            if (event.nameExpression) {
+                emitDynamicEventListener(context, elementVar, event, handlerVar, attr, cleanupVar, indent);
+            }
+            else {
+                const eventOptions = eventListenerOptions(event);
+                emit(context, indent, `${elementVar}.addEventListener(${quote(event.name ?? "")}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""});`);
+                emit(context, indent, `${cleanupVar}.push(() => ${elementVar}.removeEventListener(${quote(event.name ?? "")}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""}));`);
+            }
             continue;
         }
-        const bindingName = getBindingName(attr.name);
-        if (bindingName) {
+        const bindDirective = parseBindDirective(attr.name);
+        const dynamicBinding = bindDirective?.nameExpression ? bindDirective : undefined;
+        if (dynamicBinding) {
+            validateBindModifiers(dynamicBinding, attr, context, "element");
+            emitDynamicAttributeBinding(context, node, elementVar, attr, dynamicBinding, cleanupVar, indent);
+            continue;
+        }
+        const bindingName = bindDirective?.name;
+        if (bindingName && bindDirective) {
+            validateBindModifiers(bindDirective, attr, context, "element");
             if (bindingName === "ref") {
                 continue;
             }
             const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
             const stopVar = nextVar(context, "stop");
-            const valueExpression = bindingName === "class" && getStaticAttrValue(node, "class")
-                ? `[${quote(getStaticAttrValue(node, "class"))}, ${expression}]`
-                : expression;
-            emit(context, indent, `const ${stopVar} = effect(() => {`);
-            emit(context, indent + 1, `setAttribute(${elementVar}, ${quote(bindingName)}, unwrap(${valueExpression}));`);
-            emit(context, indent, "});");
-            emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+            const staticClass = getStaticAttrValue(node, "class");
+            const staticStyle = getStaticAttrValue(node, "style");
+            const valueExpression = bindingName === "class" && staticClass
+                ? `[${quote(staticClass)}, ${expression}]`
+                : bindingName === "style" && staticStyle
+                    ? `[${quote(staticStyle)}, ${expression}]`
+                    : expression;
+            if (context.once) {
+                emit(context, indent, `setAttribute(${elementVar}, ${quote(bindingName)}, unwrap(${valueExpression})${bindOptionsExpression(bindDirective)});`);
+            }
+            else {
+                emit(context, indent, `const ${stopVar} = effect(() => {`);
+                emit(context, indent + 1, `setAttribute(${elementVar}, ${quote(bindingName)}, unwrap(${valueExpression})${bindOptionsExpression(bindDirective)});`);
+                emit(context, indent, "});");
+                emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+            }
         }
     }
     appendNode(context, parentVar, elementVar, indent, beforeVar);
     return elementVar;
 }
+function emitDynamicAttributeBinding(context, node, elementVar, attr, binding, cleanupVar, indent) {
+    const compiledName = compileTemplateExpression(binding.nameExpression ?? "", attr.name, toExpressionContext(context, attr.loc));
+    const compiledValue = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+    const staticClass = getStaticAttrValue(node, "class");
+    const staticStyle = getStaticAttrValue(node, "style");
+    const previousNameVar = nextVar(context, "attrName");
+    const nameVar = nextVar(context, "attrName");
+    const valueVar = nextVar(context, "attrValue");
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `let ${previousNameVar};`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `const ${nameVar} = ${bindNameExpression(`String(unwrap(${compiledName}) ?? "")`, binding)};`);
+    emit(context, indent + 1, `if (!${nameVar}) { if (${previousNameVar}) setAttribute(${elementVar}, ${previousNameVar}, null); ${previousNameVar} = undefined; return; }`);
+    emit(context, indent + 1, `if (${previousNameVar} && ${previousNameVar} !== ${nameVar}) { setAttribute(${elementVar}, ${previousNameVar}, null); }`);
+    emit(context, indent + 1, `const ${valueVar} = unwrap(${compiledValue});`);
+    if (staticClass || staticStyle) {
+        emit(context, indent + 1, `setAttribute(${elementVar}, ${nameVar}, ${nameVar} === "class" && ${staticClass ? "true" : "false"} ? [${quote(staticClass ?? "")}, ${valueVar}] : ${nameVar} === "style" && ${staticStyle ? "true" : "false"} ? [${quote(staticStyle ?? "")}, ${valueVar}] : ${valueVar}${bindOptionsExpression(binding)});`);
+    }
+    else {
+        emit(context, indent + 1, `setAttribute(${elementVar}, ${nameVar}, ${valueVar}${bindOptionsExpression(binding)});`);
+    }
+    emit(context, indent + 1, `${previousNameVar} = ${nameVar};`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(() => { ${stopVar}(); if (${previousNameVar}) setAttribute(${elementVar}, ${previousNameVar}, null); });`);
+}
+function emitDynamicEventListener(context, elementVar, event, handlerVar, attr, cleanupVar, indent) {
+    const expression = compileTemplateExpression(event.nameExpression ?? "\"\"", attr.name, toExpressionContext(context, attr.loc));
+    const currentEventVar = nextVar(context, "eventName");
+    const nextEventVar = nextVar(context, "eventName");
+    const stopVar = nextVar(context, "stop");
+    const eventOptions = eventListenerOptions(event);
+    emit(context, indent, `let ${currentEventVar};`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `const ${nextEventVar} = String(unwrap(${expression}) ?? "");`);
+    emit(context, indent + 1, `if (${nextEventVar} === ${currentEventVar}) { return; }`);
+    emit(context, indent + 1, `if (${currentEventVar}) { ${elementVar}.removeEventListener(${currentEventVar}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""}); }`);
+    emit(context, indent + 1, `${currentEventVar} = ${nextEventVar};`);
+    emit(context, indent + 1, `if (${currentEventVar}) { ${elementVar}.addEventListener(${currentEventVar}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""}); }`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(() => { ${stopVar}(); if (${currentEventVar}) { ${elementVar}.removeEventListener(${currentEventVar}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""}); } });`);
+}
+function emitContentDirective(context, node, elementVar, attr, cleanupVar, indent) {
+    const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+    const property = attr.name === "v-html" ? "innerHTML" : "textContent";
+    if (context.once) {
+        emit(context, indent, `${elementVar}.${property} = String(unwrap(${expression}) ?? "");`);
+        return;
+    }
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `${elementVar}.${property} = String(unwrap(${expression}) ?? "");`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+}
+function generatePreNode(context, node, parentVar, indent, beforeVar) {
+    if (node.type === "text") {
+        const textVar = nextVar(context, "text");
+        emit(context, indent, `const ${textVar} = document.createTextNode(${quote(node.parts.map((part) => part.value).join(""))});`);
+        appendNode(context, parentVar, textVar, indent, beforeVar);
+        return textVar;
+    }
+    return generatePreElement(context, node, parentVar, indent, beforeVar);
+}
+function generatePreElement(context, node, parentVar, indent, beforeVar) {
+    const elementVar = nextVar(context, "el");
+    emit(context, indent, `const ${elementVar} = document.createElement(${quote(node.tag)});`);
+    if (context.scopeAttr) {
+        emit(context, indent, `${elementVar}.setAttribute(${quote(context.scopeAttr)}, "");`);
+    }
+    for (const attr of node.attrs) {
+        if (attr.name === "v-pre") {
+            continue;
+        }
+        emit(context, indent, `setAttribute(${elementVar}, ${quote(attr.name)}, ${quote(attr.value === true ? "" : attr.value)});`);
+    }
+    for (const child of node.children) {
+        generatePreNode(context, child, elementVar, indent);
+    }
+    appendNode(context, parentVar, elementVar, indent, beforeVar);
+    return elementVar;
+}
 function emitTemplateRef(context, node, valueExpression, cleanupVar, indent) {
     const refAttr = getTemplateRefAttr(node);
     if (!refAttr) {
@@ -892,11 +1439,16 @@ function generateText(context, node, parentVar, cleanupVar, indent, beforeVar) {
     const textVar = nextVar(context, "text");
     emit(context, indent, `const ${textVar} = document.createTextNode("");`);
     if (node.parts.some((part) => part.type === "expression")) {
-        const stopVar = nextVar(context, "stop");
-        emit(context, indent, `const ${stopVar} = effect(() => {`);
-        emit(context, indent + 1, `${textVar}.textContent = ${textExpression(node.parts, context)};`);
-        emit(context, indent, "});");
-        emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+        if (context.once) {
+            emit(context, indent, `${textVar}.textContent = ${textExpression(node.parts, context)};`);
+        }
+        else {
+            const stopVar = nextVar(context, "stop");
+            emit(context, indent, `const ${stopVar} = effect(() => {`);
+            emit(context, indent + 1, `${textVar}.textContent = ${textExpression(node.parts, context)};`);
+            emit(context, indent, "});");
+            emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+        }
     }
     else {
         emit(context, indent, `${textVar}.textContent = ${quote(node.parts.map((part) => part.value).join(""))};`);
@@ -905,37 +1457,45 @@ function generateText(context, node, parentVar, cleanupVar, indent, beforeVar) {
     return textVar;
 }
 function emitObjectBind(context, node, elementVar, attr, cleanupVar, indent) {
+    const binding = parseObjectBindDirective(attr.name);
+    if (!binding) {
+        return;
+    }
+    validateObjectBindModifiers(binding, attr, context, "element");
     const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
     const prevKeysVar = nextVar(context, "boundKeys");
     const stopVar = nextVar(context, "stop");
     const attrsVar = nextVar(context, "attrs");
     const nextKeysVar = nextVar(context, "boundKeys");
     const keyVar = nextVar(context, "key");
+    const boundKeyVar = nextVar(context, "key");
     const valueVar = nextVar(context, "value");
     const staleKeyVar = nextVar(context, "key");
     const staticClass = getStaticAttrValue(node, "class");
+    const staticStyle = getStaticAttrValue(node, "style");
     emit(context, indent, `const ${prevKeysVar} = new Set();`);
     emit(context, indent, `const ${stopVar} = effect(() => {`);
     emit(context, indent + 1, `const ${attrsVar} = unwrap(${expression}) ?? {};`);
     emit(context, indent + 1, `const ${nextKeysVar} = new Set();`);
     emit(context, indent + 1, `if (${attrsVar} && typeof ${attrsVar} === "object") {`);
     emit(context, indent + 2, `for (const [${keyVar}, ${valueVar}] of Object.entries(${attrsVar})) {`);
-    emit(context, indent + 3, `${nextKeysVar}.add(${keyVar});`);
-    if (staticClass) {
-        emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, ${keyVar} === "class" ? [${quote(staticClass)}, unwrap(${valueVar})] : unwrap(${valueVar}));`);
+    emit(context, indent + 3, `const ${boundKeyVar} = ${objectBindKeyExpression(keyVar, binding)};`);
+    emit(context, indent + 3, `${nextKeysVar}.add(${boundKeyVar});`);
+    if (staticClass || staticStyle) {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${boundKeyVar}, ${boundKeyVar} === "class" && ${staticClass ? "true" : "false"} ? [${quote(staticClass ?? "")}, unwrap(${valueVar})] : ${boundKeyVar} === "style" && ${staticStyle ? "true" : "false"} ? [${quote(staticStyle ?? "")}, unwrap(${valueVar})] : unwrap(${valueVar})${bindOptionsExpression(binding)});`);
     }
     else {
-        emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, unwrap(${valueVar}));`);
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${boundKeyVar}, unwrap(${valueVar})${bindOptionsExpression(binding)});`);
     }
     emit(context, indent + 2, "}");
     emit(context, indent + 1, "}");
     emit(context, indent + 1, `for (const ${staleKeyVar} of ${prevKeysVar}) {`);
     emit(context, indent + 2, `if (!${nextKeysVar}.has(${staleKeyVar})) {`);
-    if (staticClass) {
-        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, ${staleKeyVar} === "class" ? ${quote(staticClass)} : null);`);
+    if (staticClass || staticStyle) {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, ${staleKeyVar} === "class" && ${staticClass ? "true" : "false"} ? ${quote(staticClass ?? "")} : ${staleKeyVar} === "style" && ${staticStyle ? "true" : "false"} ? ${quote(staticStyle ?? "")} : null${bindOptionsExpression(binding)});`);
     }
     else {
-        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, null);`);
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, null${bindOptionsExpression(binding)});`);
     }
     emit(context, indent + 2, "}");
     emit(context, indent + 1, "}");
@@ -947,6 +1507,12 @@ function emitObjectBind(context, node, elementVar, attr, cleanupVar, indent) {
     emit(context, indent, `${cleanupVar}.push(${stopVar});`);
 }
 function emitObjectListeners(context, elementVar, attr, cleanupVar, indent) {
+    const event = parseObjectOnDirective(attr.name);
+    if (!event) {
+        return;
+    }
+    validateObjectOnModifiers(event, attr, context, "element");
+    const eventOptions = eventListenerOptions(event);
     const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
     const listenersVar = nextVar(context, "listeners");
     const stopVar = nextVar(context, "stop");
@@ -957,7 +1523,7 @@ function emitObjectListeners(context, elementVar, attr, cleanupVar, indent) {
     emit(context, indent, `const ${listenersVar} = new Map();`);
     emit(context, indent, `const ${stopVar} = effect(() => {`);
     emit(context, indent + 1, `for (const [${eventVar}, ${handlerVar}] of ${listenersVar}) {`);
-    emit(context, indent + 2, `${elementVar}.removeEventListener(${eventVar}, ${handlerVar});`);
+    emit(context, indent + 2, `${elementVar}.removeEventListener(${eventVar}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""});`);
     emit(context, indent + 1, "}");
     emit(context, indent + 1, `${listenersVar}.clear();`);
     emit(context, indent + 1, `const ${sourceVar} = unwrap(${expression}) ?? {};`);
@@ -965,7 +1531,7 @@ function emitObjectListeners(context, elementVar, attr, cleanupVar, indent) {
     emit(context, indent + 2, `for (const [${eventVar}, ${handlerVar}] of Object.entries(${sourceVar})) {`);
     emit(context, indent + 3, `if (typeof ${handlerVar} === "function") {`);
     emit(context, indent + 4, `const ${wrappedHandlerVar} = __mikuru_guardEventHandler(${handlerVar});`);
-    emit(context, indent + 4, `${elementVar}.addEventListener(${eventVar}, ${wrappedHandlerVar});`);
+    emit(context, indent + 4, `${elementVar}.addEventListener(${eventVar}, ${wrappedHandlerVar}${eventOptions ? `, ${eventOptions}` : ""});`);
     emit(context, indent + 4, `${listenersVar}.set(${eventVar}, ${wrappedHandlerVar});`);
     emit(context, indent + 3, "}");
     emit(context, indent + 2, "}");
@@ -974,7 +1540,7 @@ function emitObjectListeners(context, elementVar, attr, cleanupVar, indent) {
     emit(context, indent, `${cleanupVar}.push(() => {`);
     emit(context, indent + 1, `${stopVar}();`);
     emit(context, indent + 1, `for (const [${eventVar}, ${handlerVar}] of ${listenersVar}) {`);
-    emit(context, indent + 2, `${elementVar}.removeEventListener(${eventVar}, ${handlerVar});`);
+    emit(context, indent + 2, `${elementVar}.removeEventListener(${eventVar}, ${handlerVar}${eventOptions ? `, ${eventOptions}` : ""});`);
     emit(context, indent + 1, "}");
     emit(context, indent + 1, `${listenersVar}.clear();`);
     emit(context, indent, "});");
@@ -1130,13 +1696,14 @@ function generateFor(context, node, parentVar, cleanupVar, indent, expression, b
     emit(context, indent, "});");
     return startVar;
 }
-function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar) {
+function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName, indexName, sourceExpression, keyExpression, beforeVar, transitionVar) {
     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");`);
@@ -1153,6 +1720,8 @@ function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName
     const recordCleanupVar = nextVar(context, "forRecordCleanup");
     const itemRefVar = nextVar(context, "forItemRef");
     const indexRefVar = nextVar(context, "forIndexRef");
+    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) {`);
@@ -1163,6 +1732,9 @@ function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName
         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} = [];`);
@@ -1176,14 +1748,32 @@ function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName
         emit(context, indent + 4, `const ${indexName} = ${indexRefVar};`);
     }
     const elementVar = withTemplateRefMode(context, "array", () => generateNode(context, withoutForAttrs(node), parentVar, recordCleanupVar, indent + 4, endVar));
-    emit(context, indent + 4, `${recordVar} = { element: ${elementVar}, cleanups: ${recordCleanupVar}, item: ${itemRefVar}${indexName ? `, index: ${indexRefVar}` : ""} };`);
+    if (transitionVar) {
+        emitTransitionRegistration(context, elementVar, transitionVar, indent + 4);
+    }
+    emit(context, indent + 4, `${recordVar} = { element: ${elementVar}, cleanups: ${recordCleanupVar}, item: ${itemRefVar}${indexName ? `, index: ${indexRefVar}` : ""}${compiledMemo && memoVar ? `, memo: ${memoVar}` : ""} };`);
     emit(context, indent + 3, `}`);
     emit(context, indent + 2, `} else {`);
-    emit(context, indent + 3, `${recordVar}.item.value = ${rawItemVar};`);
-    if (indexName) {
-        emit(context, indent + 3, `${recordVar}.index.value = ${rawIndexVar};`);
+    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};`);
+        }
     }
     emit(context, indent + 3, `${parentVar}.insertBefore(${recordVar}.element, ${endVar});`);
+    if (transitionVar) {
+        emit(context, indent + 3, `__mikuru_applyTransitionMove(${recordVar}.element, ${transitionVar});`);
+    }
     emit(context, indent + 2, `}`);
     emit(context, indent + 2, `${nextRecordsVar}.set(${keyVar}, ${recordVar});`);
     emit(context, indent + 1, `}`);
@@ -1234,6 +1824,16 @@ function withTemplateRefMode(context, mode, callback) {
         context.templateRefMode = previousMode;
     }
 }
+function withOnceMode(context, callback) {
+    const previousOnce = context.once;
+    context.once = true;
+    try {
+        return callback();
+    }
+    finally {
+        context.once = previousOnce;
+    }
+}
 function splitTopLevel(source, delimiter) {
     const parts = [];
     let depth = 0;
@@ -1665,11 +2265,241 @@ function isIdentifier(value) {
     return /^[A-Za-z_$][\w$]*$/.test(value);
 }
 function eventHandlerExpression(expression, context, location) {
-    const validatedExpression = validateTemplateExpression(expression, "event handler", toExpressionContext(context, location));
+    const validatedExpression = validateEventHandlerExpression(expression, context, location);
     if (/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(validatedExpression)) {
         return validatedExpression;
     }
-    return `($event) => (${compileTemplateExpression(validatedExpression, "event handler", toExpressionContext(context, location))})`;
+    return `($event) => { return (${compileEventHandlerExpression(validatedExpression, context, location)}); }`;
+}
+function validateEventHandlerExpression(expression, context, location) {
+    const source = expression.trim().replace(/;\s*$/, "");
+    if (!source) {
+        throwTemplateError("Invalid template expression for event handler: expression is empty", context, location);
+    }
+    try {
+        const ast = parseExpressionAt(source, 0, { ecmaVersion: "latest" });
+        if (ast.end !== source.length) {
+            throw new Error("Unexpected trailing content");
+        }
+        validateEventHandlerNode(ast, context, source, location);
+        return source;
+    }
+    catch (error) {
+        if (error instanceof Error && error.message.startsWith("Unsupported event handler")) {
+            throwTemplateError(error.message, context, location);
+        }
+        try {
+            return validateTemplateExpression(source, "event handler", toExpressionContext(context, location));
+        }
+        catch {
+            const message = error instanceof Error ? error.message : String(error);
+            throwTemplateError(`Invalid template expression for event handler: ${source} (${message})`, context, location);
+        }
+    }
+}
+function compileEventHandlerExpression(expression, context, location) {
+    const ast = parseExpressionAt(expression, 0, { ecmaVersion: "latest" });
+    const edits = [];
+    collectEventHandlerEdits(ast, expression, edits, "read");
+    return applyScriptEdits(expression, edits);
+}
+function validateEventHandlerNode(node, context, source, location) {
+    switch (node.type) {
+        case "Identifier":
+        case "Literal":
+        case "TemplateElement":
+            return;
+        case "ThisExpression":
+        case "NewExpression":
+            throw new Error(`Unsupported event handler expression: ${source} (${node.type})`);
+        case "AssignmentExpression":
+            validateEventAssignmentTarget(node.left, context, source, location);
+            validateEventHandlerNode(node.right, context, source, location);
+            return;
+        case "UpdateExpression":
+            validateEventAssignmentTarget(node.argument, context, source, location);
+            return;
+        case "CallExpression":
+            validateEventCallExpression(node, context, source, location);
+            return;
+        case "MemberExpression":
+            validateEventMemberExpression(node, context, source, location);
+            return;
+        case "ChainExpression":
+            validateEventHandlerNode(node.expression, context, source, location);
+            return;
+        case "UnaryExpression":
+            validateEventHandlerNode(node.argument, context, source, location);
+            return;
+        case "BinaryExpression":
+        case "LogicalExpression":
+            validateEventHandlerNode(node.left, context, source, location);
+            validateEventHandlerNode(node.right, context, source, location);
+            return;
+        case "ConditionalExpression":
+            validateEventHandlerNode(node.test, context, source, location);
+            validateEventHandlerNode(node.consequent, context, source, location);
+            validateEventHandlerNode(node.alternate, context, source, location);
+            return;
+        case "ArrayExpression":
+            for (const element of node.elements ?? []) {
+                if (element) {
+                    validateEventHandlerNode(element, context, source, location);
+                }
+            }
+            return;
+        case "ObjectExpression":
+            for (const property of node.properties ?? []) {
+                validateEventHandlerNode(property, context, source, location);
+            }
+            return;
+        case "Property":
+            if (node.computed) {
+                validateEventHandlerNode(node.key, context, source, location);
+            }
+            validateEventHandlerNode(node.value, context, source, location);
+            return;
+        case "TemplateLiteral":
+            for (const quasi of node.quasis ?? []) {
+                validateEventHandlerNode(quasi, context, source, location);
+            }
+            for (const part of node.expressions ?? []) {
+                validateEventHandlerNode(part, context, source, location);
+            }
+            return;
+        default:
+            throw new Error(`Unsupported event handler expression: ${source} (${node.type})`);
+    }
+}
+function validateEventAssignmentTarget(node, context, source, location) {
+    if (node.type === "Identifier") {
+        return;
+    }
+    if (node.type === "MemberExpression") {
+        validateEventMemberExpression(node, context, source, location);
+        return;
+    }
+    throw new Error(`Unsupported event handler assignment target: ${source} (${node.type})`);
+}
+function validateEventCallExpression(node, context, source, location) {
+    const callee = node.callee;
+    const calleeName = getEventStaticCalleeName(callee, source);
+    if (calleeName === "eval" || calleeName === "Function") {
+        throw new Error(`Unsupported event handler expression: ${source} (${calleeName})`);
+    }
+    validateEventHandlerNode(callee, context, source, location);
+    for (const argument of node.arguments ?? []) {
+        validateEventHandlerNode(argument, context, source, location);
+    }
+}
+function validateEventMemberExpression(node, context, source, location) {
+    validateEventHandlerNode(node.object, context, source, location);
+    if (node.computed) {
+        validateEventHandlerNode(node.property, context, source, location);
+        return;
+    }
+    const propertyName = getEventStaticPropertyName(node.property, source);
+    if (propertyName === "constructor" || propertyName === "__proto__" || propertyName === "prototype") {
+        throw new Error(`Unsupported event handler expression: ${source} (${propertyName})`);
+    }
+}
+function collectEventHandlerEdits(node, source, edits, mode) {
+    if (!node) {
+        return;
+    }
+    switch (node.type) {
+        case "Identifier":
+            if (node.name === "$event") {
+                return;
+            }
+            if (mode === "write") {
+                edits.push({ start: node.start, end: node.end, replacement: `${node.name}.value` });
+                return;
+            }
+            if (mode === "callee") {
+                return;
+            }
+            edits.push({ start: node.start, end: node.end, replacement: `unwrap(${node.name})` });
+            return;
+        case "Literal":
+        case "TemplateElement":
+        case "ThisExpression":
+            return;
+        case "AssignmentExpression":
+            collectEventHandlerEdits(node.left, source, edits, "write");
+            collectEventHandlerEdits(node.right, source, edits, "read");
+            return;
+        case "UpdateExpression":
+            collectEventHandlerEdits(node.argument, source, edits, "write");
+            return;
+        case "CallExpression":
+            collectEventHandlerEdits(node.callee, source, edits, "callee");
+            for (const argument of node.arguments ?? []) {
+                collectEventHandlerEdits(argument, source, edits, "read");
+            }
+            return;
+        case "MemberExpression":
+            collectEventHandlerEdits(node.object, source, edits, mode === "callee" ? "read" : mode);
+            if (node.computed) {
+                collectEventHandlerEdits(node.property, source, edits, "read");
+            }
+            return;
+        case "ChainExpression":
+            collectEventHandlerEdits(node.expression, source, edits, mode);
+            return;
+        case "UnaryExpression":
+            collectEventHandlerEdits(node.argument, source, edits, "read");
+            return;
+        case "BinaryExpression":
+        case "LogicalExpression":
+            collectEventHandlerEdits(node.left, source, edits, "read");
+            collectEventHandlerEdits(node.right, source, edits, "read");
+            return;
+        case "ConditionalExpression":
+            collectEventHandlerEdits(node.test, source, edits, "read");
+            collectEventHandlerEdits(node.consequent, source, edits, "read");
+            collectEventHandlerEdits(node.alternate, source, edits, "read");
+            return;
+        case "ArrayExpression":
+            for (const element of node.elements ?? []) {
+                collectEventHandlerEdits(element, source, edits, "read");
+            }
+            return;
+        case "ObjectExpression":
+            for (const property of node.properties ?? []) {
+                collectEventHandlerEdits(property, source, edits, "read");
+            }
+            return;
+        case "Property":
+            if (node.computed) {
+                collectEventHandlerEdits(node.key, source, edits, "read");
+            }
+            collectEventHandlerEdits(node.value, source, edits, "read");
+            return;
+        case "TemplateLiteral":
+            for (const part of node.expressions ?? []) {
+                collectEventHandlerEdits(part, source, edits, "read");
+            }
+            return;
+    }
+}
+function getEventStaticCalleeName(node, source) {
+    if (node.type === "Identifier") {
+        return source.slice(node.start, node.end);
+    }
+    if (node.type === "MemberExpression") {
+        return getEventStaticPropertyName(node.property, source);
+    }
+    return undefined;
+}
+function getEventStaticPropertyName(node, source) {
+    if (node.type === "Identifier") {
+        return source.slice(node.start, node.end);
+    }
+    if (node.type === "Literal") {
+        return String(node.value);
+    }
+    return undefined;
 }
 function getStringAttr(node, name) {
     const attr = node.attrs.find((candidate) => candidate.name === name);
@@ -1697,6 +2527,24 @@ function getKeyExpression(node) {
 function getKeyAttrLocation(node) {
     return getStringAttrLocation(node, ":key") ?? getStringAttrLocation(node, "v-bind:key");
 }
+function getMemoExpression(context, node) {
+    const attr = node.attrs.find((candidate) => candidate.name === "v-memo");
+    if (!attr) {
+        return undefined;
+    }
+    const expression = validateTemplateExpression(requireAttrValue(attr), "v-memo", toExpressionContext(context, attr.valueLoc));
+    if (!expression.trim().startsWith("[") || !expression.trim().endsWith("]")) {
+        throwTemplateError("v-memo requires an array expression", context, attr.valueLoc ?? attr.loc);
+    }
+    return compileTemplateExpression(expression, "v-memo", toExpressionContext(context, attr.valueLoc));
+}
+function getOnceMemoExpression(context, node) {
+    if (!hasAttr(node, "v-once")) {
+        return undefined;
+    }
+    validateOnceAttribute(context, node);
+    return "[]";
+}
 function toExpressionContext(context, location) {
     if (!context.source || !location) {
         return undefined;
@@ -1711,7 +2559,7 @@ function withoutAttr(node, name) {
     return withoutAttrs(node, [name]);
 }
 function withoutForAttrs(node) {
-    return withoutAttrs(node, ["v-for", "key", ":key", "v-bind:key"]);
+    return withoutAttrs(node, ["v-for", "key", ":key", "v-bind:key", "v-memo", "v-once"]);
 }
 function withoutAttrs(node, names) {
     return {
@@ -1743,6 +2591,12 @@ function emitComponentProps(context, node, propsVar, attrsVar, indent) {
         .flatMap((attr) => componentPropEntries(context, attr));
     const objectBindAttrs = node.attrs.filter((attr) => isObjectBindAttr(attr));
     const objectOnAttrs = node.attrs.filter((attr) => isObjectOnAttr(attr));
+    for (const attr of objectBindAttrs) {
+        validateObjectBindModifiers(parseObjectBindDirective(attr.name) ?? { modifiers: [] }, attr, context, "component");
+    }
+    for (const attr of objectOnAttrs) {
+        validateObjectOnModifiers(parseObjectOnDirective(attr.name) ?? { modifiers: [] }, attr, context, "component");
+    }
     const slots = collectComponentSlots(context, node);
     const defaultSlot = slots.find((slot) => !slot.nameExpression && slot.name === "default");
     const needsProxy = objectBindAttrs.length > 0 || objectOnAttrs.length > 0;
@@ -2072,12 +2926,15 @@ function componentPropEntries(context, attr) {
         validateModelModifiers(modelDirective, attr, context);
         const expression = validateAssignableExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
         const valueExpression = compileTemplateExpression(expression, attr.name, toExpressionContext(context, attr.valueLoc));
+        const propName = modelDirective.argument ?? "modelValue";
+        const updatePropName = toComponentEventProp(`update:${propName}`);
+        const modifiersPropName = modelDirective.argument ? `${propName}Modifiers` : "modelModifiers";
         const entries = [
-            `get modelValue() { return unwrap(${valueExpression}); }`,
-            `onUpdateModelValue: __mikuru_guardEventHandler(($value) => { ${expression}.value = $value; })`
+            `get ${quotePropertyName(propName)}() { return unwrap(${valueExpression}); }`,
+            `${quotePropertyName(updatePropName)}: __mikuru_guardEventHandler(($value) => { ${expression}.value = $value; })`
         ];
         if (modelDirective.modifiers.length > 0) {
-            entries.push(`modelModifiers: { ${modelDirective.modifiers.map((modifier) => `${quotePropertyName(modifier)}: true`).join(", ")} }`);
+            entries.push(`${quotePropertyName(modifiersPropName)}: { ${modelDirective.modifiers.map((modifier) => `${quotePropertyName(modifier)}: true`).join(", ")} }`);
         }
         return entries;
     }
@@ -2085,13 +2942,36 @@ function componentPropEntries(context, attr) {
     if (event) {
         validateComponentEventModifiers(event, attr, context);
         const handler = validateTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+        const handlerExpression = componentEventHandlerExpression(event, eventHandlerExpression(handler, context, attr.valueLoc), context);
+        if (event.nameExpression) {
+            const eventNameExpression = compileTemplateExpression(event.nameExpression, attr.name, toExpressionContext(context, attr.loc));
+            return [
+                `[${componentEventPropRuntimeExpression(`String(unwrap(${eventNameExpression}) ?? "")`)}]: __mikuru_guardEventHandler(${handlerExpression})`
+            ];
+        }
         return [
-            `${quotePropertyName(toComponentEventProp(event.name))}: __mikuru_guardEventHandler(${componentEventHandlerExpression(event, eventHandlerExpression(handler, context, attr.valueLoc), context)})`
+            `${quotePropertyName(toComponentEventProp(event.name ?? ""))}: __mikuru_guardEventHandler(${componentEventHandlerExpression(event, eventHandlerExpression(handler, context, attr.valueLoc), context)})`
         ];
     }
-    const bindingName = getBindingName(attr.name);
-    if (bindingName) {
+    const bindDirective = parseBindDirective(attr.name);
+    const dynamicBinding = bindDirective?.nameExpression ? bindDirective : undefined;
+    if (dynamicBinding) {
+        validateBindModifiers(dynamicBinding, attr, context, "component");
+        const nameExpression = compileTemplateExpression(dynamicBinding.nameExpression ?? "", attr.name, toExpressionContext(context, attr.loc));
+        const valueExpression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+        const propertyName = bindNameExpression(`String(unwrap(${nameExpression}) ?? "")`, dynamicBinding);
+        if (context.once) {
+            return [`[${propertyName}]: unwrap(${valueExpression})`];
+        }
+        return [`get [${propertyName}]() { return unwrap(${valueExpression}); }`];
+    }
+    const bindingName = bindDirective?.name;
+    if (bindingName && bindDirective) {
+        validateBindModifiers(bindDirective, attr, context, "component");
         const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+        if (context.once) {
+            return [`${quotePropertyName(bindingName)}: unwrap(${expression})`];
+        }
         return [`get ${quotePropertyName(bindingName)}() { return unwrap(${expression}); }`];
     }
     if (attr.name === "v-show") {
@@ -2151,7 +3031,8 @@ function getTransitionOptionsExpression(context, node) {
         ["enter-to-class", "enterToClass"],
         ["leave-from-class", "leaveFromClass"],
         ["leave-active-class", "leaveActiveClass"],
-        ["leave-to-class", "leaveToClass"]
+        ["leave-to-class", "leaveToClass"],
+        ["move-class", "moveClass"]
     ];
     for (const [attrName, optionName] of classAttrs) {
         const expression = getTransitionAttrExpression(context, node, attrName);
@@ -2176,7 +3057,7 @@ function getTransitionAttrExpression(context, node, name, fallback) {
     return fallback === undefined ? undefined : quote(fallback);
 }
 function validateTransitionAttributes(context, node) {
-    const supported = new Set([
+    const supported = [
         "name",
         "appear",
         "mode",
@@ -2186,13 +3067,33 @@ function validateTransitionAttributes(context, node) {
         "leave-from-class",
         "leave-active-class",
         "leave-to-class"
-    ]);
+    ].map((name) => ({ name, display: name }));
+    for (const attr of node.attrs) {
+        const name = getBindingName(attr.name) ?? attr.name;
+        if (supported.some((candidate) => candidate.name === name)) {
+            continue;
+        }
+        throwUnsupportedSpecialAttribute(context, "Transition", attr, supported, "name, appear, mode, and CSS class override attributes");
+    }
+}
+function validateTransitionGroupAttributes(context, node) {
+    const supported = [
+        "name",
+        "tag",
+        "enter-from-class",
+        "enter-active-class",
+        "enter-to-class",
+        "leave-from-class",
+        "leave-active-class",
+        "leave-to-class",
+        "move-class"
+    ].map((name) => ({ name, display: name }));
     for (const attr of node.attrs) {
         const name = getBindingName(attr.name) ?? attr.name;
-        if (supported.has(name)) {
+        if (supported.some((candidate) => candidate.name === name)) {
             continue;
         }
-        throwTemplateError(`<Transition> only supports name, appear, and CSS class override attributes in v1`, context, attr.loc);
+        throwUnsupportedSpecialAttribute(context, "TransitionGroup", attr, supported, "name, tag, and CSS class override attributes");
     }
 }
 function getSingleElementChild(context, node, label) {
@@ -2202,6 +3103,13 @@ function getSingleElementChild(context, node, label) {
     }
     return [meaningful[0]];
 }
+function getAsyncBoundaryChildren(context, node) {
+    const meaningful = node.children.filter((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
+    if (meaningful.length === 0) {
+        throwTemplateError("<AsyncBoundary> requires at least one child", context, node.loc);
+    }
+    return node.children;
+}
 function getErrorBoundaryFallbackExpression(context, node) {
     const fallbackAttr = node.attrs.find((attr) => getBindingName(attr.name) === "fallback");
     if (!fallbackAttr) {
@@ -2216,13 +3124,82 @@ function getErrorBoundaryResetKeyExpression(context, node) {
     }
     return compileTemplateExpression(requireAttrValue(resetKeyAttr), resetKeyAttr.name, toExpressionContext(context, resetKeyAttr.valueLoc));
 }
+function getAsyncBoundaryLoadingExpression(context, node) {
+    const loadingAttr = node.attrs.find((attr) => getBindingName(attr.name) === "loading");
+    if (!loadingAttr) {
+        throwTemplateError("<AsyncBoundary> requires :loading to resolve to a component object", context, node.loc);
+    }
+    return compileTemplateExpression(requireAttrValue(loadingAttr), loadingAttr.name, toExpressionContext(context, loadingAttr.valueLoc));
+}
+function getAsyncBoundaryFallbackExpression(context, node) {
+    const fallbackAttr = node.attrs.find((attr) => getBindingName(attr.name) === "fallback");
+    if (!fallbackAttr) {
+        throwTemplateError("<AsyncBoundary> requires :fallback to resolve to a component object", context, node.loc);
+    }
+    return compileTemplateExpression(requireAttrValue(fallbackAttr), fallbackAttr.name, toExpressionContext(context, fallbackAttr.valueLoc));
+}
+function getAsyncBoundaryDelayExpression(context, node) {
+    const delayAttr = node.attrs.find((attr) => getBindingName(attr.name) === "delay");
+    if (!delayAttr) {
+        return "0";
+    }
+    return compileTemplateExpression(requireAttrValue(delayAttr), delayAttr.name, toExpressionContext(context, delayAttr.valueLoc));
+}
+function getAsyncBoundaryTimeoutExpression(context, node) {
+    const timeoutAttr = node.attrs.find((attr) => getBindingName(attr.name) === "timeout");
+    if (!timeoutAttr) {
+        return "undefined";
+    }
+    return compileTemplateExpression(requireAttrValue(timeoutAttr), timeoutAttr.name, toExpressionContext(context, timeoutAttr.valueLoc));
+}
+function getKeepAliveOptionExpression(context, node, name) {
+    const dynamicAttr = node.attrs.find((attr) => getBindingName(attr.name) === name);
+    if (dynamicAttr) {
+        return compileTemplateExpression(requireAttrValue(dynamicAttr), dynamicAttr.name, toExpressionContext(context, dynamicAttr.valueLoc));
+    }
+    const staticValue = getStaticAttrValue(node, name);
+    return staticValue === undefined ? undefined : quote(staticValue);
+}
 function validateErrorBoundaryAttributes(context, node) {
+    const supported = [
+        { name: "fallback", display: ":fallback" },
+        { name: "reset-key", display: ":reset-key" }
+    ];
     for (const attr of node.attrs) {
         const bindingName = getBindingName(attr.name);
         if (bindingName === "fallback" || bindingName === "reset-key") {
             continue;
         }
-        throwTemplateError("<ErrorBoundary> only supports :fallback and :reset-key in v1", context, attr.loc);
+        throwUnsupportedSpecialAttribute(context, "ErrorBoundary", attr, supported);
+    }
+}
+function validateAsyncBoundaryAttributes(context, node) {
+    const supported = [
+        { name: "loading", display: ":loading" },
+        { name: "fallback", display: ":fallback" },
+        { name: "delay", display: ":delay" },
+        { name: "timeout", display: ":timeout" }
+    ];
+    for (const attr of node.attrs) {
+        const bindingName = getBindingName(attr.name);
+        if (bindingName === "loading" || bindingName === "fallback" || bindingName === "delay" || bindingName === "timeout") {
+            continue;
+        }
+        throwUnsupportedSpecialAttribute(context, "AsyncBoundary", attr, supported);
+    }
+}
+function validateKeepAliveAttributes(context, node) {
+    const supported = [
+        { name: "include", display: ":include" },
+        { name: "exclude", display: ":exclude" },
+        { name: "max", display: ":max" }
+    ];
+    for (const attr of node.attrs) {
+        const name = getBindingName(attr.name) ?? attr.name;
+        if (name === "include" || name === "exclude" || name === "max") {
+            continue;
+        }
+        throwUnsupportedSpecialAttribute(context, "KeepAlive", attr, supported, "include, exclude, and max");
     }
 }
 function getTeleportToExpression(context, node) {
@@ -2244,14 +3221,56 @@ function getTeleportDisabledExpression(context, node) {
     return hasStaticBooleanAttr(node, "disabled") ? "true" : "false";
 }
 function validateTeleportAttributes(context, node) {
+    const supported = [
+        { name: "to", display: "to" },
+        { name: "disabled", display: "disabled" }
+    ];
     for (const attr of node.attrs) {
         const name = getBindingName(attr.name) ?? attr.name;
         if (name === "to" || name === "disabled") {
             continue;
         }
-        throwTemplateError("<Teleport> only supports to and disabled in v1", context, attr.loc);
+        throwUnsupportedSpecialAttribute(context, "Teleport", attr, supported);
     }
 }
+function throwUnsupportedSpecialAttribute(context, tagName, attr, supported, supportedLabel = supported.map((candidate) => candidate.display).join(", ")) {
+    const normalizedName = getBindingName(attr.name) ?? attr.name;
+    const suggestion = suggestAttributeName(normalizedName, supported);
+    const suggestionMessage = suggestion ? ` Did you mean ${suggestion.display}?` : "";
+    throwTemplateError(`Unsupported attribute ${quote(attr.name)} on <${tagName}>.${suggestionMessage} <${tagName}> only supports ${supportedLabel} in v1.`, context, attr.loc);
+}
+function suggestAttributeName(name, supported) {
+    return suggestName(name, supported);
+}
+function suggestName(name, supported) {
+    let best;
+    for (const candidate of supported) {
+        const distance = editDistance(name, candidate.name);
+        if (!best || distance < best.distance) {
+            best = { candidate, distance };
+        }
+    }
+    if (!best) {
+        return undefined;
+    }
+    const maxDistance = Math.max(1, Math.floor(best.candidate.name.length / 3));
+    return best.distance <= maxDistance ? best.candidate : undefined;
+}
+function editDistance(left, right) {
+    const previous = Array.from({ length: right.length + 1 }, (_, index) => index);
+    const current = Array.from({ length: right.length + 1 }, () => 0);
+    for (let leftIndex = 1; leftIndex <= left.length; leftIndex += 1) {
+        current[0] = leftIndex;
+        for (let rightIndex = 1; rightIndex <= right.length; rightIndex += 1) {
+            const cost = left[leftIndex - 1] === right[rightIndex - 1] ? 0 : 1;
+            current[rightIndex] = Math.min(previous[rightIndex] + 1, current[rightIndex - 1] + 1, previous[rightIndex - 1] + cost);
+        }
+        for (let index = 0; index < previous.length; index += 1) {
+            previous[index] = current[index];
+        }
+    }
+    return previous[right.length] ?? 0;
+}
 function toComponentEventProp(eventName) {
     return `on${eventName
         .split(/[-:]/)
@@ -2259,18 +3278,67 @@ function toComponentEventProp(eventName) {
         .map((part) => part[0]?.toUpperCase() + part.slice(1))
         .join("")}`;
 }
-function validateAttributes(node) {
+function validateAttributes(context, node) {
+    const htmlAttr = getAttr(node, "v-html");
+    const textAttr = getAttr(node, "v-text");
+    if (htmlAttr && textAttr) {
+        throwTemplateError("v-html and v-text cannot be used on the same element", context, textAttr.loc);
+    }
     for (const attr of node.attrs) {
         if (attr.name.startsWith("v-") && !isSupportedDirectiveAttr(attr)) {
-            throw new Error(`Unsupported directive ${attr.name}`);
+            throwUnsupportedDirective(context, attr);
+        }
+        if ((attr.name === "v-html" || attr.name === "v-text") && attr.value === true) {
+            throwTemplateError(`${attr.name} requires a value`, context, attr.loc);
+        }
+        if ((attr.name === "v-pre" || attr.name === "v-cloak") && attr.value !== true) {
+            throwTemplateError(`${attr.name} does not accept a value`, context, attr.valueLoc ?? attr.loc);
+        }
+        if (attr.name === "v-once") {
+            validateOnceAttribute(context, node);
         }
+        if (attr.name === "v-memo") {
+            getMemoExpression(context, node);
+        }
+    }
+}
+function validateOnceAttribute(context, node) {
+    const attr = node.attrs.find((candidate) => candidate.name === "v-once");
+    if (attr && attr.value !== true) {
+        throwTemplateError("v-once does not accept a value", context, attr.valueLoc ?? attr.loc);
+    }
+}
+function validatePreAttribute(context, node) {
+    const attr = node.attrs.find((candidate) => candidate.name === "v-pre");
+    if (attr && attr.value !== true) {
+        throwTemplateError("v-pre does not accept a value", context, attr.valueLoc ?? attr.loc);
     }
 }
+function throwUnsupportedDirective(context, attr) {
+    const suggestion = suggestDirectiveName(attr.name);
+    const suggestionMessage = suggestion ? ` Did you mean ${suggestion}?` : "";
+    throwTemplateError(`Unsupported directive ${quote(attr.name)}.${suggestionMessage}`, context, attr.loc);
+}
+function suggestDirectiveName(name) {
+    const supported = ["v-if", "v-else-if", "v-else", "v-for", "v-show", "v-html", "v-text", "v-pre", "v-cloak", "v-once", "v-memo", "v-model", "v-bind", "v-on", "v-slot"];
+    const directiveName = name.includes(":") ? name.slice(0, name.indexOf(":")) : name.includes(".") ? name.slice(0, name.indexOf(".")) : name;
+    const suggestion = suggestName(directiveName, supported.map((candidate) => ({ name: candidate, display: candidate })));
+    if (!suggestion) {
+        return undefined;
+    }
+    if (suggestion.name === "v-bind" && name.includes(":")) {
+        return `v-bind:${name.slice(name.indexOf(":") + 1)}`;
+    }
+    if (suggestion.name === "v-on" && name.includes(":")) {
+        return `v-on:${name.slice(name.indexOf(":") + 1)}`;
+    }
+    return suggestion.display;
+}
 function isDirectiveAttr(attr) {
     return isSupportedDirectiveAttr(attr) || attr.name.startsWith("@") || attr.name.startsWith(":");
 }
 function isStructuralAttr(attr) {
-    return attr.name === "v-if" || attr.name === "v-else-if" || attr.name === "v-else" || attr.name === "v-for";
+    return attr.name === "v-if" || attr.name === "v-else-if" || attr.name === "v-else" || attr.name === "v-for" || attr.name === "v-once" || attr.name === "v-memo";
 }
 function isSlotDirectiveAttr(attr) {
     return attr.name === "v-slot" || attr.name.startsWith("v-slot:") || attr.name.startsWith("#");
@@ -2281,19 +3349,55 @@ function isSupportedDirectiveAttr(attr) {
         attr.name === "v-else" ||
         attr.name === "v-for" ||
         attr.name === "v-show" ||
+        attr.name === "v-html" ||
+        attr.name === "v-text" ||
+        attr.name === "v-pre" ||
+        attr.name === "v-cloak" ||
+        attr.name === "v-once" ||
+        attr.name === "v-memo" ||
         Boolean(parseModelDirective(attr.name)) ||
         isObjectBindAttr(attr) ||
         isObjectOnAttr(attr) ||
+        Boolean(getDynamicBindingArgument(attr.name)) ||
+        Boolean(getDynamicEventArgument(attr.name)) ||
         Boolean(parseEventDirective(attr.name)) ||
         Boolean(getBindingName(attr.name)));
 }
 function isObjectBindAttr(attr) {
-    return attr.name === "v-bind";
+    return Boolean(parseObjectBindDirective(attr.name));
+}
+function parseObjectBindDirective(name) {
+    if (name === "v-bind") {
+        return { modifiers: [] };
+    }
+    if (!name.startsWith("v-bind.")) {
+        return undefined;
+    }
+    return { modifiers: name.slice("v-bind.".length).split(".").filter(Boolean) };
+}
+function getContentDirectiveAttr(node) {
+    return getAttr(node, "v-html") ?? getAttr(node, "v-text");
+}
+function getAttr(node, name) {
+    return node.attrs.find((attr) => attr.name === name);
 }
 function isObjectOnAttr(attr) {
-    return attr.name === "v-on";
+    return Boolean(parseObjectOnDirective(attr.name));
+}
+function parseObjectOnDirective(name) {
+    if (name === "v-on") {
+        return { modifiers: [] };
+    }
+    if (!name.startsWith("v-on.")) {
+        return undefined;
+    }
+    return { modifiers: name.slice("v-on.".length).split(".").filter(Boolean) };
 }
 function parseEventDirective(name) {
+    const dynamic = getDynamicEventArgument(name);
+    if (dynamic) {
+        return dynamic;
+    }
     const rawName = getEventName(name);
     if (!rawName) {
         return undefined;
@@ -2308,30 +3412,49 @@ function parseModelDirective(name) {
     if (name === "v-model") {
         return { modifiers: [] };
     }
-    if (!name.startsWith("v-model.")) {
+    if (!name.startsWith("v-model.") && !name.startsWith("v-model:")) {
         return undefined;
     }
+    if (name.startsWith("v-model:")) {
+        const raw = name.slice("v-model:".length);
+        const [argument = "", ...modifiers] = raw.split(".");
+        return { argument, modifiers: modifiers.filter(Boolean) };
+    }
     return { modifiers: name.slice("v-model.".length).split(".").filter(Boolean) };
 }
 function validateModelModifiers(model, attr, context) {
-    const supportedModifiers = new Set(["trim", "number", "lazy"]);
+    const supportedModifiers = ["trim", "number", "lazy"];
+    if (model.argument !== undefined && !model.argument) {
+        throwTemplateError("v-model argument must not be empty", context, attr.loc);
+    }
     for (const modifier of model.modifiers) {
-        if (!supportedModifiers.has(modifier)) {
-            throwTemplateError(`Unsupported v-model modifier .${modifier}`, context, attr.loc);
+        if (!supportedModifiers.includes(modifier)) {
+            const suggestion = suggestModifierName(modifier, supportedModifiers);
+            const suggestionMessage = suggestion ? ` Did you mean .${suggestion}?` : "";
+            throwTemplateError(`Unsupported v-model modifier .${modifier}.${suggestionMessage}`, context, attr.loc);
         }
     }
 }
-function modelAssignedValue(modelMode, modifiers) {
+const modelValueProperty = "__mikuruModelValue";
+function modelElementValueExpression(targetExpression, modifiers) {
+    const valueExpression = `(${quote(modelValueProperty)} in ${targetExpression} ? ${targetExpression}[${quote(modelValueProperty)}] : ${targetExpression}.getAttribute("value") ?? (${targetExpression}.tagName === "OPTION" ? (${targetExpression}.textContent ?? "") : "on"))`;
+    return modifiers.includes("number") ? `Number(${valueExpression})` : valueExpression;
+}
+function modelAssignedValue(modelMode, modifiers, expression) {
     if (modelMode === "checkbox") {
-        return "$event.target.checked";
+        const valueExpression = modelElementValueExpression("$event.target", modifiers);
+        return `(() => { const checked = $event.target.checked; const current = unwrap(${expression}); const value = ${valueExpression}; if (Array.isArray(current)) { const hasValue = current.some((item) => Object.is(item, value)); return checked ? (hasValue ? current : [...current, value]) : current.filter((item) => !Object.is(item, value)); } return checked; })()`;
     }
     if (modelMode === "radio") {
-        const valueExpression = `($event.target.getAttribute("value") ?? "on")`;
-        return modifiers.includes("number") ? `Number(${valueExpression})` : valueExpression;
+        return modelElementValueExpression("$event.target", modifiers);
     }
     if (modelMode === "select-multiple") {
-        const valueExpression = `Array.from($event.target.options).filter((option) => option.selected).map((option) => option.getAttribute("value") ?? option.textContent ?? "")`;
-        return modifiers.includes("number") ? `${valueExpression}.map((value) => Number(value))` : valueExpression;
+        const valueExpression = `Array.from($event.target.options).filter((option) => option.selected).map((option) => ${modelElementValueExpression("option", modifiers)})`;
+        return valueExpression;
+    }
+    if (modelMode === "select") {
+        const valueExpression = `(() => { const option = $event.target.selectedOptions[0]; return option ? ${modelElementValueExpression("option", modifiers)} : ""; })()`;
+        return valueExpression;
     }
     let valueExpression = "$event.target.value";
     if (modifiers.includes("trim")) {
@@ -2343,10 +3466,12 @@ function modelAssignedValue(modelMode, modifiers) {
     return valueExpression;
 }
 function validateEventModifiers(event, attr, context) {
-    const supportedModifiers = new Set(["prevent", "stop", "self", "once", "capture", "passive"]);
+    const supportedModifiers = [...eventControlModifiers, ...eventOptionModifiers, ...eventSystemModifiers, ...eventMouseModifiers, ...eventKeyModifiers, "exact"];
     for (const modifier of event.modifiers) {
-        if (!supportedModifiers.has(modifier)) {
-            throwTemplateError(`Unsupported event modifier .${modifier}`, context, attr.loc);
+        if (!supportedModifiers.includes(modifier)) {
+            const suggestion = suggestModifierName(modifier, supportedModifiers);
+            const suggestionMessage = suggestion ? ` Did you mean .${suggestion}?` : "";
+            throwTemplateError(`Unsupported event modifier .${modifier}.${suggestionMessage}`, context, attr.loc);
         }
     }
     if (event.modifiers.includes("passive") && event.modifiers.includes("prevent")) {
@@ -2354,12 +3479,30 @@ function validateEventModifiers(event, attr, context) {
     }
 }
 function validateComponentEventModifiers(event, attr, context) {
+    const supportedModifiers = ["once"];
     for (const modifier of event.modifiers) {
         if (modifier !== "once") {
-            throwTemplateError(`Event modifier .${modifier} is only supported on DOM events`, context, attr.loc);
+            const suggestion = suggestModifierName(modifier, supportedModifiers);
+            const suggestionMessage = suggestion ? ` Did you mean .${suggestion}?` : "";
+            throwTemplateError(`Event modifier .${modifier} is only supported on DOM events.${suggestionMessage}`, context, attr.loc);
+        }
+    }
+}
+function validateObjectOnModifiers(event, attr, context, target) {
+    if (target === "component" && event.modifiers.length > 0) {
+        throwTemplateError("Object v-on modifiers are only supported on native elements", context, attr.loc);
+    }
+    for (const modifier of event.modifiers) {
+        if (!eventOptionModifiers.includes(modifier)) {
+            const suggestion = suggestModifierName(modifier, eventOptionModifiers);
+            const suggestionMessage = suggestion ? ` Did you mean .${suggestion}?` : "";
+            throwTemplateError(`Object v-on modifier .${modifier} is not supported. Use .once, .capture, or .passive.${suggestionMessage}`, context, attr.loc);
         }
     }
 }
+function suggestModifierName(name, supported) {
+    return suggestName(name, supported.map((candidate) => ({ name: candidate, display: candidate })))?.name;
+}
 function eventListenerOptions(event) {
     const options = [
         event.modifiers.includes("capture") ? "capture: true" : undefined,
@@ -2368,6 +3511,66 @@ function eventListenerOptions(event) {
     ].filter(Boolean);
     return options.length ? `{ ${options.join(", ")} }` : undefined;
 }
+const eventControlModifiers = ["prevent", "stop", "self"];
+const eventOptionModifiers = ["once", "capture", "passive"];
+const eventSystemModifiers = ["ctrl", "shift", "alt", "meta"];
+const eventMouseModifiers = ["left", "right", "middle"];
+const eventKeyModifiers = ["enter", "escape", "esc", "space", "tab", "delete", "backspace", "up", "down", "left", "right"];
+function eventModifierGuardExpression(event) {
+    const checks = [];
+    const mouseEvent = isMouseEventName(event.name);
+    for (const modifier of event.modifiers) {
+        if (eventSystemModifiers.includes(modifier)) {
+            checks.push(`!$event.${modifier}Key`);
+            continue;
+        }
+        const mouseExpression = mouseEvent ? eventMouseButtonExpression(modifier) : undefined;
+        if (mouseExpression) {
+            checks.push(`$event.button !== ${mouseExpression}`);
+            continue;
+        }
+        const keyExpression = eventKeyExpression(modifier);
+        if (keyExpression) {
+            checks.push(`!${keyExpression}.includes($event.key)`);
+        }
+    }
+    if (event.modifiers.includes("exact")) {
+        for (const modifier of eventSystemModifiers) {
+            if (!event.modifiers.includes(modifier)) {
+                checks.push(`$event.${modifier}Key`);
+            }
+        }
+    }
+    return checks.length ? checks.join(" || ") : undefined;
+}
+function isMouseEventName(name) {
+    return !!name && /^(?:click|dblclick|auxclick|contextmenu|mousedown|mouseup|mousemove|mouseover|mouseout|mouseenter|mouseleave|pointerdown|pointerup|pointermove|pointerover|pointerout|pointerenter|pointerleave)$/.test(name);
+}
+function eventMouseButtonExpression(modifier) {
+    const mouseButtons = {
+        left: "0",
+        middle: "1",
+        right: "2"
+    };
+    return mouseButtons[modifier];
+}
+function eventKeyExpression(modifier) {
+    const keyAliases = {
+        enter: ["Enter"],
+        escape: ["Escape"],
+        esc: ["Escape"],
+        space: [" ", "Spacebar"],
+        tab: ["Tab"],
+        delete: ["Delete"],
+        backspace: ["Backspace"],
+        up: ["ArrowUp", "Up"],
+        down: ["ArrowDown", "Down"],
+        left: ["ArrowLeft", "Left"],
+        right: ["ArrowRight", "Right"]
+    };
+    const keys = keyAliases[modifier];
+    return keys ? JSON.stringify(keys) : undefined;
+}
 function componentEventHandlerExpression(event, handlerExpression, context) {
     if (!event.modifiers.includes("once")) {
         return handlerExpression;
@@ -2376,7 +3579,13 @@ function componentEventHandlerExpression(event, handlerExpression, context) {
     const handlerVar = nextVar(context, "handler");
     return `(() => { let ${calledVar} = false; const ${handlerVar} = ${handlerExpression}; return (...$args) => { if (${calledVar}) { return; } ${calledVar} = true; return ${handlerVar}(...$args); }; })()`;
 }
+function componentEventPropRuntimeExpression(eventNameExpression) {
+    return `"on" + ${eventNameExpression}.split(/[-:]/).filter(Boolean).map((part) => part[0]?.toUpperCase() + part.slice(1)).join("")`;
+}
 function getEventName(name) {
+    if (name.startsWith("@[") || name.startsWith("v-on:[")) {
+        return undefined;
+    }
     if (name.startsWith("@")) {
         return name.slice(1);
     }
@@ -2386,11 +3595,108 @@ function getEventName(name) {
     return undefined;
 }
 function getBindingName(name) {
-    if (name.startsWith(":")) {
-        return name.slice(1);
+    const binding = parseBindDirective(name);
+    if (!binding || binding.nameExpression) {
+        return undefined;
+    }
+    return binding.name;
+}
+function getDynamicBindingArgument(name) {
+    const binding = parseBindDirective(name);
+    if (!binding?.nameExpression) {
+        return undefined;
+    }
+    return { expression: binding.nameExpression };
+}
+function parseBindDirective(name) {
+    const dynamic = parseDynamicArgument(name, [":", "v-bind:"]);
+    if (dynamic) {
+        return { nameExpression: dynamic.expression, modifiers: dynamic.modifiers };
+    }
+    const rawName = name.startsWith(":")
+        ? name.slice(1)
+        : name.startsWith("v-bind:")
+            ? name.slice("v-bind:".length)
+            : undefined;
+    if (!rawName) {
+        return undefined;
+    }
+    const [bindingName, ...modifiers] = rawName.split(".");
+    if (!bindingName) {
+        return undefined;
+    }
+    return { name: modifiers.includes("camel") ? camelize(bindingName) : bindingName, modifiers };
+}
+function validateBindModifiers(binding, attr, context, target) {
+    const allowed = new Set(["camel", "prop", "attr"]);
+    for (const modifier of binding.modifiers) {
+        if (!allowed.has(modifier)) {
+            throwTemplateError(`Unsupported v-bind modifier ".${modifier}". Use .camel, .prop, or .attr.`, context, attr.loc);
+        }
+    }
+    if (binding.modifiers.includes("prop") && binding.modifiers.includes("attr")) {
+        throwTemplateError("v-bind modifiers .prop and .attr cannot be used together", context, attr.loc);
+    }
+    if (target === "component" && (binding.modifiers.includes("prop") || binding.modifiers.includes("attr"))) {
+        throwTemplateError("v-bind .prop and .attr modifiers are only supported on native elements", context, attr.loc);
+    }
+}
+function validateObjectBindModifiers(binding, attr, context, target) {
+    const allowed = new Set(["camel", "prop", "attr"]);
+    for (const modifier of binding.modifiers) {
+        if (!allowed.has(modifier)) {
+            throwTemplateError(`Unsupported object v-bind modifier ".${modifier}". Use .camel, .prop, or .attr.`, context, attr.loc);
+        }
+    }
+    if (binding.modifiers.includes("prop") && binding.modifiers.includes("attr")) {
+        throwTemplateError("Object v-bind modifiers .prop and .attr cannot be used together", context, attr.loc);
+    }
+    if (target === "component" && binding.modifiers.length > 0) {
+        throwTemplateError("Object v-bind modifiers are only supported on native elements", context, attr.loc);
+    }
+}
+function bindOptionsExpression(binding) {
+    if (binding.modifiers.includes("prop")) {
+        return ", { property: true }";
+    }
+    if (binding.modifiers.includes("attr")) {
+        return ", { attribute: true }";
+    }
+    return "";
+}
+function bindNameExpression(expression, binding) {
+    return binding.modifiers.includes("camel") ? `(${expression}).replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase())` : expression;
+}
+function objectBindKeyExpression(keyExpression, binding) {
+    return bindNameExpression(`String(${keyExpression})`, binding);
+}
+function camelize(value) {
+    return value.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+}
+function getDynamicEventArgument(name) {
+    const dynamic = parseDynamicArgument(name, ["@", "v-on:"]);
+    if (!dynamic) {
+        return undefined;
     }
-    if (name.startsWith("v-bind:")) {
-        return name.slice("v-bind:".length);
+    return { nameExpression: dynamic.expression, modifiers: dynamic.modifiers };
+}
+function parseDynamicArgument(name, prefixes) {
+    for (const prefix of prefixes) {
+        if (!name.startsWith(`${prefix}[`)) {
+            continue;
+        }
+        const argumentStart = prefix.length + 1;
+        const argumentEnd = name.indexOf("]", argumentStart);
+        if (argumentEnd === -1) {
+            return undefined;
+        }
+        const expression = name.slice(argumentStart, argumentEnd).trim();
+        if (!expression) {
+            return undefined;
+        }
+        const rest = name.slice(argumentEnd + 1);
+        const modifiers = rest.startsWith(".") ? rest.slice(1).split(".").filter(Boolean) : [];
+        return { expression, modifiers };
     }
     return undefined;
 }