@vue/language-core 2.2.2 → 2.2.4

package/lib/codegen/template/context.d.ts

@@ -3,6 +3,103 @@ import type { Code, VueCodeInformation } from '../../types';
 import { InlayHintInfo } from '../inlayHints';
 import type { TemplateCodegenOptions } from './index';
 export type TemplateCodegenContext = ReturnType<typeof createTemplateCodegenContext>;
+/**
+ * Creates and returns a Context object used for generating type-checkable TS code
+ * from the template section of a .vue file.
+ *
+ * ## Implementation Notes for supporting `@vue-ignore`, `@vue-expect-error`, and `@vue-skip` directives.
+ *
+ * Vue language tooling supports a number of directives for suppressing diagnostics within
+ * Vue templates (https://github.com/vuejs/language-tools/pull/3215)
+ *
+ * Here is an overview for how support for how @vue-expect-error is implemented within this file
+ * (@vue-expect-error is the most complicated directive to support due to its behavior of raising
+ * a diagnostic when it is annotating a piece of code that doesn't actually have any errors/warning/diagnostics).
+ *
+ * Given .vue code:
+ *
+ * ```vue
+ *   <script setup lang="ts">
+ *   defineProps<{
+ *     knownProp1: string;
+ *     knownProp2: string;
+ *     knownProp3: string;
+ *     knownProp4_will_trigger_unused_expect_error: string;
+ *   }>();
+ *   </script>
+ *
+ *   <template>
+ *     {{ knownProp1 }}
+ *     {{ error_unknownProp }} <!-- ERROR: Property 'error_unknownProp' does not exist on type [...] -->
+ *     {{ knownProp2 }}
+ *     <!-- @vue-expect-error This suppresses an Unknown Property Error -->
+ *     {{ suppressed_error_unknownProp }}
+ *     {{ knownProp3 }}
+ *     <!-- @vue-expect-error This will trigger Unused '@ts-expect-error' directive.ts(2578) -->
+ *     {{ knownProp4_will_trigger_unused_expect_error }}
+ *   </template>
+ * ```
+ *
+ * The above code should raise two diagnostics:
+ *
+ * 1. Property 'error_unknownProp' does not exist on type [...]
+ * 2. Unused '@ts-expect-error' directive.ts(2578) -- this is the bottom `@vue-expect-error` directive
+ *    that covers code that doesn't actually raise an error -- note that all `@vue-...` directives
+ *    will ultimately translate into `@ts-...` diagnostics.
+ *
+ * The above code will produce the following type-checkable TS code (note: omitting asterisks
+ * to prevent VSCode syntax double-greying out double-commented code).
+ *
+ * ```ts
+ *   ( __VLS_ctx.knownProp1 );
+ *   ( __VLS_ctx.error_unknownProp ); // ERROR: Property 'error_unknownProp' does not exist on type [...]
+ *   ( __VLS_ctx.knownProp2 );
+ *   // @vue-expect-error start
+ *   ( __VLS_ctx.suppressed_error_unknownProp );
+ *   // @ts-expect-error __VLS_TS_EXPECT_ERROR
+ *   ;
+ *   // @vue-expect-error end of INTERPOLATION
+ *   ( __VLS_ctx.knownProp3 );
+ *   // @vue-expect-error start
+ *   ( __VLS_ctx.knownProp4_will_trigger_unused_expect_error );
+ *   // @ts-expect-error __VLS_TS_EXPECT_ERROR
+ *   ;
+ *   // @vue-expect-error end of INTERPOLATION
+ * ```
+ *
+ * In the generated code, there are actually 3 diagnostic errors that'll be raised in the first
+ * pass on this generated code (but through cleverness described below, not all of them will be
+ * propagated back to the original .vue file):
+ *
+ * 1. Property 'error_unknownProp' does not exist on type [...]
+ * 2. Unused '@ts-expect-error' directive.ts(2578) from the 1st `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ * 3. Unused '@ts-expect-error' directive.ts(2578) from the 2nd `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ *
+ * Be sure to pay careful attention to the mixture of `@vue-expect-error` and `@ts-expect-error`;
+ * Within the TS file, the only "real" directives recognized by TS are going to be prefixed with `@ts-`;
+ * any `@vue-` prefixed directives in the comments are only for debugging purposes.
+ *
+ * As mentioned above, there are 3 diagnostics errors that'll be generated for the above code, but
+ * only 2 should be propagated back to the original .vue file.
+ *
+ * (The reason we structure things this way is somewhat complicated, but in short it allows us
+ * to lean on TS as much as possible to generate actual `unused @ts-expect-error directive` errors
+ * while covering a number of edge cases.)
+ *
+ * So, we need a way to dynamically decide whether each of the `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ * directives should be reported as an unused directive or not.
+ *
+ * To do this, we'll make use of the `shouldReport` callback that'll optionally be provided to the
+ * `verification` property of the `CodeInformation` object attached to the mapping between source .vue
+ * and generated .ts code. The `verification` property determines whether "verification" (which includes
+ * semantic diagnostics) should be performed on the generated .ts code, and `shouldReport`, if provided,
+ * can be used to determine whether a given diagnostic should be reported back "upwards" to the original
+ * .vue file or not.
+ *
+ * See the comments in the code below for how and where we use this hook to keep track of whether
+ * an error/diagnostic was encountered for a region of code covered by a `@vue-expect-error` directive,
+ * and additionally how we use that to determine whether to propagate diagnostics back upward.
+ */
 export declare function createTemplateCodegenContext(options: Pick<TemplateCodegenOptions, 'scriptSetupBindingNames' | 'edited'>): {
     codeFeatures: {
         all: VueCodeInformation;
@@ -34,7 +131,7 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
         expVar: string;
         propsVar: string;
     }[];
-    specialVars: Set<string>;
+    dollarVars: Set<string>;
     accessExternalVariables: Map<string, Set<number>>;
     lastGenericComment: {
         content: string;
@@ -48,21 +145,25 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
     }[];
     emptyClassOffsets: number[];
     inlayHints: InlayHintInfo[];
-    hasSlot: boolean;
     bindingAttrLocs: CompilerDOM.SourceLocation[];
     inheritedAttrVars: Set<string>;
-    templateRefs: Map<string, [varName: string, offset: number]>;
+    templateRefs: Map<string, {
+        typeExp: string;
+        offset: number;
+    }>;
     currentComponent: {
         ctxVar: string;
         used: boolean;
     } | undefined;
-    singleRootElType: string | undefined;
-    singleRootNode: CompilerDOM.ElementNode | undefined;
+    singleRootElTypes: string[];
+    singleRootNodes: Set<CompilerDOM.ElementNode | null>;
     accessExternalVariable(name: string, offset?: number): void;
     hasLocalVariable: (name: string) => boolean;
     addLocalVariable: (name: string) => void;
     removeLocalVariable: (name: string) => void;
     getInternalVariable: () => string;
+    getHoistVariable: (originalVar: string) => string;
+    generateHoistVariables: () => Generator<string, void, unknown>;
     ignoreError: () => Generator<Code>;
     expectError: (prevNode: CompilerDOM.CommentNode) => Generator<Code>;
     resetDirectiveComments: (endStr: string) => Generator<Code>;

package/lib/codegen/template/context.js

@@ -3,6 +3,103 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTemplateCodegenContext = createTemplateCodegenContext;
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+/**
+ * Creates and returns a Context object used for generating type-checkable TS code
+ * from the template section of a .vue file.
+ *
+ * ## Implementation Notes for supporting `@vue-ignore`, `@vue-expect-error`, and `@vue-skip` directives.
+ *
+ * Vue language tooling supports a number of directives for suppressing diagnostics within
+ * Vue templates (https://github.com/vuejs/language-tools/pull/3215)
+ *
+ * Here is an overview for how support for how @vue-expect-error is implemented within this file
+ * (@vue-expect-error is the most complicated directive to support due to its behavior of raising
+ * a diagnostic when it is annotating a piece of code that doesn't actually have any errors/warning/diagnostics).
+ *
+ * Given .vue code:
+ *
+ * ```vue
+ *   <script setup lang="ts">
+ *   defineProps<{
+ *     knownProp1: string;
+ *     knownProp2: string;
+ *     knownProp3: string;
+ *     knownProp4_will_trigger_unused_expect_error: string;
+ *   }>();
+ *   </script>
+ *
+ *   <template>
+ *     {{ knownProp1 }}
+ *     {{ error_unknownProp }} <!-- ERROR: Property 'error_unknownProp' does not exist on type [...] -->
+ *     {{ knownProp2 }}
+ *     <!-- @vue-expect-error This suppresses an Unknown Property Error -->
+ *     {{ suppressed_error_unknownProp }}
+ *     {{ knownProp3 }}
+ *     <!-- @vue-expect-error This will trigger Unused '@ts-expect-error' directive.ts(2578) -->
+ *     {{ knownProp4_will_trigger_unused_expect_error }}
+ *   </template>
+ * ```
+ *
+ * The above code should raise two diagnostics:
+ *
+ * 1. Property 'error_unknownProp' does not exist on type [...]
+ * 2. Unused '@ts-expect-error' directive.ts(2578) -- this is the bottom `@vue-expect-error` directive
+ *    that covers code that doesn't actually raise an error -- note that all `@vue-...` directives
+ *    will ultimately translate into `@ts-...` diagnostics.
+ *
+ * The above code will produce the following type-checkable TS code (note: omitting asterisks
+ * to prevent VSCode syntax double-greying out double-commented code).
+ *
+ * ```ts
+ *   ( __VLS_ctx.knownProp1 );
+ *   ( __VLS_ctx.error_unknownProp ); // ERROR: Property 'error_unknownProp' does not exist on type [...]
+ *   ( __VLS_ctx.knownProp2 );
+ *   // @vue-expect-error start
+ *   ( __VLS_ctx.suppressed_error_unknownProp );
+ *   // @ts-expect-error __VLS_TS_EXPECT_ERROR
+ *   ;
+ *   // @vue-expect-error end of INTERPOLATION
+ *   ( __VLS_ctx.knownProp3 );
+ *   // @vue-expect-error start
+ *   ( __VLS_ctx.knownProp4_will_trigger_unused_expect_error );
+ *   // @ts-expect-error __VLS_TS_EXPECT_ERROR
+ *   ;
+ *   // @vue-expect-error end of INTERPOLATION
+ * ```
+ *
+ * In the generated code, there are actually 3 diagnostic errors that'll be raised in the first
+ * pass on this generated code (but through cleverness described below, not all of them will be
+ * propagated back to the original .vue file):
+ *
+ * 1. Property 'error_unknownProp' does not exist on type [...]
+ * 2. Unused '@ts-expect-error' directive.ts(2578) from the 1st `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ * 3. Unused '@ts-expect-error' directive.ts(2578) from the 2nd `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ *
+ * Be sure to pay careful attention to the mixture of `@vue-expect-error` and `@ts-expect-error`;
+ * Within the TS file, the only "real" directives recognized by TS are going to be prefixed with `@ts-`;
+ * any `@vue-` prefixed directives in the comments are only for debugging purposes.
+ *
+ * As mentioned above, there are 3 diagnostics errors that'll be generated for the above code, but
+ * only 2 should be propagated back to the original .vue file.
+ *
+ * (The reason we structure things this way is somewhat complicated, but in short it allows us
+ * to lean on TS as much as possible to generate actual `unused @ts-expect-error directive` errors
+ * while covering a number of edge cases.)
+ *
+ * So, we need a way to dynamically decide whether each of the `@ts-expect-error __VLS_TS_EXPECT_ERROR`
+ * directives should be reported as an unused directive or not.
+ *
+ * To do this, we'll make use of the `shouldReport` callback that'll optionally be provided to the
+ * `verification` property of the `CodeInformation` object attached to the mapping between source .vue
+ * and generated .ts code. The `verification` property determines whether "verification" (which includes
+ * semantic diagnostics) should be performed on the generated .ts code, and `shouldReport`, if provided,
+ * can be used to determine whether a given diagnostic should be reported back "upwards" to the original
+ * .vue file or not.
+ *
+ * See the comments in the code below for how and where we use this hook to keep track of whether
+ * an error/diagnostic was encountered for a region of code covered by a `@vue-expect-error` directive,
+ * and additionally how we use that to determine whether to propagate diagnostics back upward.
+ */
 function createTemplateCodegenContext(options) {
     let ignoredError = false;
     let expectErrorToken;
@@ -11,12 +108,18 @@ function createTemplateCodegenContext(options) {
     function resolveCodeFeatures(features) {
         if (features.verification) {
             if (ignoredError) {
+                // We are currently in a region of code covered by a @vue-ignore directive, so don't
+                // even bother performing any type-checking: set verification to false.
                 return {
                     ...features,
                     verification: false,
                 };
             }
             if (expectErrorToken) {
+                // We are currently in a region of code covered by a @vue-expect-error directive. We need to
+                // keep track of the number of errors encountered within this region so that we can know whether
+                // we will need to propagate an "unused ts-expect-error" diagnostic back to the original
+                // .vue file or not.
                 const token = expectErrorToken;
                 return {
                     ...features,
@@ -31,8 +134,9 @@ function createTemplateCodegenContext(options) {
         }
         return features;
     }
+    const hoistVars = new Map();
     const localVars = new Map();
-    const specialVars = new Set();
+    const dollarVars = new Set();
     const accessExternalVariables = new Map();
     const slots = [];
     const dynamicSlots = [];
@@ -53,20 +157,19 @@ function createTemplateCodegenContext(options) {
         resolveCodeFeatures,
         slots,
         dynamicSlots,
-        specialVars,
+        dollarVars,
         accessExternalVariables,
         lastGenericComment,
         blockConditions,
         scopedClasses,
         emptyClassOffsets,
         inlayHints,
-        hasSlot: false,
         bindingAttrLocs,
         inheritedAttrVars,
         templateRefs,
         currentComponent: undefined,
-        singleRootElType: undefined,
-        singleRootNode: undefined,
+        singleRootElTypes: [],
+        singleRootNodes: new Set(),
         accessExternalVariable(name, offset) {
             let arr = accessExternalVariables.get(name);
             if (!arr) {
@@ -88,6 +191,24 @@ function createTemplateCodegenContext(options) {
         getInternalVariable: () => {
             return `__VLS_${variableId++}`;
         },
+        getHoistVariable: (originalVar) => {
+            let name = hoistVars.get(originalVar);
+            if (name === undefined) {
+                hoistVars.set(originalVar, name = `__VLS_${variableId++}`);
+            }
+            return name;
+        },
+        generateHoistVariables: function* () {
+            // trick to avoid TS 4081 (#5186)
+            if (hoistVars.size) {
+                yield `// @ts-ignore${utils_1.newLine}`;
+                yield `var `;
+                for (const [originalVar, hoistVar] of hoistVars) {
+                    yield `${hoistVar} = ${originalVar}, `;
+                }
+                yield utils_1.endOfLine;
+            }
+        },
         ignoreError: function* () {
             if (!ignoredError) {
                 ignoredError = true;
@@ -108,6 +229,9 @@ function createTemplateCodegenContext(options) {
                 const token = expectErrorToken;
                 yield* (0, utils_1.wrapWith)(expectErrorToken.node.loc.start.offset, expectErrorToken.node.loc.end.offset, {
                     verification: {
+                        // If no errors/warnings/diagnostics were reported within the region of code covered
+                        // by the @vue-expect-error directive, then we should allow any `unused @ts-expect-error`
+                        // diagnostics to be reported upward.
                         shouldReport: () => token.errors === 0,
                     },
                 }, `// @ts-expect-error __VLS_TS_EXPECT_ERROR`);

package/lib/codegen/template/element.d.ts

@@ -2,5 +2,5 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, isVForChild: boolean): Generator<Code>;
 export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, isVForChild: boolean): Generator<Code>;

package/lib/codegen/template/element.js

@@ -17,7 +17,7 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const vSlot_1 = require("./vSlot");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node) {
+function* generateComponent(options, ctx, node, isVForChild) {
     const tagOffsets = [node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag)];
     if (!node.isSelfClosing && options.template.lang === 'html') {
         const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
@@ -28,15 +28,13 @@ function* generateComponent(options, ctx, node) {
     const failedPropExps = [];
     const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
     const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
-    const var_originalComponent = matchImportName ?? ctx.getInternalVariable();
-    const var_functionalComponent = ctx.getInternalVariable();
-    const var_componentInstance = ctx.getInternalVariable();
-    const var_componentEmit = ctx.getInternalVariable();
-    const var_componentEvents = ctx.getInternalVariable();
-    const var_defineComponentCtx = ctx.getInternalVariable();
+    const componentOriginalVar = matchImportName ?? ctx.getInternalVariable();
+    const componentFunctionalVar = ctx.getInternalVariable();
+    const componentVNodeVar = ctx.getInternalVariable();
+    const componentCtxVar = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
     ctx.currentComponent = {
-        ctxVar: var_defineComponentCtx,
+        ctxVar: componentCtxVar,
         used: false
     };
     let props = node.props;
@@ -69,14 +67,13 @@ function* generateComponent(options, ctx, node) {
         };
     }
     if (matchImportName) {
-        // hover, renaming / find references support
-        yield `// @ts-ignore${utils_1.newLine}`; // #2304
-        yield `/** @type { [`;
+        // navigation support
+        yield `/** @type {[`;
         for (const tagOffset of tagOffsets) {
             yield `typeof `;
-            if (var_originalComponent === node.tag) {
+            if (componentOriginalVar === node.tag) {
                 yield [
-                    var_originalComponent,
+                    componentOriginalVar,
                     'template',
                     tagOffset,
                     ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -94,19 +91,19 @@ function* generateComponent(options, ctx, node) {
             }
             yield `, `;
         }
-        yield `] } */${utils_1.endOfLine}`;
+        yield `]} */${utils_1.endOfLine}`;
     }
     else if (dynamicTagInfo) {
-        yield `const ${var_originalComponent} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], dynamicTagInfo.astHolder, '(', ')');
+        yield `const ${componentOriginalVar} = (`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], dynamicTagInfo.astHolder, `(`, `)`);
         if (dynamicTagInfo.offsets[1] !== undefined) {
             yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, `(`, `)`);
         }
         yield `)${utils_1.endOfLine}`;
     }
     else if (!isComponentTag) {
-        yield `const ${var_originalComponent} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
+        yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
         if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
             yield `typeof __VLS_self & (new () => { `
                 + (0, shared_2.getSlotsPropertyName)(options.vueCompilerOptions.target)
@@ -123,8 +120,8 @@ function* generateComponent(options, ctx, node) {
         yield `${utils_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
         if (utils_1.variableNameRegex.test(camelizedTag)) {
-            // renaming / find references support
-            yield `/** @type { [`;
+            // navigation support
+            yield `/** @type {[`;
             for (const tagOffset of tagOffsets) {
                 for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
                     const expectName = shouldCapitalize ? (0, shared_1.capitalize)(camelizedTag) : camelizedTag;
@@ -138,7 +135,7 @@ function* generateComponent(options, ctx, node) {
                     yield `, `;
                 }
             }
-            yield `] } */${utils_1.endOfLine}`;
+            yield `]} */${utils_1.endOfLine}`;
             // auto import support
             if (options.edited) {
                 yield `// @ts-ignore${utils_1.newLine}`; // #2304
@@ -153,65 +150,67 @@ function* generateComponent(options, ctx, node) {
         }
     }
     else {
-        yield `const ${var_originalComponent} = {} as any${utils_1.endOfLine}`;
+        yield `const ${componentOriginalVar} = {} as any${utils_1.endOfLine}`;
     }
     yield `// @ts-ignore${utils_1.newLine}`;
-    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({${utils_1.newLine}`;
+    yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
     yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, false);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
     yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.resolveCodeFeatures({
         verification: {
             shouldReport(_source, code) {
+                // https://typescript.tv/errors/#ts6133
                 return String(code) !== '6133';
             },
         }
-    }), var_componentInstance);
-    yield ` = ${var_functionalComponent}`;
+    }), componentVNodeVar);
+    yield ` = ${componentFunctionalVar}`;
     yield* generateComponentGeneric(ctx);
     yield `(`;
     yield* (0, utils_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
-    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${utils_1.endOfLine}`;
+    yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    const [refName, offset] = yield* generateVScope(options, ctx, node, props);
-    const isRootNode = node === ctx.singleRootNode;
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
+    const [refName, offset] = yield* generateElementReference(options, ctx, node);
+    const tag = (0, shared_2.hyphenateTag)(node.tag);
+    const isRootNode = ctx.singleRootNodes.has(node) && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
     if (refName || isRootNode) {
-        const varName = ctx.getInternalVariable();
+        const componentInstanceVar = ctx.getInternalVariable();
         ctx.currentComponent.used = true;
-        yield `var ${varName} = {} as (Parameters<NonNullable<typeof ${var_defineComponentCtx}['expose']>>[0] | null)`;
-        if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
-            && node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
-            && node.codegenNode.props.properties.some(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')) {
+        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
+        if (isVForChild) {
             yield `[]`;
         }
         yield `${utils_1.endOfLine}`;
-        if (refName) {
-            ctx.templateRefs.set(refName, [varName, offset]);
+        if (refName && offset) {
+            ctx.templateRefs.set(refName, {
+                typeExp: `typeof ${ctx.getHoistVariable(componentInstanceVar)}`,
+                offset
+            });
         }
         if (isRootNode) {
-            ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
+            ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
         }
     }
-    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents);
-    if (usedComponentEventsVar) {
-        ctx.currentComponent.used = true;
-        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${utils_1.endOfLine}`;
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${utils_1.endOfLine}`;
-    }
     if (hasVBindAttrs(options, ctx, node)) {
         const attrsVar = ctx.getInternalVariable();
+        yield `let ${attrsVar}!: Parameters<typeof ${componentFunctionalVar}>[0]${utils_1.endOfLine}`;
         ctx.inheritedAttrVars.add(attrsVar);
-        yield `let ${attrsVar}!: Parameters<typeof ${var_functionalComponent}>[0];\n`;
     }
+    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir) {
         yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, true);
+        // #932: reference for default slot
+        yield* (0, vSlot_1.generateImplicitDefaultSlot)(ctx, node);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
     if (ctx.currentComponent.used) {
-        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${utils_1.endOfLine}`;
+        yield `var ${componentCtxVar}!: __VLS_PickFunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
 }
 function* generateElement(options, ctx, node, isVForChild) {
@@ -230,20 +229,25 @@ function* generateElement(options, ctx, node, isVForChild) {
     yield* (0, utils_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
     yield `)${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
-    if (refName) {
-        let refValue = `__VLS_nativeElements['${node.tag}']`;
+    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
+    const [refName, offset] = yield* generateElementReference(options, ctx, node);
+    if (refName && offset) {
+        let typeExp = `__VLS_NativeElements['${node.tag}']`;
         if (isVForChild) {
-            refValue = `[${refValue}]`;
+            typeExp += `[]`;
         }
-        ctx.templateRefs.set(refName, [refValue, offset]);
+        ctx.templateRefs.set(refName, {
+            typeExp,
+            offset
+        });
     }
-    if (ctx.singleRootNode === node) {
-        ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;
+    if (ctx.singleRootNodes.has(node)) {
+        ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);
     }
     if (hasVBindAttrs(options, ctx, node)) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
     }
+    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
 }
 function* generateFailedPropExps(options, ctx, failedPropExps) {
@@ -252,34 +256,6 @@ function* generateFailedPropExps(options, ctx, failedPropExps) {
         yield utils_1.endOfLine;
     }
 }
-function* generateVScope(options, ctx, node, props) {
-    const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
-    let inScope = false;
-    let originalConditionsNum = ctx.blockConditions.length;
-    if (vScope?.type === CompilerDOM.NodeTypes.DIRECTIVE && vScope.exp) {
-        const scopeVar = ctx.getInternalVariable();
-        const condition = `__VLS_withScope(__VLS_ctx, ${scopeVar})`;
-        yield `const ${scopeVar} = `;
-        yield [
-            vScope.exp.loc.source,
-            'template',
-            vScope.exp.loc.start.offset,
-            ctx.codeFeatures.all,
-        ];
-        yield utils_1.endOfLine;
-        yield `if (${condition}) {${utils_1.newLine}`;
-        ctx.blockConditions.push(condition);
-        inScope = true;
-    }
-    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
-    const [refName, offset] = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
-    if (inScope) {
-        yield `}${utils_1.newLine}`;
-        ctx.blockConditions.length = originalConditionsNum;
-    }
-    return [refName, offset];
-}
 function getCanonicalComponentName(tagText) {
     return utils_1.variableNameRegex.test(tagText)
         ? tagText
@@ -318,16 +294,16 @@ function* generateComponentGeneric(ctx) {
     }
     ctx.lastGenericComment = undefined;
 }
-function* generateReferencesForElements(options, ctx, node) {
+function* generateElementReference(options, ctx, node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'ref'
             && prop.value) {
             const [content, startOffset] = (0, utils_1.normalizeAttributeValue)(prop.value);
-            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${utils_1.newLine}`;
-            yield `/** @type { typeof __VLS_ctx`;
+            // navigation support for `const foo = ref()`
+            yield `/** @type {typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
-            yield ` } */${utils_1.endOfLine}`;
+            yield `} */${utils_1.endOfLine}`;
             if (utils_1.variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
                 ctx.accessExternalVariable(content, startOffset);
             }
@@ -337,7 +313,7 @@ function* generateReferencesForElements(options, ctx, node) {
     return [];
 }
 function hasVBindAttrs(options, ctx, node) {
-    return options.vueCompilerOptions.fallthroughAttributes && (node === ctx.singleRootNode ||
+    return options.vueCompilerOptions.fallthroughAttributes && ((options.inheritAttrs && ctx.singleRootNodes.has(node)) ||
         node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'bind'
             && prop.exp?.loc.source === '$attrs'));

package/lib/codegen/template/elementChildren.d.ts

@@ -2,4 +2,4 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, isDefaultSlot?: boolean): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = generateElementChildren;
-const CompilerDOM = require("@vue/compiler-dom");
-const utils_1 = require("../utils");
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node, isDefaultSlot = false) {
+function* generateElementChildren(options, ctx, node) {
     yield* ctx.resetDirectiveComments('end of element children start');
     let prev;
     for (const childNode of node.children) {
@@ -12,15 +10,5 @@ function* generateElementChildren(options, ctx, node, isDefaultSlot = false) {
         prev = childNode;
     }
     yield* ctx.generateAutoImportCompletion();
-    // fix https://github.com/vuejs/language-tools/issues/932
-    if (ctx.currentComponent
-        && isDefaultSlot
-        && node.children.length
-        && node.tagType === CompilerDOM.ElementTypes.COMPONENT) {
-        ctx.currentComponent.used = true;
-        yield `${ctx.currentComponent.ctxVar}.slots!.`;
-        yield* (0, utils_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
-        yield utils_1.endOfLine;
-    }
 }
 //# sourceMappingURL=elementChildren.js.map