@vue/language-core 3.1.4 → 3.1.6

package/lib/codegen/template/elementDirectives.js

@@ -5,10 +5,11 @@ exports.generateModifiers = generateModifiers;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
+const names = require("../names");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
-const wrapWith_1 = require("../utils/wrapWith");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
@@ -29,19 +30,32 @@ function* generateElementDirectives(options, ctx, node) {
             || prop.name === 'bind') {
             continue;
         }
-        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!)`);
+        const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+        yield `__VLS_asFunctionalDirective(`;
+        yield* generateIdentifier(options, ctx, prop);
+        yield `)(null!, { ...__VLS_directiveBindingRestFields, `;
+        yield* generateArg(options, ctx, prop);
+        yield* generateModifiers(options, ctx, prop);
+        yield* generateValue(options, ctx, prop);
+        yield ` }, null!, null!)`;
+        yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
         yield utils_1.endOfLine;
     }
 }
-function* generateIdentifier(options, prop) {
+function* generateIdentifier(options, ctx, 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, {
+    const startOffset = prop.loc.start.offset;
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield names.directives;
+    yield `.`;
+    yield* (0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, {
         ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
         verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
-    }));
+    });
+    if (!builtInDirectives.has(prop.name)) {
+        ctx.recordComponentAccess('template', (0, shared_1.camelize)(rawName), prop.loc.start.offset);
+    }
+    yield (0, boundary_1.endBoundary)(token, startOffset + rawName.length);
 }
 function* generateArg(options, ctx, prop) {
     const { arg } = prop;
@@ -49,13 +63,15 @@ 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`);
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield `arg`;
+    yield (0, boundary_1.endBoundary)(token, startOffset + arg.content.length);
     yield `: `;
     if (arg.isStatic) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, codeFeatures_1.codeFeatures.all);
     }
     else {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.all, arg.content, startOffset, `(`, `)`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, arg.content, startOffset, `(`, `)`);
     }
     yield `, `;
 }
@@ -66,7 +82,9 @@ 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);
+    const token = yield* (0, boundary_1.startBoundary)('template', startOffset, codeFeatures_1.codeFeatures.verification);
+    yield propertyName;
+    yield (0, boundary_1.endBoundary)(token, endOffset);
     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 +97,9 @@ 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`);
+    const token = yield* (0, boundary_1.startBoundary)('template', exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+    yield `value`;
+    yield (0, boundary_1.endBoundary)(token, exp.loc.end.offset);
     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

@@ -9,12 +9,11 @@ const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 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);
@@ -78,46 +74,45 @@ function* generateEventArg(options, name, start, directive = 'on', features) {
         name = (0, shared_1.capitalize)(name);
     }
     if (utils_1.identifierRegex.test((0, shared_1.camelize)(name))) {
-        yield ['', 'template', start, features];
+        const token = yield* (0, boundary_1.startBoundary)('template', start, features);
         yield directive;
-        yield* (0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping);
+        yield* (0, camelized_1.generateCamelized)(name, 'template', start, { __combineToken: token });
     }
     else {
-        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
+        const token = yield* (0, boundary_1.startBoundary)('template', start, features);
+        yield `'`;
+        yield directive;
+        yield* (0, camelized_1.generateCamelized)(name, 'template', start, { __combineToken: token });
+        yield `'`;
+        yield (0, boundary_1.endBoundary)(token, start + name.length);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        let isFirstMapping = true;
-        const ast = (0, utils_1.createTsAst)(options.ts, ctx.inlineTsAsts, prop.exp.content);
+        const ast = (0, utils_1.getTypeScriptAST)(options.ts, options.template, prop.exp.content);
         const isCompound = isCompoundExpression(options.ts, ast);
