@vue/language-core 2.2.4 → 2.2.8

package/lib/codegen/globalTypes.js

@@ -10,12 +10,7 @@ function getGlobalTypesFileName({ lib, target, checkUnknownProps, checkUnknownEv
         checkUnknownProps,
         checkUnknownEvents,
         checkUnknownComponents,
-    ].map(v => {
-        if (typeof v === 'boolean') {
-            return v ? 1 : 0;
-        }
-        return v;
-    }).join('_') + '.d.ts';
+    ].map(v => (typeof v === 'boolean' ? Number(v) : v)).join('_') + '.d.ts';
 }
 function generateGlobalTypes({ lib, target, checkUnknownProps, checkUnknownEvents, checkUnknownComponents, }) {
     const fnPropsType = `(K extends { $props: infer Props } ? Props : any)${checkUnknownProps ? '' : ' & Record<string, unknown>'}`;

package/lib/codegen/script/component.js

@@ -27,9 +27,7 @@ function* generateComponent(options, ctx, scriptSetup, scriptSetupRanges) {
     yield `},${utils_1.newLine}`;
     if (!ctx.bypassDefineComponent) {
         const emitOptionCodes = [...generateEmitsOption(options, scriptSetupRanges)];
-        for (const code of emitOptionCodes) {
-            yield code;
-        }
+        yield* emitOptionCodes;
         yield* generatePropsOption(options, ctx, scriptSetup, scriptSetupRanges, !!emitOptionCodes.length, true);
     }
     if (options.vueCompilerOptions.target >= 3.5

package/lib/codegen/script/componentSelf.js

@@ -27,25 +27,18 @@ function* generateComponentSelf(options, ctx, templateCodegenCtx) {
                 if (!templateUsageVars.has(varName) && !templateCodegenCtx.accessExternalVariables.has(varName)) {
                     continue;
                 }
-                const templateOffset = options.getGeneratedLength();
+                const token = Symbol(varName.length);
+                yield ['', undefined, 0, { __linkedToken: token }];
                 yield `${varName}: ${varName} as typeof `;
-                const scriptOffset = options.getGeneratedLength();
+                yield ['', undefined, 0, { __linkedToken: token }];
                 yield `${varName},${utils_1.newLine}`;
-                options.linkedCodeMappings.push({
-                    sourceOffsets: [scriptOffset],
-                    generatedOffsets: [templateOffset],
-                    lengths: [varName.length],
-                    data: undefined,
-                });
             }
         }
         yield `}${utils_1.endOfLine}`; // return {
         yield `},${utils_1.newLine}`; // setup() {
         if (options.sfc.scriptSetup && options.scriptSetupRanges && !ctx.bypassDefineComponent) {
             const emitOptionCodes = [...(0, component_1.generateEmitsOption)(options, options.scriptSetupRanges)];
-            for (const code of emitOptionCodes) {
-                yield code;
-            }
+            yield* emitOptionCodes;
             yield* (0, component_1.generatePropsOption)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges, !!emitOptionCodes.length, false);
         }
         if (options.sfc.script && options.scriptRanges?.exportDefault?.args) {

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

@@ -10,7 +10,6 @@ export type ScriptCodegenContext = ReturnType<typeof createScriptCodegenContext>
 export declare function createScriptCodegenContext(options: ScriptCodegenOptions): {
     generatedTemplate: boolean;
     generatedPropsType: boolean;
-    scriptSetupGeneratedOffset: number | undefined;
     bypassDefineComponent: boolean;
     bindingNames: Set<string>;
     localTypes: {

package/lib/codegen/script/context.js

@@ -8,7 +8,6 @@ function createScriptCodegenContext(options) {
     return {
         generatedTemplate: false,
         generatedPropsType: false,
-        scriptSetupGeneratedOffset: undefined,
         bypassDefineComponent: options.lang === 'js' || options.lang === 'jsx',
         bindingNames: new Set([
             ...options.scriptRanges?.bindings.map(({ range }) => options.sfc.script.content.slice(range.start, range.end)) ?? [],

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

@@ -1,4 +1,3 @@
-import type { Mapping } from '@volar/language-core';
 import type * as ts from 'typescript';
 import type { ScriptRanges } from '../../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
@@ -20,9 +19,7 @@ export interface ScriptCodegenOptions {
     } | undefined;
     destructuredPropNames: Set<string>;
     templateRefNames: Set<string>;
-    getGeneratedLength: () => number;
-    linkedCodeMappings: Mapping[];
     appendGlobalTypes: boolean;
 }
 export declare function generateScript(options: ScriptCodegenOptions): Generator<Code, ScriptCodegenContext>;
-export declare function generateScriptSectionPartiallyEnding(source: string, end: number, mark: string): Generator<Code>;
+export declare function generateScriptSectionPartiallyEnding(source: string, end: number, mark: string, delimiter?: string): Generator<Code>;

package/lib/codegen/script/index.js

@@ -92,16 +92,14 @@ function* generateScript(options) {
         }
         else {
             yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, codeFeatures_1.codeFeatures.all);
+            yield* generateScriptSectionPartiallyEnding(options.sfc.script.name, options.sfc.script.content.length, '#3632/script.vue');
         }
     }
     else if (options.sfc.scriptSetup && options.scriptSetupRanges) {
         yield* (0, scriptSetup_1.generateScriptSetup)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
     }
-    if (options.sfc.script) {
-        yield* generateScriptSectionPartiallyEnding(options.sfc.script.name, options.sfc.script.content.length, '#3632/script.vue');
-    }
     if (options.sfc.scriptSetup) {
-        yield* generateScriptSectionPartiallyEnding(options.sfc.scriptSetup.name, options.sfc.scriptSetup.content.length, '#4569/main.vue');
+        yield* generateScriptSectionPartiallyEnding(options.sfc.scriptSetup.name, options.sfc.scriptSetup.content.length, '#4569/main.vue', ';');
     }
     if (!ctx.generatedTemplate) {
         const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx);
@@ -119,8 +117,8 @@ function* generateScript(options) {
     }
     return ctx;
 }
-function* generateScriptSectionPartiallyEnding(source, end, mark) {
-    yield `;`;
+function* generateScriptSectionPartiallyEnding(source, end, mark, delimiter = 'debugger') {
+    yield delimiter;
     yield ['', source, end, codeFeatures_1.codeFeatures.verification];
     yield `/* PartiallyEnd: ${mark} */${utils_1.newLine}`;
 }

package/lib/codegen/script/scriptSetup.js

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateScriptSetupImports = generateScriptSetupImports;
 exports.generateScriptSetup = generateScriptSetup;
+const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const wrapWith_1 = require("../utils/wrapWith");
 const component_1 = require("./component");
 const componentSelf_1 = require("./componentSelf");
 const index_1 = require("./index");
@@ -19,15 +22,8 @@ function* generateScriptSetupImports(scriptSetup, scriptSetupRanges) {
 function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
     if (scriptSetup.generic) {
         if (!options.scriptRanges?.exportDefault) {
-            if (options.sfc.scriptSetup) {
-                // #4569
-                yield [
-                    '',
-                    'scriptSetup',
-                    options.sfc.scriptSetup.content.length,
-                    codeFeatures_1.codeFeatures.verification,
-                ];
-            }
+            // #4569
+            yield ['', 'scriptSetup', 0, codeFeatures_1.codeFeatures.verification];
             yield `export default `;
         }
         yield `(`;
@@ -81,8 +77,16 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
     }
 }
 function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, syntax) {
-    ctx.scriptSetupGeneratedOffset = options.getGeneratedLength() - scriptSetupRanges.importSectionEndOffset;
     let setupCodeModifies = [];
+    for (const { comments } of scriptSetupRanges.defineProp) {
+        if (comments) {
+            setupCodeModifies.push([
+                [``],
+                comments.start,
+                comments.end,
+            ]);
+        }
+    }
     if (scriptSetupRanges.defineProps) {
         const { name, statement, callExp, typeArg } = scriptSetupRanges.defineProps;
         setupCodeModifies.push(...generateDefineWithType(scriptSetup, statement, scriptSetupRanges.withDefaults?.callExp ?? callExp, typeArg, name, `__VLS_props`, `__VLS_Props`));
@@ -101,22 +105,30 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
             setupCodeModifies.push([
                 [
                     `let __VLS_exposed!: `,
-                    (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, codeFeatures_1.codeFeatures.navigation),
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, codeFeatures_1.codeFeatures.all),
                     `${utils_1.endOfLine}`,
                 ],
                 callExp.start,
                 callExp.start,
+            ], [
+                [`typeof __VLS_exposed`],
+                typeArg.start,
+                typeArg.end,
             ]);
         }
         else if (arg) {
             setupCodeModifies.push([
                 [
                     `const __VLS_exposed = `,
-                    (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, codeFeatures_1.codeFeatures.navigation),
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, codeFeatures_1.codeFeatures.all),
                     `${utils_1.endOfLine}`,
                 ],
                 callExp.start,
                 callExp.start,
+            ], [
+                [`__VLS_exposed`],
+                arg.start,
+                arg.end,
             ]);
         }
         else {
@@ -152,9 +164,7 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
                 `])`
             ] : [
                 ` as __VLS_StyleModules[`,
-                ['', scriptSetup.name, exp.start, codeFeatures_1.codeFeatures.verification],
-                `'$style'`,
-                ['', scriptSetup.name, exp.end, utils_1.combineLastMapping],
+                ...(0, wrapWith_1.wrapWith)(exp.start, exp.end, scriptSetup.name, codeFeatures_1.codeFeatures.verification, `'$style'`),
                 `])`
             ],
             callExp.end,
@@ -228,9 +238,7 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
     let nextStart = Math.max(scriptSetupRanges.importSectionEndOffset, scriptSetupRanges.leadingCommentEndOffset);
     for (const [codes, start, end] of setupCodeModifies) {
         yield (0, utils_1.generateSfcBlockSection)(scriptSetup, nextStart, start, codeFeatures_1.codeFeatures.all);
-        for (const code of codes) {
-            yield code;
-        }
+        yield* codes;
         nextStart = end;
     }
     yield (0, utils_1.generateSfcBlockSection)(scriptSetup, nextStart, scriptSetup.content.length, codeFeatures_1.codeFeatures.all);
@@ -368,7 +376,7 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
                 continue;
             }
             yield `: `;
-            yield getRangeName(scriptSetup, defineProp.defaultValue);
+            yield getRangeText(scriptSetup, defineProp.defaultValue);
             yield `,${utils_1.newLine}`;
         }
         yield `}${utils_1.endOfLine}`;
@@ -381,6 +389,13 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
         ctx.generatedPropsType = true;
         yield `${ctx.localTypes.PropsChildren}<__VLS_Slots>`;
     }
