mikuru 1.0.14 → 1.0.16

package/dist/compiler/generate.js

@@ -26,6 +26,68 @@ export function generate(descriptor, root) {
     emit(context, 3, "cleanup();");
     emit(context, 2, "}");
     emit(context, 1, "};");
+    emit(context, 1, "const __mikuru_transitionFrame = (fn) => {");
+    emit(context, 2, "const raf = globalThis.requestAnimationFrame;");
+    emit(context, 2, "if (typeof raf === \"function\") { raf(() => raf(fn)); } else { setTimeout(fn, 0); }");
+    emit(context, 1, "};");
+    emit(context, 1, "const __mikuru_transitionDone = (element, cleanup) => {");
+    emit(context, 2, "let done = false;");
+    emit(context, 2, "const finish = () => {");
+    emit(context, 3, "if (done) { return; }");
+    emit(context, 3, "done = true;");
+    emit(context, 3, "element.removeEventListener(\"transitionend\", finish);");
+    emit(context, 3, "element.removeEventListener(\"animationend\", finish);");
+    emit(context, 3, "cleanup();");
+    emit(context, 2, "};");
+    emit(context, 2, "element.addEventListener(\"transitionend\", finish);");
+    emit(context, 2, "element.addEventListener(\"animationend\", finish);");
+    emit(context, 2, "setTimeout(finish, 50);");
+    emit(context, 1, "};");
+    emit(context, 1, "const __mikuru_applyTransitionEnter = (element, name) => {");
+    emit(context, 2, "const transition = typeof name === \"object\" ? name : { name };");
+    emit(context, 2, "if (!element || element.nodeType !== 1 || !transition.name) { return; }");
+    emit(context, 2, "const from = transition.enterFromClass || `${transition.name}-enter-from`;");
+    emit(context, 2, "const active = transition.enterActiveClass || `${transition.name}-enter-active`;");
+    emit(context, 2, "const to = transition.enterToClass || `${transition.name}-enter-to`;");
+    emit(context, 2, "element.classList.add(from, active);");
+    emit(context, 2, "__mikuru_transitionFrame(() => {");
+    emit(context, 3, "element.classList.remove(from);");
+    emit(context, 3, "element.classList.add(to);");
+    emit(context, 3, "__mikuru_transitionDone(element, () => element.classList.remove(active, to));");
+    emit(context, 2, "});");
+    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; }");
+    emit(context, 2, "node.__mikuru_transitionLeaving = true;");
+    emit(context, 2, "const transition = node.__mikuru_transition;");
+    emit(context, 2, "const from = transition.leaveFromClass || `${transition.name}-leave-from`;");
+    emit(context, 2, "const active = transition.leaveActiveClass || `${transition.name}-leave-active`;");
+    emit(context, 2, "const to = transition.leaveToClass || `${transition.name}-leave-to`;");
+    emit(context, 2, "node.classList.add(from, active);");
+    emit(context, 2, "__mikuru_transitionFrame(() => {");
+    emit(context, 3, "node.classList.remove(from);");
+    emit(context, 3, "node.classList.add(to);");
+    emit(context, 3, "__mikuru_transitionDone(node, () => { node.classList.remove(active, to); node.remove(); });");
+    emit(context, 2, "});");
+    emit(context, 1, "};");
+    emit(context, 1, "const __mikuru_setRef = (target, value, multiple = false) => {");
+    emit(context, 2, "if (typeof target === \"function\") {");
+    emit(context, 3, "target(value);");
+    emit(context, 3, "return () => target(null);");
+    emit(context, 2, "}");
+    emit(context, 2, "if (!target || typeof target !== \"object\" || !(\"value\" in target)) {");
+    emit(context, 3, "return () => {};");
+    emit(context, 2, "}");
+    emit(context, 2, "if (multiple) {");
+    emit(context, 3, "const list = Array.isArray(target.value) ? target.value : [];");
+    emit(context, 3, "if (target.value !== list) { target.value = list; }");
+    emit(context, 3, "list.push(value);");
+    emit(context, 3, "return () => { const index = list.indexOf(value); if (index >= 0) { list.splice(index, 1); } };");
+    emit(context, 2, "}");
+    emit(context, 2, "target.value = value;");
+    emit(context, 2, "return () => { if (target.value === value) { target.value = null; } };");
+    emit(context, 1, "};");
     emit(context, 1, "// expose a lightweight registrar for runtime lifecycle and provide/inject helpers");
     emit(context, 1, "const __mikuru_previousRegistrar = globalThis.__mikuru_currentRegistrar;");
     emit(context, 1, "globalThis.__mikuru_currentRegistrar = {");
