@vue/language-core 2.1.8 → 2.2.0

package/lib/codegen/template/index.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generateTemplate;
 exports.forEachElementNode = forEachElementNode;
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const shared_1 = require("../../utils/shared");
+const utils_1 = require("../utils");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 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");
 const styleScopedClasses_1 = require("./styleScopedClasses");
+const templateChild_1 = require("./templateChild");
 function* generateTemplate(options) {
     const ctx = (0, context_1.createTemplateCodegenContext)(options);
     if (options.slotsAssignName) {
@@ -18,89 +18,81 @@ function* generateTemplate(options) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
-    ctx.addLocalVariable('$el');
+    ctx.addLocalVariable((0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target));
+    ctx.addLocalVariable('$attrs');
     ctx.addLocalVariable('$refs');
-    yield* generatePreResolveComponents(options);
+    ctx.addLocalVariable('$el');
     if (options.template.ast) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined, undefined, undefined);
-    }
-    yield* (0, styleScopedClasses_1.generateStyleScopedClasses)(ctx);
-    if (!options.hasDefineSlots) {
-        yield `var __VLS_slots!:`;
-        yield* generateSlotsType(options, ctx);
-        yield common_1.endOfLine;
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
     }
-    yield* ctx.generateAutoImportCompletion();
+    yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
+    yield* generateSlots(options, ctx);
     yield* generateInheritedAttrs(ctx);
     yield* generateRefs(ctx);
     yield* generateRootEl(ctx);
+    yield* ctx.generateAutoImportCompletion();
     return ctx;
 }
