@vue-jsx-vapor/compiler 2.5.0 → 2.5.2

package/dist/index.cjs

@@ -756,21 +756,10 @@ function genCreateComponent(operation, context) {
 	const { helper } = context;
 	const tag = genTag();
 	const { root, props, slots, once } = operation;
+	const rawProps = genRawProps(props, context);
 	const rawSlots = genRawSlots(slots, context);
-	const [ids, handlers] = processInlineHandlers(props, context);
-	const rawProps = context.withId(() => genRawProps(props, context), ids);
-	const inlineHandlers = handlers.reduce((acc, { name, value }) => {
-		const handler = genEventHandler(context, value, void 0, false);
-		return [
-			...acc,
-			`const ${name} = `,
-			...handler,
-			NEWLINE
-		];
-	}, []);
 	return [
 		NEWLINE,
-		...inlineHandlers,
 		`const n${operation.id} = `,
 		...genCall(operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, root ? "true" : false, once && "true"),
 		...genDirectivesForElement(operation.id, context)
@@ -786,33 +775,6 @@ function genCreateComponent(operation, context) {
 		else return genExpression((0, __vue_shared.extend)((0, __vue_compiler_dom.createSimpleExpression)(operation.tag, false), { ast: null }), context);
 	}
 }
-function getUniqueHandlerName(context, name) {
-	const { seenInlineHandlerNames } = context;
-	const count = seenInlineHandlerNames[name] || 0;
-	seenInlineHandlerNames[name] = count + 1;
-	return count === 0 ? name : `${name}${count}`;
-}
-function processInlineHandlers(props, context) {
-	const ids = Object.create(null);
-	const handlers = [];
-	const staticProps = props[0];
-	if ((0, __vue_shared.isArray)(staticProps)) for (const prop of staticProps) {
-		if (!prop.handler) continue;
-		prop.values.forEach((value, i) => {
-			const isMemberExp = (0, __vue_compiler_dom.isMemberExpression)(value, context.options);
-			if (!isMemberExp) {
-				const name = getUniqueHandlerName(context, `_on_${prop.key.content}`);
-				handlers.push({
-					name,
-					value
-				});
-				ids[name] = null;
-				prop.values[i] = (0, __vue_shared.extend)({ ast: null }, (0, __vue_compiler_dom.createSimpleExpression)(name));
-			}
-		});
-	}
-	return [ids, handlers];
-}
 function genRawProps(props, context) {
 	const staticProps = props[0];
 	if ((0, __vue_shared.isArray)(staticProps)) {
@@ -1068,7 +1030,33 @@ function genFor(oper, context) {
 		idMap[rawIndex] = `${indexVar}.value`;
 		idMap[indexVar] = null;
 	}
-	const blockFn = context.withId(() => genBlock(render, context, args), idMap);
+	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap);
+	const selectorDeclarations = [];
+	const selectorSetup = [];
+	for (const [i, { selector }] of selectorPatterns.entries()) {
+		const selectorName = `_selector${id}_${i}`;
+		selectorDeclarations.push(`let ${selectorName}`, NEWLINE);
+		if (i === 0) selectorSetup.push(`({ createSelector }) => {`, INDENT_START);
+		selectorSetup.push(NEWLINE, `${selectorName} = `, ...genCall(`createSelector`, [`() => `, ...genExpression(selector, context)]));
+		if (i === selectorPatterns.length - 1) selectorSetup.push(INDENT_END, NEWLINE, "}");
+	}
+	const blockFn = context.withId(() => {
+		const frag = [];
+		frag.push("(", ...args, ") => {", INDENT_START);
+		if (selectorPatterns.length || keyOnlyBindingPatterns.length) frag.push(...genBlockContent(render, context, false, () => {
+			const patternFrag = [];
+			for (const [i, { effect }] of selectorPatterns.entries()) {
+				patternFrag.push(NEWLINE, `_selector${id}_${i}(() => {`, INDENT_START);
+				for (const oper$1 of effect.operations) patternFrag.push(...genOperation(oper$1, context));
+				patternFrag.push(INDENT_END, NEWLINE, `})`);
+			}
+			for (const { effect } of keyOnlyBindingPatterns) for (const oper$1 of effect.operations) patternFrag.push(...genOperation(oper$1, context));
+			return patternFrag;
+		}));
+		else frag.push(...genBlockContent(render, context));
+		frag.push(INDENT_END, NEWLINE, "}");
+		return frag;
+	}, idMap);
 	exitScope();
 	let flags = 0;
 	if (onlyChild) flags |= VaporVForFlags.FAST_REMOVE;
@@ -1076,8 +1064,9 @@ function genFor(oper, context) {
 	if (once) flags |= VaporVForFlags.ONCE;
 	return [
 		NEWLINE,
+		...selectorDeclarations,
 		`const n${id} = `,
-		...genCall(helper("createFor"), sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0)
+		...genCall([helper("createFor"), "undefined"], sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0, selectorSetup.length ? selectorSetup : void 0)
 	];
 	function parseValueDestructure() {
 		const map = /* @__PURE__ */ new Map();
@@ -1151,6 +1140,131 @@ function genFor(oper, context) {
 		return idMap$1;
 	}
 }
+function matchPatterns(render, keyProp, idMap) {
+	const selectorPatterns = [];
+	const keyOnlyBindingPatterns = [];
+	render.effect = render.effect.filter((effect) => {
+		if (keyProp !== void 0) {
+			const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+			if (selector) {
+				selectorPatterns.push(selector);
+				return false;
+			}
+			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+			if (keyOnly) {
+				keyOnlyBindingPatterns.push(keyOnly);
+				return false;
+			}
+		}
+		return true;
+	});
+	return {
+		keyOnlyBindingPatterns,
+		selectorPatterns
+	};
+}
+function matchKeyOnlyBindingPattern(effect, keyAst) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		if (typeof ast === "object" && ast !== null && isKeyOnlyBinding(ast, keyAst)) return { effect };
+	}
+}
+function matchSelectorPattern(effect, keyAst, idMap) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		const offset = effect.expressions[0].loc.start.offset;
+		if (typeof ast === "object" && ast) {
+			const matcheds = [];
+			(0, ast_kit.walkAST)(ast, { enter(node) {
+				if (typeof node === "object" && node && node.type === "BinaryExpression" && node.operator === "===" && node.left.type !== "PrivateName") {
+					const { left, right } = node;
+					for (const [a, b] of [[left, right], [right, left]]) {
+						const aIsKey = isKeyOnlyBinding(a, keyAst);
+						const bIsKey = isKeyOnlyBinding(b, keyAst);
+						const bVars = analyzeVariableScopes(b, idMap);
+						if (aIsKey && !bIsKey && !bVars.locals.length) matcheds.push([a, b]);
+					}
+				}
+			} });
+			if (matcheds.length === 1) {
+				const [key, selector] = matcheds[0];
+				const content$1 = effect.expressions[0].content;
+				let hasExtraId = false;
+				const parentStackMap = /* @__PURE__ */ new Map();
+				const parentStack = [];
+				(0, __vue_compiler_dom.walkIdentifiers)(ast, (id) => {
+					if (id.start !== key.start && id.start !== selector.start) hasExtraId = true;
+					parentStackMap.set(id, parentStack.slice());
+				}, false, parentStack);
+				if (!hasExtraId) {
+					const name = content$1.slice(selector.start - offset, selector.end - offset);
+					return {
+						effect,
+						selector: {
+							content: name,
+							ast: (0, __vue_shared.extend)({}, selector, {
+								start: 1,
+								end: name.length + 1
+							}),
+							loc: selector.loc,
+							isStatic: false
+						}
+					};
+				}
+			}
+		}
+		const content = effect.expressions[0].content;
+		if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && (0, __vue_compiler_dom.isStaticNode)(ast.consequent) && (0, __vue_compiler_dom.isStaticNode)(ast.alternate)) {
+			const left = ast.test.left;
+			const right = ast.test.right;
+			for (const [a, b] of [[left, right], [right, left]]) {
+				const aIsKey = isKeyOnlyBinding(a, keyAst);
+				const bIsKey = isKeyOnlyBinding(b, keyAst);
+				const bVars = analyzeVariableScopes(b, idMap);
+				if (aIsKey && !bIsKey && !bVars.locals.length) return {
+					effect,
+					selector: {
+						content: content.slice(b.start - offset, b.end - offset),
+						ast: b,
+						loc: b.loc,
+						isStatic: false
+					}
+				};
+			}
+		}
+	}
+}
+function analyzeVariableScopes(ast, idMap) {
+	const globals = [];
+	const locals = [];
+	const ids = [];
+	const parentStackMap = /* @__PURE__ */ new Map();
+	const parentStack = [];
+	(0, __vue_compiler_dom.walkIdentifiers)(ast, (id) => {
+		ids.push(id);
+		parentStackMap.set(id, parentStack.slice());
+	}, false, parentStack);
+	for (const id of ids) {
+		if ((0, __vue_shared.isGloballyAllowed)(id.name)) continue;
+		if (idMap[id.name]) locals.push(id.name);
+		else globals.push(id.name);
+	}
+	return {
+		globals,
+		locals
+	};
+}
+function isKeyOnlyBinding(expr, keyAst) {
+	let only = true;
+	(0, ast_kit.walkAST)(expr, { enter(node) {
+		if ((0, __babel_types.isNodesEquivalent)(node, keyAst)) {
+			this.skip();
+			return;
+		}
+		if (node.type === "Identifier") only = false;
+	} });
+	return only;
+}
 
 //#endregion
 //#region src/generators/html.ts
