@vue/language-core 2.1.10 → 2.2.2

package/lib/codegen/template/elementProps.js

@@ -1,18 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementProps = generateElementProps;
+exports.generatePropExp = generatePropExp;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const minimatch_1 = require("minimatch");
 const muggle_string_1 = require("muggle-string");
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const codeFeatures_1 = require("../codeFeatures");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const unicode_1 = require("../utils/unicode");
+const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-const inlayHints_1 = require("../inlayHints");
-function* generateElementProps(options, ctx, node, props, enableCodeFeatures, propsFailedExps) {
+function* generateElementProps(options, ctx, node, props, strictPropsCheck, enableCodeFeatures, failedPropExps) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
     for (const prop of props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -22,25 +26,26 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                 && !prop.arg.loc.source.endsWith(']')) {
                 if (!isComponent) {
                     yield `...{ `;
-                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg, true);
+                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg.loc.source, prop.arg.loc.start.offset);
                     yield `: `;
                     yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
-                    yield `}, `;
+                    yield `},`;
                 }
                 else {
-                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any }, `;
+                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any },`;
                 }
+                yield utils_1.newLine;
             }
             else if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.startsWith('[')
                 && prop.arg.loc.source.endsWith(']')) {
-                propsFailedExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
-                propsFailedExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
+                failedPropExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
             }
         }
     }
@@ -56,136 +61,106 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                     : prop.arg.loc.source;
             }
             else {
-                propName = getModelValuePropName(node, options.vueCompilerOptions.target, options.vueCompilerOptions);
+                propName = getModelPropName(node, options.vueCompilerOptions);
             }
             if (propName === undefined
                 || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                    failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
                 }
                 continue;
             }
-            if (prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
-                propName = propName.substring(1);
+            if (prop.name === 'bind'
+                && prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
+                propName = propName.slice(1);
             }
             const shouldSpread = propName === 'style' || propName === 'class';
-            const shouldCamelize = isComponent
-                && (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
-                && (0, shared_2.hyphenateAttr)(propName) === propName
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, propName);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize);
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
-            const codes = (0, common_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,
-                    verification: options.vueCompilerOptions.strictTemplates
-                        ? codeInfo.verification
-                        : {
-                            shouldReport(_source, code) {
-                                if (String(code) === '2353' || String(code) === '2561') {
-                                    return false;
-                                }
-                                return typeof codeInfo.verification === 'object'
-                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
-                                    : true;
-                            },
-                        },
-                    navigation: codeInfo.navigation
-                        ? {
-                            resolveRenameNewName: shared_1.camelize,
-                            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
-                        }
-                        : false,
-                }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
-                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
+                ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, codeInfo, prop.loc.name_2 ??= {}, shouldCamelize)
+                : (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures), `)`);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
             if (shouldSpread) {
                 yield ` }`;
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
+            if (isComponent && prop.name === 'model' && prop.modifiers.length) {
+                const propertyName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                    ? !prop.arg.isStatic
+                        ? `[__VLS_tryAsConstant(\`$\{${prop.arg.content}\}Modifiers\`)]`
+                        : (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 utils_1.newLine;
+            }
         }
         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)
+                // 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')) {
                 continue;
             }
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
-            const shouldCamelize = isComponent
-                && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, prop.name);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, true);
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = shouldCamelize
-                ? {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
-                        ? {
-                            resolveRenameNewName: shared_1.camelize,
-                            resolveRenameEditText: shared_2.hyphenateAttr,
-                        }
-                        : false,
-                }
-                : {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                };
-            if (!options.vueCompilerOptions.strictTemplates) {
-                const verification = codeInfo.verification;
-                codeInfo.verification = {
-                    shouldReport(_source, code) {
-                        if (String(code) === '2353' || String(code) === '2561') {
-                            return false;
-                        }
-                        return typeof verification === 'object'
-                            ? verification.shouldReport?.(_source, code) ?? true
-                            : true;
-                    },
-                };
-            }
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
-                ? generateAttrValue(prop.value, ctx.codeFeatures.all)
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ??= {}, shouldCamelize), `: (`, ...(prop.value
+                ? generateAttrValue(prop.value, ctx.codeFeatures.withoutNavigation)
                 : [`true`]), `)`);
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
             if (shouldSpread) {
                 yield ` }`;
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'bind'
             && !prop.arg
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'));
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (prop.exp.loc.source === '$attrs') {
+                if (enableCodeFeatures) {
+                    ctx.bindingAttrLocs.push(prop.exp.loc);
+                }
             }
             else {
-                yield* codes;
+                const codes = (0, utils_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, enableCodeFeatures));
+                if (enableCodeFeatures) {
+                    yield* codes;
+                }
+                else {
+                    yield (0, muggle_string_1.toString)([...codes]);
+                }
+                yield `,${utils_1.newLine}`;
             }
