@vue/language-core 2.2.0 → 2.2.4

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): Generator<Code, boolean>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentFunctionalVar: string, componentVNodeVar: string, componentCtxVar: string): Generator<Code>;
 export declare function generateEventArg(ctx: TemplateCodegenContext, name: string, start: number, directive?: string): 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

@@ -9,8 +9,9 @@ const shared_1 = require("@vue/shared");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar) {
-    let usedComponentEventsVar = false;
+function* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+    let emitVar;
+    let eventsVar;
     let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -18,10 +19,14 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
             && !prop.arg.loc.source.startsWith('[')
             && !prop.arg.loc.source.endsWith(']')) {
-            usedComponentEventsVar = true;
-            if (!propsVar) {
+            ctx.currentComponent.used = true;
+            if (!emitVar) {
+                emitVar = ctx.getInternalVariable();
+                eventsVar = ctx.getInternalVariable();
                 propsVar = ctx.getInternalVariable();
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${utils_1.endOfLine}`;
+                yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${utils_1.endOfLine}`;
+                yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${utils_1.endOfLine}`;
+                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
             }
             let source = prop.arg.loc.source;
             let start = prop.arg.loc.start.offset;
@@ -40,7 +45,6 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             yield `}${utils_1.endOfLine}`;
         }
     }
-    return usedComponentEventsVar;
 }
 function* generateEventArg(ctx, name, start, directive = 'on') {
     const features = {
@@ -58,18 +62,18 @@ function* generateEventArg(ctx, name, start, directive = 'on') {
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        let prefix = '(';
-        let suffix = ')';
+        let prefix = `(`;
+        let suffix = `)`;
         let isFirstMapping = true;
         const ast = (0, utils_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
         const _isCompoundExpression = isCompoundExpression(options.ts, ast);
         if (_isCompoundExpression) {
             yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
-            prefix = '';
-            suffix = '';
+            prefix = ``;
+            suffix = ``;
             for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!(${blockCondition})) return${utils_1.endOfLine}`;
+                prefix += `if (!${blockCondition}) return${utils_1.endOfLine}`;
             }
         }
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {

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

@@ -1,5 +1,5 @@
 import * as CompilerDOM from '@vue/compiler-dom';
-import type { Code } from '../../types';
+import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export interface FailedPropExpression {
@@ -8,3 +8,4 @@ export interface FailedPropExpression {
     suffix: string;
 }
 export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, enableCodeFeatures: boolean, failedPropExps?: FailedPropExpression[]): Generator<Code>;
+export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined, features: VueCodeInformation, enableCodeFeatures?: boolean): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementProps = generateElementProps;
+exports.generatePropExp = generatePropExp;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const minimatch_1 = require("minimatch");
 const muggle_string_1 = require("muggle-string");
 const shared_2 = require("../../utils/shared");
+const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
@@ -38,12 +40,12 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                failedPropExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
-                failedPropExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
+                failedPropExps?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
+                failedPropExps?.push({ node: prop.exp, prefix: `() => {`, suffix: `}` });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
         }
     }
@@ -64,7 +66,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                    failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
                 }
                 continue;
             }
@@ -80,7 +82,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
                 ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, codeInfo, prop.loc.name_2 ??= {}, shouldCamelize)
-                : (0, utils_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), `)`);
+                : (0, utils_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, enableCodeFeatures));
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -91,7 +93,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 yield ` }`;
             }
             yield `,${utils_1.newLine}`;
-            if (prop.name === 'model' && prop.modifiers.length) {
+            if (isComponent && prop.name === 'model' && prop.modifiers.length) {
                 const propertyName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                     ? !prop.arg.isStatic
                         ? `[__VLS_tryAsConstant(\`$\{${prop.arg.content}\}Modifiers\`)]`
@@ -121,9 +123,9 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codes = (0, utils_1.wrapWith)(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 ??= {}, shouldCamelize), `: (`, ...(prop.value
+            const codes = (0, utils_1.wrapWith)(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 ??= {}, shouldCamelize), `: `, ...(prop.value
                 ? generateAttrValue(prop.value, ctx.codeFeatures.withoutNavigation)
-                : [`true`]), `)`);
+                : [`true`]));
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -145,7 +147,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 }
             }
             else {
-                const codes = (0, utils_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, false, enableCodeFeatures));
+                const codes = (0, utils_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures));
                 if (enableCodeFeatures) {
                     yield* codes;
                 }
