@vue/language-core 2.2.10 → 3.0.0-alpha.10

package/lib/codegen/template/elementEvents.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementEvents = generateElementEvents;
 exports.generateEventArg = generateEventArg;
 exports.generateEventExpression = generateEventExpression;
+exports.generateModelEventExpression = generateModelEventExpression;
 exports.isCompoundExpression = isCompoundExpression;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
@@ -10,54 +11,74 @@ 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, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
-    let emitVar;
-    let eventsVar;
+function* generateElementEvents(options, ctx, node, componentOriginalVar, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+    let emitsVar;
     let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-            && prop.name === 'on'
-            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-            && prop.arg.isStatic) {
+            && (prop.name === 'on'
+                && (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)
+                || options.vueCompilerOptions.strictVModel
+                    && prop.name === 'model'
+                    && (!prop.arg || prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))) {
             ctx.currentComponent.used = true;
-            if (!emitVar) {
-                emitVar = ctx.getInternalVariable();
-                eventsVar = ctx.getInternalVariable();
+            if (!emitsVar) {
+                emitsVar = ctx.getInternalVariable();
                 propsVar = ctx.getInternalVariable();
-                yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${utils_1.endOfLine}`;
-                yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${utils_1.endOfLine}`;
+                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}`;
             }
-            let source = prop.arg.loc.source;
-            let start = prop.arg.loc.start.offset;
-            let propPrefix = 'on';
+            let source = prop.arg?.loc.source ?? 'model-value';
+            let start = prop.arg?.loc.start.offset;
+            let propPrefix = 'on-';
             let emitPrefix = '';
-            if (source.startsWith('vue:')) {
+            if (prop.name === 'model') {
+                propPrefix = 'onUpdate:';
+                emitPrefix = 'update:';
+            }
+            else if (source.startsWith('vue:')) {
                 source = source.slice('vue:'.length);
                 start = start + 'vue:'.length;
-                propPrefix = 'onVnode';
+                propPrefix = 'onVnode-';
                 emitPrefix = 'vnode-';
             }
-            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${(0, shared_1.camelize)(propPrefix + '-' + source)}', '${emitPrefix}${source}', '${(0, shared_1.camelize)(emitPrefix + source)}'> = {${utils_1.newLine}`;
-            yield* generateEventArg(ctx, source, start, propPrefix);
-            yield `: `;
-            yield* generateEventExpression(options, ctx, prop);
-            yield `}${utils_1.endOfLine}`;
+            const propName = (0, shared_1.camelize)(propPrefix + source);
+            const emitName = emitPrefix + source;
+            const camelizedEmitName = (0, shared_1.camelize)(emitName);
+            yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> => (${utils_1.newLine}`;
+            if (prop.name === 'on') {
+                yield `{ `;
+                yield* generateEventArg(ctx, source, start, emitPrefix.slice(0, -1), ctx.codeFeatures.navigation);
+                yield `: {} as any } as typeof ${emitsVar},${utils_1.newLine}`;
+            }
+            yield `{ `;
+            if (prop.name === 'on') {
+                yield* generateEventArg(ctx, source, start, propPrefix.slice(0, -1));
+                yield `: `;
+                yield* generateEventExpression(options, ctx, prop);
+            }
+            else {
+                yield `'${propName}': `;
+                yield* generateModelEventExpression(options, ctx, prop);
+            }
+            yield `})${utils_1.endOfLine}`;
         }
     }
 }
-function* generateEventArg(ctx, name, start, directive = 'on') {
-    const features = {
-        ...ctx.codeFeatures.withoutHighlightAndCompletion,
-        ...ctx.codeFeatures.navigationWithoutRename,
-    };
+function* generateEventArg(ctx, name, start, directive = 'on', features = {
+    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+    ...ctx.codeFeatures.navigationWithoutRename,
+}) {
+    if (directive.length) {
+        name = (0, shared_1.capitalize)(name);
+    }
     if (utils_1.identifierRegex.test((0, shared_1.camelize)(name))) {
         yield ['', 'template', start, features];
         yield directive;
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping);
+        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)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping), `'`);
+        yield* (0, wrapWith_1.wrapWith)(start, start + name.length, features, `'`, directive, ...(0, camelized_1.generateCamelized)(name, 'template', start, utils_1.combineLastMapping), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
@@ -95,7 +116,6 @@ function* generateEventExpression(options, ctx, prop) {
         if (_isCompoundExpression) {
             ctx.removeLocalVariable('$event');
             yield utils_1.endOfLine;
-            yield* ctx.generateAutoImportCompletion();
             yield `}`;
         }
     }
@@ -103,6 +123,18 @@ function* generateEventExpression(options, ctx, prop) {
         yield `() => {}`;
     }
 }
+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', ctx.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset, prop.exp.loc);
+        yield ` = $event${utils_1.endOfLine}`;
+        yield `}`;
+    }
+    else {
+        yield `() => {}`;
+    }
+}
 function isCompoundExpression(ts, ast) {
     let result = true;
     if (ast.statements.length === 0) {

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

@@ -1,5 +1,5 @@
 import * as CompilerDOM from '@vue/compiler-dom';
-import type { Code, VueCodeInformation } from '../../types';
+import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
 export interface FailedPropExpression {
@@ -8,4 +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>;
+export declare function generatePropExp(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, exp: CompilerDOM.SimpleExpressionNode | undefined, enableCodeFeatures?: boolean): Generator<Code>;

package/lib/codegen/template/elementProps.js

@@ -77,13 +77,13 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             const shouldSpread = propName === 'style' || propName === 'class';
             const shouldCamelize = isComponent && getShouldCamelize(options, prop, propName);
-            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck);
             if (shouldSpread) {
                 yield `...{ `;
             }
             const codes = [...(0, wrapWith_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, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.withoutHighlightAndCompletion, propName)), `: `, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures))];
