@vue/language-core 3.1.4 → 3.1.5

package/lib/codegen/globalTypes.js

@@ -11,7 +11,6 @@ function getGlobalTypesFileName(options) {
 }
 function generateGlobalTypes(options) {
     const { lib, target, checkUnknownProps } = options;
-    const fnPropsType = `(T extends { $props: infer Props } ? Props : {})${checkUnknownProps ? '' : ' & Record<string, unknown>'}`;
     let text = `// @ts-nocheck\nexport {};\n`;
     if (target < 3.5) {
         text += `
@@ -22,6 +21,8 @@ function generateGlobalTypes(options) {
     }
     text += `
 ; declare global {
+	${checkUnknownProps ? '' : 'var __VLS_PROPS_FALLBACK: Record<string, unknown>;'}
+
 	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
 	const __VLS_unref: typeof import('${lib}').unref;
 	const __VLS_placeholder: any;
@@ -54,14 +55,14 @@ function generateGlobalTypes(options) {
 		? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
 		: T extends (props: infer P, ...args: any) => any ? P
 		: {};
-	type __VLS_FunctionalComponent<T> = (props: ${fnPropsType}, ctx?: any) => ${target >= 3.3
+	type __VLS_FunctionalComponent<T> = (props: (T extends { $props: infer Props } ? Props : {})${checkUnknownProps ? '' : ' & Record<string, unknown>'}, ctx?: any) => ${target >= 3.3
         ? `import('${lib}/jsx-runtime').JSX.Element`
         : `globalThis.JSX.Element`} & {
 		__ctx?: {
 			attrs?: any;
 			slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>;
 			emit?: T extends { $emit: infer Emit } ? Emit : {};
-			props?: ${fnPropsType};
+			props?: typeof props;
 			expose?: (exposed: T) => void;
 		};
 	};

package/lib/codegen/script/component.js

@@ -48,7 +48,7 @@ function* generateComponent(options, ctx, scriptSetup, scriptSetupRanges) {
     }
     if (options.vueCompilerOptions.target >= 3.5
         && options.vueCompilerOptions.inferComponentDollarEl
-        && options.templateCodegen?.singleRootElTypes.length) {
+        && options.templateCodegen?.singleRootElTypes.size) {
         yield `__typeEl: {} as __VLS_RootEl,${utils_1.newLine}`;
     }
     if (options.sfc.script && options.scriptRanges?.componentOptions?.args) {

package/lib/codegen/script/index.js

@@ -107,7 +107,7 @@ function* generateConstExport(options, block) {
         yield* (0, utils_1.generatePartiallyEnding)(options.sfc.script.name, options.scriptRanges?.exportDefault?.start ?? options.sfc.script.content.length, '#3632/script.vue');
     }
     yield `const `;
-    yield* (0, wrapWith_1.wrapWith)(0, block.content.length, block.name, codeFeatures_1.codeFeatures.doNotReportTs6133, `__VLS_export`);
+    yield* (0, wrapWith_1.wrapWith)(block.name, 0, block.content.length, codeFeatures_1.codeFeatures.doNotReportTs6133, `__VLS_export`);
     yield ` = `;
 }
 function* generateExportDefault(options) {

package/lib/codegen/script/scriptSetup.js

@@ -71,7 +71,7 @@ function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
                     ? `import('${options.vueCompilerOptions.lib}').VNodeProps`
                         + ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
                         + ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
-                    : `globalThis.JSX.IntrinsicAttributes`}${utils_1.endOfLine}`
+                    : `globalThis.JSX.IntrinsicAttributes`} & (typeof globalThis extends { __VLS_PROPS_FALLBACK: infer P } ? P : {})${utils_1.endOfLine}`
             + `	expose: (exposed: ${scriptSetupRanges.defineExpose
                 ? `import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<typeof __VLS_exposed>`
                 : `{}`}) => void${utils_1.endOfLine}`
@@ -174,7 +174,7 @@ function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, sy
                 ]
                 : [
                     ` as __VLS_StyleModules[`,
-                    ...(0, wrapWith_1.wrapWith)(exp.start, exp.end, scriptSetup.name, codeFeatures_1.codeFeatures.verification, `'$style'`),
+                    ...(0, wrapWith_1.wrapWith)(scriptSetup.name, exp.start, exp.end, codeFeatures_1.codeFeatures.verification, `'$style'`),
                     `])`,
                 ],
             callExp.end,

package/lib/codegen/script/src.js

@@ -22,7 +22,7 @@ function* generateSrc(src) {
         text = text + '.js';
     }
     yield `export * from `;
-    yield* (0, wrapWith_1.wrapWith)(src.offset, src.offset + src.text.length, 'main', {
+    yield* (0, wrapWith_1.wrapWith)('main', src.offset, src.offset + src.text.length, {
         ...codeFeatures_1.codeFeatures.all,
         ...text !== src.text ? codeFeatures_1.codeFeatures.navigationWithoutRename : {},
     }, `'`, [text.slice(0, src.text.length), 'main', src.offset, utils_1.combineLastMapping], text.slice(src.text.length), `'`);

package/lib/codegen/style/classProperty.js

@@ -6,7 +6,7 @@ const utils_1 = require("../utils");
 const wrapWith_1 = require("../utils/wrapWith");
 function* generateClassProperty(styleIndex, classNameWithDot, offset, propertyType) {
     yield `${utils_1.newLine} & { `;
-    yield* (0, wrapWith_1.wrapWith)(offset, offset + classNameWithDot.length, 'style_' + styleIndex, codeFeatures_1.codeFeatures.navigation, `'`, [
+    yield* (0, wrapWith_1.wrapWith)('style_' + styleIndex, offset, offset + classNameWithDot.length, codeFeatures_1.codeFeatures.navigation, `'`, [
         classNameWithDot.slice(1),
         'style_' + styleIndex,
         offset + 1,

package/lib/codegen/style/imports.js

@@ -10,7 +10,7 @@ function* generateStyleImports(style) {
     };
     if (typeof style.src === 'object') {
         yield `${utils_1.newLine} & typeof import(`;
-        yield* (0, wrapWith_1.wrapWith)(style.src.offset, style.src.offset + style.src.text.length, 'main', features, `'`, [style.src.text, 'main', style.src.offset, utils_1.combineLastMapping], `'`);
+        yield* (0, wrapWith_1.wrapWith)('main', style.src.offset, style.src.offset + style.src.text.length, features, `'`, [style.src.text, 'main', style.src.offset, utils_1.combineLastMapping], `'`);
         yield `).default`;
     }
     for (const { text, offset } of style.imports) {

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

@@ -143,10 +143,10 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodeg
         offset: number;
     }[]>;
     currentComponent: {
-        ctxVar: string;
-        used: boolean;
+        get ctxVar(): string;
+        get propsVar(): string;
     } | undefined;
-    singleRootElTypes: string[];
+    singleRootElTypes: Set<string>;
     singleRootNodes: Set<CompilerDOM.ElementNode | null>;
     addTemplateRef(name: string, typeExp: string, offset: number): void;
     accessExternalVariable(name: string, offset?: number): void;

package/lib/codegen/template/context.js

@@ -173,7 +173,7 @@ function createTemplateCodegenContext(options, templateAst) {
         inheritedAttrVars,
         templateRefs,
         currentComponent: undefined,
-        singleRootElTypes: [],
+        singleRootElTypes: new Set(),
         singleRootNodes: new Set(),
         addTemplateRef(name, typeExp, offset) {
             let refs = templateRefs.get(name);
@@ -308,7 +308,7 @@ function createTemplateCodegenContext(options, templateAst) {
             const data = stack.pop();
             commentBuffer.length = 0;
             if (data.expectError !== undefined) {
-                yield* (0, wrapWith_1.wrapWith)(data.expectError.node.loc.start.offset, data.expectError.node.loc.end.offset, {
+                yield* (0, wrapWith_1.wrapWith)('template', data.expectError.node.loc.start.offset, data.expectError.node.loc.end.offset, {
                     verification: {
                         // If no errors/warnings/diagnostics were reported within the region of code covered
                         // by the @vue-expect-error directive, then we should allow any `unused @ts-expect-error`

package/lib/codegen/template/element.js

@@ -4,6 +4,7 @@ exports.generateComponent = generateComponent;
 exports.generateElement = generateElement;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
+const muggle_string_1 = require("muggle-string");
 const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
@@ -28,10 +29,19 @@ function* generateComponent(options, ctx, node) {
     const componentFunctionalVar = ctx.getInternalVariable();
     const componentVNodeVar = ctx.getInternalVariable();
     const componentCtxVar = ctx.getInternalVariable();
+    const componentPropsVar = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
+    let isCtxVarUsed = false;
+    let isPropsVarUsed = false;
     ctx.currentComponent = {
-        ctxVar: componentCtxVar,
-        used: false,
+        get ctxVar() {
+            isCtxVarUsed = true;
+            return componentCtxVar;
+        },
+        get propsVar() {
+            isPropsVarUsed = true;
+            return componentPropsVar;
+        },
     };
     let props = node.props;
     let dynamicTagInfo;
@@ -132,19 +142,20 @@ function* generateComponent(options, ctx, node) {
             yield utils_1.endOfLine;
         }
     }
+    const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failedPropExps)];
     yield `// @ts-ignore${utils_1.newLine}`;
     yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
-    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, false);
+    yield* (0, muggle_string_1.toString)(propCodes);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
-    yield* (0, wrapWith_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, codeFeatures_1.codeFeatures.doNotReportTs6133, componentVNodeVar);
+    yield* (0, wrapWith_1.wrapWith)('template', node.loc.start.offset, node.loc.end.offset, codeFeatures_1.codeFeatures.doNotReportTs6133, componentVNodeVar);
     yield ` = ${componentFunctionalVar}`;
     yield* generateComponentGeneric(ctx);
     yield `(`;
-    yield* (0, wrapWith_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    yield* (0, wrapWith_1.wrapWith)('template', tagOffsets[0], tagOffsets[0] + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...propCodes, `}`);
     yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     const reference = yield* generateElementReference(options, ctx, node);
     const tag = (0, shared_2.hyphenateTag)(node.tag);
@@ -152,7 +163,7 @@ function* generateComponent(options, ctx, node) {
         && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
     if (reference || isRootNode) {
         const componentInstanceVar = ctx.getInternalVariable();
-        ctx.currentComponent.used = true;
+        isCtxVarUsed = true;
         yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
         if (ctx.inVFor) {
             yield `[]`;
@@ -163,21 +174,22 @@ function* generateComponent(options, ctx, node) {
             ctx.addTemplateRef(reference.name, typeExp, reference.offset);
         }
         if (isRootNode) {
-            ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
+            ctx.singleRootElTypes.add(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
         }
     }
     if (hasVBindAttrs(options, ctx, node)) {
-        const attrsVar = ctx.getInternalVariable();
-        ctx.currentComponent.used = true;
-        yield `var ${attrsVar}!: NonNullable<typeof ${componentCtxVar}['props']>${utils_1.endOfLine}`;
-        ctx.inheritedAttrVars.add(attrsVar);
+        ctx.inheritedAttrVars.add(componentPropsVar);
+        isPropsVarUsed = true;
     }
     (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
     yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
-    if (ctx.currentComponent.used) {
+    if (isCtxVarUsed) {
         yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
+    if (isPropsVarUsed) {
+        yield `var ${componentPropsVar}!: __VLS_FunctionalComponentProps<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+    }
 }
 function* generateElement(options, ctx, node) {
     const [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
@@ -189,7 +201,7 @@ function* generateElement(options, ctx, node) {
         yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
     }
     yield `)(`;
-    yield* (0, wrapWith_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    yield* (0, wrapWith_1.wrapWith)('template', startTagOffset, startTagOffset + node.tag.length, codeFeatures_1.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps), `}`);
     yield `)${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
@@ -202,7 +214,7 @@ function* generateElement(options, ctx, node) {
         ctx.addTemplateRef(reference.name, typeExp, reference.offset);
     }
     if (ctx.singleRootNodes.has(node)) {
-        ctx.singleRootElTypes.push(`__VLS_Elements['${node.tag}']`);
+        ctx.singleRootElTypes.add(`__VLS_Elements['${node.tag}']`);
     }
     if (hasVBindAttrs(options, ctx, node)) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsics.${node.tag}`);
@@ -248,7 +260,7 @@ function* generateCanonicalComponentName(tagText, offset, features) {
 function* generateComponentGeneric(ctx) {
     if (ctx.currentInfo.generic) {
         const { content, offset } = ctx.currentInfo.generic;
-        yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, codeFeatures_1.codeFeatures.verification, `<`, [
+        yield* (0, wrapWith_1.wrapWith)('template', offset, offset + content.length, codeFeatures_1.codeFeatures.verification, `<`, [
             content,
             'template',
             offset,
@@ -261,7 +273,8 @@ function* generateElementReference(options, ctx, node) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'ref'
             && prop.value) {
-            const [name, offset] = (0, utils_1.normalizeAttributeValue)(prop.value);
+            const name = prop.value.content;
+            const offset = (0, shared_2.getAttributeValueOffset)(prop.value);
             // navigation support for `const foo = ref()`
             yield `/** @type {typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, name, offset, codeFeatures_1.codeFeatures.navigation);

package/lib/codegen/template/elementDirectives.js

@@ -32,13 +32,13 @@ function* generateElementDirectives(options, ctx, node) {
         if (!builtInDirectives.has(prop.name)) {
             ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
         }
-        yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
         yield utils_1.endOfLine;
     }
 }
 function* generateIdentifier(options, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, codeFeatures_1.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, {
+    yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.start.offset + rawName.length, codeFeatures_1.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, {
         ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
         verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
     }));
@@ -49,7 +49,7 @@ function* generateArg(options, ctx, prop) {
         return;
     }
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, wrapWith_1.wrapWith)(startOffset, startOffset + arg.content.length, codeFeatures_1.codeFeatures.verification, `arg`);
+    yield* (0, wrapWith_1.wrapWith)('template', startOffset, startOffset + arg.content.length, codeFeatures_1.codeFeatures.verification, `arg`);
     yield `: `;
     if (arg.isStatic) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, codeFeatures_1.codeFeatures.all);
@@ -66,7 +66,7 @@ function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
     }
     const startOffset = modifiers[0].loc.start.offset - 1;
     const endOffset = modifiers.at(-1).loc.end.offset;
-    yield* (0, wrapWith_1.wrapWith)(startOffset, endOffset, codeFeatures_1.codeFeatures.verification, propertyName);
+    yield* (0, wrapWith_1.wrapWith)('template', startOffset, endOffset, codeFeatures_1.codeFeatures.verification, propertyName);
     yield `: { `;
     for (const mod of modifiers) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlight);
@@ -79,7 +79,7 @@ function* generateValue(options, ctx, prop) {
     if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, wrapWith_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `value`);
+    yield* (0, wrapWith_1.wrapWith)('template', exp.loc.start.offset, exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `value`);
     yield `: `;
     yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp);
 }

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

@@ -3,7 +3,7 @@ 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 generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string, componentFunctionalVar: string, componentVNodeVar: string, componentCtxVar: string): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string): Generator<Code>;
 export declare function generateEventArg(options: TemplateCodegenOptions, name: string, start: number, directive?: string, features?: VueCodeInformation): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function generateModelEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;

package/lib/codegen/template/elementEvents.js

@@ -12,9 +12,8 @@ const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const wrapWith_1 = require("../utils/wrapWith");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+function* generateElementEvents(options, ctx, node, componentOriginalVar) {
     let emitsVar;
-    let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && (prop.name === 'on'
@@ -22,12 +21,9 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar, compon
                 || options.vueCompilerOptions.strictVModel
                     && prop.name === 'model'
                     && (!prop.arg || prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))) {
-            ctx.currentComponent.used = true;
             if (!emitsVar) {
                 emitsVar = ctx.getInternalVariable();
-                propsVar = ctx.getInternalVariable();
-                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${componentCtxVar}.emit>${utils_1.endOfLine}`;
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${ctx.currentComponent.ctxVar}.emit>${utils_1.endOfLine}`;
             }
             let source = prop.arg?.loc.source ?? 'model-value';
             let start = prop.arg?.loc.start.offset;
@@ -46,7 +42,7 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar, compon
             const propName = (0, shared_1.camelize)(propPrefix + source);
             const emitName = emitPrefix + source;
             const camelizedEmitName = (0, shared_1.camelize)(emitName);
-            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
+            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${ctx.currentComponent.propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
             if (prop.name === 'on') {
                 yield `{ `;
                 yield* generateEventArg(options, source, start, emitPrefix.slice(0, -1), codeFeatures_1.codeFeatures.navigation);
@@ -83,7 +79,7 @@ function* generateEventArg(options, name, start, directive = 'on', features) {
         yield* (0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping);
     }
     else {
-        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
+        yield* (0, wrapWith_1.wrapWith)('template', start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {

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

@@ -7,5 +7,5 @@ export interface FailedPropExpression {
     prefix: string;
     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, enableCodeFeatures?: boolean): Generator<Code>;
+export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, failedPropExps?: FailedPropExpression[]): Generator<Code>;
+export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -4,7 +4,6 @@ exports.generateElementProps = generateElementProps;
 exports.generatePropExp = generatePropExp;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
-const muggle_string_1 = require("muggle-string");
 const picomatch_1 = require("picomatch");
 const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
@@ -17,7 +16,7 @@ const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-function* generateElementProps(options, ctx, node, props, strictPropsCheck, enableCodeFeatures, failedPropExps) {
+function* generateElementProps(options, ctx, node, props, strictPropsCheck, failedPropExps) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -81,15 +80,9 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codes = [...(0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(prop.arg
-                    ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, features, shouldCamelize)
-                    : (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...(0, wrapWith_1.wrapWith)(prop.arg?.loc.start.offset ?? prop.loc.start.offset, prop.arg?.loc.end.offset ?? prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures)))];
-            if (enableCodeFeatures) {
-                yield* codes;
-            }
-            else {
-                yield (0, muggle_string_1.toString)(codes);
-            }
+            yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(prop.arg
+                ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, features, shouldCamelize)
+                : (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...(0, wrapWith_1.wrapWith)('template', prop.arg?.loc.start.offset ?? prop.loc.start.offset, prop.arg?.loc.end.offset ?? prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...generatePropExp(options, ctx, prop, prop.exp)));
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -100,13 +93,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                         ? `[__VLS_tryAsConstant(\`\${${prop.arg.content}}Modifiers\`)]`
                         : (0, shared_1.camelize)(propName) + `Modifiers`
                     : `modelModifiers`;
-                const codes = [...(0, elementDirectives_1.generateModifiers)(options, ctx, prop, propertyName)];
-                if (enableCodeFeatures) {
-                    yield* codes;
-                }
-                else {
-                    yield (0, muggle_string_1.toString)(codes);
-                }
+                yield* (0, elementDirectives_1.generateModifiers)(options, ctx, prop, propertyName);
                 yield utils_1.newLine;
             }
         }
@@ -120,15 +107,9 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codes = [...(0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, features, shouldCamelize), `: `, ...(prop.value
-                    ? generateAttrValue(prop.value, codeFeatures_1.codeFeatures.withoutNavigation)
-                    : [`true`]))];
-            if (enableCodeFeatures) {
-                yield* codes;
-            }
-            else {
-                yield (0, muggle_string_1.toString)(codes);
-            }
+            yield* (0, wrapWith_1.wrapWith)('template', prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, features, shouldCamelize), `: `, ...(prop.value
+                ? generateAttrValue(prop.value, codeFeatures_1.codeFeatures.withoutNavigation)
+                : [`true`]));
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -138,74 +119,48 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
             if (prop.exp.loc.source === '$attrs') {
-                if (enableCodeFeatures) {
-                    ctx.bindingAttrLocs.push(prop.exp.loc);
-                }
+                ctx.bindingAttrLocs.push(prop.exp.loc);
             }
             else {
-                const codes = [...(0, wrapWith_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures))];
-                if (enableCodeFeatures) {
-                    yield* codes;
-                }
-                else {
-                    yield (0, muggle_string_1.toString)(codes);
-                }
+                yield* (0, wrapWith_1.wrapWith)('template', prop.exp.loc.start.offset, prop.exp.loc.end.offset, codeFeatures_1.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp));
                 yield `,${utils_1.newLine}`;
             }
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, enableCodeFeatures = true) {
-    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
-    const features = isShorthand
-        ? codeFeatures_1.codeFeatures.withoutHighlightAndCompletion
-        : codeFeatures_1.codeFeatures.all;
-    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, `(`, `)`);
-        }
-        else {
-            const propVariableName = (0, shared_1.camelize)(exp.loc.source);
-            if (utils_1.identifierRegex.test(propVariableName)) {
-                const isDestructuredProp = options.destructuredPropNames.has(propVariableName);
-                const isTemplateRef = options.templateRefNames.has(propVariableName);
-                const codes = (0, camelized_1.generateCamelized)(exp.loc.source, 'template', exp.loc.start.offset, features);
-                if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
-                    yield* codes;
-                }
-                else {
-                    ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-                    if (isTemplateRef) {
-                        yield `__VLS_unref(`;
-                        yield* codes;
-                        yield `)`;
-                    }
-                    else {
-                        yield `__VLS_ctx.`;
-                        yield* codes;
-                    }
-                }
-                if (enableCodeFeatures) {
-                    ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
-                }
-            }
-        }
+function* generatePropExp(options, ctx, prop, exp) {
+    if (!exp) {
+        yield `{}`;
+    }
+    else if (prop.arg?.loc.start.offset !== prop.exp?.loc.start.offset) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, exp.loc.source, exp.loc.start.offset, `(`, `)`);
     }
     else {
-        yield `{}`;
+        const propVariableName = (0, shared_1.camelize)(exp.loc.source);
+        if (utils_1.identifierRegex.test(propVariableName)) {
+            const codes = (0, camelized_1.generateCamelized)(exp.loc.source, 'template', exp.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
+            if (options.destructuredPropNames.has(propVariableName) || ctx.hasLocalVariable(propVariableName)) {
+                yield* codes;
+            }
+            else if (options.templateRefNames.has(propVariableName)) {
+                yield `__VLS_unref(`;
+                yield* codes;
+                yield `)`;
+            }
+            else {
+                ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
+                yield `__VLS_ctx.`;
+                yield* codes;
+            }
+            ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
+        }
     }
 }
-function* generateAttrValue(attrNode, features) {
-    const quote = attrNode.loc.source.startsWith("'") ? "'" : '"';
+function* generateAttrValue(node, features) {
+    const quote = node.loc.source.startsWith("'") ? "'" : '"';
+    const offset = (0, shared_2.getAttributeValueOffset)(node);
     yield quote;
-    let start = attrNode.loc.start.offset;
-    let content = attrNode.loc.source;
-    if ((content.startsWith('"') && content.endsWith('"'))
-        || (content.startsWith("'") && content.endsWith("'"))) {
-        start++;
-        content = content.slice(1, -1);
-    }
-    yield* (0, unicode_1.generateUnicode)(content, start, features);
+    yield* (0, unicode_1.generateUnicode)(node.content, offset, features);
     yield quote;
 }
 function getShouldCamelize(options, prop, propName) {

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

@@ -60,10 +60,10 @@ declare function generate(options: TemplateCodegenOptions): {
         offset: number;
     }[]>;
     currentComponent: {
-        ctxVar: string;
-        used: boolean;
+        get ctxVar(): string;
+        get propsVar(): string;
     } | undefined;
-    singleRootElTypes: string[];
+    singleRootElTypes: Set<string>;
     singleRootNodes: Set<import("@vue/compiler-dom").ElementNode | null>;
     addTemplateRef(name: string, typeExp: string, offset: number): void;
     accessExternalVariable(name: string, offset?: number): void;

package/lib/codegen/template/index.js

@@ -73,7 +73,7 @@ function* generateSlots(options, ctx) {
                 yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, codeFeatures_1.codeFeatures.navigation);
             }
             else {
-                yield* (0, wrapWith_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], codeFeatures_1.codeFeatures.navigation, `default`);
+                yield* (0, wrapWith_1.wrapWith)('template', slot.tagRange[0], slot.tagRange[1], codeFeatures_1.codeFeatures.navigation, `default`);
             }
             yield `?: (props: typeof ${slot.propsVar}) => any }`;
         }
@@ -127,7 +127,7 @@ function* generateTemplateRefs(options, ctx) {
 }
 function* generateRootEl(ctx) {
     yield `type __VLS_RootEl = `;
-    if (ctx.singleRootElTypes.length && !ctx.singleRootNodes.has(null)) {
+    if (ctx.singleRootElTypes.size && !ctx.singleRootNodes.has(null)) {
         for (const type of ctx.singleRootElTypes) {
             yield `${utils_1.newLine}| ${type}`;
         }