-        const interpolation = (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
-            if (isCompound && isFirstMapping) {
-                isFirstMapping = false;
-                ctx.inlayHints.push({
-                    blockName: 'template',
-                    offset,
-                    setting: 'vue.inlayHints.inlineHandlerLeading',
-                    label: '$event =>',
-                    paddingRight: true,
-                    tooltip: [
-                        '`$event` is a hidden parameter, you can use it in this callback.',
-                        'To hide this hint, set `vue.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
-                        '[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
-                    ].join('\n\n'),
-                });
-            }
-            return codeFeatures_1.codeFeatures.all;
-        }, prop.exp.content, prop.exp.loc.start.offset, isCompound ? `` : `(`, isCompound ? `` : `)`);
+        const interpolation = (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, prop.exp.content, prop.exp.loc.start.offset, isCompound ? `` : `(`, isCompound ? `` : `)`);
         if (isCompound) {
             yield `(...[$event]) => {${utils_1.newLine}`;
-            ctx.addLocalVariable('$event');
+            const endScope = ctx.startScope();
+            ctx.declare('$event');
             yield* ctx.generateConditionGuards();
             yield* interpolation;
             yield utils_1.endOfLine;
-            ctx.removeLocalVariable('$event');
-            yield* ctx.generateAutoImportCompletion();
+            yield* endScope();
             yield `}`;
+            ctx.inlayHints.push({
+                blockName: 'template',
+                offset: prop.exp.loc.start.offset,
+                setting: 'vue.inlayHints.inlineHandlerLeading',
+                label: '$event =>',
+                paddingRight: true,
+                tooltip: [
+                    '`$event` is a hidden parameter, you can use it in this callback.',
+                    'To hide this hint, set `vue.inlayHints.inlineHandlerLeading` to `false` in IDE settings.',
+                    '[More info](https://github.com/vuejs/language-tools/issues/2445#issuecomment-1444771420)',
+                ].join('\n\n'),
+            });
         }
         else {
             yield* interpolation;
@@ -131,7 +126,7 @@ function* generateModelEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         yield `(...[$event]) => {${utils_1.newLine}`;
         yield* ctx.generateConditionGuards();
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', codeFeatures_1.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset);
         yield ` = $event${utils_1.endOfLine}`;
         yield `}`;
     }

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

@@ -2,10 +2,10 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export interface FailedPropExpression {
+export interface FailGeneratedExpression {
     node: CompilerDOM.SimpleExpressionNode;
     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, failGeneratedExpressions?: FailGeneratedExpression[]): 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,20 +4,20 @@ 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");
 const inlayHints_1 = require("../inlayHints");
+const names = require("../names");
 const utils_1 = require("../utils");
+const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const unicode_1 = require("../utils/unicode");
-const wrapWith_1 = require("../utils/wrapWith");
 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, failGeneratedExpressions) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -41,12 +41,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: `}` });
+                failGeneratedExpressions?.push({ node: prop.arg, prefix: `(`, suffix: `)` });
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `() => {`, suffix: `}` });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
         }
     }
@@ -67,7 +67,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, picomatch_1.isMatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    failedPropExps?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
+                    failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
                 }
                 continue;
             }
@@ -81,15 +81,21 @@ 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;
+            const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+            if (prop.arg) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, features, shouldCamelize);
             }
             else {
-                yield (0, muggle_string_1.toString)(codes);
-            }
+                const token2 = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
+                yield propName;
+                yield (0, boundary_1.endBoundary)(token2, prop.loc.start.offset + 'v-model'.length);
+            }
+            yield `: `;
+            const argLoc = prop.arg?.loc ?? prop.loc;
+            const token3 = yield* (0, boundary_1.startBoundary)('template', argLoc.start.offset, codeFeatures_1.codeFeatures.verification);
+            yield* generatePropExp(options, ctx, prop, prop.exp);
+            yield (0, boundary_1.endBoundary)(token3, argLoc.end.offset);
+            yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -100,13 +106,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 +120,19 @@ 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;
+            const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, features, shouldCamelize);
+            yield `: `;
+            if (prop.name === 'style') {
+                yield `{}`;
+            }
+            else if (prop.value) {
+                yield* generateAttrValue(prop.value, codeFeatures_1.codeFeatures.withoutNavigation);
             }
             else {
-                yield (0, muggle_string_1.toString)(codes);
+                yield `true`;
             }
