@vue/language-core 2.0.15 → 2.0.17

package/lib/codegen/template/element.js

@@ -16,20 +16,22 @@ const templateChild_1 = require("./templateChild");
 const colonReg = /:/g;
 function* generateComponent(options, ctx, node, currentComponent, componentCtxVar) {
     const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+    const endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
+    const tagOffsets = endTagOffset !== undefined
+        ? [startTagOffset, endTagOffset]
+        : [startTagOffset];
     const propsFailedExps = [];
-    const var_originalComponent = ctx.getInternalVariable();
+    const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
+    const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
+    const var_originalComponent = matchImportName ?? ctx.getInternalVariable();
     const var_functionalComponent = ctx.getInternalVariable();
     const var_componentInstance = ctx.getInternalVariable();
+    const var_componentEmit = ctx.getInternalVariable();
     const var_componentEvents = ctx.getInternalVariable();
+    const var_defineComponentCtx = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
-    let endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
-    let tag = node.tag;
-    let tagOffsets = endTagOffset !== undefined
-        ? [startTagOffset, endTagOffset]
-        : [startTagOffset];
     let props = node.props;
     let dynamicTagInfo;
-    let defineComponentCtxVar;
     let usedComponentEventsVar = false;
     if (isComponentTag) {
         for (const prop of node.props) {
@@ -44,42 +46,59 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
             }
         }
     }
-    else if (tag.includes('.')) {
+    else if (node.tag.includes('.')) {
         // namespace tag
         dynamicTagInfo = {
-            exp: tag,
+            exp: node.tag,
             astHolder: node.loc,
             offset: startTagOffset,
         };
     }
-    if (dynamicTagInfo) {
+    if (matchImportName) {
+        // hover, renaming / find references support
+        yield `// @ts-ignore${common_1.newLine}`; // #2304
+        yield `[`;
+        for (const tagOffset of tagOffsets) {
+            if (var_originalComponent === node.tag) {
+                yield [
+                    var_originalComponent,
+                    'template',
+                    tagOffset,
+                    ctx.codeFeatures.withoutHighlightAndCompletion,
+                ];
+            }
+            else {
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+                    navigation: {
+                        resolveRenameNewName: camelizeComponentName,
+                        resolveRenameEditText: getTagRenameApply(node.tag),
+                    },
+                });
+            }
+            yield `,`;
+        }
+        yield `]${common_1.endOfLine}`;
+    }
+    else if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = `;
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
     }
     else if (!isComponentTag) {
         yield `const ${var_originalComponent} = ({} as `;
-        for (const componentName of getPossibleOriginalComponentNames(tag, true)) {
-            yield `'${componentName}' extends keyof typeof __VLS_ctx ? { '${getCanonicalComponentName(tag)}': typeof __VLS_ctx`;
+        for (const componentName of possibleOriginalNames) {
+            yield `'${componentName}' extends keyof typeof __VLS_ctx ? { '${getCanonicalComponentName(node.tag)}': typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, componentName);
             yield ` }: `;
         }
         yield `typeof __VLS_resolvedLocalAndGlobalComponents)`;
-        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, getCanonicalComponentName(tag), startTagOffset, ctx.codeFeatures.verification);
+        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, getCanonicalComponentName(node.tag), startTagOffset, ctx.codeFeatures.verification);
         yield common_1.endOfLine;
