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

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

@@ -40,11 +40,13 @@ export function* generateComponent(
  const { args } = options.scriptRanges.exportDefault;
  yield generateSfcBlockSection(options.sfc.script, args.start + 1, args.end - 1, codeFeatures.all);
  }
- if (options.vueCompilerOptions.target >= 3.5 && scriptSetupRanges.templateRefs.length) {
- yield `__typeRefs: {} as __VLS_TemplateResult['refs'],${newLine}`;
- }
- if (options.vueCompilerOptions.target >= 3.5 && options.templateCodegen?.singleRootElType) {
- yield `__typeEl: {} as __VLS_TemplateResult['rootEl'],${newLine}`;
+ if (options.vueCompilerOptions.target >= 3.5) {
+ if (scriptSetupRanges.templateRefs.length) {
+ yield `__typeRefs: {} as __VLS_TemplateResult['refs'],${newLine}`;
+ }
+ if (options.templateCodegen?.singleRootElTypes.length) {
+ yield `__typeEl: {} as __VLS_TemplateResult['rootEl'],${newLine}`;
+ }
  }
  yield `})`;
 }

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

@@ -130,10 +130,10 @@ export function createTemplateCodegenContext(options: Pick<TemplateCodegenOption
  emptyClassOffsets,
  inlayHints,
  hasSlot: false,
- inheritedAttrVars: new Set(),
+ inheritedAttrVars: new Set<string>(),
  templateRefs,
- 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

@@ -224,7 +224,8 @@ export function* generateComponent(
  }
 
  const [refName, offset] = yield* generateVScope(options, ctx, node, props);
- const isRootNode = node === ctx.singleRootNode;
+ const tag = hyphenateTag(node.tag);
+ const isRootNode = ctx.singleRootNodes.has(node) && !options.vueCompilerOptions.fallthroughComponentTags.includes(tag);
 
  if (refName || isRootNode) {
  const varName = ctx.getInternalVariable();
@@ -243,7 +244,7 @@ export function* generateComponent(
  ctx.templateRefs.set(refName, [varName, offset!]);
  }
  if (isRootNode) {
- ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
+ ctx.singleRootElTypes.push(`NonNullable<typeof ${varName}>['$el']`);
  }
  }
 
@@ -258,7 +259,7 @@ export function* generateComponent(
  options.vueCompilerOptions.fallthroughAttributes
  && (
  node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
- || node === ctx.singleRootNode
+ || ctx.singleRootNodes.has(node)
  )
  ) {
  const varAttrs = ctx.getInternalVariable();
@@ -343,8 +344,8 @@ export function* generateElement(
  if (refName) {
  ctx.templateRefs.set(refName, [`__VLS_nativeElements['${node.tag}']`, offset!]);
  }
- if (ctx.singleRootNode === node) {
- ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;
+ if (ctx.singleRootNodes.has(node)) {
+ ctx.singleRootElTypes.push(`typeof __VLS_nativeElements['${node.tag}']`);
  }
 
  const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot') as CompilerDOM.DirectiveNode;
@@ -359,7 +360,7 @@ export function* generateElement(
  options.vueCompilerOptions.fallthroughAttributes
  && (
  node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.exp?.loc.source === '$attrs')
- || node === ctx.singleRootNode
+ || ctx.singleRootNodes.has(node)
  )
  ) {
  ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);

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

@@ -113,12 +113,17 @@ function* generateRefs(ctx: TemplateCodegenContext): Generator<Code> {
 }
 
 function* generateRootEl(ctx: TemplateCodegenContext): Generator<Code> {
- if (ctx.singleRootElType) {
- yield `var $el!: ${ctx.singleRootElType}${endOfLine}`;
+ yield `var $el!: `;
+ if (ctx.singleRootElTypes.length && !ctx.singleRootNodes.has(null)) {
+ yield newLine;
+ for (const type of ctx.singleRootElTypes) {
+ yield `| ${type}${newLine}`;
+ }
  }
  else {
- yield `var $el!: any${endOfLine}`;
+ yield `any`;
  }
+ yield endOfLine;
 }
 
 function* generatePreResolveComponents(options: TemplateCodegenOptions): Generator<Code> {

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

@@ -1,6 +1,7 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import { endOfLine, newLine } from '../common';
+import { hyphenateTag } from '../../utils/shared';
 import type { TemplateCodegenContext } from './context';
 import { generateComponent, generateElement } from './element';
 import type { TemplateCodegenOptions } from './index';
@@ -47,13 +48,11 @@ export function* generateTemplateChild(
  }
  }
 
- const shouldInheritRootNodeAttrs = options.inheritAttrs;
-
  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];
+ if (options.inheritAttrs) {
+ ctx.singleRootNodes = new Set(collectSingleRootNodes(options, node.children));
  }
+ let prev: CompilerDOM.TemplateChildNode | undefined;
  for (const childNode of node.children) {
  yield* generateTemplateChild(options, ctx, childNode, currentComponent, prev, componentCtxVar);
  prev = childNode;
@@ -124,6 +123,36 @@ export function* generateTemplateChild(
  }
 }
 
+function* collectSingleRootNodes(
+ options: TemplateCodegenOptions,
+ children: CompilerDOM.TemplateChildNode[]
+): Generator<CompilerDOM.ElementNode | null> {
+ if (children.length !== 1) {
+ // used to determine whether the component is 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.fallthroughComponentTags.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

@@ -31,6 +31,7 @@ export interface VueCompilerOptions {
  strictTemplates: boolean;
  skipTemplateCodegen: boolean;
  fallthroughAttributes: boolean;
+ fallthroughComponentTags: string[];
  dataAttributes: string[];
  htmlAttributes: string[];
  optionsWrapper: [string, string] | [];

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

@@ -4,6 +4,7 @@ import { posix as path } from 'path-browserify';
 import type { RawVueCompilerOptions, VueCompilerOptions, VueLanguagePlugin } from '../types';
 import { getAllExtensions } from '../languagePlugin';
 import { generateGlobalTypes } from '../codegen/globalTypes';
+import { hyphenateTag } from './shared';
 
 export type ParsedCommandLine = ts.ParsedCommandLine & {
  vueOptions: VueCompilerOptions;
@@ -234,6 +235,12 @@ export function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions
  strictTemplates: vueOptions.strictTemplates ?? false,
  skipTemplateCodegen: vueOptions.skipTemplateCodegen ?? false,
  fallthroughAttributes: vueOptions.fallthroughAttributes ?? false,
+ fallthroughComponentTags: (vueOptions.fallthroughComponentTags ?? [
+ 'Transition',
+ 'KeepAlive',
+ 'Teleport',
+ 'Suspense'
+ ]).map(tag => hyphenateTag(tag)),
  dataAttributes: vueOptions.dataAttributes ?? [],
  htmlAttributes: vueOptions.htmlAttributes ?? ['aria-*'],
  optionsWrapper: vueOptions.optionsWrapper ?? (

test-workspace/tsc/passedFixtures/fallthroughAttributes_strictTemplate/fallthroughComponentTag/basic.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Child from './child.vue';
+</script>
+
+<template>
+ <template v-if="true">
+ <Child />
+ </template>
+ <template v-else-if="true">
+ <transition>
+ <a></a>
+ </transition>
+ </template>
+ <template v-else>
+ <img />
+ </template>
+</template>

test-workspace/tsc/passedFixtures/fallthroughAttributes_strictTemplate/fallthroughComponentTag/child.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+ foo?: string;
+}>();
+</script>
+
+<template>
+ <div></div>
+</template>

test-workspace/tsc/passedFixtures/fallthroughAttributes_strictTemplate/fallthroughComponentTag/main.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import basic from './basic.vue';
+</script>
+
+<template>
+ <basic foo="1" mode="default" href="href" src="src" />
+</template>