@@ -1267,7 +1381,7 @@ function genOperation(oper, context) {
 		}
 	}
 }
-function genEffects(effects, context) {
+function genEffects(effects, context, genExtraFrag) {
 	const { helper } = context;
 	const [frag, push, unshift] = buildCodeFragment();
 	let operationsCount = 0;
@@ -1287,6 +1401,7 @@ function genEffects(effects, context) {
 		unshift(NEWLINE, `${helper("renderEffect")}(() => `);
 		push(`)`);
 	}
+	if (genExtraFrag) push(...context.withId(genExtraFrag, {}));
 	return frag;
 }
 function genEffect({ operations }, context) {
@@ -1353,19 +1468,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
 
 //#endregion
 //#region src/generators/block.ts
-function genBlock(oper, context, args = [], root, customReturns) {
+function genBlock(oper, context, args = [], root) {
 	return [
 		"(",
 		...args,
 		") => {",
 		INDENT_START,
-		...genBlockContent(oper, context, root, customReturns),
+		...genBlockContent(oper, context, root),
 		INDENT_END,
 		NEWLINE,
 		"}"
 	];
 }
-function genBlockContent(block, context, root, customReturns) {
+function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	const [frag, push] = buildCodeFragment();
 	const { dynamic, effect, operation, returns } = block;
 	const resetBlock = context.enterBlock(block);
@@ -1381,11 +1496,11 @@ function genBlockContent(block, context, root, customReturns) {
 	for (const child of dynamic.children) push(...genSelf(child, context));
 	for (const child of dynamic.children) push(...genChildren(child, context, push, `n${child.id}`));
 	push(...genOperations(operation, context));
-	push(...genEffects(effect, context));
+	push(...genEffects(effect, context, genEffectsExtraFrag));
 	push(NEWLINE, `return `);
 	const returnNodes = returns.map((n) => `n${n}`);
 	const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
-	push(...customReturns ? customReturns(returnsCode) : returnsCode);
+	push(...returnsCode);
 	resetBlock();
 	return frag;
 	function genResolveAssets(kind, helper) {
@@ -1404,7 +1519,6 @@ var CodegenContext = class {
 	};
 	delegates = /* @__PURE__ */ new Set();
 	identifiers = Object.create(null);
-	seenInlineHandlerNames = Object.create(null);
 	block;
 	withId(fn, map) {
 		const { identifiers } = this;
@@ -2273,9 +2387,9 @@ function hasDynamicKeyVBind(node) {
 const delegatedEvents = /* @__PURE__ */ (0, __vue_shared.makeMap)("beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart");
 const transformVOn = (dir, node, context) => {
 	const { name, loc, value } = dir;
-	if (name.type === "JSXNamespacedName") return;
+	if (!name) return;
 	const isComponent = isJSXComponent(node);
-	const [nameString, ...modifiers] = name.name.replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
+	const [nameString, ...modifiers] = context.ir.source.slice(name.start, name.end).replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
 	if (!value && !modifiers.length) context.options.onError((0, __vue_compiler_dom.createCompilerError)(__vue_compiler_dom.ErrorCodes.X_V_ON_NO_EXPRESSION, resolveLocation(loc, context)));
 	let arg = resolveSimpleExpression(nameString, true, dir.name.loc);
 	const exp = resolveExpression(dir.value, context);
@@ -2473,13 +2587,10 @@ function createSlotBlock(slotNode, dir, context) {
 //#region src/transforms/vSlots.ts
 const transformVSlots = (dir, node, context) => {
 	if (!isJSXComponent(node)) return;
-	if (dir.value?.type === "JSXExpressionContainer") {
-		context.slots = [{
-			slotType: IRSlotType.EXPRESSION,
-			slots: resolveExpression(dir.value.expression, context)
-		}];
-		if (node.children.length) context.options.onError((0, __vue_compiler_dom.createCompilerError)(__vue_compiler_dom.ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, resolveLocation(node.children[0].loc, context)));
-	}
+	if (dir.value?.type === "JSXExpressionContainer") context.slots = [{
+		slotType: IRSlotType.EXPRESSION,
+		slots: resolveExpression(dir.value.expression, context)
+	}];
 };
 
 //#endregion

package/dist/index.d.cts

@@ -353,7 +353,6 @@ declare class CodegenContext {
   helper: (name: string) => string;
   delegates: Set<string>;
   identifiers: Record<string, (string | SimpleExpressionNode)[]>;
-  seenInlineHandlerNames: Record<string, number>;
   block: BlockIRNode;
   withId<T>(fn: () => T, map: Record<string, string | SimpleExpressionNode | null>): T;
   enterBlock(block: BlockIRNode): () => BlockIRNode;

package/dist/index.d.ts

@@ -353,7 +353,6 @@ declare class CodegenContext {
   helper: (name: string) => string;
   delegates: Set<string>;
   identifiers: Record<string, (string | SimpleExpressionNode)[]>;
-  seenInlineHandlerNames: Record<string, number>;
   block: BlockIRNode;
   withId<T>(fn: () => T, map: Record<string, string | SimpleExpressionNode | null>): T;
   enterBlock(block: BlockIRNode): () => BlockIRNode;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { parse, parseExpression } from "@babel/parser";
 import { NOOP, camelize, canSetValueDirectly, capitalize, extend, isArray, isBuiltInDirective, isGloballyAllowed, isHTMLTag, isSVGTag, isString, isVoidTag, makeMap, remove, shouldSetAsAttr, toHandlerKey } from "@vue/shared";
 import { DOMErrorCodes, ErrorCodes, NewlineType, NodeTypes, TS_NODE_TYPES, advancePositionWithClone, advancePositionWithMutation, createCompilerError, createDOMCompilerError, createSimpleExpression, defaultOnError, defaultOnWarn, isConstantNode, isFnExpression, isLiteralWhitelisted, isMemberExpression, isSimpleIdentifier, isStaticNode, isStaticProperty, isValidHTMLNesting, locStub, resolveModifiers, toValidAssetId, unwrapTSNode, walkIdentifiers } from "@vue/compiler-dom";
-import { walkIdentifiers as walkIdentifiers$1 } from "ast-kit";
-import { isLiteral, jsxClosingFragment, jsxExpressionContainer, jsxFragment, jsxOpeningFragment } from "@babel/types";
+import { walkAST, walkIdentifiers as walkIdentifiers$1 } from "ast-kit";
+import { isLiteral, isNodesEquivalent, jsxClosingFragment, jsxExpressionContainer, jsxFragment, jsxOpeningFragment } from "@babel/types";
 import { SourceMapGenerator } from "source-map-js";
 
 //#region src/ir/component.ts
@@ -733,21 +733,10 @@ function genCreateComponent(operation, context) {
 	const { helper } = context;
 	const tag = genTag();
 	const { root, props, slots, once } = operation;
+	const rawProps = genRawProps(props, context);
 	const rawSlots = genRawSlots(slots, context);
-	const [ids, handlers] = processInlineHandlers(props, context);
-	const rawProps = context.withId(() => genRawProps(props, context), ids);
-	const inlineHandlers = handlers.reduce((acc, { name, value }) => {
-		const handler = genEventHandler(context, value, void 0, false);
-		return [
-			...acc,
-			`const ${name} = `,
-			...handler,
-			NEWLINE
-		];
-	}, []);
 	return [
 		NEWLINE,
-		...inlineHandlers,
 		`const n${operation.id} = `,
 		...genCall(operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, root ? "true" : false, once && "true"),
 		...genDirectivesForElement(operation.id, context)
@@ -763,33 +752,6 @@ function genCreateComponent(operation, context) {
 		else return genExpression(extend(createSimpleExpression(operation.tag, false), { ast: null }), context);
 	}
 }
-function getUniqueHandlerName(context, name) {
-	const { seenInlineHandlerNames } = context;
-	const count = seenInlineHandlerNames[name] || 0;
-	seenInlineHandlerNames[name] = count + 1;
-	return count === 0 ? name : `${name}${count}`;
-}
-function processInlineHandlers(props, context) {
-	const ids = Object.create(null);
-	const handlers = [];
-	const staticProps = props[0];
-	if (isArray(staticProps)) for (const prop of staticProps) {
-		if (!prop.handler) continue;
-		prop.values.forEach((value, i) => {
-			const isMemberExp = isMemberExpression(value, context.options);
-			if (!isMemberExp) {
-				const name = getUniqueHandlerName(context, `_on_${prop.key.content}`);
-				handlers.push({
-					name,
-					value
-				});
-				ids[name] = null;
-				prop.values[i] = extend({ ast: null }, createSimpleExpression(name));
-			}
-		});
-	}
-	return [ids, handlers];
-}
 function genRawProps(props, context) {
 	const staticProps = props[0];
 	if (isArray(staticProps)) {
@@ -1045,7 +1007,33 @@ function genFor(oper, context) {
 		idMap[rawIndex] = `${indexVar}.value`;
 		idMap[indexVar] = null;
 	}
-	const blockFn = context.withId(() => genBlock(render, context, args), idMap);
+	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap);
+	const selectorDeclarations = [];
+	const selectorSetup = [];
+	for (const [i, { selector }] of selectorPatterns.entries()) {
+		const selectorName = `_selector${id}_${i}`;
+		selectorDeclarations.push(`let ${selectorName}`, NEWLINE);
+		if (i === 0) selectorSetup.push(`({ createSelector }) => {`, INDENT_START);
+		selectorSetup.push(NEWLINE, `${selectorName} = `, ...genCall(`createSelector`, [`() => `, ...genExpression(selector, context)]));
+		if (i === selectorPatterns.length - 1) selectorSetup.push(INDENT_END, NEWLINE, "}");
+	}
+	const blockFn = context.withId(() => {
+		const frag = [];
+		frag.push("(", ...args, ") => {", INDENT_START);
+		if (selectorPatterns.length || keyOnlyBindingPatterns.length) frag.push(...genBlockContent(render, context, false, () => {
+			const patternFrag = [];
+			for (const [i, { effect }] of selectorPatterns.entries()) {
+				patternFrag.push(NEWLINE, `_selector${id}_${i}(() => {`, INDENT_START);
+				for (const oper$1 of effect.operations) patternFrag.push(...genOperation(oper$1, context));
+				patternFrag.push(INDENT_END, NEWLINE, `})`);
+			}
+			for (const { effect } of keyOnlyBindingPatterns) for (const oper$1 of effect.operations) patternFrag.push(...genOperation(oper$1, context));
+			return patternFrag;
+		}));
+		else frag.push(...genBlockContent(render, context));
+		frag.push(INDENT_END, NEWLINE, "}");
+		return frag;
+	}, idMap);
 	exitScope();
 	let flags = 0;
 	if (onlyChild) flags |= VaporVForFlags.FAST_REMOVE;
@@ -1053,8 +1041,9 @@ function genFor(oper, context) {
 	if (once) flags |= VaporVForFlags.ONCE;
 	return [
 		NEWLINE,
+		...selectorDeclarations,
 		`const n${id} = `,
-		...genCall(helper("createFor"), sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0)
+		...genCall([helper("createFor"), "undefined"], sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0, selectorSetup.length ? selectorSetup : void 0)
 	];
 	function parseValueDestructure() {
 		const map = /* @__PURE__ */ new Map();
@@ -1128,6 +1117,131 @@ function genFor(oper, context) {
 		return idMap$1;
 	}
 }
+function matchPatterns(render, keyProp, idMap) {
+	const selectorPatterns = [];
+	const keyOnlyBindingPatterns = [];
+	render.effect = render.effect.filter((effect) => {
+		if (keyProp !== void 0) {
+			const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+			if (selector) {
+				selectorPatterns.push(selector);
+				return false;
+			}
+			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+			if (keyOnly) {
+				keyOnlyBindingPatterns.push(keyOnly);
+				return false;
+			}
+		}
+		return true;
+	});
+	return {
+		keyOnlyBindingPatterns,
+		selectorPatterns
+	};
+}
+function matchKeyOnlyBindingPattern(effect, keyAst) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		if (typeof ast === "object" && ast !== null && isKeyOnlyBinding(ast, keyAst)) return { effect };
+	}
+}
+function matchSelectorPattern(effect, keyAst, idMap) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		const offset = effect.expressions[0].loc.start.offset;
+		if (typeof ast === "object" && ast) {
+			const matcheds = [];
+			walkAST(ast, { enter(node) {
+				if (typeof node === "object" && node && node.type === "BinaryExpression" && node.operator === "===" && node.left.type !== "PrivateName") {
+					const { left, right } = node;
+					for (const [a, b] of [[left, right], [right, left]]) {
+						const aIsKey = isKeyOnlyBinding(a, keyAst);
+						const bIsKey = isKeyOnlyBinding(b, keyAst);
+						const bVars = analyzeVariableScopes(b, idMap);
+						if (aIsKey && !bIsKey && !bVars.locals.length) matcheds.push([a, b]);
+					}
+				}
+			} });
+			if (matcheds.length === 1) {
+				const [key, selector] = matcheds[0];
+				const content$1 = effect.expressions[0].content;
+				let hasExtraId = false;
+				const parentStackMap = /* @__PURE__ */ new Map();
+				const parentStack = [];
+				walkIdentifiers(ast, (id) => {
+					if (id.start !== key.start && id.start !== selector.start) hasExtraId = true;
+					parentStackMap.set(id, parentStack.slice());
+				}, false, parentStack);
+				if (!hasExtraId) {
+					const name = content$1.slice(selector.start - offset, selector.end - offset);
+					return {
+						effect,
+						selector: {
+							content: name,
+							ast: extend({}, selector, {
+								start: 1,
+								end: name.length + 1
+							}),
+							loc: selector.loc,
+							isStatic: false
+						}
+					};
+				}
+			}
+		}
+		const content = effect.expressions[0].content;
+		if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && isStaticNode(ast.consequent) && isStaticNode(ast.alternate)) {
+			const left = ast.test.left;
+			const right = ast.test.right;
+			for (const [a, b] of [[left, right], [right, left]]) {
+				const aIsKey = isKeyOnlyBinding(a, keyAst);
+				const bIsKey = isKeyOnlyBinding(b, keyAst);
+				const bVars = analyzeVariableScopes(b, idMap);
+				if (aIsKey && !bIsKey && !bVars.locals.length) return {
+					effect,
+					selector: {
+						content: content.slice(b.start - offset, b.end - offset),
+						ast: b,
+						loc: b.loc,
+						isStatic: false
+					}
+				};
+			}
+		}
+	}
+}
+function analyzeVariableScopes(ast, idMap) {
+	const globals = [];
+	const locals = [];
+	const ids = [];
+	const parentStackMap = /* @__PURE__ */ new Map();
+	const parentStack = [];
+	walkIdentifiers(ast, (id) => {
+		ids.push(id);
+		parentStackMap.set(id, parentStack.slice());
+	}, false, parentStack);
+	for (const id of ids) {
+		if (isGloballyAllowed(id.name)) continue;
+		if (idMap[id.name]) locals.push(id.name);
+		else globals.push(id.name);
+	}
+	return {
+		globals,
+		locals
+	};
+}
+function isKeyOnlyBinding(expr, keyAst) {
+	let only = true;
+	walkAST(expr, { enter(node) {
+		if (isNodesEquivalent(node, keyAst)) {
+			this.skip();
+			return;
+		}
+		if (node.type === "Identifier") only = false;
+	} });
+	return only;
+}
 
 //#endregion
 //#region src/generators/html.ts
@@ -1244,7 +1358,7 @@ function genOperation(oper, context) {
 		}
 	}
 }
-function genEffects(effects, context) {
+function genEffects(effects, context, genExtraFrag) {
 	const { helper } = context;
 	const [frag, push, unshift] = buildCodeFragment();
 	let operationsCount = 0;
@@ -1264,6 +1378,7 @@ function genEffects(effects, context) {
 		unshift(NEWLINE, `${helper("renderEffect")}(() => `);
 		push(`)`);
 	}
+	if (genExtraFrag) push(...context.withId(genExtraFrag, {}));
 	return frag;
 }
 function genEffect({ operations }, context) {
@@ -1330,19 +1445,19 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
 
 //#endregion
 //#region src/generators/block.ts
-function genBlock(oper, context, args = [], root, customReturns) {
+function genBlock(oper, context, args = [], root) {
 	return [
 		"(",
 		...args,
 		") => {",
 		INDENT_START,
-		...genBlockContent(oper, context, root, customReturns),
+		...genBlockContent(oper, context, root),
 		INDENT_END,
 		NEWLINE,
 		"}"
 	];
 }
-function genBlockContent(block, context, root, customReturns) {
+function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	const [frag, push] = buildCodeFragment();
 	const { dynamic, effect, operation, returns } = block;
 	const resetBlock = context.enterBlock(block);
@@ -1358,11 +1473,11 @@ function genBlockContent(block, context, root, customReturns) {
 	for (const child of dynamic.children) push(...genSelf(child, context));
 	for (const child of dynamic.children) push(...genChildren(child, context, push, `n${child.id}`));
 	push(...genOperations(operation, context));
-	push(...genEffects(effect, context));
+	push(...genEffects(effect, context, genEffectsExtraFrag));
 	push(NEWLINE, `return `);
 	const returnNodes = returns.map((n) => `n${n}`);
 	const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
-	push(...customReturns ? customReturns(returnsCode) : returnsCode);
+	push(...returnsCode);
 	resetBlock();
 	return frag;
 	function genResolveAssets(kind, helper) {
@@ -1381,7 +1496,6 @@ var CodegenContext = class {
 	};
 	delegates = /* @__PURE__ */ new Set();
 	identifiers = Object.create(null);
-	seenInlineHandlerNames = Object.create(null);
 	block;
 	withId(fn, map) {
 		const { identifiers } = this;
@@ -2250,9 +2364,9 @@ function hasDynamicKeyVBind(node) {
 const delegatedEvents = /* @__PURE__ */ makeMap("beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart");
 const transformVOn = (dir, node, context) => {
 	const { name, loc, value } = dir;
-	if (name.type === "JSXNamespacedName") return;
+	if (!name) return;
 	const isComponent = isJSXComponent(node);
-	const [nameString, ...modifiers] = name.name.replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
+	const [nameString, ...modifiers] = context.ir.source.slice(name.start, name.end).replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
 	if (!value && !modifiers.length) context.options.onError(createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, resolveLocation(loc, context)));
 	let arg = resolveSimpleExpression(nameString, true, dir.name.loc);
 	const exp = resolveExpression(dir.value, context);
@@ -2450,13 +2564,10 @@ function createSlotBlock(slotNode, dir, context) {
 //#region src/transforms/vSlots.ts
 const transformVSlots = (dir, node, context) => {
 	if (!isJSXComponent(node)) return;
-	if (dir.value?.type === "JSXExpressionContainer") {
-		context.slots = [{
-			slotType: IRSlotType.EXPRESSION,
-			slots: resolveExpression(dir.value.expression, context)
-		}];
-		if (node.children.length) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, resolveLocation(node.children[0].loc, context)));
-	}
+	if (dir.value?.type === "JSXExpressionContainer") context.slots = [{
+		slotType: IRSlotType.EXPRESSION,
+		slots: resolveExpression(dir.value.expression, context)
+	}];
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-jsx-vapor/compiler",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Vue JSX Vapor Compiler",
   "type": "module",
   "keywords": [
@@ -36,8 +36,8 @@
   "dependencies": {
     "@babel/parser": "^7.28.0",
     "@babel/types": "^7.28.0",
-    "@vue/compiler-dom": "https://pkg.pr.new/@vue/compiler-dom@51677cd",
-    "@vue/shared": "https://pkg.pr.new/@vue/shared@51677cd",
+    "@vue/compiler-dom": "https://pkg.pr.new/@vue/compiler-dom@5771104",
+    "@vue/shared": "https://pkg.pr.new/@vue/shared@5771104",
     "ast-kit": "^2.1.1",
     "source-map-js": "^1.2.1"
   },