@@ -52,6 +114,9 @@ export function generate(descriptor, root) {
         if (script.usesPropsAlias) {
             emit(context, 1, "const __mikuru_props = props;");
         }
+        if (script.usesAttrsAlias) {
+            emit(context, 1, "const __mikuru_attrs = props.__mikuru_attrs ?? {};");
+        }
         if (script.usesEmitAlias) {
             emit(context, 1, "const __mikuru_emit = (name, ...args) => {");
             emit(context, 2, "const handlerName = \"on\" + String(name).split(/[-:]/).filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join(\"\");");
@@ -73,12 +138,12 @@ export function generate(descriptor, root) {
     emit(context, 2, "unmount() {");
     emit(context, 3, "__mikuru_runCleanup(__mikuru_cleanup);");
     emit(context, 3, "for (const cb of __mikuru_afterUnmount.splice(0).reverse()) { try { cb(); } catch (e) { setTimeout(() => { throw e; }); } }");
-    emit(context, 3, `${rootVar}.remove();`);
+    emit(context, 3, `__mikuru_removeNode(${rootVar});`);
     emit(context, 2, "}");
     emit(context, 1, "};");
     emit(context, 0, "}");
     emit(context, 0, "");
-    emit(context, 0, "const __mikuru_component = { mount };");
+    emit(context, 0, `const __mikuru_component = { mount${script.inheritAttrs ? "" : ", inheritAttrs: false"} };`);
     emit(context, 0, "export default __mikuru_component;");
     return `${context.lines.join("\n")}\n`;
 }
@@ -110,6 +175,12 @@ function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
     if (orphanElseAttr) {
         throwTemplateError(`${orphanElseAttr.name} must follow v-if or v-else-if`, context, orphanElseAttr.loc);
     }
+    if (node.tag === "component") {
+        return generateDynamicComponent(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
+    if (node.tag === "Transition") {
+        return generateTransition(context, node, parentVar, cleanupVar, indent, beforeVar);
+    }
     if (isComponentTag(node.tag)) {
         return generateComponent(context, node, parentVar, cleanupVar, indent, beforeVar);
     }
@@ -118,14 +189,64 @@ function generateNode(context, node, parentVar, cleanupVar, indent, beforeVar) {
     }
     return generateElement(context, node, parentVar, cleanupVar, indent, beforeVar);
 }
+function generateTransition(context, node, parentVar, cleanupVar, indent, beforeVar) {
+    validateTransitionAttributes(context, node);
+    const children = getTransitionChildren(context, node);
+    const transitionVar = nextVar(context, "transition");
+    emit(context, indent, `const ${transitionVar} = ${getTransitionOptionsExpression(context, node)};`);
+    const child = children[0];
+    if (getStringAttr(child, "v-if")) {
+        return generateIfChain(context, getTransitionBranches(context, children), parentVar, cleanupVar, indent, beforeVar, transitionVar);
+    }
+    if (child.tag === "component") {
+        return generateDynamicComponent(context, child, parentVar, cleanupVar, indent, beforeVar, transitionVar);
+    }
+    const childVar = generateNode(context, child, parentVar, cleanupVar, indent, beforeVar);
+    emitTransitionRegistration(context, childVar, transitionVar, indent);
+    return childVar;
+}
 function generateSlot(context, node, parentVar, cleanupVar, indent, beforeVar) {
-    const slotVar = nextVar(context, "slot");
     const slotCleanupVar = nextVar(context, "slotCleanup");
     const slotCleanupResultVar = nextVar(context, "slotCleanup");
     const slotFnVar = nextVar(context, "slot");
     const slotPropsVar = nextVar(context, "slotProps");
-    const slotName = getSlotOutletName(node, context);
-    emit(context, indent, `const ${slotFnVar} = ${slotName === "default" ? "props.slots?.default ?? props.children" : `props.slots?.[${quote(slotName)}]`};`);
+    const slotName = getSlotOutletNameExpression(node, context);
+    if (slotName.dynamic) {
+        const startVar = nextVar(context, "slotStart");
+        const endVar = nextVar(context, "slotEnd");
+        const slotFragmentVar = nextVar(context, "slot");
+        const slotNameVar = nextVar(context, "slotName");
+        const stopVar = nextVar(context, "stop");
+        emit(context, indent, `const ${startVar} = document.createComment("slot");`);
+        emit(context, indent, `const ${endVar} = document.createComment("/slot");`);
+        appendNode(context, parentVar, startVar, indent, beforeVar);
+        appendNode(context, parentVar, endVar, indent, beforeVar);
+        emit(context, indent, `const ${slotCleanupVar} = [];`);
+        emit(context, indent, `const ${stopVar} = effect(() => {`);
+        emit(context, indent + 1, `__mikuru_runCleanup(${slotCleanupVar});`);
+        emitRemoveBetween(context, indent + 1, startVar, endVar);
+        emit(context, indent + 1, `const ${slotNameVar} = String(unwrap(${slotName.expression}) ?? "default");`);
+        emit(context, indent + 1, `const ${slotFnVar} = ${slotNameVar} === "default" ? props.slots?.default ?? props.children : props.slots?.[${slotNameVar}];`);
+        emitSlotOutletProps(context, node, slotPropsVar, indent + 1);
+        emit(context, indent + 1, `const ${slotFragmentVar} = document.createDocumentFragment();`);
+        emit(context, indent + 1, `if (${slotFnVar}) {`);
+        emit(context, indent + 2, `const ${slotCleanupResultVar} = ${slotFnVar}(${slotFragmentVar}, ${slotPropsVar});`);
+        emit(context, indent + 2, `if (${slotCleanupResultVar}) {`);
+        emit(context, indent + 3, `${slotCleanupVar}.push(${slotCleanupResultVar});`);
+        emit(context, indent + 2, "}");
+        emit(context, indent + 1, "} else {");
+        generateChildren(context, node.children, slotFragmentVar, slotCleanupVar, indent + 2);
+        emit(context, indent + 1, "}");
+        appendNode(context, parentVar, slotFragmentVar, indent + 1, endVar);
+        emit(context, indent, "});");
+        emit(context, indent, `${cleanupVar}.push(() => {`);
+        emit(context, indent + 1, `${stopVar}();`);
+        emit(context, indent + 1, `__mikuru_runCleanup(${slotCleanupVar});`);
+        emit(context, indent, "});");
+        return startVar;
+    }
+    const slotVar = nextVar(context, "slot");
+    emit(context, indent, `const ${slotFnVar} = ${slotName.name === "default" ? "props.slots?.default ?? props.children" : `props.slots?.[${quote(slotName.name)}]`};`);
     emitSlotOutletProps(context, node, slotPropsVar, indent);
     emit(context, indent, `const ${slotVar} = document.createDocumentFragment();`);
     emit(context, indent, `const ${slotCleanupVar} = [];`);
@@ -143,20 +264,318 @@ function generateSlot(context, node, parentVar, cleanupVar, indent, beforeVar) {
 }
 function generateComponent(context, node, parentVar, cleanupVar, indent, beforeVar) {
     const fragmentVar = nextVar(context, "fragment");
+    const attrsVar = nextVar(context, "attrs");
     const propsVar = nextVar(context, "props");
     const componentVar = nextVar(context, "component");
     emit(context, indent, `const ${fragmentVar} = document.createDocumentFragment();`);
-    emitComponentProps(context, node, propsVar, indent);
+    emitComponentAttrs(context, node, attrsVar, indent);
+    emitComponentProps(context, node, propsVar, attrsVar, indent);
     emit(context, indent, `const ${componentVar} = ${node.tag}.mount(${fragmentVar}, ${propsVar});`);
     if (context.scopeAttr) {
-        emit(context, indent, `if (${componentVar}.element instanceof Element) {`);
+        emit(context, indent, `if (${componentVar}.element?.nodeType === 1) {`);
         emit(context, indent + 1, `${componentVar}.element.setAttribute(${quote(context.scopeAttr)}, "");`);
         emit(context, indent, "}");
     }
+    emit(context, indent, `if (${node.tag}.inheritAttrs !== false) {`);
+    emitComponentFallthrough(context, node, componentVar, cleanupVar, indent + 1);
+    emit(context, indent, "}");
+    emitComponentShow(context, node, componentVar, cleanupVar, indent);
     emit(context, indent, `${cleanupVar}.push(() => ${componentVar}.unmount());`);
+    emitTemplateRef(context, node, componentVar, cleanupVar, indent);
     appendNode(context, parentVar, fragmentVar, indent, beforeVar);
     return `${componentVar}.element`;
 }
+function generateDynamicComponent(context, node, parentVar, cleanupVar, indent, beforeVar, transitionVar) {
+    const isAttr = node.attrs.find((attr) => getBindingName(attr.name) === "is");
+    if (!isAttr) {
+        throwTemplateError("Dynamic component requires :is to resolve to a component object", context, node.loc);
+    }
+    const expression = compileTemplateExpression(requireAttrValue(isAttr), isAttr.name, toExpressionContext(context, isAttr.valueLoc));
+    const dynamicNode = withoutAttrs(node, ["is", ":is", "v-bind:is"]);
+    const startVar = nextVar(context, "componentStart");
+    const endVar = nextVar(context, "componentEnd");
+    const branchCleanupVar = nextVar(context, "componentCleanup");
+    const componentTypeVar = nextVar(context, "componentType");
+    const currentTypeVar = nextVar(context, "currentComponent");
+    const currentInstanceVar = nextVar(context, "currentComponent");
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `const ${startVar} = document.createComment("component");`);
+    emit(context, indent, `const ${endVar} = document.createComment("/component");`);
+    appendNode(context, parentVar, startVar, indent, beforeVar);
+    appendNode(context, parentVar, endVar, indent, beforeVar);
+    emit(context, indent, `const ${branchCleanupVar} = [];`);
+    emit(context, indent, `let ${currentTypeVar};`);
+    emit(context, indent, `let ${currentInstanceVar};`);
+    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, `__mikuru_runCleanup(${branchCleanupVar});`);
+    emitRemoveBetween(context, indent + 1, startVar, endVar);
+    emit(context, indent + 1, `if (!${componentTypeVar}) {`);
+    emit(context, indent + 2, `${currentTypeVar} = ${componentTypeVar};`);
+    emit(context, indent + 2, `${currentInstanceVar} = null;`);
+    emit(context, indent + 2, "return;");
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `if (typeof ${componentTypeVar} !== "object" || typeof ${componentTypeVar}.mount !== "function") {`);
+    emit(context, indent + 2, `throw new Error("Dynamic component :is must resolve to a component object with mount()");`);
+    emit(context, indent + 1, "}");
+    const fragmentVar = nextVar(context, "fragment");
+    const attrsVar = nextVar(context, "attrs");
+    const propsVar = nextVar(context, "props");
+    const componentVar = nextVar(context, "component");
+    emit(context, indent + 1, `const ${fragmentVar} = document.createDocumentFragment();`);
+    emitComponentAttrs(context, dynamicNode, attrsVar, indent + 1);
+    emitComponentProps(context, dynamicNode, propsVar, attrsVar, indent + 1);
+    emit(context, indent + 1, `const ${componentVar} = ${componentTypeVar}.mount(${fragmentVar}, ${propsVar});`);
+    if (context.scopeAttr) {
+        emit(context, indent + 1, `if (${componentVar}.element?.nodeType === 1) {`);
+        emit(context, indent + 2, `${componentVar}.element.setAttribute(${quote(context.scopeAttr)}, "");`);
+        emit(context, indent + 1, "}");
+    }
+    emit(context, indent + 1, `if (${componentTypeVar}.inheritAttrs !== false) {`);
+    emitComponentFallthrough(context, dynamicNode, componentVar, branchCleanupVar, indent + 2);
+    emit(context, indent + 1, "}");
+    emitComponentShow(context, dynamicNode, componentVar, branchCleanupVar, indent + 1);
+    emit(context, indent + 1, `${branchCleanupVar}.push(() => ${componentVar}.unmount());`);
+    emitTemplateRef(context, dynamicNode, componentVar, branchCleanupVar, indent + 1);
+    appendNode(context, parentVar, fragmentVar, indent + 1, endVar);
+    if (transitionVar) {
+        emitTransitionRegistration(context, `${componentVar}.element`, transitionVar, indent + 1);
+    }
+    emit(context, indent + 1, `${currentTypeVar} = ${componentTypeVar};`);
+    emit(context, indent + 1, `${currentInstanceVar} = ${componentVar};`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(() => {`);
+    emit(context, indent + 1, `${stopVar}();`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${branchCleanupVar});`);
+    emit(context, indent, "});");
+    return startVar;
+}
+function emitComponentShow(context, node, componentVar, cleanupVar, indent) {
+    const showAttr = node.attrs.find((attr) => attr.name === "v-show");
+    if (!showAttr) {
+        return;
+    }
+    const expression = compileTemplateExpression(requireAttrValue(showAttr), showAttr.name, toExpressionContext(context, showAttr.valueLoc));
+    const elementVar = nextVar(context, "componentEl");
+    const baseDisplayVar = nextVar(context, "baseDisplay");
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `const ${elementVar} = ${componentVar}.element;`);
+    emit(context, indent, `if (${elementVar}?.nodeType === 1) {`);
+    emit(context, indent + 1, `const ${baseDisplayVar} = ${elementVar}.style.display;`);
+    emit(context, indent + 1, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 2, `${elementVar}.style.display = unwrap(${expression}) ? ${baseDisplayVar} : "none";`);
+    emit(context, indent + 1, "});");
+    emit(context, indent + 1, `${cleanupVar}.push(${stopVar});`);
+    emit(context, 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)));
+    const classParts = componentFallthroughExpressions(context, node, "class", objectBindExpressions);
+    const styleParts = componentFallthroughExpressions(context, node, "style", objectBindExpressions);
+    const directAttrs = componentDirectAttributeFallthroughs(context, node);
+    const baseVar = objectBindExpressions.length > 0 ? nextVar(context, "attrsBase") : attrsVar;
+    emit(context, indent, `const ${baseVar} = {`);
+    if (classParts.length > 0) {
+        emit(context, indent + 1, `get class() { return [${classParts.join(", ")}]; },`);
+    }
+    if (styleParts.length > 0) {
+        emit(context, indent + 1, `get style() { return [${styleParts.join(", ")}]; },`);
+    }
+    for (const attr of directAttrs) {
+        if (attr.dynamic) {
+            emit(context, indent + 1, `get ${quotePropertyName(attr.name)}() { return unwrap(${attr.expression}); },`);
+        }
+        else {
+            emit(context, indent + 1, `${quotePropertyName(attr.name)}: ${attr.expression},`);
+        }
+    }
+    emit(context, indent, "};");
+    if (objectBindExpressions.length > 0) {
+        emitComponentAttrsProxy(context, attrsVar, baseVar, objectBindExpressions, indent);
+    }
+}
+function emitComponentAttrsProxy(context, attrsVar, baseVar, objectBindExpressions, indent) {
+    const keyVar = nextVar(context, "key");
+    const sourceVar = nextVar(context, "source");
+    const keysVar = nextVar(context, "keys");
+    const descriptorVar = nextVar(context, "descriptor");
+    emit(context, indent, `const ${attrsVar} = new Proxy(${baseVar}, {`);
+    emit(context, indent + 1, `get(target, ${keyVar}) {`);
+    emit(context, indent + 2, `if (typeof ${keyVar} === "symbol" || ${keyVar} in target) {`);
+    emit(context, indent + 3, `return target[${keyVar}];`);
+    emit(context, indent + 2, "}");
+    for (const expression of objectBindExpressions) {
+        emit(context, indent + 2, `{`);
+        emit(context, indent + 3, `const ${sourceVar} = unwrap(${expression}) ?? {};`);
+        emit(context, indent + 3, `if (${sourceVar} && typeof ${sourceVar} === "object" && ${keyVar} in ${sourceVar} && (${keyVar} === "class" || ${keyVar} === "style" || ${componentFallthroughAttributeNameExpression(keyVar)})) {`);
+        emit(context, indent + 4, `return unwrap(${sourceVar}[${keyVar}]);`);
+        emit(context, indent + 3, "}");
+        emit(context, indent + 2, `}`);
+    }
+    emit(context, indent + 2, "return undefined;");
+    emit(context, indent + 1, "},");
+    emit(context, indent + 1, "ownKeys(target) {");
+    emit(context, indent + 2, `const ${keysVar} = new Set(Reflect.ownKeys(target));`);
+    for (const expression of objectBindExpressions) {
+        emit(context, indent + 2, `{`);
+        emit(context, indent + 3, `const ${sourceVar} = unwrap(${expression}) ?? {};`);
+        emit(context, indent + 3, `if (${sourceVar} && typeof ${sourceVar} === "object") {`);
+        emit(context, indent + 4, `for (const ${keyVar} of Object.keys(${sourceVar})) {`);
+        emit(context, indent + 5, `if (${keyVar} === "class" || ${keyVar} === "style" || ${componentFallthroughAttributeNameExpression(keyVar)}) {`);
+        emit(context, indent + 6, `${keysVar}.add(${keyVar});`);
+        emit(context, indent + 5, "}");
+        emit(context, indent + 4, "}");
+        emit(context, indent + 3, "}");
+        emit(context, indent + 2, `}`);
+    }
+    emit(context, indent + 2, `return Array.from(${keysVar});`);
+    emit(context, indent + 1, "},");
+    emit(context, indent + 1, `getOwnPropertyDescriptor(target, ${keyVar}) {`);
+    emit(context, indent + 2, `const ${descriptorVar} = Reflect.getOwnPropertyDescriptor(target, ${keyVar});`);
+    emit(context, indent + 2, `if (${descriptorVar}) { return ${descriptorVar}; }`);
+    emit(context, indent + 2, `if (typeof ${keyVar} === "string" && this.get(target, ${keyVar}) !== undefined) {`);
+    emit(context, indent + 3, "return { enumerable: true, configurable: true };");
+    emit(context, indent + 2, "}");
+    emit(context, indent + 2, "return undefined;");
+    emit(context, indent + 1, "}");
+    emit(context, indent, "});");
+}
+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)));
+    const classParts = componentFallthroughExpressions(context, node, "class", objectBindExpressions);
+    const styleParts = componentFallthroughExpressions(context, node, "style", objectBindExpressions);
+    const directAttrs = componentDirectAttributeFallthroughs(context, node);
+    if (classParts.length === 0 && styleParts.length === 0 && directAttrs.length === 0 && objectBindExpressions.length === 0) {
+        return;
+    }
+    const elementVar = nextVar(context, "componentEl");
+    emit(context, indent, `const ${elementVar} = ${componentVar}.element;`);
+    emit(context, indent, `if (${elementVar}?.nodeType === 1) {`);
+    if (classParts.length > 0) {
+        emitComponentFallthroughAttribute(context, elementVar, cleanupVar, "class", classParts, indent + 1);
+    }
+    if (styleParts.length > 0) {
+        emitComponentFallthroughAttribute(context, elementVar, cleanupVar, "style", styleParts, indent + 1);
+    }
+    for (const attr of directAttrs) {
+        if (attr.dynamic) {
+            const stopVar = nextVar(context, "stop");
+            emit(context, indent + 1, `const ${stopVar} = effect(() => {`);
+            emit(context, indent + 2, `setAttribute(${elementVar}, ${quote(attr.name)}, unwrap(${attr.expression}));`);
+            emit(context, indent + 1, "});");
+            emit(context, indent + 1, `${cleanupVar}.push(${stopVar});`);
+        }
+        else {
+            emit(context, indent + 1, `setAttribute(${elementVar}, ${quote(attr.name)}, ${attr.expression});`);
+        }
+    }
+    for (const expression of objectBindExpressions) {
+        emitComponentObjectAttributeFallthrough(context, elementVar, cleanupVar, expression, indent + 1);
+    }
+    emit(context, indent, "}");
+}
+function emitComponentFallthroughAttribute(context, elementVar, cleanupVar, attributeName, parts, indent) {
+    const baseVar = nextVar(context, `base${attributeName === "class" ? "Class" : "Style"}`);
+    const stopVar = nextVar(context, "stop");
+    emit(context, indent, `const ${baseVar} = ${elementVar}.getAttribute(${quote(attributeName)});`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `setAttribute(${elementVar}, ${quote(attributeName)}, [${baseVar}, ${parts.join(", ")}]);`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+}
+function componentFallthroughExpressions(context, node, attributeName, objectBindExpressions) {
+    return [
+        ...node.attrs.flatMap((attr) => componentDirectFallthroughExpression(context, attr, attributeName)),
+        ...objectBindExpressions.map((expression) => objectBindFallthroughExpression(expression, attributeName))
+    ];
+}
+function componentDirectFallthroughExpression(context, attr, attributeName) {
+    if (attr.name === attributeName) {
+        return [quote(attr.value === true ? "" : attr.value)];
+    }
+    if (getBindingName(attr.name) === attributeName) {
+        return [compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc))];
+    }
+    return [];
+}
+function objectBindFallthroughExpression(expression, attributeName) {
+    const key = quote(attributeName);
+    return `(() => { const source = unwrap(${expression}) ?? {}; return source && typeof source === "object" && ${key} in source ? unwrap(source[${key}]) : null; })()`;
+}
+function componentDirectAttributeFallthroughs(context, node) {
+    return node.attrs.flatMap((attr) => {
+        if (attr.name === "class" || attr.name === "style") {
+            return [];
+        }
+        if (!isDirectiveAttr(attr) && isComponentFallthroughAttributeName(attr.name)) {
+            return [
+                {
+                    dynamic: false,
+                    expression: quote(attr.value === true ? true : attr.value),
+                    name: attr.name
+                }
+            ];
+        }
+        const bindingName = getBindingName(attr.name);
+        if (bindingName && bindingName !== "class" && bindingName !== "style" && isComponentFallthroughAttributeName(bindingName)) {
+            return [
+                {
+                    dynamic: true,
+                    expression: compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc)),
+                    name: bindingName
+                }
+            ];
+        }
+        return [];
+    });
+}
+function emitComponentObjectAttributeFallthrough(context, elementVar, cleanupVar, expression, indent) {
+    const previousVar = nextVar(context, "fallthroughKeys");
+    const stopVar = nextVar(context, "stop");
+    const sourceVar = nextVar(context, "source");
+    const nextVarName = nextVar(context, "nextKeys");
+    const keyVar = nextVar(context, "key");
+    const valueVar = nextVar(context, "value");
+    const staleKeyVar = nextVar(context, "staleKey");
+    emit(context, indent, `let ${previousVar} = new Set();`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `const ${sourceVar} = unwrap(${expression}) ?? {};`);
+    emit(context, indent + 1, `const ${nextVarName} = new Set();`);
+    emit(context, indent + 1, `if (${sourceVar} && typeof ${sourceVar} === "object") {`);
+    emit(context, indent + 2, `for (const [${keyVar}, ${valueVar}] of Object.entries(${sourceVar})) {`);
+    emit(context, indent + 3, `if (${keyVar} === "class" || ${keyVar} === "style" || !${componentFallthroughAttributeNameExpression(keyVar)}) { continue; }`);
+    emit(context, indent + 3, `${nextVarName}.add(${keyVar});`);
+    emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, unwrap(${valueVar}));`);
+    emit(context, indent + 2, "}");
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `for (const ${staleKeyVar} of ${previousVar}) {`);
+    emit(context, indent + 2, `if (!${nextVarName}.has(${staleKeyVar})) {`);
+    emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, null);`);
+    emit(context, indent + 2, "}");
+    emit(context, indent + 1, "}");
+    emit(context, indent + 1, `${previousVar} = ${nextVarName};`);
+    emit(context, indent, "});");
+    emit(context, indent, `${cleanupVar}.push(${stopVar});`);
+}
+function isComponentFallthroughAttributeName(name) {
+    return (name === "id" ||
+        name === "title" ||
+        name === "role" ||
+        name === "tabindex" ||
+        name === "lang" ||
+        name === "dir" ||
+        name === "hidden" ||
+        name.startsWith("aria-") ||
+        name.startsWith("data-"));
+}
+function componentFallthroughAttributeNameExpression(keyExpression) {
+    return `(${keyExpression} === "id" || ${keyExpression} === "title" || ${keyExpression} === "role" || ${keyExpression} === "tabindex" || ${keyExpression} === "lang" || ${keyExpression} === "dir" || ${keyExpression} === "hidden" || ${keyExpression}.startsWith("aria-") || ${keyExpression}.startsWith("data-"))`;
+}
 function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar) {
     const slotDirectiveAttr = node.attrs.find((attr) => isSlotDirectiveAttr(attr));
     if (slotDirectiveAttr) {
@@ -169,26 +588,53 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
         emit(context, indent, `${elementVar}.setAttribute(${quote(context.scopeAttr)}, "");`);
     }
     for (const attr of node.attrs) {
+        if (attr.name === "ref" || getBindingName(attr.name) === "ref") {
+            continue;
+        }
         if (isDirectiveAttr(attr)) {
             continue;
         }
         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);
     for (const attr of node.attrs) {
-        if (attr.name === "v-model") {
+        const modelDirective = parseModelDirective(attr.name);
+        if (modelDirective) {
+            validateModelModifiers(modelDirective, attr, context);
             const expression = validateAssignableExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
             const stopVar = nextVar(context, "stop");
             const handlerVar = nextVar(context, "handler");
             const inputType = getStaticAttrValue(node, "type")?.toLowerCase();
-            const modelMode = node.tag === "input" && inputType === "checkbox" ? "checkbox" : node.tag === "select" ? "select" : "text";
-            const eventName = modelMode === "text" ? "input" : "change";
-            const propertyName = modelMode === "checkbox" ? "checked" : "value";
-            const renderedValue = modelMode === "checkbox" ? `Boolean(unwrap(${expression}))` : `String(unwrap(${expression}) ?? "")`;
-            const assignedValue = modelMode === "checkbox" ? `$event.target.checked` : `$event.target.value`;
+            const multiple = node.tag === "select" && hasStaticBooleanAttr(node, "multiple");
+            const modelMode = node.tag === "input" && inputType === "checkbox"
+                ? "checkbox"
+                : node.tag === "input" && inputType === "radio"
+                    ? "radio"
+                    : node.tag === "select" && multiple
+                        ? "select-multiple"
+                        : node.tag === "select"
+                            ? "select"
+                            : "text";
+            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}))`
+                : modelMode === "radio"
+                    ? `(${modelDirective.modifiers.includes("number") ? `Number(${elementVar}.getAttribute("value") ?? "on")` : `(${elementVar}.getAttribute("value") ?? "on")`} === 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);
             emit(context, indent, `const ${stopVar} = effect(() => {`);
-            emit(context, indent + 1, `if (${elementVar}.${propertyName} !== ${renderedValue}) {`);
-            emit(context, indent + 2, `${elementVar}.${propertyName} = ${renderedValue};`);
-            emit(context, indent + 1, "}");
+            if (modelMode === "select-multiple") {
+                emit(context, indent + 1, renderedValue);
+            }
+            else {
+                emit(context, indent + 1, `if (${elementVar}.${propertyName} !== ${renderedValue}) {`);
+                emit(context, indent + 2, `${elementVar}.${propertyName} = ${renderedValue};`);
+                emit(context, indent + 1, "}");
+            }
             emit(context, indent, "});");
             emit(context, indent, `${cleanupVar}.push(${stopVar});`);
             emit(context, indent, `const ${handlerVar} = ($event) => {`);
@@ -208,7 +654,7 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
             continue;
         }
         if (isObjectBindAttr(attr)) {
-            emitObjectBind(context, elementVar, attr, cleanupVar, indent);
+            emitObjectBind(context, node, elementVar, attr, cleanupVar, indent);
             continue;
         }
         if (isObjectOnAttr(attr)) {
@@ -225,6 +671,9 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
                 const baseHandlerVar = nextVar(context, "handler");
                 emit(context, indent, `const ${baseHandlerVar} = ${handlerExpression};`);
                 emit(context, indent, `const ${handlerVar} = ($event) => {`);
+                if (event.modifiers.includes("self")) {
+                    emit(context, indent + 1, `if ($event.target !== ${elementVar}) { return; }`);
+                }
                 if (event.modifiers.includes("prevent")) {
                     emit(context, indent + 1, "$event.preventDefault();");
                 }
@@ -237,12 +686,16 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
             else {
                 emit(context, indent, `const ${handlerVar} = ${handlerExpression};`);
             }
-            emit(context, indent, `${elementVar}.addEventListener(${quote(event.name)}, ${handlerVar});`);
-            emit(context, indent, `${cleanupVar}.push(() => ${elementVar}.removeEventListener(${quote(event.name)}, ${handlerVar}));`);
+            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) {
+            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")
@@ -254,10 +707,36 @@ function generateElement(context, node, parentVar, cleanupVar, indent, beforeVar
             emit(context, indent, `${cleanupVar}.push(${stopVar});`);
         }
     }