+    if (scriptSetupRanges.defineProps?.typeArg) {
+        if (ctx.generatedPropsType) {
+            yield ` & `;
+        }
+        ctx.generatedPropsType = true;
+        yield `__VLS_Props`;
+    }
     if (scriptSetupRanges.defineProp.length) {
         if (ctx.generatedPropsType) {
             yield ` & `;
@@ -389,11 +404,15 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
         yield `{${utils_1.newLine}`;
         for (const defineProp of scriptSetupRanges.defineProp) {
             const [propName, localName] = getPropAndLocalName(scriptSetup, defineProp);
+            if (defineProp.comments) {
+                yield (0, utils_1.generateSfcBlockSection)(scriptSetup, defineProp.comments.start, defineProp.comments.end, codeFeatures_1.codeFeatures.all);
+                yield utils_1.newLine;
+            }
             if (defineProp.isModel && !defineProp.name) {
                 yield propName;
             }
             else if (defineProp.name) {
-                yield (0, utils_1.generateSfcBlockSection)(scriptSetup, defineProp.name.start, defineProp.name.end, codeFeatures_1.codeFeatures.navigation);
+                yield* (0, camelized_1.generateCamelized)(getRangeText(scriptSetup, defineProp.name), scriptSetup.name, defineProp.name.start, codeFeatures_1.codeFeatures.navigation);
             }
             else if (defineProp.localName) {
                 yield (0, utils_1.generateSfcBlockSection)(scriptSetup, defineProp.localName.start, defineProp.localName.end, codeFeatures_1.codeFeatures.navigation);
@@ -408,19 +427,12 @@ function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
             yield `,${utils_1.newLine}`;
             if (defineProp.modifierType) {
                 const modifierName = `${defineProp.name ? propName : 'model'}Modifiers`;
-                const modifierType = getRangeName(scriptSetup, defineProp.modifierType);
+                const modifierType = getRangeText(scriptSetup, defineProp.modifierType);
                 yield `'${modifierName}'?: Partial<Record<${modifierType}, true>>,${utils_1.newLine}`;
             }
         }
         yield `}`;
     }
-    if (scriptSetupRanges.defineProps?.typeArg) {
-        if (ctx.generatedPropsType) {
-            yield ` & `;
-        }
-        ctx.generatedPropsType = true;
-        yield `__VLS_Props`;
-    }
     if (!ctx.generatedPropsType) {
         yield `{}`;
     }
@@ -434,7 +446,7 @@ function* generateModelEmit(scriptSetup, scriptSetupRanges) {
             const [propName, localName] = getPropAndLocalName(scriptSetup, defineModel);
             yield `'update:${propName}': [value: `;
             yield* generateDefinePropType(scriptSetup, propName, localName, defineModel);
-            if (!defineModel.required && defineModel.defaultValue === undefined) {
+            if (!defineModel.required && !defineModel.defaultValue) {
                 yield ` | undefined`;
             }
             yield `]${utils_1.endOfLine}`;
@@ -446,7 +458,7 @@ function* generateModelEmit(scriptSetup, scriptSetupRanges) {
 function* generateDefinePropType(scriptSetup, propName, localName, defineProp) {
     if (defineProp.type) {
         // Infer from defineProp<T>
-        yield getRangeName(scriptSetup, defineProp.type);
+        yield getRangeText(scriptSetup, defineProp.type);
     }
     else if (defineProp.runtimeType && localName) {
         // Infer from actual prop declaration code 
@@ -462,19 +474,16 @@ function* generateDefinePropType(scriptSetup, propName, localName, defineProp) {
 }
 function getPropAndLocalName(scriptSetup, defineProp) {
     const localName = defineProp.localName
-        ? getRangeName(scriptSetup, defineProp.localName)
+        ? getRangeText(scriptSetup, defineProp.localName)
         : undefined;
-    let propName = defineProp.name
-        ? getRangeName(scriptSetup, defineProp.name)
+    const propName = defineProp.name
+        ? (0, shared_1.camelize)(getRangeText(scriptSetup, defineProp.name).slice(1, -1))
         : defineProp.isModel
             ? 'modelValue'
             : localName;
-    if (defineProp.name) {
-        propName = propName.replace(/['"]+/g, '');
-    }
     return [propName, localName];
 }
-function getRangeName(scriptSetup, range) {
+function getRangeText(scriptSetup, range) {
     return scriptSetup.content.slice(range.start, range.end);
 }
 //# sourceMappingURL=scriptSetup.js.map

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

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

package/lib/codegen/script/styleModulesType.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStyleModulesType = generateStyleModulesType;
+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);
+    if (!styles.length && !options.scriptSetupRanges?.useCssModule.length) {
+        return;
+    }
+    yield `type __VLS_StyleModules = {${utils_1.newLine}`;
+    for (const [style, i] of styles) {
+        const { name, offset } = style.module;
+        if (offset) {
+            yield [
+                name,
+                'main',
+                offset + 1,
+                index_1.codeFeatures.all
+            ];
+        }
+        else {
+            yield name;
+        }
+        yield `: Record<string, string> & ${ctx.localTypes.PrettifyLocal}<{}`;
+        for (const className of style.classNames) {
+            yield* (0, template_1.generateCssClassProperty)(i, className.text, className.offset, 'string', false);
+        }
+        yield `>${utils_1.endOfLine}`;
+    }
+    yield `}${utils_1.endOfLine}`;
+}
+//# sourceMappingURL=styleModulesType.js.map

package/lib/codegen/script/template.js

@@ -99,9 +99,7 @@ function* generateTemplateBody(options, templateCodegenCtx) {
     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}`;

package/lib/codegen/style/classProperty.js

@@ -3,28 +3,15 @@ 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 [
-        '',
-        'style_' + styleIndex,
-        offset,
-        codeFeatures_1.codeFeatures.navigation,
-    ];
-    yield `'`;
-    yield [
+    yield* (0, wrapWith_1.wrapWith)(offset, offset + classNameWithDot.length, 'style_' + styleIndex, codeFeatures_1.codeFeatures.navigation, `'`, [
         classNameWithDot.slice(1),
         'style_' + styleIndex,
         offset + 1,
-        codeFeatures_1.codeFeatures.navigation,
-    ];
-    yield `'`;
-    yield [
-        '',
-        'style_' + styleIndex,
-        offset + classNameWithDot.length,
-        codeFeatures_1.codeFeatures.navigation,
-    ];
+        utils_1.combineLastMapping
+    ], `'`);
     yield `: ${propertyType}`;
     yield ` }`;
 }

package/lib/codegen/template/context.js

@@ -3,6 +3,7 @@ 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.
@@ -227,7 +228,7 @@ 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`

package/lib/codegen/template/element.js

@@ -8,6 +8,7 @@ const shared_2 = require("../../utils/shared");
 const inlayHints_1 = require("../inlayHints");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
+const wrapWith_1 = require("../utils/wrapWith");
 const elementChildren_1 = require("./elementChildren");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
@@ -81,7 +82,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
             }
             else {
                 const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
-                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
+                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: {
                         resolveRenameNewName: camelizeComponentName,
@@ -119,14 +120,14 @@ function* generateComponent(options, ctx, node, isVForChild) {
         yield* generateCanonicalComponentName(node.tag, tagOffsets[0], ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
         yield `${utils_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
-        if (utils_1.variableNameRegex.test(camelizedTag)) {
+        if (utils_1.identifierRegex.test(camelizedTag)) {
             // 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;
                     yield `typeof __VLS_components.`;
-                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
+                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, {
                         navigation: {
                             resolveRenameNewName: node.tag !== expectName ? camelizeComponentName : undefined,
                             resolveRenameEditText: getTagRenameApply(node.tag),
@@ -139,7 +140,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
             // auto import support
             if (options.edited) {
                 yield `// @ts-ignore${utils_1.newLine}`; // #2304
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffsets[0], {
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], {
                     completion: {
                         isAdditional: true,
                         onlyImport: true,
@@ -157,7 +158,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
     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({
+    yield* (0, wrapWith_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.resolveCodeFeatures({
         verification: {
             shouldReport(_source, code) {
                 // https://typescript.tv/errors/#ts6133
@@ -168,7 +169,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
     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* (0, wrapWith_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(${componentFunctionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
     yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar);
@@ -226,7 +227,7 @@ function* generateElement(options, ctx, node, isVForChild) {
         yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     }
     yield `)(`;
-    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* (0, wrapWith_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);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
@@ -257,7 +258,7 @@ function* generateFailedPropExps(options, ctx, failedPropExps) {
     }
 }
 function getCanonicalComponentName(tagText) {
-    return utils_1.variableNameRegex.test(tagText)
+    return utils_1.identifierRegex.test(tagText)
         ? tagText
         : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
 }
@@ -275,17 +276,17 @@ function getPossibleOriginalComponentNames(tagText, deduplicate) {
     return names;
 }
 function* generateCanonicalComponentName(tagText, offset, features) {
-    if (utils_1.variableNameRegex.test(tagText)) {
+    if (utils_1.identifierRegex.test(tagText)) {
         yield [tagText, 'template', offset, features];
     }
     else {
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), offset, features);
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), 'template', offset, features);
     }
 }
 function* generateComponentGeneric(ctx) {
     if (ctx.lastGenericComment) {
         const { content, offset } = ctx.lastGenericComment;
-        yield* (0, utils_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
+        yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
             content,
             'template',
             offset,
@@ -304,7 +305,7 @@ function* generateElementReference(options, ctx, node) {
             yield `/** @type {typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
             yield `} */${utils_1.endOfLine}`;
-            if (utils_1.variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
+            if (utils_1.identifierRegex.test(content) && !options.templateRefNames.has(content)) {
                 ctx.accessExternalVariable(content, startOffset);
             }
             return [content, startOffset];

package/lib/codegen/template/elementDirectives.js

@@ -9,6 +9,7 @@ const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
+const wrapWith_1 = require("../utils/wrapWith");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
@@ -32,13 +33,13 @@ function* generateElementDirectives(options, ctx, node) {
             continue;
         }
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
         yield utils_1.endOfLine;
     }
 }
 function* generateIdentifier(options, ctx, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, ctx.resolveCodeFeatures({
+    yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, ctx.resolveCodeFeatures({
         ...codeFeatures_1.codeFeatures.withoutHighlight,
         // fix https://github.com/vuejs/language-tools/issues/1905
         ...codeFeatures_1.codeFeatures.additionalCompletion,
@@ -55,7 +56,7 @@ function* generateArg(options, ctx, prop) {
         return;
     }
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, utils_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, `arg`);
+    yield* (0, wrapWith_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, `arg`);
     yield `: `;
     if (arg.isStatic) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.all);
@@ -72,7 +73,7 @@ function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
     }
     const startOffset = modifiers[0].loc.start.offset - 1;
     const endOffset = modifiers.at(-1).loc.end.offset;
-    yield* (0, utils_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
+    yield* (0, wrapWith_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
     yield `: { `;
     for (const mod of modifiers) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlightAndNavigation);
@@ -85,7 +86,7 @@ function* generateValue(options, ctx, prop) {
     if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, utils_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
+    yield* (0, wrapWith_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
     yield `: `;
     yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp, ctx.codeFeatures.all);
 }

package/lib/codegen/template/elementEvents.js

@@ -8,6 +8,7 @@ const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
+const wrapWith_1 = require("../utils/wrapWith");
 const interpolation_1 = require("./interpolation");
 function* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
     let emitVar;
@@ -17,8 +18,7 @@ function* generateElementEvents(options, ctx, node, componentFunctionalVar, comp
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on'
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-            && !prop.arg.loc.source.startsWith('[')
-            && !prop.arg.loc.source.endsWith(']')) {
+            && prop.arg.isStatic) {
             ctx.currentComponent.used = true;
             if (!emitVar) {
                 emitVar = ctx.getInternalVariable();
@@ -51,13 +51,13 @@ function* generateEventArg(ctx, name, start, directive = 'on') {
         ...ctx.codeFeatures.withoutHighlightAndCompletion,
         ...ctx.codeFeatures.navigationWithoutRename,
     };
-    if (utils_1.variableNameRegex.test((0, shared_1.camelize)(name))) {
+    if (utils_1.identifierRegex.test((0, shared_1.camelize)(name))) {
         yield ['', 'template', start, features];
         yield directive;
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping);
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping);
     }
     else {
-        yield* (0, utils_1.wrapWith)(start, start + name.length, features, `'`, ['', 'template', start, utils_1.combineLastMapping], directive, ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping), `'`);
+        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {