feat(language-core): enhance single root nodes collection (vuejs#4819)

Author: KazariEX

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

@@ -47,7 +47,7 @@ export function* generateComponent(
 	if (
 		options.vueCompilerOptions.target >= 3.5
 		&& options.vueCompilerOptions.inferComponentDollarEl
-		&& options.templateCodegen?.singleRootElType
+		&& options.templateCodegen?.singleRootElTypes.length
 	) {
 		yield `__typeEl: {} as __VLS_RootEl,${newLine}`;
 	}

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

@@ -97,8 +97,8 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
 			ctxVar: string;
 			used: boolean;
 		} | undefined,
-		singleRootElType: undefined as string | undefined,
-		singleRootNode: undefined as CompilerDOM.ElementNode | undefined,
+		singleRootElTypes: [] as string[],
+		singleRootNodes: new Set<CompilerDOM.ElementNode | null>(),
 		accessExternalVariable(name: string, offset?: number) {
 			let arr = accessExternalVariables.get(name);
 			if (!arr) {

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

@@ -257,7 +257,8 @@ export function* generateComponent(
 	yield* generateElementDirectives(options, ctx, node);
 
 	const [refName, offset] = yield* generateElementReference(options, ctx, node);
-	const isRootNode = node === ctx.singleRootNode;
+	const tag = hyphenateTag(node.tag);
+	const isRootNode = ctx.singleRootNodes.has(node) && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
 
 	if (refName || isRootNode) {
 		const componentInstanceVar = ctx.getInternalVariable();
@@ -276,14 +277,14 @@ export function* generateComponent(
 			});
 		}
 		if (isRootNode) {
-			ctx.singleRootElType = `NonNullable<typeof ${componentInstanceVar}>['$el']`;
+			ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
 		}
 	}
 
 	if (hasVBindAttrs(options, ctx, node)) {
 		const attrsVar = ctx.getInternalVariable();
-		ctx.inheritedAttrVars.add(attrsVar);
 		yield `let ${attrsVar}!: Parameters<typeof ${componentFunctionalVar}>[0]${endOfLine}`;
+		ctx.inheritedAttrVars.add(attrsVar);
 	}
 
 	collectStyleScopedClassReferences(options, ctx, node);
@@ -366,8 +367,8 @@ export function* generateElement(
 			offset
 		});
 	}
