@vue/language-core 2.1.4 → 2.1.6

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

@@ -1,8 +1,8 @@
 import type { Code } from '../../types';
+import { TemplateCodegenContext } from '../template/context';
 import type { ScriptCodegenContext } from './context';
 import { type ScriptCodegenOptions } from './index';
-export declare function generateTemplateCtx(options: ScriptCodegenOptions, isClassComponent: boolean): Generator<Code>;
-export declare function generateTemplateComponents(options: ScriptCodegenOptions): Generator<Code>;
-export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, isClassComponent: boolean): Generator<Code>;
+export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
+export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext, isClassComponent: boolean): Generator<Code, TemplateCodegenContext>;
 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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateTemplateCtx = generateTemplateCtx;
-exports.generateTemplateComponents = generateTemplateComponents;
+exports.generateTemplateDirectives = generateTemplateDirectives;
 exports.generateTemplate = generateTemplate;
 exports.generateCssClassProperty = generateCssClassProperty;
 exports.getTemplateUsageVars = getTemplateUsageVars;
@@ -11,54 +10,28 @@ const context_1 = require("../template/context");
 const interpolation_1 = require("../template/interpolation");
 const styleScopedClasses_1 = require("../template/styleScopedClasses");
 const index_1 = require("./index");
-const internalComponent_1 = require("./internalComponent");
 function* generateTemplateCtx(options, isClassComponent) {
-    const baseExps = [];
-    const extraExps = [];
+    const exps = [];
     if (isClassComponent) {
-        baseExps.push(`this`);
+        exps.push(`this`);
     }
     else {
-        baseExps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
+        exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>`);
     }
     if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) {
-        extraExps.push(`globalThis`);
+        exps.push(`globalThis`);
     }
     if (options.sfc.styles.some(style => style.module)) {
-        extraExps.push(`{} as __VLS_StyleModules`);
-    }
-    if (options.scriptSetupRanges?.templateRefs.length) {
-        let exp = `{} as import('${options.vueCompilerOptions.lib}').UnwrapRef<{${common_1.newLine}`;
-        for (const { name } of options.scriptSetupRanges.templateRefs) {
-            if (name) {
-                exp += `${name}: typeof ${name}${common_1.newLine}`;
-            }
-        }
-        exp += `}>${common_1.newLine}`;
-        extraExps.push(exp);
-    }
-    yield `const __VLS_ctxBase = `;
-    if (baseExps.length === 1) {
-        yield baseExps[0];
-        yield common_1.endOfLine;
-    }
-    else {
-        yield `{${common_1.newLine}`;
-        for (const exp of baseExps) {
-            yield `...`;
-            yield exp;
-            yield `,${common_1.newLine}`;
-        }
-        yield `}${common_1.endOfLine}`;
+        exps.push(`{} as __VLS_StyleModules`);
     }
     yield `const __VLS_ctx = `;
-    if (extraExps.length === 0) {
-        yield `__VLS_ctxBase${common_1.endOfLine}`;
+    if (exps.length === 1) {
+        yield exps[0];
+        yield `${common_1.endOfLine}`;
     }
     else {
         yield `{${common_1.newLine}`;
-        yield `...__VLS_ctxBase,${common_1.newLine}`;
-        for (const exp of extraExps) {
+        for (const exp of exps) {
             yield `...`;
             yield exp;
             yield `,${common_1.newLine}`;
@@ -83,19 +56,18 @@ function* generateTemplateComponents(options) {
         nameType = options.sfc.script.content.substring(nameOption.start, nameOption.end);
     }
     else if (options.sfc.scriptSetup) {
-        yield `let __VLS_name!: '${options.scriptSetupRanges?.options.name ?? options.fileBaseName.substring(0, options.fileBaseName.lastIndexOf('.'))}'${common_1.endOfLine}`;
-        nameType = 'typeof __VLS_name';
+        nameType = `'${options.scriptSetupRanges?.options.name ?? options.fileBaseName.substring(0, options.fileBaseName.lastIndexOf('.'))}'`;
     }
     if (nameType) {
         exps.push(`{} as {
-			[K in ${nameType}]: typeof __VLS_internalComponent
+			[K in ${nameType}]: typeof __VLS_self
 				& (new () => {
 					${(0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target)}: typeof ${options.scriptSetupRanges?.slots?.name ?? '__VLS_slots'}
 				})
 		}`);
     }
-    exps.push(`{} as NonNullable<typeof __VLS_internalComponent extends { components: infer C } ? C : {}>`);
-    exps.push(`__VLS_ctxBase`);
+    exps.push(`{} as NonNullable<typeof __VLS_self extends { components: infer C } ? C : {}>`);
+    exps.push(`__VLS_ctx`);
     yield `const __VLS_localComponents = {${common_1.newLine}`;
     for (const type of exps) {
         yield `...`;
@@ -103,26 +75,41 @@ function* generateTemplateComponents(options) {
         yield `,${common_1.newLine}`;
     }
     yield `}${common_1.endOfLine}`;
-    yield `let __VLS_components: typeof __VLS_localComponents & __VLS_GlobalComponents${common_1.endOfLine}`;
+    yield `let __VLS_components!: typeof __VLS_localComponents & __VLS_GlobalComponents${common_1.endOfLine}`;
 }
-function* generateTemplate(options, ctx, isClassComponent) {
-    ctx.generatedTemplate = true;
-    if (!options.vueCompilerOptions.skipTemplateCodegen) {
-        const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
-            scriptSetupBindingNames: new Set(),
-            edited: options.edited,
-        });
-        yield* generateTemplateCtx(options, isClassComponent);
-        yield* generateTemplateComponents(options);
-        yield* generateTemplateBody(options, templateCodegenCtx);
-        yield* (0, internalComponent_1.generateInternalComponent)(options, ctx, templateCodegenCtx);
+function* generateTemplateDirectives(options) {
+    const exps = [];
+    if (options.sfc.script && options.scriptRanges?.exportDefault?.directivesOption) {
+        const { directivesOption } = options.scriptRanges.exportDefault;
+        exps.push([
+            options.sfc.script.content.substring(directivesOption.start, directivesOption.end),
+            'script',
+            directivesOption.start,
+            index_1.codeFeatures.navigation,
+        ]);
     }
-    else {
-        const templateUsageVars = [...getTemplateUsageVars(options, ctx)];
-        yield `// @ts-ignore${common_1.newLine}`;
-        yield `[${templateUsageVars.join(', ')}]${common_1.newLine}`;
-        yield `const __VLS_templateResult { slots: {}, refs: {}, attrs: {} }${common_1.endOfLine}`;
+    exps.push(`{} as NonNullable<typeof __VLS_self extends { directives: infer D } ? D : {}>`);
+    exps.push(`__VLS_ctx`);
+    yield `const __VLS_localDirectives = {${common_1.newLine}`;
+    for (const type of exps) {
+        yield `...`;
+        yield type;
+        yield `,${common_1.newLine}`;
     }
+    yield `}${common_1.endOfLine}`;
+    yield `let __VLS_directives!: typeof __VLS_localDirectives & __VLS_GlobalDirectives${common_1.endOfLine}`;
+}
+function* generateTemplate(options, ctx, isClassComponent) {
+    ctx.generatedTemplate = true;
+    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
+        scriptSetupBindingNames: new Set(),
+        edited: options.edited,
+    });
+    yield* generateTemplateCtx(options, isClassComponent);
+    yield* generateTemplateComponents(options);
+    yield* generateTemplateDirectives(options);
+    yield* generateTemplateBody(options, templateCodegenCtx);
+    return templateCodegenCtx;
 }
 function* generateTemplateBody(options, templateCodegenCtx) {
     const firstClasses = new Set();
@@ -157,14 +144,14 @@ function* generateTemplateBody(options, templateCodegenCtx) {
         yield `// no template${common_1.newLine}`;
         if (!options.scriptSetupRanges?.slots.define) {
             yield `const __VLS_slots = {}${common_1.endOfLine}`;
-            yield `const $refs = {}${common_1.endOfLine}`;
-            yield `const __VLS_inheritedAttrs = {}${common_1.endOfLine}`;
         }
+        yield `const $refs = {}${common_1.endOfLine}`;
+        yield `const __VLS_inheritedAttrs = {}${common_1.endOfLine}`;
     }
-    yield `const __VLS_templateResult = {`;
-    yield `slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${common_1.newLine}`;
-    yield `refs: $refs,${common_1.newLine}`;
-    yield `attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${common_1.newLine}`;
+    yield `return {${common_1.newLine}`;
+    yield `	slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${common_1.newLine}`;
+    yield `	refs: $refs,${common_1.newLine}`;
+    yield `	attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${common_1.newLine}`;
     yield `}${common_1.endOfLine}`;
 }
 function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propertyType, optional) {
@@ -199,7 +186,7 @@ function* generateCssVars(options, ctx) {
     yield `// CSS variable injection ${common_1.newLine}`;
     for (const style of options.sfc.styles) {
         for (const cssBind of style.cssVars) {
-            for (const [segment, offset, onlyError] of (0, interpolation_1.forEachInterpolationSegment)(options.ts, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
+            for (const [segment, offset, onlyError] of (0, interpolation_1.forEachInterpolationSegment)(options.ts, undefined, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
                 if (offset === undefined) {
                     yield segment;
                 }

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

@@ -41,6 +41,7 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
     inlayHints: InlayHintInfo[];
     hasSlot: boolean;
     inheritedAttrVars: Set<unknown>;
+    templateRefs: Map<string, [string, number]>;
     singleRootNode: CompilerDOM.ElementNode | undefined;
     accessExternalVariable(name: string, offset?: number): void;
     hasLocalVariable: (name: string) => boolean;

package/lib/codegen/template/context.js

@@ -95,6 +95,7 @@ function createTemplateCodegenContext(options) {
     const scopedClasses = [];
     const emptyClassOffsets = [];
     const inlayHints = [];
+    const templateRefs = new Map();
     return {
         slots,
         dynamicSlots,
@@ -108,6 +109,7 @@ function createTemplateCodegenContext(options) {
         inlayHints,
         hasSlot: false,
         inheritedAttrVars: new Set(),
+        templateRefs,
         singleRootNode: undefined,
         accessExternalVariable(name, offset) {
             let arr = accessExternalVariables.get(name);

package/lib/codegen/template/element.js

@@ -153,9 +153,9 @@ function* generateComponent(options, ctx, node, currentComponent) {
     const [refName, offset] = yield* generateVScope(options, ctx, node, props);
     if (refName) {
         const varName = ctx.getInternalVariable();
-        options.templateRefNames.set(refName, [varName, offset]);
+        ctx.templateRefs.set(refName, [varName, offset]);
         ctx.usedComponentCtxVars.add(var_defineComponentCtx);
-        yield `var ${varName} = {} as (Parameters<typeof ${var_defineComponentCtx}['expose']>[0] | null)`;
+        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')) {
@@ -208,7 +208,7 @@ function* generateElement(options, ctx, node, currentComponent, componentCtxVar)
     }
     const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
     if (refName) {
-        options.templateRefNames.set(refName, [`__VLS_intrinsicElements['${node.tag}']`, offset]);
+        ctx.templateRefs.set(refName, [`__VLS_nativeElements['${node.tag}']`, offset]);
     }
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     if (slotDir && componentCtxVar) {
@@ -360,7 +360,7 @@ function* generateReferencesForElements(options, ctx, node) {
             && prop.name === 'ref'
             && prop.value) {
             const [content, startOffset] = normalizeAttributeValue(prop.value);
-            yield `// @ts-ignore${common_1.newLine}`;
+            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${common_1.newLine}`;
             yield `__VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
             yield common_1.endOfLine;

package/lib/codegen/template/elementDirectives.js

@@ -21,7 +21,7 @@ function* generateElementDirectives(options, ctx, node) {
                 yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.arg.content, prop.arg.loc, prop.arg.loc.start.offset + prop.arg.loc.source.indexOf(prop.arg.content), ctx.codeFeatures.all, '(', ')');
                 yield common_1.endOfLine;
             }
-            yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_directiveAsFunction(__VLS_ctx.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
+            yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_directiveAsFunction(__VLS_directives.`, ...(0, camelized_1.generateCamelized)('v-' + prop.name, prop.loc.start.offset, {
                 ...ctx.codeFeatures.all,
                 verification: false,
                 completion: {

package/lib/codegen/template/elementEvents.js

@@ -136,7 +136,10 @@ function* generateEventExpression(options, ctx, prop) {
 }
 function isCompoundExpression(ts, ast) {
     let result = true;
-    if (ast.statements.length === 1) {
+    if (ast.statements.length === 0) {
+        result = false;
+    }
+    else if (ast.statements.length === 1) {
         ts.forEachChild(ast, child_1 => {
             if (ts.isExpressionStatement(child_1)) {
                 ts.forEachChild(child_1, child_2 => {

package/lib/codegen/template/elementProps.js

@@ -99,7 +99,7 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                         }
                         : false,
                 }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
-                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...genereatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
             if (!enableCodeFeatures) {
                 yield (0, muggle_string_1.toString)([...codes]);
             }
@@ -126,22 +126,9 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, shouldCamelize
+            const codeInfo = shouldCamelize
                 ? {
-                    ...codeInfo,
-                    verification: options.vueCompilerOptions.strictTemplates
-                        ? codeInfo.verification
-                        : {
-                            shouldReport(_source, code) {
-                                if (String(code) === '2353' || String(code) === '2561') {
-                                    return false;
-                                }
-                                return typeof codeInfo.verification === 'object'
-                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
-                                    : true;
-                            },
-                        },
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
                         ? {
                             resolveRenameNewName: shared_1.camelize,
@@ -149,7 +136,23 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                         }
                         : false,
                 }
-                : ctx.codeFeatures.withoutHighlightAndCompletion, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
+                : {
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+                };
+            if (!options.vueCompilerOptions.strictTemplates) {
+                const verification = codeInfo.verification;
+                codeInfo.verification = {
+                    shouldReport(_source, code) {
+                        if (String(code) === '2353' || String(code) === '2561') {
+                            return false;
+                        }
+                        return typeof verification === 'object'
+                            ? verification.shouldReport?.(_source, code) ?? true
+                            : true;
+                    },
+                };
+            }
+            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
                 ? generateAttrValue(prop.value, ctx.codeFeatures.all)
                 : [`true`]), `)`);
             if (!enableCodeFeatures) {
@@ -182,7 +185,13 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
         }
     }
 }
-function* genereatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+    if (isShorthand && features.completion) {
+        features = {
+            ...features,
+            completion: undefined,
+        };
+    }
     if (exp && exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) { // style='z-index: 2' will compile to {'z-index':'2'}
         if (!isShorthand) { // vue 3.4+
             yield* (0, interpolation_1.generateInterpolation)(options, ctx, exp.loc.source, exp.loc, exp.loc.start.offset, features, '(', ')');

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

@@ -7,10 +7,10 @@ export interface TemplateCodegenOptions {
     compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
+    edited: boolean;
     scriptSetupBindingNames: Set<string>;
     scriptSetupImportComponentNames: Set<string>;
-    edited: boolean;
-    templateRefNames: Map<string, [varName: string, offset: number]>;
+    templateRefNames: Set<string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;
     propsAssignName?: string;

package/lib/codegen/template/index.js

@@ -35,12 +35,12 @@ function* generateTemplate(options) {
     return ctx;
     function* generateRefs() {
         yield `const __VLS_refs = {${common_1.newLine}`;
-        for (const [name, [varName, offset]] of options.templateRefNames) {
+        for (const [name, [varName, offset]] of ctx.templateRefs) {
             yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
             yield `: ${varName},${common_1.newLine}`;
         }
         yield `}${common_1.endOfLine}`;
-        yield `declare var $refs: typeof __VLS_refs${common_1.endOfLine}`;
+        yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
     }
     function* generateSlotsType() {
         for (const { expVar, varName } of ctx.dynamicSlots) {

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

@@ -3,4 +3,4 @@ import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export declare function generateInterpolation(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, _code: string, astHolder: any, start: number | undefined, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
-export declare function forEachInterpolationSegment(ts: typeof import('typescript'), ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, isJustForErrorMapping?: boolean]>;
+export declare function forEachInterpolationSegment(ts: typeof import('typescript'), templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, errorMappingOnly?: boolean]>;

package/lib/codegen/template/interpolation.js

@@ -9,7 +9,7 @@ function* generateInterpolation(options, ctx, _code, astHolder, start, data, pre
     const code = prefix + _code + suffix;
     const ast = (0, common_1.createTsAst)(options.ts, astHolder, code);
     const vars = [];
-    for (let [section, offset, onlyError] of forEachInterpolationSegment(options.ts, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
+    for (let [section, offset, onlyError] of forEachInterpolationSegment(options.ts, options.templateRefNames, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
         if (offset === undefined) {
             yield section;
         }
@@ -48,7 +48,7 @@ function* generateInterpolation(options, ctx, _code, astHolder, start, data, pre
         }
     }
 }
-function* forEachInterpolationSegment(ts, ctx, code, offset, ast) {
+function* forEachInterpolationSegment(ts, templateRefNames, ctx, code, offset, ast) {
     let ctxVars = [];
     const varCb = (id, isShorthand) => {
         const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
@@ -84,26 +84,40 @@ function* forEachInterpolationSegment(ts, ctx, code, offset, ast) {
             yield [code.substring(0, ctxVars[0].offset), 0];
         }
         for (let i = 0; i < ctxVars.length - 1; i++) {
-            // fix https://github.com/vuejs/language-tools/issues/1205
-            // fix https://github.com/vuejs/language-tools/issues/1264
-            yield ['', ctxVars[i + 1].offset, true];
-            yield ['__VLS_ctx.', undefined];
-            if (ctxVars[i + 1].isShorthand) {
-                yield [code.substring(ctxVars[i].offset, ctxVars[i + 1].offset + ctxVars[i + 1].text.length), ctxVars[i].offset];
+            const curVar = ctxVars[i];
+            const nextVar = ctxVars[i + 1];
+            yield* generateVar(code, templateRefNames, curVar, nextVar);
+            if (nextVar.isShorthand) {
+                yield [code.substring(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
                 yield [': ', undefined];
             }
             else {
-                yield [code.substring(ctxVars[i].offset, ctxVars[i + 1].offset), ctxVars[i].offset];
+                yield [code.substring(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
             }
         }
-        yield ['', ctxVars[ctxVars.length - 1].offset, true];
-        yield ['__VLS_ctx.', undefined];
-        yield [code.substring(ctxVars[ctxVars.length - 1].offset), ctxVars[ctxVars.length - 1].offset];
+        const lastVar = ctxVars.at(-1);
+        yield* generateVar(code, templateRefNames, lastVar);
+        yield [code.substring(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length];
     }
     else {
         yield [code, 0];
     }
 }
+function* generateVar(code, templateRefNames, curVar, nextVar = curVar) {
+    // fix https://github.com/vuejs/language-tools/issues/1205
+    // fix https://github.com/vuejs/language-tools/issues/1264
+    yield ['', nextVar.offset, true];
+    const isTemplateRef = templateRefNames?.has(curVar.text) ?? false;
+    if (isTemplateRef) {
+        yield [`__VLS_unref(`, undefined];
+        yield [code.substring(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
+        yield [`)`, undefined];
+    }
+    else {
+        yield [`__VLS_ctx.`, undefined];
+        yield [code.substring(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
+    }
+}
 function walkIdentifiers(ts, node, ast, cb, ctx, blockVars = [], isRoot = true) {
     if (ts.isIdentifier(node)) {
         cb(node, false);

package/lib/parsers/scriptRanges.d.ts

@@ -9,6 +9,7 @@ export declare function parseScriptRanges(ts: typeof import('typescript'), ast:
         argsNode: ts.ObjectLiteralExpression | undefined;
         componentsOption: TextRange | undefined;
         componentsOptionNode: ts.ObjectLiteralExpression | undefined;
+        directivesOption: TextRange | undefined;
         nameOption: TextRange | undefined;
         inheritAttrsOption: string | undefined;
     }) | undefined;

package/lib/parsers/scriptRanges.js

@@ -24,6 +24,7 @@ function parseScriptRanges(ts, ast, hasScriptSetup, withNode) {
             }
             if (obj) {
                 let componentsOptionNode;
+                let directivesOptionNode;
                 let nameOptionNode;
                 let inheritAttrsOption;
                 ts.forEachChild(obj, node => {
@@ -32,10 +33,13 @@ function parseScriptRanges(ts, ast, hasScriptSetup, withNode) {
                         if (name === 'components' && ts.isObjectLiteralExpression(node.initializer)) {
                             componentsOptionNode = node.initializer;
                         }
-                        if (name === 'name') {
+                        else if (name === 'directives' && ts.isObjectLiteralExpression(node.initializer)) {
+                            directivesOptionNode = node.initializer;
+                        }
+                        else if (name === 'name') {
                             nameOptionNode = node.initializer;
                         }
-                        if (name === 'inheritAttrs') {
+                        else if (name === 'inheritAttrs') {
                             inheritAttrsOption = (0, scriptSetupRanges_1.getNodeText)(ts, node.initializer, ast);
                         }
                     }
@@ -47,6 +51,7 @@ function parseScriptRanges(ts, ast, hasScriptSetup, withNode) {
                     argsNode: withNode ? obj : undefined,
                     componentsOption: componentsOptionNode ? _getStartEnd(componentsOptionNode) : undefined,
                     componentsOptionNode: withNode ? componentsOptionNode : undefined,
+                    directivesOption: directivesOptionNode ? _getStartEnd(directivesOptionNode) : undefined,
                     nameOption: nameOptionNode ? _getStartEnd(nameOptionNode) : undefined,
                     inheritAttrsOption,
                 };

package/lib/parsers/scriptSetupRanges.js

@@ -296,7 +296,7 @@ function parseScriptSetupRanges(ts, ast, vueCompilerOptions) {
                     }
                 }
             }
-            else if (vueCompilerOptions.macros.templateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
+            else if (vueCompilerOptions.composibles.useTemplateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
                 const define = parseDefineFunction(node);
                 define.arg = _getStartEnd(node.arguments[0]);
                 let name;

package/lib/plugins/vue-sfc-template.js

@@ -5,7 +5,7 @@ const plugin = () => {
     return {
         version: 2.1,
         getEmbeddedCodes(_fileName, sfc) {
-            if (sfc.template) {
+            if (sfc.template?.lang === 'html') {
                 return [{
                         id: 'template',
                         lang: sfc.template.lang,
@@ -14,7 +14,7 @@ const plugin = () => {
             return [];
         },
         resolveEmbeddedCode(_fileName, sfc, embeddedFile) {
-            if (embeddedFile.id === 'template' && sfc.template) {
+            if (embeddedFile.id === 'template' && sfc.template?.lang === 'html') {
                 embeddedFile.content.push([
                     sfc.template.content,
                     sfc.template.name,

package/lib/plugins/vue-tsx.d.ts

@@ -8,6 +8,7 @@ export declare const tsCodegen: WeakMap<Sfc, {
             argsNode: import("typescript").ObjectLiteralExpression | undefined;
             componentsOption: import("../types").TextRange | undefined;
             componentsOptionNode: import("typescript").ObjectLiteralExpression | undefined;
+            directivesOption: import("../types").TextRange | undefined;
             nameOption: import("../types").TextRange | undefined;
             inheritAttrsOption: string | undefined;
         }) | undefined;
@@ -143,6 +144,7 @@ export declare const tsCodegen: WeakMap<Sfc, {
         inlayHints: import("../codegen/types").InlayHintInfo[];
         hasSlot: boolean;
         inheritedAttrVars: Set<unknown>;
+        templateRefs: Map<string, [string, number]>;
         singleRootNode: import("@vue/compiler-dom").ElementNode | undefined;
         accessExternalVariable(name: string, offset?: number): void;
         hasLocalVariable: (name: string) => boolean;