@@ -157,7 +159,8 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures = true) {
+    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
     if (isShorthand && features.completion) {
         features = {
             ...features,
@@ -166,7 +169,7 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
     }
     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, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, `(`, `)`);
         }
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
@@ -220,28 +223,23 @@ function getShouldCamelize(options, prop, propName) {
         && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
 }
 function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
-    const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
-    return {
-        ...codeInfo,
-        navigation: codeInfo.navigation
-            ? {
-                resolveRenameNewName: shared_1.camelize,
-                resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
-            }
-            : false,
-        verification: strictPropsCheck
-            ? 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;
-                },
-            }
-    };
+    return ctx.resolveCodeFeatures({
+        ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
+        navigation: {
+            resolveRenameNewName: shared_1.camelize,
+            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
+        },
+        verification: strictPropsCheck || {
+            shouldReport(_source, code) {
+                // https://typescript.tv/errors/#ts2353
+                // https://typescript.tv/errors/#ts2561
+                if (String(code) === '2353' || String(code) === '2561') {
+                    return false;
+                }
+                return true;
+            },
+        },
+    });
 }
 function getModelPropName(node, vueCompilerOptions) {
     for (const modelName in vueCompilerOptions.experimentalModelPropName) {

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

@@ -16,6 +16,7 @@ export interface TemplateCodegenOptions {
     slotsAssignName?: string;
     propsAssignName?: string;
     inheritAttrs: boolean;
+    selfComponentName?: string;
 }
 export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, TemplateCodegenContext>;
 export declare function forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode>;

package/lib/codegen/template/index.js

@@ -5,7 +5,6 @@ exports.forEachElementNode = forEachElementNode;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("../../utils/shared");
 const utils_1 = require("../utils");
-const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const context_1 = require("./context");
 const objectProperty_1 = require("./objectProperty");
 const styleScopedClasses_1 = require("./styleScopedClasses");
@@ -18,54 +17,69 @@ function* generateTemplate(options) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
-    ctx.addLocalVariable((0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target));
-    ctx.addLocalVariable('$attrs');
-    ctx.addLocalVariable('$refs');
-    ctx.addLocalVariable('$el');
+    const slotsPropertyName = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
+    if (options.vueCompilerOptions.inferTemplateDollarSlots) {
+        ctx.dollarVars.add(slotsPropertyName);
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
+        ctx.dollarVars.add('$attrs');
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarRefs) {
+        ctx.dollarVars.add('$refs');
+    }
+    if (options.vueCompilerOptions.inferTemplateDollarEl) {
+        ctx.dollarVars.add('$el');
+    }
     if (options.template.ast) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
     }
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
-    yield* generateSlots(options, ctx);
-    yield* generateInheritedAttrs(ctx);
-    yield* generateRefs(ctx);
-    yield* generateRootEl(ctx);
     yield* ctx.generateAutoImportCompletion();
+    yield* ctx.generateHoistVariables();
+    const speicalTypes = [
+        [slotsPropertyName, yield* generateSlots(options, ctx)],
+        ['$attrs', yield* generateInheritedAttrs(options, ctx)],
+        ['$refs', yield* generateTemplateRefs(options, ctx)],
+        ['$el', yield* generateRootEl(ctx)]
+    ];
+    yield `var __VLS_dollars!: {${utils_1.newLine}`;
+    for (const [name, type] of speicalTypes) {
+        yield `${name}: ${type}${utils_1.endOfLine}`;
+    }
+    yield `} & { [K in keyof import('${options.vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }${utils_1.endOfLine}`;
     return ctx;
 }
 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}`;
+        const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
+        yield `type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.${name}>`;
+        for (const { expVar, propsVar } of ctx.dynamicSlots) {
+            yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
         }
-        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);
+            yield `${utils_1.newLine}& { `;
+            if (slot.name && slot.offset !== undefined) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, 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 `?: (props: typeof ${slot.propsVar}) => any }`;
         }
-        yield `}${utils_1.endOfLine}`;
+        yield `>${utils_1.endOfLine}`;
     }
-    const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
-    yield `var ${name}!: typeof ${options.slotsAssignName ?? '__VLS_slots'}${utils_1.endOfLine}`;
+    return `__VLS_Slots`;
 }
-function* generateInheritedAttrs(ctx) {
-    yield 'let __VLS_inheritedAttrs!: {}';
+function* generateInheritedAttrs(options, ctx) {
+    yield `type __VLS_InheritedAttrs = {}`;
     for (const varName of ctx.inheritedAttrVars) {
         yield ` & typeof ${varName}`;
     }
     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 `__VLS_dollars.`;
             yield [
                 loc.source,
                 'template',
@@ -76,23 +90,29 @@ function* generateInheritedAttrs(ctx) {
         }
         yield `]${utils_1.endOfLine}`;
     }
+    return `import('${options.vueCompilerOptions.lib}').ComponentPublicInstance['$attrs'] & Partial<__VLS_InheritedAttrs>`;
 }
-function* generateRefs(ctx) {
-    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},${utils_1.newLine}`;
+function* generateTemplateRefs(options, ctx) {
+    yield `type __VLS_TemplateRefs = {${utils_1.newLine}`;
+    for (const [name, { typeExp, offset }] of ctx.templateRefs) {
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigationAndCompletion);
+        yield `: ${typeExp},${utils_1.newLine}`;
     }
     yield `}${utils_1.endOfLine}`;