-	if (ctx.singleRootNode === node) {
-		ctx.singleRootElType = `__VLS_NativeElements['${node.tag}']`;
+	if (ctx.singleRootNodes.has(node)) {
+		ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);
 	}
 
 	if (hasVBindAttrs(options, ctx, node)) {
@@ -496,7 +497,7 @@ function hasVBindAttrs(
 	node: CompilerDOM.ElementNode
 ) {
 	return options.vueCompilerOptions.fallthroughAttributes && (
-		node === ctx.singleRootNode ||
+		(options.inheritAttrs && ctx.singleRootNodes.has(node)) ||
 		node.props.some(prop =>
 			prop.type === CompilerDOM.NodeTypes.DIRECTIVE
 			&& prop.name === 'bind'

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

@@ -160,7 +160,14 @@ function* generateRootEl(
 	ctx: TemplateCodegenContext
 ): Generator<Code> {
 	yield `type __VLS_RootEl = `;
-	yield ctx.singleRootElType ?? `any`;
+	if (ctx.singleRootElTypes.length && !ctx.singleRootNodes.has(null)) {
+		for (const type of ctx.singleRootElTypes) {
+			yield `${newLine}| ${type}`;
+		}
+	}
+	else {
+		yield `any`;
+	}
 	yield endOfLine;
 	return `__VLS_RootEl`;
 }

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

@@ -1,5 +1,6 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
+import { hyphenateTag } from '../../utils/shared';
 import { endOfLine, newLine } from '../utils';
 import type { TemplateCodegenContext } from './context';
 import { generateComponent, generateElement } from './element';
@@ -66,18 +67,16 @@ export function* generateTemplateChild(
 		}
 	}
 
-	const shouldInheritRootNodeAttrs = options.inheritAttrs;
-
 	const cur = node as CompilerDOM.ElementNode | CompilerDOM.IfNode | CompilerDOM.ForNode;
 	if (cur.codegenNode?.type === CompilerDOM.NodeTypes.JS_CACHE_EXPRESSION) {
 		cur.codegenNode = cur.codegenNode.value as any;
 	}
 
 	if (node.type === CompilerDOM.NodeTypes.ROOT) {
-		let prev: CompilerDOM.TemplateChildNode | undefined;
-		if (shouldInheritRootNodeAttrs && node.children.length === 1 && node.children[0].type === CompilerDOM.NodeTypes.ELEMENT) {
-			ctx.singleRootNode = node.children[0];
+		for (const item of collectSingleRootNodes(options, node.children)) {
+			ctx.singleRootNodes.add(item);
 		}
+		let prev: CompilerDOM.TemplateChildNode | undefined;
 		for (const childNode of node.children) {
 			yield* generateTemplateChild(options, ctx, childNode, prev);
 			prev = childNode;
@@ -159,6 +158,36 @@ export function* generateTemplateChild(
 	}
 }
 
+function* collectSingleRootNodes(
+	options: TemplateCodegenOptions,
+	children: CompilerDOM.TemplateChildNode[]
+): Generator<CompilerDOM.ElementNode | null> {
+	if (children.length !== 1) {
+		// "null" is used to determine whether the component is not always has a single root
+		if (children.length > 1) {
+			yield null;
+		}
+		return;
+	}
+
+	const child = children[0];
+	if (child.type === CompilerDOM.NodeTypes.IF) {
+		for (const branch of child.branches) {
+			yield* collectSingleRootNodes(options, branch.children);
+		}
+		return;
+	}
+	else if (child.type !== CompilerDOM.NodeTypes.ELEMENT) {
+		return;
+	}
+	yield child;
+
+	const tag = hyphenateTag(child.tag);
+	if (options.vueCompilerOptions.fallthroughComponentNames.includes(tag)) {
+		yield* collectSingleRootNodes(options, child.children);
+	}
+}
+
 // TODO: track https://github.com/vuejs/vue-next/issues/3498
 export function getVForNode(node: CompilerDOM.ElementNode) {
 	const forDirective = node.props.find(

packages/language-core/lib/types.ts

@@ -40,6 +40,7 @@ export interface VueCompilerOptions {
 	inferTemplateDollarSlots: boolean;
 	skipTemplateCodegen: boolean;
 	fallthroughAttributes: boolean;
+	fallthroughComponentNames: string[];
 	dataAttributes: string[];
 	htmlAttributes: string[];
 	optionsWrapper: [string, string] | [];

packages/language-core/lib/utils/ts.ts

@@ -4,6 +4,7 @@ import type * as ts from 'typescript';
 import { generateGlobalTypes, getGlobalTypesFileName } from '../codegen/globalTypes';
 import { getAllExtensions } from '../languagePlugin';
 import type { RawVueCompilerOptions, VueCompilerOptions, VueLanguagePlugin } from '../types';
+import { hyphenateTag } from './shared';
 
 export type ParsedCommandLine = ts.ParsedCommandLine & {
 	vueOptions: VueCompilerOptions;
@@ -219,6 +220,10 @@ export class CompilerOptionsResolver {
 				...defaults.composables,
 				...this.options.composables,
 			},
+			fallthroughComponentNames: [
+				...defaults.fallthroughComponentNames,
+				...this.options.fallthroughComponentNames ?? []
+			].map(hyphenateTag),
 			// https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L49-L51
 			// https://vuejs.org/guide/essentials/forms.html#form-input-bindings
 			experimentalModelPropName: Object.fromEntries(Object.entries(
@@ -274,6 +279,12 @@ export function getDefaultCompilerOptions(target = 99, lib = 'vue', strictTempla
 		inferTemplateDollarSlots: false,
 		skipTemplateCodegen: false,
 		fallthroughAttributes: false,
+		fallthroughComponentNames: [
+			'Transition',
+			'KeepAlive',
+			'Teleport',
+			'Suspense',
+		],
 		dataAttributes: [],
 		htmlAttributes: ['aria-*'],
 		optionsWrapper: target >= 2.7

packages/language-core/schemas/vue-tsconfig.schema.json

@@ -105,6 +105,16 @@
 					"default": false,
 					"markdownDescription": "Enable to support typed fallthrough attributes. Please note that enabling may significantly slow down type checking."
 				},
+				"fallthroughComponentNames": {
+					"type": "array",
+					"default": [
+						"Transition",
+						"KeepAlive",
+						"Teleport",
+						"Suspense"
+					],
+					"markdownDescription": "Component names that will be transparent when collecting single root child nodes and fallthrough attributes."
+				},
 				"dataAttributes": {
 					"type": "array",
 					"default": [ ],

test-workspace/tsc/passedFixtures/vue3/rootEl/child.vue

@@ -7,7 +7,10 @@ import Base from './base.vue';
 </script>
 
 <template>
-	<Base>
-		{{ exactType($el, {} as HTMLAnchorElement) }}
+	<Base v-if="true">
+		{{ exactType($el, {} as HTMLAnchorElement | HTMLImageElement) }}
 	</Base>
+	<Transition v-else>
+		<img />
+	</Transition>
 </template>

test-workspace/tsc/passedFixtures/vue3/rootEl/main.vue

@@ -7,6 +7,6 @@ import Child from './child.vue';
 
 <template>
 	<Child>
-		{{ exactType($el, {} as HTMLAnchorElement) }}
+		{{ exactType($el, {} as HTMLAnchorElement | HTMLImageElement) }}
 	</Child>
 </template>