@vue/language-core 2.2.2 → 2.2.6

package/lib/codegen/script/src.js

@@ -3,49 +3,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSrc = generateSrc;
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
-function* generateSrc(script, src) {
-    if (src.endsWith('.d.ts')) {
-        src = src.slice(0, -'.d.ts'.length);
+function* generateSrc(src) {
+    if (src === true) {
+        return;
     }
-    else if (src.endsWith('.ts')) {
-        src = src.slice(0, -'.ts'.length);
+    let { text } = src;
+    if (text.endsWith('.d.ts')) {
+        text = text.slice(0, -'.d.ts'.length);
     }
-    else if (src.endsWith('.tsx')) {
-        src = src.slice(0, -'.tsx'.length) + '.jsx';
+    else if (text.endsWith('.ts')) {
+        text = text.slice(0, -'.ts'.length);
     }
-    if (!src.endsWith('.js') && !src.endsWith('.jsx')) {
-        src = src + '.js';
+    else if (text.endsWith('.tsx')) {
+        text = text.slice(0, -'.tsx'.length) + '.jsx';
+    }
+    if (!text.endsWith('.js') && !text.endsWith('.jsx')) {
+        text = text + '.js';
     }
     yield `export * from `;
-    yield [
-        `'${src}'`,
-        'script',
-        script.srcOffset - 1,
-        {
-            ...codeFeatures_1.codeFeatures.all,
-            navigation: src === script.src
-                ? true
-                : {
-                    shouldRename: () => false,
-                    resolveRenameEditText(newName) {
-                        if (newName.endsWith('.jsx') || newName.endsWith('.js')) {
-                            newName = newName.split('.').slice(0, -1).join('.');
-                        }
-                        if (script?.src?.endsWith('.d.ts')) {
-                            newName = newName + '.d.ts';
-                        }
-                        else if (script?.src?.endsWith('.ts')) {
-                            newName = newName + '.ts';
-                        }
-                        else if (script?.src?.endsWith('.tsx')) {
-                            newName = newName + '.tsx';
-                        }
-                        return newName;
-                    },
+    yield* (0, utils_1.generateSfcBlockAttrValue)(src, text, {
+        ...codeFeatures_1.codeFeatures.all,
+        navigation: text === src.text
+            ? true
+            : {
+                shouldRename: () => false,
+                resolveRenameEditText(newName) {
+                    if (newName.endsWith('.jsx') || newName.endsWith('.js')) {
+                        newName = newName.split('.').slice(0, -1).join('.');
+                    }
+                    if (src?.text.endsWith('.d.ts')) {
+                        newName = newName + '.d.ts';
+                    }
+                    else if (src?.text.endsWith('.ts')) {
+                        newName = newName + '.ts';
+                    }
+                    else if (src?.text.endsWith('.tsx')) {
+                        newName = newName + '.tsx';
+                    }
+                    return newName;
                 },
-        },
-    ];
+            },
+    });
     yield utils_1.endOfLine;
-    yield `export { default } from '${src}'${utils_1.endOfLine}`;
+    yield `export { default } from '${text}'${utils_1.endOfLine}`;
 }
 //# sourceMappingURL=src.js.map

package/lib/codegen/script/styleModulesType.d.ts

@@ -1,4 +1,4 @@
 import type { Code } from '../../types';
 import type { ScriptCodegenContext } from './context';
-import type { ScriptCodegenOptions } from './index';
+import { ScriptCodegenOptions } from './index';
 export declare function generateStyleModulesType(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code>;

package/lib/codegen/script/styleModulesType.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateStyleModulesType = generateStyleModulesType;
-const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const index_1 = require("./index");
 const template_1 = require("./template");
 function* generateStyleModulesType(options, ctx) {
     const styles = options.sfc.styles.map((style, i) => [style, i]).filter(([style]) => style.module);
@@ -17,7 +17,7 @@ function* generateStyleModulesType(options, ctx) {
                 name,
                 'main',
                 offset + 1,
-                codeFeatures_1.codeFeatures.all
+                index_1.codeFeatures.all
             ];
         }
         else {

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

@@ -1,8 +1,7 @@
 import type { Code } from '../../types';
-import { TemplateCodegenContext } from '../template/context';
+import { type TemplateCodegenContext } from '../template/context';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
 export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code, TemplateCodegenContext>;
 export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
-export declare function generateCssClassProperty(styleIndex: number, classNameWithDot: string, offset: number, propertyType: string, optional: boolean): Generator<Code>;
 export declare function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Set<string>;

package/lib/codegen/script/template.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generateTemplate;
 exports.generateTemplateDirectives = generateTemplateDirectives;
-exports.generateCssClassProperty = generateCssClassProperty;
 exports.getTemplateUsageVars = getTemplateUsageVars;
 const shared_1 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
+const modules_1 = require("../style/modules");
+const scopedClasses_1 = require("../style/scopedClasses");
 const context_1 = require("../template/context");
 const interpolation_1 = require("../template/interpolation");
 const styleScopedClasses_1 = require("../template/styleScopedClasses");
@@ -93,13 +94,12 @@ function* generateTemplateDirectives(options) {
     yield `let __VLS_directives!: __VLS_LocalDirectives & __VLS_GlobalDirectives${utils_1.endOfLine}`;
 }
 function* generateTemplateBody(options, templateCodegenCtx) {
-    yield* generateStyleScopedClasses(options, templateCodegenCtx);
+    yield* (0, scopedClasses_1.generateStyleScopedClasses)(options, templateCodegenCtx);
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(templateCodegenCtx, true);
+    yield* (0, modules_1.generateStyleModules)(options);
     yield* generateCssVars(options, templateCodegenCtx);
     if (options.templateCodegen) {
-        for (const code of options.templateCodegen.codes) {
-            yield code;
-        }
+        yield* options.templateCodegen.codes;
     }
     else {
         yield `// no template${utils_1.newLine}`;
@@ -111,54 +111,6 @@ function* generateTemplateBody(options, templateCodegenCtx) {
         yield `type __VLS_RootEl = any${utils_1.endOfLine}`;
     }
 }
-function* generateStyleScopedClasses(options, ctx) {
-    const firstClasses = new Set();
-    yield `type __VLS_StyleScopedClasses = {}`;
-    for (let i = 0; i < options.sfc.styles.length; i++) {
-        const style = options.sfc.styles[i];
-        const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
-        if (option === 'always' || (option === 'scoped' && style.scoped)) {
-            for (const className of style.classNames) {
-                if (firstClasses.has(className.text)) {
-                    ctx.scopedClasses.push({
-                        source: 'style_' + i,
-                        className: className.text.slice(1),
-                        offset: className.offset + 1
-                    });
-                    continue;
-                }
-                firstClasses.add(className.text);
-                yield* generateCssClassProperty(i, className.text, className.offset, 'boolean', true);
-            }
-        }
-    }
-    yield utils_1.endOfLine;
-}
-function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propertyType, optional) {
-    yield `${utils_1.newLine} & { `;
-    yield [
-        '',
-        'style_' + styleIndex,
-        offset,
-        codeFeatures_1.codeFeatures.navigation,
-    ];
-    yield `'`;
-    yield [
-        classNameWithDot.slice(1),
-        'style_' + styleIndex,
-        offset + 1,
-        codeFeatures_1.codeFeatures.navigation,
-    ];
-    yield `'`;
-    yield [
-        '',
-        'style_' + styleIndex,
-        offset + classNameWithDot.length,
-        codeFeatures_1.codeFeatures.navigationWithoutRename,
-    ];
-    yield `${optional ? '?' : ''}: ${propertyType}`;
-    yield ` }`;
-}
 function* generateCssVars(options, ctx) {
     if (!options.sfc.styles.length) {
         return;

package/lib/codegen/style/classProperty.d.ts

@@ -0,0 +1,2 @@
+import type { Code } from '../../types';
+export declare function generateClassProperty(styleIndex: number, classNameWithDot: string, offset: number, propertyType: string): Generator<Code>;

package/lib/codegen/style/classProperty.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateClassProperty = generateClassProperty;
+const codeFeatures_1 = require("../codeFeatures");
+const utils_1 = require("../utils");
+const wrapWith_1 = require("../utils/wrapWith");
+function* generateClassProperty(styleIndex, classNameWithDot, offset, propertyType) {
+    yield `${utils_1.newLine} & { `;
+    yield* (0, wrapWith_1.wrapWith)(offset, offset + classNameWithDot.length, 'style_' + styleIndex, codeFeatures_1.codeFeatures.navigation, `'`, [
+        classNameWithDot.slice(1),
+        'style_' + styleIndex,
+        offset + 1,
+        utils_1.combineLastMapping
+    ], `'`);
+    yield `: ${propertyType}`;
+    yield ` }`;
+}
+//# sourceMappingURL=classProperty.js.map

package/lib/codegen/style/modules.d.ts

@@ -0,0 +1,3 @@
+import type { Code } from '../../types';
+import type { ScriptCodegenOptions } from '../script';
+export declare function generateStyleModules(options: ScriptCodegenOptions): Generator<Code>;

package/lib/codegen/style/modules.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyleModules = generateStyleModules;
+const codeFeatures_1 = require("../codeFeatures");
+const utils_1 = require("../utils");
+const classProperty_1 = require("./classProperty");
+function* generateStyleModules(options) {
+    const styles = options.sfc.styles.map((style, i) => [style, i]).filter(([style]) => style.module);
+    if (!styles.length && !options.scriptSetupRanges?.useCssModule.length) {
+        return;
+    }
+    yield `type __VLS_StyleModules = {${utils_1.newLine}`;
+    for (const [style, i] of styles) {
+        if (style.module === true) {
+            yield `$style`;
+        }
+        else {
+            const { text, offset } = style.module;
+            yield [
+                text,
+                'main',
+                offset,
+                codeFeatures_1.codeFeatures.withoutHighlight
+            ];
+        }
+        yield `: Record<string, string> & __VLS_PrettifyGlobal<{}`;
+        for (const className of style.classNames) {
+            yield* (0, classProperty_1.generateClassProperty)(i, className.text, className.offset, 'string');
+        }
+        yield `>${utils_1.endOfLine}`;
+    }
+    yield `}${utils_1.endOfLine}`;
+}
+//# sourceMappingURL=modules.js.map

package/lib/codegen/style/scopedClasses.d.ts

@@ -0,0 +1,4 @@
+import type { Code } from '../../types';
+import type { ScriptCodegenOptions } from '../script';
+import type { TemplateCodegenContext } from '../template/context';
+export declare function generateStyleScopedClasses(options: ScriptCodegenOptions, ctx: TemplateCodegenContext): Generator<Code>;

package/lib/codegen/style/scopedClasses.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyleScopedClasses = generateStyleScopedClasses;
+const utils_1 = require("../utils");
+const classProperty_1 = require("./classProperty");
+function* generateStyleScopedClasses(options, ctx) {
+    const option = options.vueCompilerOptions.experimentalResolveStyleCssClasses;
+    const styles = options.sfc.styles
+        .map((style, i) => [style, i])
+        .filter(([style]) => option === 'always' || (option === 'scoped' && style.scoped));
+    if (!styles.length) {
+        return;
+    }
+    const firstClasses = new Set();
+    yield `type __VLS_StyleScopedClasses = {}`;
+    for (const [style, i] of styles) {
+        for (const className of style.classNames) {
+            if (firstClasses.has(className.text)) {
+                ctx.scopedClasses.push({
+                    source: 'style_' + i,
+                    className: className.text.slice(1),
+                    offset: className.offset + 1
+                });
+                continue;
+            }
+            firstClasses.add(className.text);
+            yield* (0, classProperty_1.generateClassProperty)(i, className.text, className.offset, 'boolean');
+        }
+    }
+    yield utils_1.endOfLine;
+}
+//# sourceMappingURL=scopedClasses.js.map

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,104 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTemplateCodegenContext = createTemplateCodegenContext;
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const wrapWith_1 = require("../utils/wrapWith");
+/**
+ * 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 +109,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 +135,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 +158,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 +192,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;
@@ -106,8 +228,11 @@ function createTemplateCodegenContext(options) {
         resetDirectiveComments: function* (endStr) {
             if (expectErrorToken) {
                 const token = expectErrorToken;
-                yield* (0, utils_1.wrapWith)(expectErrorToken.node.loc.start.offset, expectErrorToken.node.loc.end.offset, {
+                yield* (0, wrapWith_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>;