@vue/language-core 2.2.0 → 2.2.2

package/lib/codegen/template/elementDirectives.js

@@ -5,11 +5,20 @@ exports.generateModifiers = generateModifiers;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const shared_2 = require("../../utils/shared");
+const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
+const builtInDirectives = new Set([
+    'cloak',
+    'html',
+    'memo',
+    'once',
+    'show',
+    'text',
+]);
 function* generateElementDirectives(options, ctx, node) {
     for (const prop of node.props) {
         if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
@@ -22,24 +31,22 @@ function* generateElementDirectives(options, ctx, node) {
             continue;
         }
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
         yield utils_1.endOfLine;
     }
 }
-function* generateIdentifier(ctx, prop) {
+function* generateIdentifier(options, ctx, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, {
-        ...ctx.codeFeatures.all,
-        verification: false,
-        completion: {
-            // fix https://github.com/vuejs/language-tools/issues/1905
-            isAdditional: true,
-        },
+    yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, ctx.resolveCodeFeatures({
+        ...codeFeatures_1.codeFeatures.withoutHighlight,
+        // fix https://github.com/vuejs/language-tools/issues/1905
+        ...codeFeatures_1.codeFeatures.additionalCompletion,
+        verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
         navigation: {
             resolveRenameNewName: shared_1.camelize,
             resolveRenameEditText: getPropRenameApply(prop.name),
         },
-    }));
+    })));
 }
 function* generateArg(options, ctx, prop) {
     const { arg } = prop;
@@ -67,7 +74,7 @@ function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
     yield* (0, utils_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
     yield `: { `;
     for (const mod of modifiers) {
-        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutNavigation);
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlightAndNavigation);
         yield `: true, `;
     }
     yield `}, `;

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");
@@ -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\`)]`
@@ -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) {
+    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
     if (isShorthand && features.completion) {
         features = {
             ...features,
@@ -220,28 +223,21 @@ 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) {
+                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,62 @@ 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);
+    ctx.specialVars.add(slotsPropertyName);
+    ctx.specialVars.add('$attrs');
+    ctx.specialVars.add('$refs');
+    ctx.specialVars.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);
+    const speicalTypes = [
+        [slotsPropertyName, yield* generateSlots(options, ctx)],
+        ['$attrs', yield* generateInheritedAttrs(options, ctx)],
+        ['$refs', yield* generateTemplateRefs(options, ctx)],
+        ['$el', yield* generateRootEl(ctx)]
+    ];
+    yield `var __VLS_special!: {${utils_1.newLine}`;
+    for (const [name, type] of speicalTypes) {
+        yield `${name}: ${type}${utils_1.endOfLine}`;
+    }
+    yield `} & { [K in keyof typeof __VLS_ctx]: unknown }${utils_1.endOfLine}`;
     yield* ctx.generateAutoImportCompletion();
     return ctx;
 }
 function* generateSlots(options, ctx) {
     if (!options.hasDefineSlots) {
-        yield `var __VLS_slots!: `;
-        for (const { expVar, varName } of ctx.dynamicSlots) {
+        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) {
             ctx.hasSlot = true;
-            yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${utils_1.newLine}`;
+            yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
         }
-        yield `{${utils_1.newLine}`;
         for (const slot of ctx.slots) {
+            yield `${utils_1.newLine}& { `;
             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);
+            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_special.`;
             yield [
                 loc.source,
                 'template',
@@ -76,23 +83,22 @@ 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}`;
+function* generateTemplateRefs(options, ctx) {
+    yield `type __VLS_TemplateRefs = {${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}`;
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigationAndCompletion);
+        yield `: typeof ${varName},${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}`;
-    }
-    else {
-        yield `var $el!: any${utils_1.endOfLine}`;
-    }
+    yield `type __VLS_RootEl = `;
+    yield ctx.singleRootElType ?? `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.specialVars, 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.specialVars, 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, specialVars, 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 (specialVars.has(curVar.text)) {
+            yield [`__VLS_special.`, 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,10 @@ 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 propsVar = ctx.getInternalVariable();
     const nameProp = node.props.find(prop => {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
             return prop.name === 'name';
@@ -22,27 +23,48 @@ 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)`), `]`);
+        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, true),
+                    `]`
+                ];
+            }
+            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)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}['default']`);
+        }
         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 `)${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,
             });
         }
         else if (nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -51,21 +73,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,
+                propsVar,
             });
         }
         else {
             ctx.slots.push({
                 name: 'default',
                 tagRange: [startTagOffset, startTagOffset + node.tag.length],
-                varName: varSlot,
                 nodeLoc: node.loc,
+                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;

package/lib/codegen/template/styleScopedClasses.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateStyleScopedClassReferences = generateStyleScopedClassReferences;
+exports.collectStyleScopedClassReferences = collectStyleScopedClassReferences;
+const CompilerDOM = require("@vue/compiler-dom");
+const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const utils_1 = require("../utils");
 function* generateStyleScopedClassReferences(ctx, withDot = false) {
     if (!ctx.emptyClassOffsets.length && !ctx.scopedClasses.length) {
@@ -72,4 +75,142 @@ function* generateStyleScopedClassReferences(ctx, withDot = false) {
         }
     }
 }
+function collectStyleScopedClassReferences(options, ctx, node) {
+    for (const prop of node.props) {
+        if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
+            && prop.name === 'class'
+            && prop.value) {
+            if (options.template.lang === 'pug') {
+                const getClassOffset = Reflect.get(prop.value.loc.start, 'getClassOffset');
+                const content = prop.value.loc.source.slice(1, -1);
+                let startOffset = 1;
+                for (const className of content.split(' ')) {
+                    if (className) {
+                        ctx.scopedClasses.push({
+                            source: 'template',
+                            className,
+                            offset: getClassOffset(startOffset),
+                        });
+                    }
+                    startOffset += className.length + 1;
+                }
+            }
+            else {
+                let isWrapped = false;
+                const [content, startOffset] = (0, utils_1.normalizeAttributeValue)(prop.value);
+                if (content) {
+                    const classes = collectClasses(content, startOffset + (isWrapped ? 1 : 0));
+                    ctx.scopedClasses.push(...classes);
+                }
+                else {
+                    ctx.emptyClassOffsets.push(startOffset);
+                }
+            }
+        }
+        else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+            && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+            && prop.arg.content === 'class') {
+            const content = '`${' + prop.exp.content + '}`';
+            const startOffset = prop.exp.loc.start.offset - 3;
+            const { ts } = options;
+            const ast = ts.createSourceFile('', content, 99);
+            const literals = [];
+            ts.forEachChild(ast, node => {
+                if (!ts.isExpressionStatement(node) ||
+                    !isTemplateExpression(node.expression)) {
+                    return;
+                }
+                const expression = node.expression.templateSpans[0].expression;
+                if (ts.isStringLiteralLike(expression)) {
+                    literals.push(expression);
+                }
+                if (ts.isArrayLiteralExpression(expression)) {
+                    walkArrayLiteral(expression);
+                }
+                if (ts.isObjectLiteralExpression(expression)) {
+                    walkObjectLiteral(expression);
+                }
+            });
+            for (const literal of literals) {
+                if (literal.text) {
+                    const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
+                    ctx.scopedClasses.push(...classes);
+                }
+                else {
+                    ctx.emptyClassOffsets.push(literal.end - 1 + startOffset);
+                }
+            }
+            function walkArrayLiteral(node) {
+                const { elements } = node;
+                for (const element of elements) {
+                    if (ts.isStringLiteralLike(element)) {
+                        literals.push(element);
+                    }
+                    else if (ts.isObjectLiteralExpression(element)) {
+                        walkObjectLiteral(element);
+                    }
+                }
+            }
+            function walkObjectLiteral(node) {
+                const { properties } = node;
+                for (const property of properties) {
+                    if (ts.isPropertyAssignment(property)) {
+                        const { name } = property;
+                        if (ts.isIdentifier(name)) {
+                            walkIdentifier(name);
+                        }
+                        else if (ts.isStringLiteral(name)) {
+                            literals.push(name);
+                        }
+                        else if (ts.isComputedPropertyName(name)) {
+                            const { expression } = name;
+                            if (ts.isStringLiteralLike(expression)) {
+                                literals.push(expression);
+                            }
+                        }
+                    }
+                    else if (ts.isShorthandPropertyAssignment(property)) {
+                        walkIdentifier(property.name);
+                    }
+                }
+            }
+            function walkIdentifier(node) {
+                const text = (0, scriptSetupRanges_1.getNodeText)(ts, node, ast);
+                ctx.scopedClasses.push({
+                    source: 'template',
+                    className: text,
+                    offset: node.end - text.length + startOffset
+                });
+            }
+        }
+    }
+}
+function collectClasses(content, startOffset = 0) {
+    const classes = [];
+    let currentClassName = '';
+    let offset = 0;
+    for (const char of (content + ' ')) {
+        if (char.trim() === '') {
+            if (currentClassName !== '') {
+                classes.push({
+                    source: 'template',
+                    className: currentClassName,
+                    offset: offset + startOffset
+                });
+                offset += currentClassName.length;
+                currentClassName = '';
+            }
+            offset += char.length;
+        }
+        else {
+            currentClassName += char;
+        }
+    }
+    return classes;
+}
+// isTemplateExpression is missing in tsc
+function isTemplateExpression(node) {
+    return node.kind === 228;
+}
 //# sourceMappingURL=styleScopedClasses.js.map