@vue/language-core 2.2.8 → 3.0.0-alpha.2

package/lib/codegen/template/element.js

@@ -5,6 +5,7 @@ exports.generateElement = generateElement;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const shared_2 = require("../../utils/shared");
+const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
@@ -18,7 +19,7 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const vSlot_1 = require("./vSlot");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node, isVForChild) {
+function* generateComponent(options, ctx, node) {
     const tagOffsets = [node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag)];
     if (!node.isSelfClosing && options.template.lang === 'html') {
         const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
@@ -82,13 +83,7 @@ function* generateComponent(options, ctx, node, isVForChild) {
             }
             else {
                 const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
-                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    navigation: {
-                        resolveRenameNewName: camelizeComponentName,
-                        resolveRenameEditText: getTagRenameApply(node.tag),
-                    },
-                });
+                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
             }
             yield `, `;
         }
@@ -125,29 +120,21 @@ function* generateComponent(options, ctx, node, isVForChild) {
             yield `/** @type {[`;
             for (const tagOffset of tagOffsets) {
                 for (const shouldCapitalize of (node.tag[0] === node.tag[0].toUpperCase() ? [false] : [true, false])) {
-                    const expectName = shouldCapitalize ? (0, shared_1.capitalize)(camelizedTag) : camelizedTag;
                     yield `typeof __VLS_components.`;
-                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, {
-                        navigation: {
-                            resolveRenameNewName: node.tag !== expectName ? camelizeComponentName : undefined,
-                            resolveRenameEditText: getTagRenameApply(node.tag),
-                        },
-                    });
+                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.navigation);
                     yield `, `;
                 }
             }
             yield `]} */${utils_1.endOfLine}`;
             // auto import support