-    }
-    else {
-        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
-    }
-    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
-    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
-    yield `}))${common_1.endOfLine}`;
-    if (!dynamicTagInfo
-        && !isComponentTag) {
         // hover support
         for (const offset of tagOffsets) {
-            yield `({} as { ${getCanonicalComponentName(tag)}: typeof ${var_originalComponent} }).`;
-            yield* generateCanonicalComponentName(tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
+            yield `({} as { ${getCanonicalComponentName(node.tag)}: typeof ${var_originalComponent} }).`;
+            yield* generateCanonicalComponentName(node.tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
             yield common_1.endOfLine;
         }
         const camelizedTag = (0, shared_1.camelize)(node.tag);
@@ -114,10 +133,16 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
             yield `]${common_1.endOfLine}`;
         }
     }
+    else {
+        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
+    }
+    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
+    yield `}))${common_1.endOfLine}`;
     if (options.vueCompilerOptions.strictTemplates) {
         // with strictTemplates, generate once for props type-checking + instance type
         yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
+        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
         yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
     }
     else {
@@ -127,33 +152,31 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
         yield `}, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
         // and this for props type-checking
         yield `({} as (props: __VLS_FunctionalComponentProps<typeof ${var_originalComponent}, typeof ${var_componentInstance}> & Record<string, unknown>) => void)(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
+        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
         yield `)${common_1.endOfLine}`;
     }
-    defineComponentCtxVar = ctx.getInternalVariable();
-    componentCtxVar = defineComponentCtxVar;
+    componentCtxVar = var_defineComponentCtx;
     currentComponent = node;
     for (const failedExp of propsFailedExps) {
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.loc.source, failedExp.loc, failedExp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
     }
     yield* generateVScope(options, ctx, node, props);
-    if (componentCtxVar) {
-        ctx.usedComponentCtxVars.add(componentCtxVar);
-        yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents, () => usedComponentEventsVar = true);
-    }
+    ctx.usedComponentCtxVars.add(componentCtxVar);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents, () => usedComponentEventsVar = true);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir && componentCtxVar) {
+    if (slotDir) {
         yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
     }
     else {
         yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
     }
-    if (defineComponentCtxVar && ctx.usedComponentCtxVars.has(defineComponentCtxVar)) {
+    if (var_defineComponentCtx && ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
         yield `const ${componentCtxVar} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})!${common_1.endOfLine}`;
     }
     if (usedComponentEventsVar) {
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${componentCtxVar}.emit>${common_1.endOfLine}`;
+        yield `let ${var_componentEmit}!: typeof ${componentCtxVar}.emit${common_1.endOfLine}`;
+        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${common_1.endOfLine}`;
     }
 }
 exports.generateComponent = generateComponent;
@@ -207,9 +230,7 @@ function* generateVScope(options, ctx, node, props) {
     }
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-    if (options.shouldGenerateScopedClasses) {
-        yield* generateReferencesForScopedCssClasses(ctx, node);
-    }
+    yield* generateReferencesForScopedCssClasses(ctx, node);
     if (inScope) {
         yield `}${common_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
@@ -339,20 +360,31 @@ function* generateReferencesForScopedCssClasses(ctx, node) {
             && prop.name === 'class'
             && prop.value) {
             let startOffset = prop.value.loc.start.offset;
-            let tempClassName = '';
-            for (const char of (prop.value.loc.source + ' ')) {
-                if (char.trim() === '' || char === '"' || char === "'") {
-                    if (tempClassName !== '') {
-                        ctx.scopedClasses.push({ className: tempClassName, offset: startOffset });
-                        startOffset += tempClassName.length;
-                        tempClassName = '';
+            let content = prop.value.loc.source;
+            if ((content.startsWith(`'`) && content.endsWith(`'`))
+                || (content.startsWith(`"`) && content.endsWith(`"`))) {
+                startOffset++;
+                content = content.slice(1, -1);
+            }
+            if (content) {
+                let currentClassName = '';
+                for (const char of (content + ' ')) {
+                    if (char.trim() === '') {
+                        if (currentClassName !== '') {
+                            ctx.scopedClasses.push({ className: currentClassName, offset: startOffset });
+                            startOffset += currentClassName.length;
+                            currentClassName = '';
+                        }
+                        startOffset += char.length;
+                    }
+                    else {
+                        currentClassName += char;
                     }
-                    startOffset += char.length;
-                }
-                else {
-                    tempClassName += char;
                 }
             }
+            else {
+                ctx.emptyClassOffsets.push(startOffset);
+            }
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION

package/lib/codegen/template/elementChildren.js

@@ -13,7 +13,8 @@ function* generateElementChildren(options, ctx, node, currentComponent, componen
     }
     yield* ctx.generateAutoImportCompletion();
     // fix https://github.com/vuejs/language-tools/issues/932
-    if (!ctx.hasSlotElements.has(node)
+    if (componentCtxVar
+        && !ctx.hasSlotElements.has(node)
         && node.children.length
         && node.tagType !== CompilerDOM.ElementTypes.ELEMENT
         && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {

package/lib/codegen/template/elementDirectives.js

@@ -16,7 +16,7 @@ function* generateElementDirectives(options, ctx, node) {
             && prop.name !== 'bind'
             && prop.name !== 'scope'
             && prop.name !== 'data') {
-            ctx.accessGlobalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
+            ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
             if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.isStatic) {
                 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;

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

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, eventsVar: string, used: () => void): Generator<Code>;
-export declare function generateEventArg(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, access: boolean): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, emitVar: string, eventsVar: string, used: () => void): Generator<Code>;
+export declare function generateEventArg(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, access: boolean, enableHover: boolean): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function isCompoundExpression(ts: typeof import('typescript'), ast: ts.SourceFile): boolean;

package/lib/codegen/template/elementEvents.js

@@ -8,17 +8,19 @@ const common_1 = require("../common");
 const camelized_1 = require("./camelized");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar, used) {
+function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, emitVar, eventsVar, used) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on'
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             used();
             const eventVar = ctx.getInternalVariable();
-            yield `let ${eventVar} = { '${prop.arg.loc.source}': __VLS_pickEvent(`;
+            yield `let ${eventVar} = {${common_1.newLine}`;
+            yield `/**__VLS_emit,${emitVar},${prop.arg.loc.source}*/${common_1.newLine}`;
+            yield `'${prop.arg.loc.source}': __VLS_pickEvent(`;
             yield `${eventsVar}['${prop.arg.loc.source}'], `;
             yield `({} as __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>)`;
-            yield* generateEventArg(options, ctx, prop.arg, true);
+            yield* generateEventArg(options, ctx, prop.arg, true, false);
             yield `) }${common_1.endOfLine}`;
             yield `${eventVar} = { `;
             if (prop.arg.loc.source.startsWith('[') && prop.arg.loc.source.endsWith(']')) {
@@ -31,7 +33,8 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             }
             yield `: `;
             yield* generateEventExpression(options, ctx, prop);
-            yield ` }${common_1.endOfLine}`;
+            yield common_1.newLine;
+            yield `}${common_1.endOfLine}`;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on'
@@ -60,7 +63,13 @@ const eventArgFeatures = {
         },
     },
 };
-function* generateEventArg(options, ctx, arg, access) {
+function* generateEventArg(options, ctx, arg, access, enableHover) {
+    const features = enableHover
+        ? {
+            ...ctx.codeFeatures.withoutHighlightAndCompletion,
+            ...eventArgFeatures,
+        }
+        : eventArgFeatures;
     if (arg.loc.source.startsWith('[') && arg.loc.source.endsWith(']')) {
         yield `[`;
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.loc.source.slice(1, -1), arg.loc, arg.loc.start.offset + 1, ctx.codeFeatures.all, '', '');
@@ -70,7 +79,7 @@ function* generateEventArg(options, ctx, arg, access) {
         if (access) {
             yield `.`;
         }
-        yield ['', 'template', arg.loc.start.offset, eventArgFeatures];
+        yield ['', 'template', arg.loc.start.offset, features];
         yield `on`;
         yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping);
     }
@@ -78,7 +87,7 @@ function* generateEventArg(options, ctx, arg, access) {
         if (access) {
             yield `[`;
         }
-        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, eventArgFeatures, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
+        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, features, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
         if (access) {
             yield `]`;
         }

package/lib/codegen/template/elementProps.js

@@ -24,7 +24,23 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
         styleAttrNum++;
         classAttrNum++;
     }
-    if (!isIntrinsicElement) {
+    if (isIntrinsicElement) {
+        for (const prop of props) {
+            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && prop.name === 'on') {
+                if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                    yield* (0, elementEvents_1.generateEventArg)(options, ctx, prop.arg, false, true);
+                    yield `: `;
+                    yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
+                    yield `,${common_1.newLine}`;
+                }
+                else if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                    propsFailedExps?.push(prop.exp);
+                }
+            }
+        }
+    }
+    else {
         let generatedEvent = false;
         for (const prop of props) {
             if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -44,18 +60,6 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             yield `}, `;
         }
     }
-    else {
-        for (const prop of props) {
-            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-                && prop.name === 'on'
-                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                yield* (0, elementEvents_1.generateEventArg)(options, ctx, prop.arg, false);
-                yield `: `;
-                yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
-                yield `,${common_1.newLine}`;
-            }
-        }
-    }
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && (prop.name === 'bind' || prop.name === 'model')
@@ -172,7 +176,7 @@ function* genereatePropExp(options, ctx, exp, features, isShorthand, inlayHints)
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
             if (common_1.variableNameRegex.test(propVariableName)) {
                 if (!ctx.hasLocalVariable(propVariableName)) {
-                    ctx.accessGlobalVariable(propVariableName, exp.loc.start.offset);
+                    ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
                     yield `__VLS_ctx.`;
                 }
                 yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);

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

@@ -1,60 +1,18 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
+import { TemplateCodegenContext } from './context';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
     compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
-    shouldGenerateScopedClasses?: boolean;
-    stylesScopedClasses: Set<string>;
+    scriptSetupBindingNames: Set<string>;
+    scriptSetupImportComponentNames: Set<string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;
     propsAssignName?: string;
 }
-export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, {
-    ctx: {
-        slots: {
-            name: string;
-            loc?: number | undefined;
-            tagRange: [number, number];
-            varName: string;
-            nodeLoc: any;
-        }[];
-        dynamicSlots: {
-            expVar: string;
-            varName: string;
-        }[];
-        codeFeatures: {
-            all: import("../../types").VueCodeInformation;
-            verification: import("../../types").VueCodeInformation;
-            completion: import("../../types").VueCodeInformation;
-            additionalCompletion: import("../../types").VueCodeInformation;
-            navigation: import("../../types").VueCodeInformation;
-            navigationAndCompletion: import("../../types").VueCodeInformation;
-            withoutHighlight: import("../../types").VueCodeInformation;
-            withoutHighlightAndCompletion: import("../../types").VueCodeInformation;
-            withoutHighlightAndCompletionAndNavigation: import("../../types").VueCodeInformation;
-        };
-        accessGlobalVariables: Map<string, Set<number>>;
-        hasSlotElements: Set<CompilerDOM.ElementNode>;
-        blockConditions: string[];
-        usedComponentCtxVars: Set<string>;
-        scopedClasses: {
-            className: string;
-            offset: number;
-        }[];
-        accessGlobalVariable(name: string, offset?: number | undefined): void;
-        hasLocalVariable: (name: string) => boolean;
-        addLocalVariable: (name: string) => void;
-        removeLocalVariable: (name: string) => void;
-        getInternalVariable: () => string;
-        ignoreError: () => Generator<Code, any, unknown>;
-        expectError: (prevNode: CompilerDOM.CommentNode) => Generator<Code, any, unknown>;
-        resetDirectiveComments: (endStr: string) => Generator<Code, any, unknown>;
-        generateAutoImportCompletion: () => Generator<Code, any, unknown>;
-    };
-    hasSlot: boolean;
-}, unknown>;
+export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, TemplateCodegenContext>;
 export declare function forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode>;
 export declare function isFragment(node: CompilerDOM.IfNode | CompilerDOM.ForNode): boolean | undefined;

package/lib/codegen/template/index.js

@@ -6,11 +6,9 @@ const common_1 = require("../common");
 const context_1 = require("./context");
 const element_1 = require("./element");
 const objectProperty_1 = require("./objectProperty");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 const templateChild_1 = require("./templateChild");
 function* generateTemplate(options) {
-    const ctx = (0, context_1.createTemplateCodegenContext)();
-    let hasSlot = false;
+    const ctx = (0, context_1.createTemplateCodegenContext)(options.scriptSetupBindingNames);
     if (options.slotsAssignName) {
         ctx.addLocalVariable(options.slotsAssignName);
     }
@@ -28,29 +26,20 @@ function* generateTemplate(options) {
         yield common_1.endOfLine;
     }
     yield* ctx.generateAutoImportCompletion();
-    return {
-        ctx,
-        hasSlot,
-    };
+    return ctx;
     function* generateSlotsType() {
         for (const { expVar, varName } of ctx.dynamicSlots) {
-            hasSlot = true;
+            ctx.hasSlot = true;
             yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${common_1.newLine}`;
         }
         yield `{${common_1.newLine}`;
         for (const slot of ctx.slots) {
-            hasSlot = true;
+            ctx.hasSlot = true;
             if (slot.name && slot.loc !== undefined) {
-                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    __referencesCodeLens: true,
-                }, slot.nodeLoc);
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
             }
             else {
-                yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    __referencesCodeLens: true,
-                }, `default`);
+                yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
             }
             yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
         }