-    generateChildren(context, node.children, elementVar, cleanupVar, indent);
     appendNode(context, parentVar, elementVar, indent, beforeVar);
     return elementVar;
 }
+function emitTemplateRef(context, node, valueExpression, cleanupVar, indent) {
+    const refAttr = getTemplateRefAttr(node);
+    if (!refAttr) {
+        return;
+    }
+    const targetExpression = templateRefTargetExpression(context, refAttr);
+    const cleanupRefVar = nextVar(context, "cleanupRef");
+    const multiple = context.templateRefMode === "array";
+    emit(context, indent, `const ${cleanupRefVar} = __mikuru_setRef(${targetExpression}, ${valueExpression}, ${multiple ? "true" : "false"});`);
+    emit(context, indent, `${cleanupVar}.push(${cleanupRefVar});`);
+}
+function getTemplateRefAttr(node) {
+    return node.attrs.find((attr) => attr.name === "ref" || getBindingName(attr.name) === "ref");
+}
+function templateRefTargetExpression(context, attr) {
+    if (getBindingName(attr.name) === "ref") {
+        return compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
+    }
+    if (attr.value === true || !attr.value.trim()) {
+        throwTemplateError("Template ref requires a ref object name, for example ref=\"inputEl\"", context, attr.loc);
+    }
+    const name = attr.value.trim();
+    if (!isIdentifier(name)) {
+        throwTemplateError("Template ref must be a simple identifier that points to a ref object", context, attr.valueLoc ?? attr.loc);
+    }
+    return name;
+}
 function generateText(context, node, parentVar, cleanupVar, indent, beforeVar) {
     const textVar = nextVar(context, "text");
     emit(context, indent, `const ${textVar} = document.createTextNode("");`);
@@ -274,7 +753,7 @@ function generateText(context, node, parentVar, cleanupVar, indent, beforeVar) {
     appendNode(context, parentVar, textVar, indent, beforeVar);
     return textVar;
 }
-function emitObjectBind(context, elementVar, attr, cleanupVar, indent) {
+function emitObjectBind(context, node, elementVar, attr, cleanupVar, indent) {
     const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
     const prevKeysVar = nextVar(context, "boundKeys");
     const stopVar = nextVar(context, "stop");
@@ -283,6 +762,7 @@ function emitObjectBind(context, elementVar, attr, cleanupVar, indent) {
     const keyVar = nextVar(context, "key");
     const valueVar = nextVar(context, "value");
     const staleKeyVar = nextVar(context, "key");
+    const staticClass = getStaticAttrValue(node, "class");
     emit(context, indent, `const ${prevKeysVar} = new Set();`);
     emit(context, indent, `const ${stopVar} = effect(() => {`);
     emit(context, indent + 1, `const ${attrsVar} = unwrap(${expression}) ?? {};`);
@@ -290,12 +770,22 @@ function emitObjectBind(context, elementVar, attr, cleanupVar, indent) {
     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});`);
-    emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, unwrap(${valueVar}));`);
+    if (staticClass) {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, ${keyVar} === "class" ? [${quote(staticClass)}, unwrap(${valueVar})] : unwrap(${valueVar}));`);
+    }
+    else {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${keyVar}, unwrap(${valueVar}));`);
+    }
     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})) {`);
-    emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, null);`);
+    if (staticClass) {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, ${staleKeyVar} === "class" ? ${quote(staticClass)} : null);`);
+    }
+    else {
+        emit(context, indent + 3, `setAttribute(${elementVar}, ${staleKeyVar}, null);`);
+    }
     emit(context, indent + 2, "}");
     emit(context, indent + 1, "}");
     emit(context, indent + 1, `${prevKeysVar}.clear();`);
@@ -390,7 +880,7 @@ function generateChildren(context, children, parentVar, cleanupVar, indent, befo
         index += 1;
     }
 }
-function generateIfChain(context, branches, parentVar, cleanupVar, indent, beforeVar) {
+function generateIfChain(context, branches, parentVar, cleanupVar, indent, beforeVar, transitionVar) {
     const startVar = nextVar(context, "ifStart");
     const endVar = nextVar(context, "ifEnd");
     const branchCleanupVar = nextVar(context, "ifCleanup");
@@ -411,7 +901,10 @@ function generateIfChain(context, branches, parentVar, cleanupVar, indent, befor
             const condition = compileTemplateExpression(branch.condition ?? "", branch.directive, toExpressionContext(context, getStringAttrLocation(branch.node, branch.directive)));
             emit(context, indent + 1, `${branchIndex === 0 ? "if" : "else if"} (unwrap(${condition})) {`);
         }
-        generateNode(context, withoutAttrs(branch.node, ["v-if", "v-else-if", "v-else"]), parentVar, branchCleanupVar, indent + 2, endVar);
+        const branchVar = generateNode(context, withoutAttrs(branch.node, ["v-if", "v-else-if", "v-else"]), parentVar, branchCleanupVar, indent + 2, endVar);
+        if (transitionVar) {
+            emitTransitionRegistration(context, branchVar, transitionVar, indent + 2);
+        }
         emit(context, indent + 1, "}");
     });
     emit(context, indent, "});");
@@ -446,12 +939,16 @@ function generateFor(context, node, parentVar, cleanupVar, indent, expression, b
         emit(context, indent + 1, `for (let ${indexVar} = 0; ${indexVar} < ${sourceVar}.length; ${indexVar} += 1) {`);
         emit(context, indent + 2, `const ${itemName} = ${sourceVar}[${indexVar}];`);
         emit(context, indent + 2, `const ${indexName} = ${indexVar};`);
-        generateNode(context, withoutForAttrs(node), parentVar, branchCleanupVar, indent + 2, endVar);
+        withTemplateRefMode(context, "array", () => {
+            generateNode(context, withoutForAttrs(node), parentVar, branchCleanupVar, indent + 2, endVar);
+        });
         emit(context, indent + 1, "}");
     }
     else {
         emit(context, indent + 1, `for (const ${itemName} of unwrap(${compileTemplateExpression(sourceExpression, "v-for source", toExpressionContext(context, getStringAttrLocation(node, "v-for")))}) ?? []) {`);
-        generateNode(context, withoutForAttrs(node), parentVar, branchCleanupVar, indent + 2, endVar);
+        withTemplateRefMode(context, "array", () => {
+            generateNode(context, withoutForAttrs(node), parentVar, branchCleanupVar, indent + 2, endVar);
+        });
         emit(context, indent + 1, "}");
     }
     emit(context, indent, "});");
@@ -506,7 +1003,7 @@ function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName
     if (indexName) {
         emit(context, indent + 4, `const ${indexName} = ${indexRefVar};`);
     }
-    const elementVar = generateNode(context, withoutForAttrs(node), parentVar, recordCleanupVar, indent + 4, endVar);
+    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}` : ""} };`);
     emit(context, indent + 3, `}`);
     emit(context, indent + 2, `} else {`);
@@ -521,7 +1018,7 @@ function generateKeyedFor(context, node, parentVar, cleanupVar, indent, itemName
     emit(context, indent + 1, `for (const [${keyVar}, ${recordVar}] of ${recordsVar}) {`);
     emit(context, indent + 2, `if (!${nextRecordsVar}.has(${keyVar})) {`);
     emit(context, indent + 3, `__mikuru_runCleanup(${recordVar}.cleanups);`);
-    emit(context, indent + 3, `${recordVar}.element.remove();`);
+    emit(context, indent + 3, `__mikuru_removeNode(${recordVar}.element);`);
     emit(context, indent + 2, `}`);
     emit(context, indent + 1, `}`);
     emit(context, indent + 1, `${recordsVar}.clear();`);
@@ -544,10 +1041,91 @@ function emitRemoveBetween(context, indent, startVar, endVar) {
     emit(context, indent, `let ${currentVar} = ${startVar}.nextSibling;`);
     emit(context, indent, `while (${currentVar} && ${currentVar} !== ${endVar}) {`);
     emit(context, indent + 1, `const ${nextVarName} = ${currentVar}.nextSibling;`);
-    emit(context, indent + 1, `${currentVar}.remove();`);
+    emit(context, indent + 1, `__mikuru_removeNode(${currentVar});`);
     emit(context, indent + 1, `${currentVar} = ${nextVarName};`);
     emit(context, indent, "}");
 }
+function emitTransitionRegistration(context, nodeVar, transitionVar, indent) {
+    emit(context, indent, `if (${nodeVar}?.nodeType === 1) {`);
+    emit(context, indent + 1, `${nodeVar}.__mikuru_transition = ${transitionVar};`);
+    emit(context, indent + 1, `${nodeVar}.__mikuru_transitionLeaving = false;`);
+    emit(context, indent + 1, `__mikuru_applyTransitionEnter(${nodeVar}, ${transitionVar});`);
+    emit(context, indent, "}");
+}
+function withTemplateRefMode(context, mode, callback) {
+    const previousMode = context.templateRefMode;
+    context.templateRefMode = mode;
+    try {
+        return callback();
+    }
+    finally {
+        context.templateRefMode = previousMode;
+    }
+}
+function splitTopLevel(source, delimiter) {
+    const parts = [];
+    let depth = 0;
+    let quoteChar = "";
+    let start = 0;
+    for (let index = 0; index < source.length; index += 1) {
+        const char = source[index];
+        const previous = source[index - 1];
+        if (quoteChar) {
+            if (char === quoteChar && previous !== "\\") {
+                quoteChar = "";
+            }
+            continue;
+        }
+        if (char === "\"" || char === "'" || char === "`") {
+            quoteChar = char;
+            continue;
+        }
+        if (char === "{" || char === "[" || char === "(") {
+            depth += 1;
+            continue;
+        }
+        if (char === "}" || char === "]" || char === ")") {
+            depth -= 1;
+            continue;
+        }
+        if (depth === 0 && char === delimiter) {
+            parts.push(source.slice(start, index));
+            start = index + 1;
+        }
+    }
+    parts.push(source.slice(start));
+    return parts;
+}
+function findTopLevelToken(source, token) {
+    let depth = 0;
+    let quoteChar = "";
+    for (let index = 0; index < source.length; index += 1) {
+        const char = source[index];
+        const previous = source[index - 1];
+        if (quoteChar) {
+            if (char === quoteChar && previous !== "\\") {
+                quoteChar = "";
+            }
+            continue;
+        }
+        if (char === "\"" || char === "'" || char === "`") {
+            quoteChar = char;
+            continue;
+        }
+        if (char === "{" || char === "[" || char === "(") {
+            depth += 1;
+            continue;
+        }
+        if (char === "}" || char === "]" || char === ")") {
+            depth -= 1;
+            continue;
+        }
+        if (depth === 0 && char === token) {
+            return index;
+        }
+    }
+    return -1;
+}
 function appendNode(context, parentVar, nodeVar, indent, beforeVar) {
     if (beforeVar) {
         emit(context, indent, `${parentVar}.insertBefore(${nodeVar}, ${beforeVar});`);
@@ -574,7 +1152,9 @@ function normalizeScript(descriptor) {
     const edits = [];
     const transformedMacroStarts = new Set();
     const emitsDeclarations = [];
+    let inheritAttrs = true;
     let usesPropsAlias = false;
+    let usesAttrsAlias = false;
     let usesEmitAlias = false;
     let ast;
     try {
@@ -596,17 +1176,26 @@ function normalizeScript(descriptor) {
             continue;
         }
         if (statement.type !== "VariableDeclaration") {
+            if (isMacroCall(statement.expression, "defineOptions")) {
+                inheritAttrs = parseDefineOptionsDeclaration(statement.expression, descriptor).inheritAttrs;
+                edits.push({ start: statement.start, end: statement.end, replacement: "" });
+                transformedMacroStarts.add(statement.expression?.start ?? statement.start);
+            }
             continue;
         }
-        const macroDeclarations = (statement.declarations ?? []).filter((declaration) => isMacroCall(declaration.init, "defineProps") || isMacroCall(declaration.init, "defineEmits"));
+        const macroDeclarations = (statement.declarations ?? []).filter((declaration) => isMacroCall(declaration.init, "defineProps") ||
+            isMacroCall(declaration.init, "defineEmits") ||
+            isMacroCall(declaration.init, "useAttrs"));
         if (macroDeclarations.length > 0 && (statement.declarations ?? []).length !== 1) {
-            throwUnsupportedMacro("defineProps() and defineEmits() cannot share a variable declaration with other bindings", macroDeclarations[0], descriptor);
+            throwUnsupportedMacro("defineProps(), defineEmits(), and useAttrs() cannot share a variable declaration with other bindings", macroDeclarations[0], descriptor);
         }
         if (macroDeclarations.length > 0 && statement.kind !== "const") {
-            throwUnsupportedMacro("defineProps() and defineEmits() must use const declarations", macroDeclarations[0], descriptor);
+            throwUnsupportedMacro("defineProps(), defineEmits(), and useAttrs() must use const declarations", macroDeclarations[0], descriptor);
         }
         for (const declaration of statement.declarations ?? []) {
-            if (!isMacroCall(declaration.init, "defineProps") && !isMacroCall(declaration.init, "defineEmits")) {
+            if (!isMacroCall(declaration.init, "defineProps") &&
+                !isMacroCall(declaration.init, "defineEmits") &&
+                !isMacroCall(declaration.init, "useAttrs")) {
                 continue;
             }
             if (isMacroCall(declaration.init, "defineProps")) {
@@ -616,6 +1205,13 @@ function normalizeScript(descriptor) {
                 usesPropsAlias = usesPropsAlias || replacement.includes("__mikuru_props");
                 continue;
             }
+            if (isMacroCall(declaration.init, "useAttrs")) {
+                const replacement = transformUseAttrsDeclaration(declaration, descriptor);
+                edits.push({ start: statement.start, end: statement.end, replacement });
+                transformedMacroStarts.add(declaration.init?.start ?? declaration.start);
+                usesAttrsAlias = true;
+                continue;
+            }
             const emitDeclaration = transformDefineEmitsDeclaration(declaration, descriptor);
             edits.push({ start: statement.start, end: statement.end, replacement: emitDeclaration.replacement });
             transformedMacroStarts.add(declaration.init?.start ?? declaration.start);
@@ -633,7 +1229,9 @@ function normalizeScript(descriptor) {
         imports,
         runtimeImports,
         body,
+        inheritAttrs,
         usesPropsAlias,
+        usesAttrsAlias,
         usesEmitAlias
     };
 }
@@ -718,6 +1316,14 @@ function transformDefineEmitsDeclaration(declaration, descriptor) {
         events: parseDefineEmitsDeclaration(declaration.init, descriptor)
     };
 }
+function transformUseAttrsDeclaration(declaration, descriptor) {
+    validateNoMacroArguments(declaration.init, "useAttrs", descriptor);
+    if (declaration.id?.type !== "Identifier" || !isIdentifier(declaration.id.name ?? "")) {
+        throwUnsupportedMacro("useAttrs() only supports identifier bindings", declaration.id ?? declaration, descriptor);
+    }
+    const localName = declaration.id.name ?? "";
+    return `const ${localName} = ${localName === "__mikuru_attrs" ? "props.__mikuru_attrs ?? {}" : "__mikuru_attrs"};`;
+}
 function applyScriptEdits(script, edits) {
     const ordered = [...edits].sort((left, right) => left.start - right.start);
     let output = "";
@@ -736,6 +1342,34 @@ function applyScriptEdits(script, edits) {
 function isMacroCall(node, name) {
     return node?.type === "CallExpression" && node.callee?.type === "Identifier" && node.callee.name === name;
 }
+function validateNoMacroArguments(node, name, descriptor) {
+    const args = node?.arguments ?? [];
+    if (args.length > 0) {
+        throwUnsupportedMacro(`${name}() does not accept arguments`, args[0] ?? node ?? undefined, descriptor);
+    }
+}
+function parseDefineOptionsDeclaration(node, descriptor) {
+    const args = node?.arguments ?? [];
+    if (args.length !== 1 || args[0]?.type !== "ObjectExpression") {
+        throwUnsupportedMacro("defineOptions() only supports an object declaration argument", args[0] ?? node ?? undefined, descriptor);
+    }
+    let inheritAttrs = true;
+    for (const property of args[0].properties ?? []) {
+        if (property.type !== "Property" || property.computed) {
+            throwUnsupportedMacro("Unsupported defineOptions() declaration entry", property, descriptor);
+        }
+        const keyName = getPropertyKeyName(property.key);
+        if (keyName !== "inheritAttrs") {
+            throwUnsupportedMacro(`Unsupported defineOptions() option "${keyName ?? ""}"`, property.key ?? property, descriptor);
+        }
+        const valueNode = property.value;
+        if (valueNode?.type !== "Literal" || typeof valueNode.value !== "boolean") {
+            throwUnsupportedMacro("defineOptions({ inheritAttrs }) must use a boolean literal", valueNode ?? property, descriptor);
+        }
+        inheritAttrs = valueNode.value;
+    }
+    return { inheritAttrs };
+}
 function validateDefinePropsDeclaration(node, descriptor) {
     const args = node?.arguments ?? [];
     if (args.length === 0) {
@@ -815,9 +1449,12 @@ function assertNoUnsupportedMacroCalls(node, transformedMacroStarts, descriptor)
     walkScriptNode(node, (candidate) => {
         if (candidate.type === "CallExpression" &&
             candidate.callee?.type === "Identifier" &&
-            (candidate.callee.name === "defineProps" || candidate.callee.name === "defineEmits") &&
+            (candidate.callee.name === "defineProps" ||
+                candidate.callee.name === "defineEmits" ||
+                candidate.callee.name === "useAttrs" ||
+                candidate.callee.name === "defineOptions") &&
             !transformedMacroStarts.has(candidate.start)) {
-            throwUnsupportedMacro("defineProps() and defineEmits() must be used in top-level const declarations", candidate, descriptor);
+            throwUnsupportedMacro("defineProps(), defineEmits(), useAttrs(), and defineOptions() must be used in supported top-level declarations", candidate, descriptor);
         }
     });
 }
@@ -879,6 +1516,9 @@ function getStaticAttrValue(node, name) {
     }
     return attr.value;
 }
+function hasStaticBooleanAttr(node, name) {
+    return node.attrs.some((candidate) => candidate.name === name && candidate.value === true);
+}
 function getKeyExpression(node) {
     return getStringAttr(node, ":key") ?? getStringAttr(node, "v-bind:key");
 }
@@ -925,18 +1565,19 @@ function throwTemplateError(message, context, location) {
     }
     throw new Error(message);
 }
-function emitComponentProps(context, node, propsVar, indent) {
+function emitComponentProps(context, node, propsVar, attrsVar, indent) {
     const props = node.attrs
         .filter((attr) => !isStructuralAttr(attr))
         .flatMap((attr) => componentPropEntries(context, attr));
     const objectBindAttrs = node.attrs.filter((attr) => isObjectBindAttr(attr));
     const objectOnAttrs = node.attrs.filter((attr) => isObjectOnAttr(attr));
     const slots = collectComponentSlots(context, node);
-    const defaultSlot = slots.find((slot) => slot.name === "default");
+    const defaultSlot = slots.find((slot) => !slot.nameExpression && slot.name === "default");
     const needsProxy = objectBindAttrs.length > 0 || objectOnAttrs.length > 0;
     const propsTargetVar = needsProxy ? nextVar(context, "propsBase") : propsVar;
     emit(context, indent, `const ${propsTargetVar} = {`);
     emit(context, indent + 1, "__mikuru_context,");
+    emit(context, indent + 1, `__mikuru_attrs: ${attrsVar},`);
     for (const prop of props) {
         emit(context, indent + 1, `${prop},`);
     }
@@ -946,7 +1587,7 @@ function emitComponentProps(context, node, propsVar, indent) {
     if (slots.length > 0) {
         emit(context, indent + 1, "slots: {");
         for (const slot of slots) {
-            emitSlotFunction(context, quotePropertyName(slot.name), slot, indent + 2);
+            emitSlotFunction(context, slot.nameExpression ? `[${slot.nameExpression}]` : quotePropertyName(slot.name), slot, indent + 2);
         }
         emit(context, indent + 1, "},");
     }
@@ -1010,9 +1651,24 @@ function emitSlotScopeBindings(context, slot, slotPropsVar, indent) {
             emit(context, indent, `const ${binding.alias} = ${slotPropsVar};`);
             continue;
         }
-        emit(context, indent, `const ${binding.alias} = { get value() { return ${slotPropsVar}.${binding.source}; } };`);
+        if (binding.kind === "rest") {
+            emit(context, indent, `const ${binding.alias} = { get value() { const rest = { ...${slotPropsVar} }; ${binding.exclude.map((key) => `delete rest[${quote(key)}];`).join(" ")} return rest; } };`);
+            continue;
+        }
+        const valueExpression = slotScopePathExpression(slotPropsVar, binding.path);
+        if (binding.defaultValue) {
+            emit(context, indent, `const ${binding.alias} = { get value() { const value = ${valueExpression}; return value === undefined ? (${binding.defaultValue}) : value; } };`);
+            continue;
+        }
+        emit(context, indent, `const ${binding.alias} = { get value() { return ${valueExpression}; } };`);
     }
 }
+function slotScopePathExpression(rootVar, path) {
+    return path.reduce((expression, key, index) => {
+        const property = /^[A-Za-z_$][\w$]*$/.test(key) ? `.${key}` : `[${quote(key)}]`;
+        return `${expression}${index === 0 ? property : `?.${property.slice(1)}`}`;
+    }, rootVar);
+}
 function collectComponentSlots(context, node) {
     const slots = [];
     const usedNames = new Set();
@@ -1027,6 +1683,7 @@ function collectComponentSlots(context, node) {
                 usedNames.add(slotDirective.name);
                 slots.push({
                     name: slotDirective.name,
+                    nameExpression: slotDirective.nameExpression,
                     children: child.children,
                     scope: slotDirective.scope,
                     loc: child.loc,
@@ -1062,25 +1719,41 @@ function getSlotTemplateDirective(node, context) {
         throwTemplateError("A slot template can only declare one slot target", context, slotAttrs[1]?.loc);
     }
     const attr = slotAttrs[0];
-    const name = getSlotTemplateName(attr);
+    const name = getSlotTemplateName(attr, context);
     return {
-        name,
+        ...name,
         scope: attr.value,
         loc: attr.loc,
         scopeLoc: attr.valueLoc
     };
 }
-function getSlotTemplateName(attr) {
+function getSlotTemplateName(attr, context) {
     if (attr.name === "v-slot") {
-        return "default";
+        return { name: "default" };
     }
     if (attr.name.startsWith("v-slot:")) {
-        return attr.name.slice("v-slot:".length) || "default";
+        return parseSlotTemplateName(attr.name.slice("v-slot:".length) || "default", attr, context);
     }
     if (attr.name.startsWith("#")) {
-        return attr.name.slice(1) || "default";
+        return parseSlotTemplateName(attr.name.slice(1) || "default", attr, context);
+    }
+    return { name: "default" };
+}
+function parseSlotTemplateName(rawName, attr, context) {
+    const name = rawName.trim();
+    const dynamicStart = name.indexOf("[");
+    const dynamicEnd = name.lastIndexOf("]");
+    if (dynamicStart >= 0 && dynamicEnd > dynamicStart) {
+        const expression = name.slice(dynamicStart + 1, dynamicEnd).trim();
+        if (!expression) {
+            throwTemplateError("Dynamic slot name requires an expression", context, attr.loc);
+        }
+        return {
+            name: `[${expression}]`,
+            nameExpression: compileTemplateExpression(expression, attr.name, toExpressionContext(context, attr.loc))
+        };
     }
-    return "default";
+    return { name };
 }
 function parseSlotScopeBindings(scope, context, location) {
     if (scope === true || !scope.trim()) {
@@ -1097,22 +1770,90 @@ function parseSlotScopeBindings(scope, context, location) {
     if (!body) {
         return [];
     }
-    return body.split(",").map((part) => {
+    return parseSlotScopeObjectPattern(body, context, location, []);
+}
+function parseSlotScopeObjectPattern(body, context, location, pathPrefix) {
+    const bindings = [];
+    const excludedTopLevelKeys = [];
+    for (const part of splitTopLevel(body, ",")) {
         const sourcePart = part.trim();
-        const match = /^([A-Za-z_$][\w$]*)(?:\s*:\s*([A-Za-z_$][\w$]*))?$/.exec(sourcePart);
-        if (!match) {
-            throwTemplateError("Slot scope destructuring only supports identifiers and simple aliases", context, location);
+        if (!sourcePart) {
+            continue;
+        }
+        if (sourcePart.startsWith("...")) {
+            const alias = sourcePart.slice(3).trim();
+            if (pathPrefix.length > 0) {
+                throwTemplateError("Slot scope rest destructuring is only supported at the top level", context, location);
+            }
+            if (!isIdentifier(alias)) {
+                throwTemplateError("Slot scope rest destructuring must use a simple identifier like ...rest", context, location);
+            }
+            bindings.push({ kind: "rest", alias, exclude: excludedTopLevelKeys });
+            continue;
         }
+        const { left, right } = splitSlotScopeEntry(sourcePart, context, location);
+        if (!isIdentifier(left)) {
+            throwTemplateError(`Unsupported slot scope key "${left}". Use identifier keys in slot scope destructuring`, context, location);
+        }
+        if (pathPrefix.length === 0) {
+            excludedTopLevelKeys.push(left);
+        }
+        const path = [...pathPrefix, left];
+        if (right === undefined) {
+            bindings.push(...slotScopeLeafBindings(left, path, context, location));
+            continue;
+        }
+        const value = right.trim();
+        if (value.startsWith("{") && value.endsWith("}")) {
+            bindings.push(...parseSlotScopeObjectPattern(value.slice(1, -1), context, location, path));
+            continue;
+        }
+        if (value.startsWith("[") || value.includes("{")) {
+            throwTemplateError("Slot scope destructuring supports nested object patterns only; array and mixed patterns are not supported", context, location);
+        }
+        bindings.push(...slotScopeLeafBindings(value, path, context, location));
+    }
+    return bindings;
+}
+function splitSlotScopeEntry(source, context, location) {
+    const colonIndex = findTopLevelToken(source, ":");
+    if (colonIndex >= 0) {
         return {
-            kind: "property",
-            source: match[1],
-            alias: match[2] ?? match[1]
+            left: source.slice(0, colonIndex).trim(),
+            right: source.slice(colonIndex + 1).trim()
         };
-    });
+    }
+    const equalsIndex = findTopLevelToken(source, "=");
+    if (equalsIndex >= 0) {
+        const left = source.slice(0, equalsIndex).trim();
+        if (!isIdentifier(left)) {
+            throwTemplateError("Slot scope default values can only be assigned to simple identifiers", context, location);
+        }
+        return { left, right: source };
+    }
+    return { left: source.trim() };
+}
+function slotScopeLeafBindings(source, path, context, location) {
+    const equalsIndex = findTopLevelToken(source, "=");
+    const localSource = equalsIndex >= 0 ? source.slice(0, equalsIndex).trim() : source.trim();
+    const defaultSource = equalsIndex >= 0 ? source.slice(equalsIndex + 1).trim() : undefined;
+    if (!isIdentifier(localSource)) {
+        throwTemplateError(`Unsupported slot scope binding "${source}". Use identifiers, aliases, defaults, nested objects, or top-level ...rest`, context, location);
+    }
+    return [
+        {
+            kind: "property",
+            path,
+            alias: localSource,
+            defaultValue: defaultSource
+                ? compileTemplateExpression(defaultSource, "slot scope default", toExpressionContext(context, location))
+                : undefined
+        }
+    ];
 }
 function emitSlotOutletProps(context, node, propsVar, indent) {
     const entries = node.attrs
-        .filter((attr) => attr.name !== "name")
+        .filter((attr) => attr.name !== "name" && getBindingName(attr.name) !== "name")
         .map((attr) => slotOutletPropEntry(context, attr));
     emit(context, indent, `const ${propsVar} = {`);
     for (const entry of entries) {
@@ -1123,9 +1864,6 @@ function emitSlotOutletProps(context, node, propsVar, indent) {
 function slotOutletPropEntry(context, attr) {
     const bindingName = getBindingName(attr.name);
     if (bindingName) {
-        if (bindingName === "name") {
-            throwTemplateError("Dynamic slot names are not supported", context, attr.loc);
-        }
         const expression = compileTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
         return `get ${quotePropertyName(bindingName)}() { return unwrap(${expression}); }`;
     }
@@ -1134,35 +1872,50 @@ function slotOutletPropEntry(context, attr) {
     }
     return `${quotePropertyName(attr.name)}: ${quote(attr.value === true ? true : attr.value)}`;
 }
-function getSlotOutletName(node, context) {
-    if (hasAttr(node, ":name") || hasAttr(node, "v-bind:name")) {
-        const attr = node.attrs.find((candidate) => candidate.name === ":name" || candidate.name === "v-bind:name");
-        throwTemplateError("Dynamic slot names are not supported", context, attr?.loc);
+function getSlotOutletNameExpression(node, context) {
+    const dynamicNameAttr = node.attrs.find((candidate) => getBindingName(candidate.name) === "name");
+    if (dynamicNameAttr) {
+        return {
+            dynamic: true,
+            expression: compileTemplateExpression(requireAttrValue(dynamicNameAttr), dynamicNameAttr.name, toExpressionContext(context, dynamicNameAttr.valueLoc))
+        };
     }
-    return getStaticAttrValue(node, "name") ?? "default";
+    return { dynamic: false, name: getStaticAttrValue(node, "name") ?? "default" };
 }
 function componentPropEntries(context, attr) {
     if (isSlotDirectiveAttr(attr)) {
         throwTemplateError("v-slot must be used on a <template> child in Mikuru", context, attr.loc);
     }
+    if (attr.name === "ref") {
+        return [];
+    }
+    if (getBindingName(attr.name) === "ref") {
+        return [];
+    }
     if (isObjectBindAttr(attr) || isObjectOnAttr(attr)) {
         return [];
     }
-    if (attr.name === "v-model") {
+    const modelDirective = parseModelDirective(attr.name);
+    if (modelDirective) {
+        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));
-        return [
+        const entries = [
             `get modelValue() { return unwrap(${valueExpression}); }`,
             `onUpdateModelValue: ($value) => { ${expression}.value = $value; }`
         ];
+        if (modelDirective.modifiers.length > 0) {
+            entries.push(`modelModifiers: { ${modelDirective.modifiers.map((modifier) => `${quotePropertyName(modifier)}: true`).join(", ")} }`);
+        }
+        return entries;
     }
     const event = parseEventDirective(attr.name);
     if (event) {
-        if (event.modifiers.length) {
-            throwTemplateError("Event modifiers are not supported on component events yet", context, attr.loc);
-        }
+        validateComponentEventModifiers(event, attr, context);
         const handler = validateTemplateExpression(requireAttrValue(attr), attr.name, toExpressionContext(context, attr.valueLoc));
-        return [`${quotePropertyName(toComponentEventProp(event.name))}: ${eventHandlerExpression(handler, context, attr.valueLoc)}`];
+        return [
+            `${quotePropertyName(toComponentEventProp(event.name))}: ${componentEventHandlerExpression(event, eventHandlerExpression(handler, context, attr.valueLoc), context)}`
+        ];
     }
     const bindingName = getBindingName(attr.name);
     if (bindingName) {
@@ -1170,13 +1923,94 @@ function componentPropEntries(context, attr) {
         return [`get ${quotePropertyName(bindingName)}() { return unwrap(${expression}); }`];
     }
     if (attr.name === "v-show") {
-        throwTemplateError(`Unsupported component directive ${attr.name}`, context, attr.loc);
+        return [];
     }
     return [`${quotePropertyName(attr.name)}: ${quote(attr.value === true ? true : attr.value)}`];
 }
 function hasMeaningfulTemplateChildren(children) {
     return children.some((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
 }
+function getTransitionChildren(context, node) {
+    const meaningful = node.children.filter((child) => child.type === "element" || child.parts.some((part) => part.value.trim()));
+    if (meaningful.length === 0 || meaningful.some((child) => child.type !== "element")) {
+        throwTemplateError("<Transition> requires exactly one element/component child or one v-if chain", context, node.loc);
+    }
+    const children = meaningful;
+    const first = children[0];
+    if (children.length === 1) {
+        return children;
+    }
+    if (!getStringAttr(first, "v-if")) {
+        throwTemplateError("<Transition> requires exactly one element/component child or one v-if chain", context, node.loc);
+    }
+    for (const child of children.slice(1)) {
+        if (!getStringAttr(child, "v-else-if") && !hasAttr(child, "v-else")) {
+            throwTemplateError("<Transition> only accepts multiple children when they form a v-if chain", context, child.loc);
+        }
+    }
+    return children;
+}
+function getTransitionBranches(context, children) {
+    return children.map((child, index) => {
+        if (index === 0) {
+            return { node: child, condition: getStringAttr(child, "v-if"), directive: "v-if" };
+        }
+        const elseIfExpression = getStringAttr(child, "v-else-if");
+        if (elseIfExpression) {
+            return { node: child, condition: elseIfExpression, directive: "v-else-if" };
+        }
+        validateElseAttribute(child, context);
+        return { node: child, directive: "v-else" };
+    });
+}
+function getTransitionOptionsExpression(context, node) {
+    const entries = [`name: String(unwrap(${getTransitionAttrExpression(context, node, "name", "v")}) ?? "v")`];
+    const classAttrs = [
+        ["enter-from-class", "enterFromClass"],
+        ["enter-active-class", "enterActiveClass"],
+        ["enter-to-class", "enterToClass"],
+        ["leave-from-class", "leaveFromClass"],
+        ["leave-active-class", "leaveActiveClass"],
+        ["leave-to-class", "leaveToClass"]
+    ];
+    for (const [attrName, optionName] of classAttrs) {
+        const expression = getTransitionAttrExpression(context, node, attrName);
+        if (expression) {
+            entries.push(`${optionName}: String(unwrap(${expression}) ?? "")`);
+        }
+    }
+    return `{ ${entries.join(", ")} }`;
+}
+function getTransitionAttrExpression(context, node, name, fallback) {
+    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);
+    if (staticValue !== undefined) {
+        return quote(staticValue);
+    }
+    return fallback === undefined ? undefined : quote(fallback);
+}
+function validateTransitionAttributes(context, node) {
+    const supported = new Set([
+        "name",
+        "appear",
+        "enter-from-class",
+        "enter-active-class",
+        "enter-to-class",
+        "leave-from-class",
+        "leave-active-class",
+        "leave-to-class"
+    ]);
+    for (const attr of node.attrs) {
+        const name = getBindingName(attr.name) ?? attr.name;
+        if (supported.has(name)) {
+            continue;
+        }
+        throwTemplateError(`<Transition> only supports name, appear, and CSS class override attributes in v1`, context, attr.loc);
+    }
+}
 function toComponentEventProp(eventName) {
     return `on${eventName
         .split(/[-:]/)
@@ -1206,7 +2040,7 @@ function isSupportedDirectiveAttr(attr) {
         attr.name === "v-else" ||
         attr.name === "v-for" ||
         attr.name === "v-show" ||
-        attr.name === "v-model" ||
+        Boolean(parseModelDirective(attr.name)) ||
         isObjectBindAttr(attr) ||
         isObjectOnAttr(attr) ||
         Boolean(parseEventDirective(attr.name)) ||
@@ -1229,12 +2063,77 @@ function parseEventDirective(name) {
         modifiers
     };
 }
+function parseModelDirective(name) {
+    if (name === "v-model") {
+        return { modifiers: [] };
+    }
+    if (!name.startsWith("v-model.")) {
+        return undefined;
+    }
+    return { modifiers: name.slice("v-model.".length).split(".").filter(Boolean) };
+}
+function validateModelModifiers(model, attr, context) {
+    const supportedModifiers = new Set(["trim", "number", "lazy"]);
+    for (const modifier of model.modifiers) {
+        if (!supportedModifiers.has(modifier)) {
+            throwTemplateError(`Unsupported v-model modifier .${modifier}`, context, attr.loc);
+        }
+    }
+}
+function modelAssignedValue(modelMode, modifiers) {
+    if (modelMode === "checkbox") {
+        return "$event.target.checked";
+    }
+    if (modelMode === "radio") {
+        const valueExpression = `($event.target.getAttribute("value") ?? "on")`;
+        return modifiers.includes("number") ? `Number(${valueExpression})` : valueExpression;
+    }
+    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;
+    }
+    let valueExpression = "$event.target.value";
+    if (modifiers.includes("trim")) {
+        valueExpression = `${valueExpression}.trim()`;
+    }
+    if (modifiers.includes("number")) {
+        valueExpression = `Number(${valueExpression})`;
+    }
+    return valueExpression;
+}
 function validateEventModifiers(event, attr, context) {
+    const supportedModifiers = new Set(["prevent", "stop", "self", "once", "capture", "passive"]);
     for (const modifier of event.modifiers) {
-        if (modifier !== "prevent" && modifier !== "stop") {
+        if (!supportedModifiers.has(modifier)) {
             throwTemplateError(`Unsupported event modifier .${modifier}`, context, attr.loc);
         }
     }
+    if (event.modifiers.includes("passive") && event.modifiers.includes("prevent")) {
+        throwTemplateError("Event modifiers .passive and .prevent cannot be combined", context, attr.loc);
+    }
+}
+function validateComponentEventModifiers(event, attr, context) {
+    for (const modifier of event.modifiers) {
+        if (modifier !== "once") {
+            throwTemplateError(`Event modifier .${modifier} is only supported on DOM events`, context, attr.loc);
+        }
+    }
+}
+function eventListenerOptions(event) {
+    const options = [
+        event.modifiers.includes("capture") ? "capture: true" : undefined,
+        event.modifiers.includes("once") ? "once: true" : undefined,
+        event.modifiers.includes("passive") ? "passive: true" : undefined
+    ].filter(Boolean);
+    return options.length ? `{ ${options.join(", ")} }` : undefined;
+}
+function componentEventHandlerExpression(event, handlerExpression, context) {
+    if (!event.modifiers.includes("once")) {
+        return handlerExpression;
+    }
+    const calledVar = nextVar(context, "called");
+    const handlerVar = nextVar(context, "handler");
+    return `(() => { let ${calledVar} = false; const ${handlerVar} = ${handlerExpression}; return (...$args) => { if (${calledVar}) { return; } ${calledVar} = true; return ${handlerVar}(...$args); }; })()`;
 }
 function getEventName(name) {
     if (name.startsWith("@")) {