-            if (options.edited) {
-                yield `// @ts-ignore${utils_1.newLine}`; // #2304
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], {
-                    completion: {
-                        isAdditional: true,
-                        onlyImport: true,
-                    },
-                });
-                yield `${utils_1.endOfLine}`;
-            }
+            yield `// @ts-ignore${utils_1.newLine}`; // #2304
+            yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], {
+                completion: {
+                    isAdditional: true,
+                    onlyImport: true,
+                },
+            });
+            yield `${utils_1.endOfLine}`;
         }
     }
     else {
@@ -181,15 +168,12 @@ function* generateComponent(options, ctx, node, isVForChild) {
         const componentInstanceVar = ctx.getInternalVariable();
         ctx.currentComponent.used = true;
         yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
-        if (isVForChild) {
+        if (ctx.inVFor) {
             yield `[]`;
         }
         yield `${utils_1.endOfLine}`;
         if (refName && offset) {
-            ctx.templateRefs.set(refName, {
-                typeExp: `typeof ${ctx.getHoistVariable(componentInstanceVar)}`,
-                offset
-            });
+            ctx.addTemplateRef(refName, `typeof ${ctx.getHoistVariable(componentInstanceVar)}`, offset);
         }
         if (isRootNode) {
             ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
@@ -202,28 +186,21 @@ function* generateComponent(options, ctx, node, isVForChild) {
     }
     (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir) {
-        yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
-    }
-    else {
-        // #932: reference for default slot
-        yield* (0, vSlot_1.generateImplicitDefaultSlot)(ctx, node);
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
-    }
+    yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
     if (ctx.currentComponent.used) {
         yield `var ${componentCtxVar}!: __VLS_PickFunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
 }
-function* generateElement(options, ctx, node, isVForChild) {
+function* generateElement(options, ctx, node) {
     const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
     const endTagOffset = !node.isSelfClosing && options.template.lang === 'html'
         ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag)
         : undefined;
     const failedPropExps = [];
-    yield `__VLS_asFunctionalElement(__VLS_intrinsicElements`;
+    yield `__VLS_asFunctionalElement(__VLS_elements`;
     yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     if (endTagOffset !== undefined) {
-        yield `, __VLS_intrinsicElements`;
+        yield `, __VLS_elements`;
         yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     }
     yield `)(`;
@@ -234,22 +211,19 @@ function* generateElement(options, ctx, node, isVForChild) {
     const [refName, offset] = yield* generateElementReference(options, ctx, node);
     if (refName && offset) {
         let typeExp = `__VLS_NativeElements['${node.tag}']`;
-        if (isVForChild) {
+        if (ctx.inVFor) {
             typeExp += `[]`;
         }
-        ctx.templateRefs.set(refName, {
-            typeExp,
-            offset
-        });
+        ctx.addTemplateRef(refName, typeExp, offset);
     }
     if (ctx.singleRootNodes.has(node)) {
         ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);
     }
     if (hasVBindAttrs(options, ctx, node)) {
-        ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
+        ctx.inheritedAttrVars.add(`__VLS_elements.${node.tag}`);
     }
     (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node.children);
 }
 function* generateFailedPropExps(options, ctx, failedPropExps) {
     for (const failedExp of failedPropExps) {
@@ -284,8 +258,8 @@ function* generateCanonicalComponentName(tagText, offset, features) {
     }
 }
 function* generateComponentGeneric(ctx) {
-    if (ctx.lastGenericComment) {
-        const { content, offset } = ctx.lastGenericComment;
+    if (ctx.currentInfo.generic) {
+        const { content, offset } = ctx.currentInfo.generic;
         yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
             content,
             'template',
@@ -293,7 +267,6 @@ function* generateComponentGeneric(ctx) {
             ctx.codeFeatures.all
         ], `>`);
     }
-    ctx.lastGenericComment = undefined;
 }
 function* generateElementReference(options, ctx, node) {
     for (const prop of node.props) {
@@ -319,10 +292,4 @@ function hasVBindAttrs(options, ctx, node) {
             && prop.name === 'bind'
             && prop.exp?.loc.source === '$attrs'));
 }
-function camelizeComponentName(newName) {
-    return (0, shared_1.camelize)('-' + newName);
-}
-function getTagRenameApply(oldName) {
-    return oldName === (0, shared_2.hyphenateTag)(oldName) ? shared_2.hyphenateTag : undefined;
-}
 //# sourceMappingURL=element.js.map

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

@@ -2,4 +2,4 @@ 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 generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, children: (CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode)[], enterNode?: boolean): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = generateElementChildren;
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node) {
-    yield* ctx.resetDirectiveComments('end of element children start');
-    let prev;
-    for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
-        prev = childNode;
+function* generateElementChildren(options, ctx, children, enterNode = true) {
+    yield* ctx.generateAutoImportCompletion();
+    for (const childNode of children) {
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, enterNode);
     }
     yield* ctx.generateAutoImportCompletion();
 }

package/lib/codegen/template/elementDirectives.js

@@ -4,7 +4,6 @@ exports.generateElementDirectives = generateElementDirectives;
 exports.generateModifiers = generateModifiers;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
-const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
@@ -40,14 +39,8 @@ function* generateElementDirectives(options, ctx, node) {
 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, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, 'template', prop.loc.start.offset, ctx.resolveCodeFeatures({
-        ...codeFeatures_1.codeFeatures.withoutHighlight,
-        // fix https://github.com/vuejs/language-tools/issues/1905
-        ...codeFeatures_1.codeFeatures.additionalCompletion,
+        ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
         verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
-        navigation: {
-            resolveRenameNewName: shared_1.camelize,
-            resolveRenameEditText: getPropRenameApply(prop.name),
-        },
     })));
 }
 function* generateArg(options, ctx, prop) {
@@ -90,7 +83,4 @@ function* generateValue(options, ctx, prop) {
     yield `: `;
     yield* (0, elementProps_1.generatePropExp)(options, ctx, prop, exp, ctx.codeFeatures.all);
 }
-function getPropRenameApply(oldName) {
-    return oldName === (0, shared_2.hyphenateAttr)(oldName) ? shared_2.hyphenateAttr : undefined;
-}
 //# sourceMappingURL=elementDirectives.js.map

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

@@ -6,4 +6,5 @@ import type { TemplateCodegenOptions } from './index';
 export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentFunctionalVar: string, componentVNodeVar: string, componentCtxVar: string): Generator<Code>;
 export declare function generateEventArg(ctx: TemplateCodegenContext, name: string, start: number, directive?: string): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
+export declare function generateModelEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function isCompoundExpression(ts: typeof import('typescript'), ast: ts.SourceFile): boolean;

package/lib/codegen/template/elementEvents.js

@@ -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");
@@ -16,9 +17,11 @@ function* generateElementEvents(options, ctx, node, componentFunctionalVar, comp
     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();
@@ -28,21 +31,31 @@ function* generateElementEvents(options, ctx, node, componentFunctionalVar, comp
                 yield `let ${eventsVar}!: __VLS_NormalizeEmits<typeof ${emitVar}>${utils_1.endOfLine}`;
                 yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentFunctionalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
             }
-            let source = prop.arg.loc.source;
-            let start = prop.arg.loc.start.offset;
-            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}`;
+            yield `(): __VLS_NormalizeComponentEvent<typeof ${propsVar}, typeof ${eventsVar}, '${(0, shared_1.camelize)(propPrefix + source)}', '${emitPrefix + source}', '${(0, shared_1.camelize)(emitPrefix + source)}'> => ({${utils_1.newLine}`;
+            if (prop.name === 'on') {
+                yield* generateEventArg(ctx, source, start, propPrefix.slice(0, -1));
+                yield `: `;
+                yield* generateEventExpression(options, ctx, prop);
+            }
+            else {
+                yield `'${(0, shared_1.camelize)(propPrefix + source)}': `;
+                yield* generateModelEventExpression(options, ctx, prop);
+            }
+            yield `})${utils_1.endOfLine}`;
         }
     }
 }
@@ -70,11 +83,9 @@ function* generateEventExpression(options, ctx, prop) {
         if (_isCompoundExpression) {
             yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
+            yield* ctx.generateConditionGuards();
             prefix = ``;
             suffix = ``;
-            for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!${blockCondition}) return${utils_1.endOfLine}`;
-            }
         }
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
             if (_isCompoundExpression && isFirstMapping) {
@@ -97,7 +108,6 @@ function* generateEventExpression(options, ctx, prop) {
         if (_isCompoundExpression) {
             ctx.removeLocalVariable('$event');
             yield utils_1.endOfLine;
-            yield* ctx.generateAutoImportCompletion();
             yield `}`;
         }
     }
@@ -105,6 +115,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.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, ctx.codeFeatures.all, enableCodeFeatures)))];
             if (enableCodeFeatures) {
                 yield* codes;
             }
@@ -120,7 +120,7 @@ function* generateElementProps(options, ctx, node, props, strictPropsCheck, enab
             }
             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 `...{ `;
             }
@@ -223,13 +223,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

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

@@ -7,7 +7,6 @@ export interface TemplateCodegenOptions {
     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

@@ -32,10 +32,9 @@ 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)],
@@ -52,8 +51,7 @@ function* generateTemplate(options) {
 }
 function* generateSlots(options, ctx) {
     if (!options.hasDefineSlots) {
-        const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
-        yield `type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.${name}>`;
+        yield `type __VLS_Slots = {}`;
         for (const { expVar, propsVar } of ctx.dynamicSlots) {
             yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
         }
@@ -67,7 +65,7 @@ function* generateSlots(options, ctx) {
             }
             yield `?: (props: typeof ${slot.propsVar}) => any }`;
         }
-        yield `>${utils_1.endOfLine}`;
+        yield `${utils_1.endOfLine}`;
     }
     return `__VLS_Slots`;
 }
@@ -94,12 +92,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,12 +105,16 @@ function* generateVar(code, dollarVars, destructuredPropNames, templateRefNames,
         yield [`)`, undefined];
     }
     else {
-        if (dollarVars.has(curVar.text)) {
-            yield [`__VLS_dollars.`, undefined];
+        if (offset !== undefined) {
+            ctx.accessExternalVariable(curVar.text, offset + curVar.offset);
         }
-        else if (!isDestructuredProp) {
-            yield [`__VLS_ctx.`, undefined];
+        else {
+            ctx.accessExternalVariable(curVar.text);
+        }
+        if (ctx.dollarVars.has(curVar.text)) {
+            yield [`__VLS_dollars.`, undefined];
         }
+        yield [`__VLS_ctx.`, undefined];
         yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
     }
 }
@@ -222,4 +213,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

@@ -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