@@ -58,12 +47,38 @@ function* generateTemplate(options) {
     }
     function* generateStyleScopedClasses() {
         yield `if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {${common_1.newLine}`;
+        for (const offset of ctx.emptyClassOffsets) {
+            yield `__VLS_styleScopedClasses['`;
+            yield [
+                '',
+                'template',
+                offset,
+                ctx.codeFeatures.additionalCompletion,
+            ];
+            yield `']${common_1.endOfLine}`;
+        }
         for (const { className, offset } of ctx.scopedClasses) {
             yield `__VLS_styleScopedClasses[`;
-            yield* (0, stringLiteralKey_1.generateStringLiteralKey)(className, offset, {
-                ...ctx.codeFeatures.navigationAndCompletion,
-                __displayWithLink: options.stylesScopedClasses.has(className),
-            });
+            yield [
+                '',
+                'template',
+                offset,
+                ctx.codeFeatures.navigationWithoutRename,
+            ];
+            yield `'`;
+            yield [
+                className,
+                'template',
+                offset,
+                ctx.codeFeatures.navigationAndAdditionalCompletion,
+            ];
+            yield `'`;
+            yield [
+                '',
+                'template',
+                offset + className.length,
+                ctx.codeFeatures.navigationWithoutRename,
+            ];
             yield `]${common_1.endOfLine}`;
         }
         yield `}${common_1.newLine}`;

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

@@ -1,6 +1,6 @@
 import type * as ts from 'typescript';
-import type { Code, VueCodeInformation, VueCompilerOptions } from '../../types';
+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 | (() => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
-export declare function forEachInterpolationSegment(ts: typeof import('typescript'), vueOptions: VueCompilerOptions, 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'), ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, isJustForErrorMapping?: boolean]>;

package/lib/codegen/template/interpolation.js

@@ -8,7 +8,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, options.vueCompilerOptions, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
+    for (let [section, offset, onlyError] of forEachInterpolationSegment(options.ts, 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
     }
 }
 exports.generateInterpolation = generateInterpolation;
-function* forEachInterpolationSegment(ts, vueOptions, ctx, code, offset, ast) {
+function* forEachInterpolationSegment(ts, ctx, code, offset, ast) {
     let ctxVars = [];
     const varCb = (id, isShorthand) => {
         const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
@@ -66,10 +66,10 @@ function* forEachInterpolationSegment(ts, vueOptions, ctx, code, offset, ast) {
                 offset: (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start,
             });
             if (offset !== undefined) {
-                ctx.accessGlobalVariable(text, offset + (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start);
+                ctx.accessExternalVariable(text, offset + (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start);
             }
             else {
-                ctx.accessGlobalVariable(text);
+                ctx.accessExternalVariable(text);
             }
         }
     };
@@ -87,52 +87,18 @@ function* forEachInterpolationSegment(ts, vueOptions, ctx, code, offset, ast) {
             // fix https://github.com/vuejs/language-tools/issues/1205
             // fix https://github.com/vuejs/language-tools/issues/1264
             yield ['', ctxVars[i + 1].offset, true];
-            if (vueOptions.experimentalUseElementAccessInTemplate) {
-                const varStart = ctxVars[i].offset;
-                const varEnd = ctxVars[i].offset + ctxVars[i].text.length;
-                yield ['__VLS_ctx[', undefined];
-                yield ['', varStart, true];
-                yield ["'", undefined];
-                yield [code.substring(varStart, varEnd), varStart];
-                yield ["'", undefined];
-                yield ['', varEnd, true];
-                yield [']', undefined];
-                if (ctxVars[i + 1].isShorthand) {
-                    yield [code.substring(varEnd, ctxVars[i + 1].offset + ctxVars[i + 1].text.length), varEnd];
-                    yield [': ', undefined];
-                }
-                else {
-                    yield [code.substring(varEnd, ctxVars[i + 1].offset), varEnd];
-                }
+            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];
+                yield [': ', undefined];
             }
             else {
-                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];
-                    yield [': ', undefined];
-                }
-                else {
-                    yield [code.substring(ctxVars[i].offset, ctxVars[i + 1].offset), ctxVars[i].offset];
-                }
+                yield [code.substring(ctxVars[i].offset, ctxVars[i + 1].offset), ctxVars[i].offset];
             }
         }
-        if (vueOptions.experimentalUseElementAccessInTemplate) {
-            const varStart = ctxVars[ctxVars.length - 1].offset;
-            const varEnd = ctxVars[ctxVars.length - 1].offset + ctxVars[ctxVars.length - 1].text.length;
-            yield ['__VLS_ctx[', undefined];
-            yield ['', varStart, true];
-            yield ["'", undefined];
-            yield [code.substring(varStart, varEnd), varStart];
-            yield ["'", undefined];
-            yield ['', varEnd, true];
-            yield [']', undefined];
-            yield [code.substring(varEnd), varEnd];
-        }
-        else {
-            yield ['', ctxVars[ctxVars.length - 1].offset, true];
-            yield ['__VLS_ctx.', undefined];
-            yield [code.substring(ctxVars[ctxVars.length - 1].offset), ctxVars[ctxVars.length - 1].offset];
-        }
+        yield ['', ctxVars[ctxVars.length - 1].offset, true];
+        yield ['__VLS_ctx.', undefined];
+        yield [code.substring(ctxVars[ctxVars.length - 1].offset), ctxVars[ctxVars.length - 1].offset];
     }
     else {
         yield [code, 0];