+            yield (0, boundary_1.endBoundary)(token, prop.loc.end.offset);
             if (shouldSpread) {
                 yield ` }`;
             }
@@ -138,74 +142,51 @@ 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);
-                }
+                failGeneratedExpressions?.push({ node: prop.exp, prefix: `(`, suffix: `)` });
             }
             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);
-                }
+                const token = yield* (0, boundary_1.startBoundary)('template', prop.exp.loc.start.offset, codeFeatures_1.codeFeatures.verification);
+                yield `...`;
+                yield* generatePropExp(options, ctx, prop, prop.exp);
+                yield (0, boundary_1.endBoundary)(token, prop.exp.loc.end.offset);
                 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, options.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 (ctx.scopes.some(scope => scope.has(propVariableName))) {
+                yield* codes;
+            }
+            else if (options.setupRefs.has(propVariableName)) {
+                yield* codes;
+                yield `.value`;
+            }
+            else {
+                ctx.recordComponentAccess('template', propVariableName, exp.loc.start.offset);
+                yield names.ctx;
+                yield `.`;
+                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 [content, offset] = (0, shared_2.normalizeAttributeValue)(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)(content, offset, features);
     yield quote;
 }
 function getShouldCamelize(options, prop, propName) {

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

@@ -2,13 +2,10 @@ import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
-    compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
-    scriptSetupBindingNames: Set<string>;
-    scriptSetupImportComponentNames: Set<string>;
-    destructuredPropNames: Set<string>;
-    templateRefNames: Set<string>;
+    setupRefs: Set<string>;
+    setupConsts: Set<string>;
     hasDefineSlots?: boolean;
     propsAssignName?: string;
     slotsAssignName?: string;
@@ -18,6 +15,7 @@ export interface TemplateCodegenOptions {
 export { generate as generateTemplate };
 declare function generate(options: TemplateCodegenOptions): {
     codes: Code[];
+    generatedTypes: Set<string>;
     currentInfo: {
         ignoreError?: boolean;
         expectError?: {
@@ -30,7 +28,6 @@ declare function generate(options: TemplateCodegenOptions): {
         };
     };
     resolveCodeFeatures: (features: import("../../types").VueCodeInformation) => import("../../types").VueCodeInformation;
-    inlineTsAsts: Map<string, ts.SourceFile> | undefined;
     inVFor: boolean;
     slots: {
         name: string;
@@ -44,37 +41,29 @@ declare function generate(options: TemplateCodegenOptions): {
         propsVar: string;
     }[];
     dollarVars: Set<string>;
-    accessExternalVariables: Map<string, Set<number>>;
+    componentAccessMap: Map<string, Map<string, Set<number>>>;
     blockConditions: string[];
-    scopedClasses: {
-        source: string;
-        className: string;
-        offset: number;
-    }[];
-    emptyClassOffsets: number[];
     inlayHints: import("../inlayHints").InlayHintInfo[];
-    bindingAttrLocs: import("@vue/compiler-dom").SourceLocation[];
     inheritedAttrVars: Set<string>;
     templateRefs: Map<string, {
         typeExp: string;
         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;
-    hasLocalVariable(name: string): boolean;
-    addLocalVariable(name: string): void;
-    removeLocalVariable(name: string): void;
+    recordComponentAccess(source: string, name: string, offset?: number): void;
+    scopes: Set<string>[];
+    declare(...varNames: string[]): void;
+    startScope(): () => Generator<Code, any, any>;
     getInternalVariable(): string;
     getHoistVariable(originalVar: string): string;
     generateHoistVariables(): Generator<string, void, unknown>;
     generateConditionGuards(): Generator<string, void, unknown>;
-    generateAutoImportCompletion(): Generator<Code>;
     enter(node: import("@vue/compiler-dom").RootNode | import("@vue/compiler-dom").TemplateChildNode | import("@vue/compiler-dom").SimpleExpressionNode): boolean;
     exit(): Generator<Code>;
 };