-function* generateSlotsType(options, ctx) {
-    for (const { expVar, varName } of ctx.dynamicSlots) {
-        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) {
-        ctx.hasSlot = true;
-        if (slot.name && slot.loc !== undefined) {
-            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+function* generateSlots(options, ctx) {
+    if (!options.hasDefineSlots) {
+        yield `var __VLS_slots!: `;
+        for (const { expVar, varName } of ctx.dynamicSlots) {
+            ctx.hasSlot = true;
+            yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${utils_1.newLine}`;
         }
-        else {
-            yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+        yield `{${utils_1.newLine}`;
+        for (const slot of ctx.slots) {
+            ctx.hasSlot = true;
+            if (slot.name && slot.loc !== undefined) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+            }
+            else {
+                yield* (0, utils_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+            }
+            yield `?(_: typeof ${slot.varName}): any,${utils_1.newLine}`;
         }
-        yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
+        yield `}${utils_1.endOfLine}`;
     }
-    yield `}`;
+    const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
+    yield `var ${name}!: typeof ${options.slotsAssignName ?? '__VLS_slots'}${utils_1.endOfLine}`;
 }
 function* generateInheritedAttrs(ctx) {
-    yield 'var __VLS_inheritedAttrs!: {}';
+    yield 'let __VLS_inheritedAttrs!: {}';
     for (const varName of ctx.inheritedAttrVars) {
         yield ` & typeof ${varName}`;
     }
-    yield common_1.endOfLine;
+    yield utils_1.endOfLine;
+    yield `var $attrs!: Partial<typeof __VLS_inheritedAttrs> & Record<string, unknown>${utils_1.endOfLine}`;
+    if (ctx.bindingAttrLocs.length) {
+        yield `[`;
+        for (const loc of ctx.bindingAttrLocs) {
+            yield [
+                loc.source,
+                'template',
+                loc.start.offset,
+                ctx.codeFeatures.all
+            ];
+            yield `,`;
+        }
+        yield `]${utils_1.endOfLine}`;
+    }
 }
 function* generateRefs(ctx) {
-    yield `const __VLS_refs = {${common_1.newLine}`;
+    yield `const __VLS_refs = {${utils_1.newLine}`;
     for (const [name, [varName, offset]] of ctx.templateRefs) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
-        yield `: ${varName},${common_1.newLine}`;
+        yield `: ${varName},${utils_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
+    yield `}${utils_1.endOfLine}`;
+    yield `var $refs!: typeof __VLS_refs${utils_1.endOfLine}`;
 }
 function* generateRootEl(ctx) {
     if (ctx.singleRootElType) {
-        yield `var $el!: ${ctx.singleRootElType}${common_1.endOfLine}`;
+        yield `var $el!: ${ctx.singleRootElType}${utils_1.endOfLine}`;
     }
     else {
-        yield `var $el!: any${common_1.endOfLine}`;
-    }
-}
-function* generatePreResolveComponents(options) {
-    yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
-    if (options.template.ast) {
-        const components = new Set();
-        for (const node of forEachElementNode(options.template.ast)) {
-            if (node.tagType === CompilerDOM.ElementTypes.COMPONENT
-                && node.tag.toLowerCase() !== 'component'
-                && !node.tag.includes('.') // namespace tag 
-            ) {
-                if (components.has(node.tag)) {
-                    continue;
-                }
-                components.add(node.tag);
-                yield common_1.newLine;
-                yield ` & __VLS_WithComponent<'${(0, element_1.getCanonicalComponentName)(node.tag)}', typeof __VLS_localComponents, `;
-                yield (0, element_1.getPossibleOriginalComponentNames)(node.tag, false)
-                    .map(name => `"${name}"`)
-                    .join(', ');
-                yield `>`;
-            }
-        }
+        yield `var $el!: any${utils_1.endOfLine}`;
     }
-    yield `>${common_1.endOfLine}`;
 }
 function* forEachElementNode(node) {
     if (node.type === CompilerDOM.NodeTypes.ROOT) {

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

@@ -1,6 +1,8 @@
 import type * as ts from 'typescript';
 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'), destructuredPropNames: Set<string> | undefined, templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, type?: 'errorMappingOnly' | 'startText' | 'endText']>;
+export declare function generateInterpolation(options: {
+    ts: typeof ts;
+    destructuredPropNames: Set<string> | undefined;
+    templateRefNames: Set<string> | undefined;
+}, ctx: TemplateCodegenContext, source: string, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, _code: string, start: number | undefined, astHolder?: any, prefix?: string, suffix?: string): Generator<Code>;

package/lib/codegen/template/interpolation.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateInterpolation = generateInterpolation;
-exports.forEachInterpolationSegment = forEachInterpolationSegment;
 const shared_1 = require("@vue/shared");
 const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
-const common_1 = require("../common");
-function* generateInterpolation(options, ctx, _code, astHolder, start, data, prefix, suffix) {
+const utils_1 = require("../utils");
+function* generateInterpolation(options, ctx, source, data, _code, start, astHolder = {}, prefix = '', suffix = '') {
     const code = prefix + _code + suffix;
-    const ast = (0, common_1.createTsAst)(options.ts, astHolder, code);
+    const ast = (0, utils_1.createTsAst)(options.ts, astHolder, code);
     for (let [section, offset, type] of forEachInterpolationSegment(options.ts, options.destructuredPropNames, options.templateRefNames, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
         if (offset === undefined) {
             yield section;
@@ -17,12 +16,12 @@ function* generateInterpolation(options, ctx, _code, astHolder, start, data, pre
             let addSuffix = '';
             const overLength = offset + section.length - _code.length;
             if (overLength > 0) {
-                addSuffix = section.substring(section.length - overLength);
-                section = section.substring(0, section.length - overLength);
+                addSuffix = section.slice(section.length - overLength);
+                section = section.slice(0, -overLength);
             }
             if (offset < 0) {
-                yield section.substring(0, -offset);
-                section = section.substring(-offset);
+                yield section.slice(0, -offset);
+                section = section.slice(-offset);
                 offset = 0;
             }
             const shouldSkip = section.length === 0 && (type === 'startText' || type === 'endText');
@@ -31,7 +30,7 @@ function* generateInterpolation(options, ctx, _code, astHolder, start, data, pre
                     && data) {
                     yield [
                         section,
-                        'template',
+                        source,
                         start + offset,
                         type === 'errorMappingOnly'
                             ? ctx.codeFeatures.verification
@@ -52,7 +51,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
         if (ctx.hasLocalVariable(text) ||
             // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
-            (0, shared_1.isGloballyWhitelisted)(text) ||
+            (0, shared_1.isGloballyAllowed)(text) ||
             text === 'require' ||
             text.startsWith('__VLS_')) {
             // localVarOffsets.push(localVar.getStart(ast));
@@ -78,28 +77,28 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
     ctxVars = ctxVars.sort((a, b) => a.offset - b.offset);
     if (ctxVars.length) {
         if (ctxVars[0].isShorthand) {
-            yield [code.substring(0, ctxVars[0].offset + ctxVars[0].text.length), 0];
+            yield [code.slice(0, ctxVars[0].offset + ctxVars[0].text.length), 0];
             yield [': ', undefined];
         }
         else if (ctxVars[0].offset > 0) {
-            yield [code.substring(0, ctxVars[0].offset), 0, 'startText'];
+            yield [code.slice(0, ctxVars[0].offset), 0, 'startText'];
         }
         for (let i = 0; i < ctxVars.length - 1; i++) {
             const curVar = ctxVars[i];
             const nextVar = ctxVars[i + 1];
             yield* generateVar(code, destructuredPropNames, 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 [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
                 yield [': ', undefined];
             }
             else {
-                yield [code.substring(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
+                yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
             }
         }
         const lastVar = ctxVars.at(-1);
         yield* generateVar(code, destructuredPropNames, templateRefNames, lastVar);
         if (lastVar.offset + lastVar.text.length < code.length) {
-            yield [code.substring(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
+            yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
         }
     }
     else {
@@ -114,14 +113,14 @@ function* generateVar(code, destructuredPropNames, templateRefNames, curVar, nex
     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 [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
         yield [`)`, undefined];
     }
     else {
         if (!isDestructuredProp) {
             yield [`__VLS_ctx.`, undefined];
         }
-        yield [code.substring(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
+        yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
     }
 }
 function walkIdentifiers(ts, node, ast, cb, ctx, blockVars = [], isRoot = true) {
@@ -135,7 +134,7 @@ function walkIdentifiers(ts, node, ast, cb, ctx, blockVars = [], isRoot = true)
         walkIdentifiers(ts, node.expression, ast, cb, ctx, blockVars, false);
     }
     else if (ts.isVariableDeclaration(node)) {
-        (0, common_1.collectVars)(ts, node.name, ast, blockVars);
+        (0, utils_1.collectVars)(ts, node.name, ast, blockVars);
         for (const varName of blockVars) {
             ctx.addLocalVariable(varName);
         }
@@ -196,7 +195,7 @@ function walkIdentifiers(ts, node, ast, cb, ctx, blockVars = [], isRoot = true)
 function processFunction(ts, node, ast, cb, ctx) {
     const functionArgs = [];
     for (const param of node.parameters) {
-        (0, common_1.collectVars)(ts, param.name, ast, functionArgs);
+        (0, utils_1.collectVars)(ts, param.name, ast, functionArgs);
         if (param.type) {
             walkIdentifiers(ts, param.type, ast, cb, ctx);
         }

package/lib/codegen/template/objectProperty.js

@@ -2,29 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateObjectProperty = generateObjectProperty;
 const shared_1 = require("@vue/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generateObjectProperty(options, ctx, code, offset, features, astHolder, shouldCamelize = false, shouldBeConstant = false) {
     if (code.startsWith('[') && code.endsWith(']') && astHolder) {
         if (shouldBeConstant) {
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, code.slice(1, -1), astHolder, offset + 1, features, `[__VLS_tryAsConstant(`, `)]`);
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code.slice(1, -1), offset + 1, astHolder, `[__VLS_tryAsConstant(`, `)]`);
         }
         else {
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code, offset, astHolder);
         }
     }
     else if (shouldCamelize) {
-        if (common_1.variableNameRegex.test((0, shared_1.camelize)(code))) {
+        if (utils_1.variableNameRegex.test((0, shared_1.camelize)(code))) {
             yield* (0, camelized_1.generateCamelized)(code, offset, features);
         }
         else {
-            yield* (0, common_1.wrapWith)(offset, offset + code.length, features, `"`, ...(0, camelized_1.generateCamelized)(code, offset, common_1.combineLastMapping), `"`);
+            yield* (0, utils_1.wrapWith)(offset, offset + code.length, features, `'`, ...(0, camelized_1.generateCamelized)(code, offset, utils_1.combineLastMapping), `'`);
         }
     }
     else {
-        if (common_1.variableNameRegex.test(code)) {
+        if (utils_1.variableNameRegex.test(code)) {
             yield [code, 'template', offset, features];
         }
         else {

package/lib/codegen/template/propertyAccess.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generatePropertyAccess = generatePropertyAccess;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generatePropertyAccess(options, ctx, code, offset, features, astHolder) {
-    if (!options.compilerOptions.noPropertyAccessFromIndexSignature && common_1.variableNameRegex.test(code)) {
+    if (!options.compilerOptions.noPropertyAccessFromIndexSignature && utils_1.variableNameRegex.test(code)) {
         yield `.`;
         yield offset !== undefined && features
             ? [code, 'template', offset, features]
             : code;
     }
     else if (code.startsWith('[') && code.endsWith(']')) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code, offset, astHolder);
     }
     else {
         yield `[`;

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

@@ -2,4 +2,4 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateSlotOutlet(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.SlotOutletNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateSlotOutlet(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.SlotOutletNode): Generator<Code>;

package/lib/codegen/template/slotOutlet.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSlotOutlet = generateSlotOutlet;
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
 const elementChildren_1 = require("./elementChildren");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
-const inlayHints_1 = require("../inlayHints");
-function* generateSlotOutlet(options, ctx, node, currentComponent, componentCtxVar) {
-    const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+function* generateSlotOutlet(options, ctx, node) {
+    const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
     const varSlot = ctx.getInternalVariable();
     const nameProp = node.props.find(prop => {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
@@ -22,19 +22,19 @@ function* generateSlotOutlet(options, ctx, node, currentComponent, componentCtxV
     });
     if (options.hasDefineSlots) {
         yield `__VLS_normalizeSlot(`;
-        yield* (0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value
+        yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value
             ? `'${nameProp.value.content}'`
             : nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 ? nameProp.exp.content
                 : `('default' as const)`), `]`);
         yield `)?.(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${common_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true), `}`);
-        yield `)${common_1.endOfLine}`;
+        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.filter(prop => prop !== nameProp), true, true), `}`);
+        yield `)${utils_1.endOfLine}`;
     }
     else {
-        yield `var ${varSlot} = {${common_1.newLine}`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
-        yield `}${common_1.endOfLine}`;
+        yield `var ${varSlot} = {${utils_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.strictTemplates, true);
+        yield `}${utils_1.endOfLine}`;
         if (nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && nameProp.value) {
             ctx.slots.push({
@@ -53,8 +53,8 @@ function* generateSlotOutlet(options, ctx, node, currentComponent, componentCtxV
             }
             const slotExpVar = ctx.getInternalVariable();
             yield `var ${slotExpVar} = `;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, nameProp.exp.content, nameProp.exp, nameProp.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
-            yield ` as const${common_1.endOfLine}`;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset, nameProp.exp, '(', ')');
+            yield ` as const${utils_1.endOfLine}`;
             ctx.dynamicSlots.push({
                 expVar: slotExpVar,
                 varName: varSlot,
@@ -70,6 +70,6 @@ function* generateSlotOutlet(options, ctx, node, currentComponent, componentCtxV
         }
     }
     yield* ctx.generateAutoImportCompletion();
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
 }
 //# sourceMappingURL=slotOutlet.js.map

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

@@ -1,3 +1,3 @@
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
-export declare function generateStyleScopedClasses(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;
+export declare function generateStyleScopedClassReferences(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;

package/lib/codegen/template/styleScopedClasses.js

@@ -1,20 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStyleScopedClasses = generateStyleScopedClasses;
-const common_1 = require("../common");
-function* generateStyleScopedClasses(ctx, withDot = false) {
+exports.generateStyleScopedClassReferences = generateStyleScopedClassReferences;
+const utils_1 = require("../utils");
+function* generateStyleScopedClassReferences(ctx, withDot = false) {
+    if (!ctx.emptyClassOffsets.length && !ctx.scopedClasses.length) {
+        return;
+    }
+    yield `[`;
     for (const offset of ctx.emptyClassOffsets) {
-        yield `__VLS_styleScopedClasses['`;
+        yield `'`;
         yield [
             '',
             'template',
             offset,
             ctx.codeFeatures.additionalCompletion,
         ];
-        yield `']${common_1.endOfLine}`;
+        yield `', `;
     }
     for (const { source, className, offset } of ctx.scopedClasses) {
-        yield `__VLS_styleScopedClasses[`;
         yield [
             '',
             source,
@@ -31,9 +34,9 @@ function* generateStyleScopedClasses(ctx, withDot = false) {
             offset + className.length,
             ctx.codeFeatures.navigationWithoutRename,
         ];
-        yield `]${common_1.endOfLine}`;
+        yield `, `;
     }
-    yield common_1.newLine;
+    yield `] as (keyof __VLS_StyleScopedClasses)[]${utils_1.endOfLine}`;
     function* escapeString(source, className, offset, escapeTargets) {
         let count = 0;
         const currentEscapeTargets = [...escapeTargets];

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

@@ -2,6 +2,6 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, currentComponent: CompilerDOM.ElementNode | undefined, prevNode: CompilerDOM.TemplateChildNode | undefined, componentCtxVar: string | undefined, isVForChild?: boolean): Generator<Code>;
+export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, prevNode: CompilerDOM.TemplateChildNode | undefined, isVForChild?: boolean): Generator<Code>;
 export declare function getVForNode(node: CompilerDOM.ElementNode): CompilerDOM.ForNode | undefined;
 export declare function parseInterpolationNode(node: CompilerDOM.InterpolationNode, template: string): readonly [string, number];

package/lib/codegen/template/templateChild.js

@@ -4,7 +4,7 @@ exports.generateTemplateChild = generateTemplateChild;
 exports.getVForNode = getVForNode;
 exports.parseInterpolationNode = parseInterpolationNode;
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const element_1 = require("./element");
 const interpolation_1 = require("./interpolation");
 const slotOutlet_1 = require("./slotOutlet");
@@ -25,19 +25,29 @@ const transformContext = {
     },
     expressionPlugins: ['typescript'],
 };
-function* generateTemplateChild(options, ctx, node, currentComponent, prevNode, componentCtxVar, isVForChild = false) {
+function* generateTemplateChild(options, ctx, node, prevNode, isVForChild = false) {
     if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
         const commentText = prevNode.content.trim().split(' ')[0];
-        if (commentText.match(/^@vue-skip\b[\s\S]*/)) {
-            yield `// @vue-skip${common_1.newLine}`;
+        if (/^@vue-skip\b[\s\S]*/.test(commentText)) {
+            yield `// @vue-skip${utils_1.newLine}`;
             return;
         }
-        else if (commentText.match(/^@vue-ignore\b[\s\S]*/)) {
+        else if (/^@vue-ignore\b[\s\S]*/.test(commentText)) {
             yield* ctx.ignoreError();
         }
-        else if (commentText.match(/^@vue-expect-error\b[\s\S]*/)) {
+        else if (/^@vue-expect-error\b[\s\S]*/.test(commentText)) {
             yield* ctx.expectError(prevNode);
         }
+        else {
+            const match = prevNode.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
+            if (match) {
+                const { content } = match.groups ?? {};
+                ctx.lastGenericComment = {
+                    content,
+                    offset: prevNode.loc.start.offset + match[0].indexOf(content)
+                };
+            }
+        }
     }
     const shouldInheritRootNodeAttrs = options.inheritAttrs;
     const cur = node;
@@ -50,7 +60,7 @@ function* generateTemplateChild(options, ctx, node, currentComponent, prevNode,
             ctx.singleRootNode = node.children[0];
         }
         for (const childNode of node.children) {
-            yield* generateTemplateChild(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+            yield* generateTemplateChild(options, ctx, childNode, prev);
             prev = childNode;
         }
         yield* ctx.resetDirectiveComments('end of root');
@@ -59,49 +69,51 @@ function* generateTemplateChild(options, ctx, node, currentComponent, prevNode,
         const vForNode = getVForNode(node);
         const vIfNode = getVIfNode(node);
         if (vForNode) {
-            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode, currentComponent, componentCtxVar);
+            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode);
         }
         else if (vIfNode) {
-            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode, currentComponent, componentCtxVar);
+            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode);
         }
         else {
             if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
-                yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node, currentComponent, componentCtxVar);
+                yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node);
             }
             else if (node.tagType === CompilerDOM.ElementTypes.ELEMENT
                 || node.tagType === CompilerDOM.ElementTypes.TEMPLATE) {
-                yield* (0, element_1.generateElement)(options, ctx, node, currentComponent, componentCtxVar, isVForChild);
+                yield* (0, element_1.generateElement)(options, ctx, node, isVForChild);
             }
             else {
-                yield* (0, element_1.generateComponent)(options, ctx, node, currentComponent);
+                const { currentComponent } = ctx;
+                yield* (0, element_1.generateComponent)(options, ctx, node);
+                ctx.currentComponent = currentComponent;
             }
         }
     }
     else if (node.type === CompilerDOM.NodeTypes.TEXT_CALL) {
         // {{ var }}
-        yield* generateTemplateChild(options, ctx, node.content, currentComponent, undefined, componentCtxVar);
+        yield* generateTemplateChild(options, ctx, node.content, undefined);
     }
     else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
         // {{ ... }} {{ ... }}
         for (const childNode of node.children) {
             if (typeof childNode === 'object') {
-                yield* generateTemplateChild(options, ctx, childNode, currentComponent, undefined, componentCtxVar);
+                yield* generateTemplateChild(options, ctx, childNode, undefined);
             }
         }
     }
     else if (node.type === CompilerDOM.NodeTypes.INTERPOLATION) {
         // {{ ... }}
         const [content, start] = parseInterpolationNode(node, options.template.content);
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, content, node.content.loc, start, ctx.codeFeatures.all, `(`, `)${common_1.endOfLine}`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, content, start, node.content.loc, `(`, `)${utils_1.endOfLine}`);
         yield* ctx.resetDirectiveComments('end of INTERPOLATION');
     }
     else if (node.type === CompilerDOM.NodeTypes.IF) {
         // v-if / v-else-if / v-else
-        yield* (0, vIf_1.generateVIf)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, vIf_1.generateVIf)(options, ctx, node);
     }
     else if (node.type === CompilerDOM.NodeTypes.FOR) {
         // v-for
-        yield* (0, vFor_1.generateVFor)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, vFor_1.generateVFor)(options, ctx, node);
     }
     else if (node.type === CompilerDOM.NodeTypes.TEXT) {
         // not needed progress
@@ -152,11 +164,11 @@ function parseInterpolationNode(node, template) {
     let leftCharacter;
     let rightCharacter;
     // fix https://github.com/vuejs/language-tools/issues/1787
-    while ((leftCharacter = template.substring(start - 1, start)).trim() === '' && leftCharacter.length) {
+    while ((leftCharacter = template.slice(start - 1, start)).trim() === '' && leftCharacter.length) {
         start--;
         content = leftCharacter + content;
     }
-    while ((rightCharacter = template.substring(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
+    while ((rightCharacter = template.slice(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
         content = content + rightCharacter;
     }
     return [

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

@@ -2,7 +2,7 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateVFor(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ForNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateVFor(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ForNode): Generator<Code>;
 export declare function parseVForNode(node: CompilerDOM.ForNode): {
     leftExpressionRange: {
         start: number;