fix(language-core): enhance getVIfNode to support v-else-if directives

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

@@ -1,8 +1,8 @@
-import type * as CompilerDOM from '@vue/compiler-dom';
+import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-import { generateTemplateChild } from './templateChild';
+import { generateTemplateChild, getVIfNode } from './templateChild';
 
 export function* generateElementChildren(
 	options: TemplateCodegenOptions,
@@ -11,8 +11,113 @@ export function* generateElementChildren(
 	enterNode = true,
 ): Generator<Code> {
 	yield* ctx.generateAutoImportCompletion();
-	for (const childNode of children) {
-		yield* generateTemplateChild(options, ctx, childNode, enterNode);
+	for (let i = 0; i < children.length; i++) {
+		const current = children[i]!;
+		const normalized = normalizeIfBranch(children, i);
+		if (normalized) {
+			i = normalized.end;
+			yield* generateTemplateChild(options, ctx, normalized.node, enterNode);
+			continue;
+		}
+		yield* generateTemplateChild(options, ctx, current, enterNode);
 	}
 	yield* ctx.generateAutoImportCompletion();
 }
+
+function normalizeIfBranch(
+	children: (CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode)[],
+	start: number,
+): { node: CompilerDOM.IfNode; end: number } | undefined {
+	const first = children[start]!;
+	if (!isTemplateChildNode(first)) {
+		return;
+	}
+	if (first.type === CompilerDOM.NodeTypes.IF) {
+		return { node: first, end: start };
+	}
+	if (first.type !== CompilerDOM.NodeTypes.ELEMENT) {
+		return;
+	}
+
+	const ifNode = getVIfNode(first);
+	if (!ifNode) {
+		return;
+	}
+
+	let end = start;
+	let comments: CompilerDOM.CommentNode[] = [];
+
+	for (let i = start + 1; i < children.length; i++) {
+		const sibling = children[i]!;
+		if (!isTemplateChildNode(sibling)) {
+			continue;
+		}
+		if (sibling.type === CompilerDOM.NodeTypes.COMMENT) {
+			comments.push(sibling);
+			continue;
+		}
+		if (sibling.type === CompilerDOM.NodeTypes.TEXT && !sibling.content.trim()) {
+			continue;
+		}
+		const elseBranch = getVElseDirective(sibling);
+		if (elseBranch) {
+			const branchNode: CompilerDOM.ElementNode = {
+				...elseBranch.element,
+				props: elseBranch.element.props.filter(prop => prop !== elseBranch.directive),
+			};
+
+			const branch = createIfBranch(branchNode, elseBranch.directive);
+			if (comments.length) {
+				branch.children = [...comments, ...branch.children];
+			}
+
+			ifNode.branches.push(branch);
+			comments = [];
+			end = i;
+			continue;
+		}
+		break;
+	}
+
+	// fallback if no additional branch
+	if (end === start) {
+		return;
+	}
+
+	return { node: ifNode, end };
+}
+
+function createIfBranch(node: CompilerDOM.ElementNode, dir: CompilerDOM.DirectiveNode): CompilerDOM.IfBranchNode {
+	const isTemplateIf = node.tagType === CompilerDOM.ElementTypes.TEMPLATE;
+	return {
+		type: CompilerDOM.NodeTypes.IF_BRANCH,
+		loc: node.loc,
+		condition: dir.name === 'else' ? undefined : dir.exp,
+		children: isTemplateIf && !CompilerDOM.findDir(node, 'for') ? node.children : [node],
+		userKey: CompilerDOM.findProp(node, 'key'),
+		isTemplateIf,
+	};
+}
+
+function getVElseDirective(node: CompilerDOM.TemplateChildNode) {
+	if (node.type !== CompilerDOM.NodeTypes.ELEMENT) {
+		return;
+	}
+	const directive = node.props.find(
+		(prop): prop is CompilerDOM.DirectiveNode =>
+			prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+			&& (prop.name === 'else-if' || prop.name === 'else'),
+	);
+	if (directive) {
+		return {
+			element: node,
+			directive,
+		};
+	}
+}
+
+function isTemplateChildNode(
+	node: CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode,
+): node is CompilerDOM.TemplateChildNode {
+	return node.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION;
+}

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

@@ -181,7 +181,7 @@ export function getVForNode(node: CompilerDOM.ElementNode) {
 	}
 }
 
-function getVIfNode(node: CompilerDOM.ElementNode) {
+export function getVIfNode(node: CompilerDOM.ElementNode) {
 	const ifDirective = node.props.find(
 		(prop): prop is CompilerDOM.DirectiveNode =>
 			prop.type === CompilerDOM.NodeTypes.DIRECTIVE

test-workspace/tsc/passedFixtures/vue3/#5492/main.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+const Comp = defineComponent({})
+const cond1: true | 'text' = Math.random() > 0.5 ? true : 'text'
+const cond2 = true
+</script>
+
+<template>
+    <Comp>
+        <template #default v-if="cond1">1</template>
+        <template #default v-else-if="cond2">2</template>
+
+        <div v-if="cond1 === true"></div>
+        <div v-else-if="cond1.length"></div>
+
+        <template #default v-if="cond1 === true">1</template>
+        <template #default v-else-if="cond1.length">2</template>
+    </Comp>
+</template>