-            yield `, `;
-        }
-        else {
-            // comment this line to avoid affecting comments in prop expressions
-            // tsCodeGen.addText("/* " + [prop.type, prop.name, prop.arg?.loc.source, prop.exp?.loc.source, prop.loc.source].join(", ") + " */ ");
         }
     }
 }
-function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enableCodeFeatures) {
+function* generatePropExp(options, ctx, prop, exp, features, enableCodeFeatures) {
+    const isShorthand = prop.arg?.loc.start.offset === prop.exp?.loc.start.offset;
     if (isShorthand && features.completion) {
         features = {
             ...features,
@@ -194,16 +169,29 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
     }
     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, exp.loc.source, exp.loc, exp.loc.start.offset, features, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, '(', ')');
         }
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
-            if (common_1.variableNameRegex.test(propVariableName)) {
-                if (!ctx.hasLocalVariable(propVariableName)) {
+            if (utils_1.variableNameRegex.test(propVariableName)) {
+                const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
+                const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
+                const codes = (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
+                if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
+                    yield* codes;
+                }
+                else {
                     ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-                    yield `__VLS_ctx.`;
+                    if (isTemplateRef) {
+                        yield `__VLS_unref(`;
+                        yield* codes;
+                        yield `)`;
+                    }
+                    else {
+                        yield `__VLS_ctx.`;
+                        yield* codes;
+                    }
                 }
-                yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
                 if (enableCodeFeatures) {
                     ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
                 }
@@ -215,45 +203,50 @@ function* generatePropExp(options, ctx, prop, exp, features, isShorthand, enable
     }
 }
 function* generateAttrValue(attrNode, features) {
-    const char = attrNode.loc.source.startsWith("'") ? "'" : '"';
-    yield char;
+    const quote = attrNode.loc.source.startsWith("'") ? "'" : '"';
+    yield quote;
     let start = attrNode.loc.start.offset;
-    let end = attrNode.loc.end.offset;
     let content = attrNode.loc.source;
     if ((content.startsWith('"') && content.endsWith('"'))
         || (content.startsWith("'") && content.endsWith("'"))) {
         start++;
-        end--;
         content = content.slice(1, -1);
     }
-    if (needToUnicode(content)) {
-        yield* (0, common_1.wrapWith)(start, end, features, toUnicode(content));
-    }
-    else {
-        yield [content, 'template', start, features];
-    }
-    yield char;
+    yield* (0, unicode_1.generateUnicode)(content, start, features);
+    yield quote;
 }
-function needToUnicode(str) {
-    return str.includes('\\') || str.includes('\n');
+function getShouldCamelize(options, prop, propName) {
+    return (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
+        || !prop.arg
+        || (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
+        && (0, shared_2.hyphenateAttr)(propName) === propName
+        && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
 }
-function toUnicode(str) {
-    return str.split('').map(value => {
-        const temp = value.charCodeAt(0).toString(16).padStart(4, '0');
-        if (temp.length > 2) {
-            return '\\u' + temp;
-        }
-        return value;
-    }).join('');
+function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
+    return ctx.resolveCodeFeatures({
+        ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
+        navigation: {
+            resolveRenameNewName: shared_1.camelize,
+            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
+        },
+        verification: strictPropsCheck || {
+            shouldReport(_source, code) {
+                if (String(code) === '2353' || String(code) === '2561') {
+                    return false;
+                }
+                return true;
+            },
+        },
+    });
 }
-function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
+function getModelPropName(node, vueCompilerOptions) {
     for (const modelName in vueCompilerOptions.experimentalModelPropName) {
         const tags = vueCompilerOptions.experimentalModelPropName[modelName];
         for (const tag in tags) {
             if (node.tag === tag || node.tag === (0, shared_2.hyphenateTag)(tag)) {
-                const v = tags[tag];
-                if (typeof v === 'object') {
-                    const arr = Array.isArray(v) ? v : [v];
+                const val = tags[tag];
+                if (typeof val === 'object') {
+                    const arr = Array.isArray(val) ? val : [val];
                     for (const attrs of arr) {
                         let failed = false;
                         for (const attr in attrs) {
@@ -283,6 +276,6 @@ function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
             }
         }
     }
-    return vueVersion < 3 ? 'value' : 'modelValue';
+    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map

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

@@ -16,6 +16,7 @@ export interface TemplateCodegenOptions {
     slotsAssignName?: string;
     propsAssignName?: string;
     inheritAttrs: boolean;
+    selfComponentName?: string;
 }
 export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, TemplateCodegenContext>;
 export declare function forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode>;

package/lib/codegen/template/index.js

@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateTemplate = generateTemplate;
 exports.forEachElementNode = forEachElementNode;
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const shared_1 = require("../../utils/shared");
+const utils_1 = require("../utils");
 const context_1 = require("./context");
-const element_1 = require("./element");
 const objectProperty_1 = require("./objectProperty");
-const stringLiteralKey_1 = require("./stringLiteralKey");
-const templateChild_1 = require("./templateChild");
 const styleScopedClasses_1 = require("./styleScopedClasses");
+const templateChild_1 = require("./templateChild");
 function* generateTemplate(options) {
     const ctx = (0, context_1.createTemplateCodegenContext)(options);
     if (options.slotsAssignName) {
@@ -18,89 +17,88 @@ function* generateTemplate(options) {
     if (options.propsAssignName) {
         ctx.addLocalVariable(options.propsAssignName);
     }
-    ctx.addLocalVariable('$el');
-    ctx.addLocalVariable('$refs');
-    yield* generatePreResolveComponents(options);
+    const slotsPropertyName = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
+    ctx.specialVars.add(slotsPropertyName);
+    ctx.specialVars.add('$attrs');
+    ctx.specialVars.add('$refs');
+    ctx.specialVars.add('$el');
     if (options.template.ast) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined, undefined, undefined);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
     }
-    yield* (0, styleScopedClasses_1.generateStyleScopedClasses)(ctx);
-    if (!options.hasDefineSlots) {
-        yield `var __VLS_slots!:`;
-        yield* generateSlotsType(options, ctx);
-        yield common_1.endOfLine;
+    yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
+    const speicalTypes = [
+        [slotsPropertyName, yield* generateSlots(options, ctx)],
+        ['$attrs', yield* generateInheritedAttrs(options, ctx)],
+        ['$refs', yield* generateTemplateRefs(options, ctx)],
+        ['$el', yield* generateRootEl(ctx)]
+    ];
+    yield `var __VLS_special!: {${utils_1.newLine}`;
+    for (const [name, type] of speicalTypes) {
+        yield `${name}: ${type}${utils_1.endOfLine}`;
     }
+    yield `} & { [K in keyof typeof __VLS_ctx]: unknown }${utils_1.endOfLine}`;
     yield* ctx.generateAutoImportCompletion();
-    yield* generateInheritedAttrs(ctx);
-    yield* generateRefs(ctx);
-    yield* generateRootEl(ctx);
     return ctx;
 }
-function* generateSlotsType(options, ctx) {
-    for (const { expVar, varName } of ctx.dynamicSlots) {
-        ctx.hasSlot = true;
-        yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${common_1.newLine}`;
-    }
-    yield `{${common_1.newLine}`;
-    for (const slot of ctx.slots) {
-        ctx.hasSlot = true;
-        if (slot.name && slot.loc !== undefined) {
-            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+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}>`;
+        for (const { expVar, propsVar } of ctx.dynamicSlots) {
+            ctx.hasSlot = true;
+            yield `${utils_1.newLine}& { [K in NonNullable<typeof ${expVar}>]?: (props: typeof ${propsVar}) => any }`;
         }
-        else {
-            yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+        for (const slot of ctx.slots) {
+            yield `${utils_1.newLine}& { `;
+            ctx.hasSlot = true;
+            if (slot.name && slot.offset !== undefined) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.offset, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+            }
+            else {
+                yield* (0, utils_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+            }
+            yield `?: (props: typeof ${slot.propsVar}) => any }`;
         }
-        yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
+        yield `>${utils_1.endOfLine}`;
     }
-    yield `}`;
+    return `__VLS_Slots`;
 }
-function* generateInheritedAttrs(ctx) {
-    yield 'var __VLS_inheritedAttrs!: {}';
+function* generateInheritedAttrs(options, ctx) {
+    yield `type __VLS_InheritedAttrs = {}`;
     for (const varName of ctx.inheritedAttrVars) {
         yield ` & typeof ${varName}`;
     }
-    yield common_1.endOfLine;
+    yield utils_1.endOfLine;
+    if (ctx.bindingAttrLocs.length) {
+        yield `[`;
+        for (const loc of ctx.bindingAttrLocs) {
+            yield `__VLS_special.`;
+            yield [
+                loc.source,
+                'template',
+                loc.start.offset,
+                ctx.codeFeatures.all
+            ];
+            yield `,`;
+        }
+        yield `]${utils_1.endOfLine}`;
+    }
+    return `import('${options.vueCompilerOptions.lib}').ComponentPublicInstance['$attrs'] & Partial<__VLS_InheritedAttrs>`;
 }
-function* generateRefs(ctx) {
-    yield `const __VLS_refs = {${common_1.newLine}`;
+function* generateTemplateRefs(options, ctx) {
+    yield `type __VLS_TemplateRefs = {${utils_1.newLine}`;
     for (const [name, [varName, offset]] of ctx.templateRefs) {
-        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
-        yield `: ${varName},${common_1.newLine}`;
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, name, offset, ctx.codeFeatures.navigationAndCompletion);
+        yield `: typeof ${varName},${utils_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
+    yield `}${utils_1.endOfLine}`;
+    return `__VLS_TemplateRefs`;
 }
 function* generateRootEl(ctx) {
-    if (ctx.singleRootElType) {
-        yield `var $el!: ${ctx.singleRootElType}${common_1.endOfLine}`;
-    }
-    else {
-        yield `var $el!: any${common_1.endOfLine}`;
-    }
-}
-function* generatePreResolveComponents(options) {
-    yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
-    if (options.template.ast) {
-        const components = new Set();
-        for (const node of forEachElementNode(options.template.ast)) {
-            if (node.tagType === CompilerDOM.ElementTypes.COMPONENT
-                && node.tag.toLowerCase() !== 'component'
-                && !node.tag.includes('.') // namespace tag 
-            ) {
-                if (components.has(node.tag)) {
-                    continue;
-                }
-                components.add(node.tag);
-                yield common_1.newLine;
-                yield ` & __VLS_WithComponent<'${(0, element_1.getCanonicalComponentName)(node.tag)}', typeof __VLS_localComponents, `;
-                yield (0, element_1.getPossibleOriginalComponentNames)(node.tag, false)
-                    .map(name => `"${name}"`)
-                    .join(', ');
-                yield `>`;
-            }
-        }
-    }
-    yield `>${common_1.endOfLine}`;
+    yield `type __VLS_RootEl = `;
+    yield ctx.singleRootElType ?? `any`;
+    yield utils_1.endOfLine;
+    return `__VLS_RootEl`;
 }
 function* forEachElementNode(node) {
     if (node.type === CompilerDOM.NodeTypes.ROOT) {

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

@@ -1,6 +1,8 @@
 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 generateInterpolation(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, _code: string, astHolder: any, start: number | undefined, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
-export declare function forEachInterpolationSegment(ts: typeof import('typescript'), destructuredPropNames: Set<string> | undefined, templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, type?: 'errorMappingOnly' | 'startText' | 'endText']>;
+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>;