-    yield `var $refs!: typeof __VLS_refs${utils_1.endOfLine}`;
+    return `__VLS_TemplateRefs`;
 }
 function* generateRootEl(ctx) {
-    if (ctx.singleRootElType) {
-        yield `var $el!: ${ctx.singleRootElType}${utils_1.endOfLine}`;
+    yield `type __VLS_RootEl = `;
+    if (ctx.singleRootElTypes.length && !ctx.singleRootNodes.has(null)) {
+        for (const type of ctx.singleRootElTypes) {
+            yield `${utils_1.newLine}| ${type}`;
+        }
     }
     else {
-        yield `var $el!: any${utils_1.endOfLine}`;
+        yield `any`;
     }
+    yield utils_1.endOfLine;
+    return `__VLS_RootEl`;
 }
 function* forEachElementNode(node) {
     if (node.type === CompilerDOM.NodeTypes.ROOT) {

package/lib/codegen/template/interpolation.js

@@ -45,15 +45,16 @@ function* generateInterpolation(options, ctx, source, data, _code, start, astHol
         }
     }
 }
+;
 function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefNames, ctx, code, offset, ast) {
     let ctxVars = [];
     const varCb = (id, isShorthand) => {
         const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
-        if (ctx.hasLocalVariable(text) ||
+        if (ctx.hasLocalVariable(text)
             // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
-            (0, shared_1.isGloballyAllowed)(text) ||
-            text === 'require' ||
-            text.startsWith('__VLS_')) {
+            || (0, shared_1.isGloballyAllowed)(text)
+            || text === 'require'
+            || text.startsWith('__VLS_')) {
             // localVarOffsets.push(localVar.getStart(ast));
         }
         else {
@@ -86,7 +87,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         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);
+            yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, curVar);
             if (nextVar.isShorthand) {
                 yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
                 yield [': ', undefined];
@@ -96,7 +97,7 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
             }
         }
         const lastVar = ctxVars.at(-1);
-        yield* generateVar(code, destructuredPropNames, templateRefNames, lastVar);
+        yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, lastVar);
         if (lastVar.offset + lastVar.text.length < code.length) {
             yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
         }
@@ -105,10 +106,10 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         yield [code, 0];
     }
 }
-function* generateVar(code, destructuredPropNames, templateRefNames, curVar, nextVar = curVar) {
+function* generateVar(code, dollarVars, destructuredPropNames, templateRefNames, curVar) {
     // fix https://github.com/vuejs/language-tools/issues/1205
     // fix https://github.com/vuejs/language-tools/issues/1264
-    yield ['', nextVar.offset, 'errorMappingOnly'];
+    yield ['', curVar.offset, 'errorMappingOnly'];
     const isDestructuredProp = destructuredPropNames?.has(curVar.text) ?? false;
     const isTemplateRef = templateRefNames?.has(curVar.text) ?? false;
     if (isTemplateRef) {
@@ -117,7 +118,10 @@ function* generateVar(code, destructuredPropNames, templateRefNames, curVar, nex
         yield [`)`, undefined];
     }
     else {
-        if (!isDestructuredProp) {
+        if (dollarVars.has(curVar.text)) {
+            yield [`__VLS_dollars.`, undefined];
+        }
+        else if (!isDestructuredProp) {
             yield [`__VLS_ctx.`, undefined];
         }
         yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];

package/lib/codegen/template/slotOutlet.js

@@ -7,9 +7,11 @@ const utils_1 = require("../utils");
 const elementChildren_1 = require("./elementChildren");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
+const propertyAccess_1 = require("./propertyAccess");
 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 startTagEndOffset = startTagOffset + node.tag.length;
+    const propsVar = ctx.getInternalVariable();
     const nameProp = node.props.find(prop => {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
             return prop.name === 'name';
@@ -21,28 +23,49 @@ function* generateSlotOutlet(options, ctx, node) {
         }
     });
     if (options.hasDefineSlots) {
-        yield `__VLS_normalizeSlot(`;
-        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, 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 `__VLS_asFunctionalSlot(`;
+        if (nameProp) {
+            let codes;
+            if (nameProp.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value) {
+                let { source, start: { offset } } = nameProp.value.loc;
+                if (source.startsWith('"') || source.startsWith("'")) {
+                    source = source.slice(1, -1);
+                    offset++;
+                }
+                codes = (0, propertyAccess_1.generatePropertyAccess)(options, ctx, source, offset, ctx.codeFeatures.navigationAndVerification);
+            }
+            else if (nameProp.type === CompilerDOM.NodeTypes.DIRECTIVE
+                && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                codes = [
+                    `[`,
+                    ...(0, elementProps_1.generatePropExp)(options, ctx, nameProp, nameProp.exp, ctx.codeFeatures.all),
+                    `]`
+                ];
+            }
+            else {
+                codes = [`['default']`];
+            }
+            yield* (0, utils_1.wrapWith)(nameProp.loc.start.offset, nameProp.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}`, ...codes);
+        }
+        else {
+            yield* (0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, ctx.codeFeatures.verification, `'default'`), `]`);
+        }
+        yield `)(`;
+        yield* (0, utils_1.wrapWith)(startTagOffset, startTagEndOffset, 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} = {${utils_1.newLine}`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.strictTemplates, true);
+        yield `var ${propsVar} = {${utils_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.checkUnknownProps, true);
         yield `}${utils_1.endOfLine}`;
         if (nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && nameProp.value) {
             ctx.slots.push({
                 name: nameProp.value.content,
-                loc: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
+                offset: nameProp.loc.start.offset + nameProp.loc.source.indexOf(nameProp.value.content, nameProp.name.length),
                 tagRange: [startTagOffset, startTagOffset + node.tag.length],
-                varName: varSlot,
                 nodeLoc: node.loc,
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
         else if (nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -51,21 +74,21 @@ function* generateSlotOutlet(options, ctx, node) {
             if (isShortHand) {
                 ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(nameProp.exp.loc, 'name'));
             }
-            const slotExpVar = ctx.getInternalVariable();
-            yield `var ${slotExpVar} = `;
-            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}`;
+            const expVar = ctx.getInternalVariable();
+            yield `var ${expVar} = __VLS_tryAsConstant(`;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset, nameProp.exp);
+            yield `)${utils_1.endOfLine}`;
             ctx.dynamicSlots.push({
-                expVar: slotExpVar,
-                varName: varSlot,
+                expVar: ctx.getHoistVariable(expVar),
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
         else {
             ctx.slots.push({
                 name: 'default',
-                tagRange: [startTagOffset, startTagOffset + node.tag.length],
-                varName: varSlot,
+                tagRange: [startTagOffset, startTagEndOffset],
                 nodeLoc: node.loc,
+                propsVar: ctx.getHoistVariable(propsVar),
             });
         }
     }

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

@@ -1,3 +1,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 generateStyleScopedClassReferences(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;
+export declare function collectStyleScopedClassReferences(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): void;