+                    : (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.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, ctx.codeFeatures.verification, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures)))];
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -111,16 +111,12 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
-            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
-                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom` always adds it (#3881)
-                || (options.vueCompilerOptions.target < 3
-                    && prop.name === 'persisted'
-                    && node.tag.toLowerCase() === 'transition')) {
+            if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))) {
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
             const shouldCamelize = isComponent && getShouldCamelize(options, prop, prop.name);
-            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, true);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck);
             if (shouldSpread) {
                 yield `...{ `;
             }
@@ -148,7 +144,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
                 }
             }
             else {
-                const codes = [...(0, wrapWith_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))];
+                const codes = [...(0, wrapWith_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, enableCodeFeatures))];
                 if (enableCodeFeatures) {
                     yield* codes;
                 }
@@ -160,14 +156,11 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures = true) {
+function* generatePropExp(options, ctx, prop, exp, enableCodeFeatures = true) {
     const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
-    if (isShorthand && features.completion) {
-        features = {
-            ...features,
-            completion: undefined,
-        };
-    }
+    const features = isShorthand
+        ? ctx.codeFeatures.withoutHighlightAndCompletion
+        : ctx.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, exp.loc, `(`, `)`);
@@ -223,13 +216,9 @@ function getShouldCamelize(options, prop, propName) {
         && (0, shared_2.hyphenateAttr)(propName) === propName
         && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
 }
-function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
+function getPropsCodeInfo(ctx, strictPropsCheck) {
     return ctx.resolveCodeFeatures({
         ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
-        navigation: {
-            resolveRenameNewName: shared_1.camelize,
-            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
-        },
         verification: strictPropsCheck || {
             shouldReport(_source, code) {
                 // https://typescript.tv/errors/#ts2353
@@ -279,6 +268,6 @@ function getModelPropName(node, vueCompilerOptions) {
             }
         }
     }
-    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
+    return 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map

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

@@ -1,13 +1,12 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
-import { TemplateCodegenContext } from './context';
+import { type TemplateCodegenContext } from './context';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
     compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
-    edited: boolean;
     scriptSetupBindingNames: Set<string>;
     scriptSetupImportComponentNames: Set<string>;
     destructuredPropNames: Set<string>;

package/lib/codegen/template/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generateTemplate;
 exports.forEachElementNode = forEachElementNode;
 const CompilerDOM = require("@vue/compiler-dom");
-const shared_1 = require("../../utils/shared");
 const utils_1 = require("../utils");
 const wrapWith_1 = require("../utils/wrapWith");
 const context_1 = require("./context");
@@ -18,9 +17,8 @@ function* generateTemplate(options) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
-    const slotsPropertyName = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
     if (options.vueCompilerOptions.inferTemplateDollarSlots) {
-        ctx.dollarVars.add(slotsPropertyName);
+        ctx.dollarVars.add('$slots');
     }
     if (options.vueCompilerOptions.inferTemplateDollarAttrs) {
         ctx.dollarVars.add('$attrs');
@@ -32,13 +30,12 @@ function* generateTemplate(options) {
         ctx.dollarVars.add('$el');
     }
     if (options.template.ast) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast);
     }
     yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
-    yield* ctx.generateAutoImportCompletion();
     yield* ctx.generateHoistVariables();
     const speicalTypes = [
-        [slotsPropertyName, yield* generateSlots(options, ctx)],
+        ['$slots', yield* generateSlots(options, ctx)],
         ['$attrs', yield* generateInheritedAttrs(options, ctx)],
         ['$refs', yield* generateTemplateRefs(options, ctx)],
         ['$el', yield* generateRootEl(ctx)]
@@ -93,12 +90,26 @@ function* generateInheritedAttrs(options, ctx) {
     return `import('${options.vueCompilerOptions.lib}').ComponentPublicInstance['$attrs'] & Partial<__VLS_InheritedAttrs>`;
 }
 function* generateTemplateRefs(options, ctx) {
-    yield `type __VLS_TemplateRefs = {${utils_1.newLine}`;
-    for (const [name, { typeExp, offset }] of ctx.templateRefs) {
-        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigationAndCompletion);
-        yield `: ${typeExp},${utils_1.newLine}`;
+    yield `type __VLS_TemplateRefs = {}`;
+    for (const [name, refs] of ctx.templateRefs) {
+        yield `${utils_1.newLine}& `;
+        if (refs.length >= 2) {
+            yield `(`;
+        }
+        for (let i = 0; i < refs.length; i++) {
+            const { typeExp, offset } = refs[i];
+            if (i) {
+                yield ` | `;
+            }
+            yield `{ `;
+            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigation);
+            yield `: ${typeExp} }`;
+        }
+        if (refs.length >= 2) {
+            yield `)`;
+        }
     }
-    yield `}${utils_1.endOfLine}`;
+    yield utils_1.endOfLine;
     return `__VLS_TemplateRefs`;
 }
 function* generateRootEl(ctx) {

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

@@ -5,4 +5,4 @@ export declare function generateInterpolation(options: {
     ts: typeof ts;
     destructuredPropNames: Set<string> | undefined;
     templateRefNames: Set<string> | undefined;
-}, ctx: TemplateCodegenContext, source: string, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, _code: string, start: number | undefined, astHolder?: any, prefix?: string, suffix?: string): Generator<Code>;
+}, ctx: TemplateCodegenContext, source: string, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, code: string, start: number | undefined, astHolder?: any, prefix?: string, suffix?: string): Generator<Code>;

package/lib/codegen/template/interpolation.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateInterpolation = generateInterpolation;
 const shared_1 = require("@vue/shared");
-const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
+const shared_2 = require("../../utils/shared");
 const utils_1 = require("../utils");
-function* generateInterpolation(options, ctx, source, data, _code, start, astHolder = {}, prefix = '', suffix = '') {
-    const code = prefix + _code + suffix;
-    const ast = (0, utils_1.createTsAst)(options.ts, astHolder, code);
-    for (let [section, offset, type] of forEachInterpolationSegment(options.ts, options.destructuredPropNames, options.templateRefNames, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
+// https://github.com/vuejs/core/blob/fb0c3ca519f1fccf52049cd6b8db3a67a669afe9/packages/compiler-core/src/transforms/transformExpression.ts#L47
+const isLiteralWhitelisted = /*@__PURE__*/ (0, shared_1.makeMap)('true,false,null,this');
+function* generateInterpolation(options, ctx, source, data, code, start, astHolder = {}, prefix = '', suffix = '') {
+    for (let [section, offset, type] of forEachInterpolationSegment(options.ts, options.destructuredPropNames, options.templateRefNames, ctx, code, start, astHolder, prefix, suffix)) {
         if (offset === undefined) {
             yield section;
         }
         else {
             offset -= prefix.length;
             let addSuffix = '';
-            const overLength = offset + section.length - _code.length;
+            const overLength = offset + section.length - code.length;
             if (overLength > 0) {
                 addSuffix = section.slice(section.length - overLength);
                 section = section.slice(0, -overLength);
@@ -46,58 +46,46 @@ function* generateInterpolation(options, ctx, source, data, _code, start, astHol
     }
 }
 ;
-function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefNames, ctx, code, offset, ast) {
+function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefNames, ctx, originalCode, start, astHolder, prefix, suffix) {
+    const code = prefix + originalCode + suffix;
+    const offset = start !== undefined ? start - prefix.length : undefined;
     let ctxVars = [];
-    const varCb = (id, isShorthand) => {
-        const text = (0, scriptSetupRanges_1.getNodeText)(ts, id, ast);
-        if (ctx.hasLocalVariable(text)
-            // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
-            || (0, shared_1.isGloballyAllowed)(text)
-            || text === 'require'
-            || text.startsWith('__VLS_')) {
-            // localVarOffsets.push(localVar.getStart(ast));
-        }
-        else {
-            ctxVars.push({
-                text,
-                isShorthand: isShorthand,
-                offset: (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start,
-            });
-            if (destructuredPropNames?.has(text)) {
-                return;
-            }
-            if (offset !== undefined) {
-                ctx.accessExternalVariable(text, offset + (0, scriptSetupRanges_1.getStartEnd)(ts, id, ast).start);
-            }
-            else {
-                ctx.accessExternalVariable(text);
+    if (utils_1.identifierRegex.test(originalCode) && !shouldIdentifierSkipped(ctx, originalCode, destructuredPropNames)) {
+        ctxVars.push({
+            text: originalCode,
+            offset: prefix.length,
+        });
+    }
+    else {
+        const ast = (0, utils_1.createTsAst)(ts, astHolder, code);
+        const varCb = (id, isShorthand) => {
+            const text = (0, shared_2.getNodeText)(ts, id, ast);
+            if (!shouldIdentifierSkipped(ctx, text, destructuredPropNames)) {
+                ctxVars.push({
+                    text,
+                    offset: (0, shared_2.getStartEnd)(ts, id, ast).start,
+                    isShorthand,
+                });
             }
-        }
-    };
-    ts.forEachChild(ast, node => walkIdentifiers(ts, node, ast, varCb, ctx));
+        };
+        ts.forEachChild(ast, node => walkIdentifiers(ts, node, ast, varCb, ctx));
+    }
     ctxVars = ctxVars.sort((a, b) => a.offset - b.offset);
     if (ctxVars.length) {
-        if (ctxVars[0].isShorthand) {
-            yield [code.slice(0, ctxVars[0].offset + ctxVars[0].text.length), 0];
-            yield [': ', undefined];
-        }
-        else if (ctxVars[0].offset > 0) {
-            yield [code.slice(0, ctxVars[0].offset), 0, 'startText'];
-        }
-        for (let i = 0; i < ctxVars.length - 1; i++) {
+        for (let i = 0; i < ctxVars.length; i++) {
+            const lastVar = ctxVars[i - 1];
             const curVar = ctxVars[i];
-            const nextVar = ctxVars[i + 1];
-            yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, curVar);
-            if (nextVar.isShorthand) {
-                yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
+            const lastVarEnd = lastVar ? lastVar.offset + lastVar.text.length : 0;
+            if (curVar.isShorthand) {
+                yield [code.slice(lastVarEnd, curVar.offset + curVar.text.length), lastVarEnd];
                 yield [': ', undefined];
             }
             else {
-                yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
+                yield [code.slice(lastVarEnd, curVar.offset), lastVarEnd, i ? undefined : 'startText'];
             }
+            yield* generateVar(templateRefNames, ctx, code, offset, curVar);
         }
         const lastVar = ctxVars.at(-1);
-        yield* generateVar(code, ctx.dollarVars, destructuredPropNames, templateRefNames, lastVar);
         if (lastVar.offset + lastVar.text.length < code.length) {
             yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
         }
@@ -106,11 +94,10 @@ function* forEachInterpolationSegment(ts, destructuredPropNames, templateRefName
         yield [code, 0];
     }
 }
-function* generateVar(code, dollarVars, destructuredPropNames, templateRefNames, curVar) {
+function* generateVar(templateRefNames, ctx, code, offset, curVar) {
     // fix https://github.com/vuejs/language-tools/issues/1205
     // fix https://github.com/vuejs/language-tools/issues/1264
     yield ['', curVar.offset, 'errorMappingOnly'];
-    const isDestructuredProp = destructuredPropNames?.has(curVar.text) ?? false;
     const isTemplateRef = templateRefNames?.has(curVar.text) ?? false;
     if (isTemplateRef) {
         yield [`__VLS_unref(`, undefined];
@@ -118,10 +105,16 @@ function* generateVar(code, dollarVars, destructuredPropNames, templateRefNames,
         yield [`)`, undefined];
     }
     else {
-        if (dollarVars.has(curVar.text)) {
+        if (offset !== undefined) {
+            ctx.accessExternalVariable(curVar.text, offset + curVar.offset);
+        }
+        else {
+            ctx.accessExternalVariable(curVar.text);
+        }
+        if (ctx.dollarVars.has(curVar.text)) {
             yield [`__VLS_dollars.`, undefined];
         }
-        else if (!isDestructuredProp) {
+        else {
             yield [`__VLS_ctx.`, undefined];
         }
         yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
@@ -222,4 +215,13 @@ function walkIdentifiersInTypeReference(ts, node, cb) {
         ts.forEachChild(node, node => walkIdentifiersInTypeReference(ts, node, cb));
     }
 }
+function shouldIdentifierSkipped(ctx, text, destructuredPropNames) {
+    return ctx.hasLocalVariable(text)
+        // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
+        || (0, shared_1.isGloballyAllowed)(text)
+        || isLiteralWhitelisted(text)
+        || text === 'require'
+        || text.startsWith('__VLS_')
+        || destructuredPropNames?.has(text);
+}
 //# sourceMappingURL=interpolation.js.map

package/lib/codegen/template/slotOutlet.js

@@ -39,7 +39,7 @@ function* generateSlotOutlet(options, ctx, node) {
                 && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
                 codes = [
                     `[`,
-                    ...(0, elementProps_1.generatePropExp)(options, ctx, nameProp, nameProp.exp, ctx.codeFeatures.all),
+                    ...(0, elementProps_1.generatePropExp)(options, ctx, nameProp, nameProp.exp),
                     `]`
                 ];
             }
@@ -93,7 +93,6 @@ function* generateSlotOutlet(options, ctx, node) {
             });
         }
     }
-    yield* ctx.generateAutoImportCompletion();
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
 }
 //# sourceMappingURL=slotOutlet.js.map

package/lib/codegen/template/styleScopedClasses.js

@@ -3,7 +3,7 @@ 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 shared_1 = require("../../utils/shared");
 const utils_1 = require("../utils");
 const escaped_1 = require("../utils/escaped");
 const wrapWith_1 = require("../utils/wrapWith");
@@ -126,7 +126,7 @@ function collectStyleScopedClassReferences(options, ctx, node) {
                 }
             }
             function walkIdentifier(node) {
-                const text = (0, scriptSetupRanges_1.getNodeText)(ts, node, ast);
+                const text = (0, shared_1.getNodeText)(ts, node, ast);
                 ctx.scopedClasses.push({
                     source: 'template',
                     className: text,

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

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