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

Co-authored-by: Johnson Chu <[email protected]>

Author: serkodev

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,92 @@ export function* generateElementChildren(
 	enterNode = true,
 ): Generator<Code> {
 	const endScope = ctx.startScope();
-	for (const childNode of children) {
-		yield* generateTemplateChild(options, ctx, childNode, enterNode);
+	for (let i = 0; i < children.length; i++) {
+		let current = children[i];
+		[current, i] = normalizeIfBranch(children, i);
+		yield* generateTemplateChild(options, ctx, current, enterNode);
 	}
 	yield* endScope();
 }
+
+function normalizeIfBranch(
+	children: (CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode)[],
+	start: number,
+): [node: typeof children[number], end: number] {
+	const first = children[start]!;
+	if (first.type !== CompilerDOM.NodeTypes.ELEMENT) {
+		return [first, start];
+	}
+
+	const ifNode = getVIfNode(first);
+	if (!ifNode) {
+		return [first, start];
+	}
+
+	let end = start;
+	let comments: CompilerDOM.CommentNode[] = [];
+
+	for (let i = start + 1; i < children.length; i++) {
+		const sibling = children[i]!;
+		if (sibling.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+			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;
+	}
+
+	return [ifNode, end];
+}
+
+// source: https://github.com/vuejs/core/blob/25ebe3a42cd80ac0256355c2740a0258cdd7419d/packages/compiler-core/src/transforms/vIf.ts#L207
+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,
+		};
+	}
+}

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

@@ -52,13 +52,9 @@ export function* generateTemplateChild(
 	}
 	else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
 		const vForNode = getVForNode(node);
-		const vIfNode = getVIfNode(node);
 		if (vForNode) {
 			yield* generateVFor(options, ctx, vForNode);
 		}
-		else if (vIfNode) {
-			yield* generateVIf(options, ctx, vIfNode);
-		}
 		else if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
 			yield* generateSlotOutlet(options, ctx, node);
 		}
@@ -181,7 +177,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>