fix: make directive transforms work

Author: KazariEX

packages/language-core/lib/codegen/script/template.ts

@@ -206,7 +206,7 @@ function* generateBindings(
 	}
 
 	const usageVars = new Set([
-		...options.templateCodegen?.components.flatMap(c => [camelize(c), capitalize(camelize(c))]) ?? [],
+		...options.sfc.template?.ast?.components.flatMap(c => [camelize(c), capitalize(camelize(c))]) ?? [],
 		...options.templateCodegen?.accessExternalVariables.keys() ?? [],
 		...templateCodegenCtx.accessExternalVariables.keys(),
 	]);

packages/language-core/lib/codegen/template/context.ts

@@ -211,7 +211,6 @@ export function createTemplateCodegenContext(
 		bindingAttrLocs,
 		inheritedAttrVars,
 		templateRefs,
-		components: [] as string[],
 		currentComponent: undefined as {
 			get ctxVar(): string;
 			get propsVar(): string;

packages/language-core/lib/codegen/template/element.ts

@@ -39,7 +39,6 @@ export function* generateComponent(
 
 	let isCtxVarUsed = false;
 	let isPropsVarUsed = false;
-	ctx.components.push(node.tag);
 	ctx.currentComponent = {
 		get ctxVar() {
 			isCtxVarUsed = true;

packages/language-core/lib/template/compile.ts

@@ -1,4 +1,5 @@
 import { type CompilerOptions, getBaseTransformPreset, parse, transform } from '@vue/compiler-dom';
+import { transformElement } from './transforms/transformElement';
 import { transformText } from './transforms/transformText';
 import { transformFor } from './transforms/vFor';
 import { transformIf } from './transforms/vIf';
@@ -12,6 +13,7 @@ export function compileTemplate(source: string, options: CompilerOptions) {
 			nodeTransforms[0]!, // transformVBindShorthand
 			transformIf,
 			transformFor,
+			transformElement,
 			transformText,
 			...options.nodeTransforms || [],
 		],

packages/language-core/lib/template/transforms/transformElement.ts

@@ -0,0 +1,56 @@
+import { createCompilerError, ElementTypes, ErrorCodes, type NodeTransform, NodeTypes } from '@vue/compiler-dom';
+import { isBuiltInDirective } from '@vue/shared';
+
+export const transformElement: NodeTransform = (node, context) => {
+	return () => {
+		if (node.type !== NodeTypes.ELEMENT || node.tagType === ElementTypes.TEMPLATE) {
+			return;
+		}
+
+		const isComponent = node.tagType === ElementTypes.COMPONENT;
+		const isSlotOutlet = node.tagType === ElementTypes.SLOT;
+
+		if (isComponent) {
+			context.components.add(node.tag);
+		}
+
+		for (const prop of node.props) {
+			if (prop.type !== NodeTypes.DIRECTIVE) {
+				continue;
+			}
+
+			if (prop.name === 'slot') {
+				if (!isComponent) {
+					context.onError(
+						createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc),
+					);
+				}
+				continue;
+			}
+
+			const isVBind = prop.name === 'bind';
+			const isVOn = prop.name === 'on';
+
+			if (!prop.arg && (isVBind || isVOn)) {
+				if (!prop.exp) {
+					context.onError(
+						createCompilerError(
+							isVBind
+								? ErrorCodes.X_V_BIND_NO_EXPRESSION
+								: ErrorCodes.X_V_ON_NO_EXPRESSION,
+							prop.loc,
+						),
+					);
+				}
+				continue;
+			}
+
+			const result = context.directiveTransforms[prop.name]?.(prop, node, context);
+			if (isSlotOutlet && (result?.needRuntime || !isBuiltInDirective(prop.name))) {
+				context.onError(
+					createCompilerError(ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET, prop.loc),
+				);
+			}
+		}
+	};
+};