@vue/language-core 2.2.2 → 2.2.6

package/lib/codegen/template/element.js

@@ -8,6 +8,7 @@ const shared_2 = require("../../utils/shared");
 const inlayHints_1 = require("../inlayHints");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
+const wrapWith_1 = require("../utils/wrapWith");
 const elementChildren_1 = require("./elementChildren");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
@@ -17,7 +18,7 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const vSlot_1 = require("./vSlot");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node) {
+function* generateComponent(options, ctx, node, isVForChild) {
     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);
@@ -28,15 +29,13 @@ function* generateComponent(options, ctx, node) {
     const failedPropExps = [];
     const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
     const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
-    const var_originalComponent = matchImportName ?? ctx.getInternalVariable();
-    const var_functionalComponent = ctx.getInternalVariable();
-    const var_componentInstance = ctx.getInternalVariable();
-    const var_componentEmit = ctx.getInternalVariable();
-    const var_componentEvents = ctx.getInternalVariable();
-    const var_defineComponentCtx = ctx.getInternalVariable();
+    const componentOriginalVar = matchImportName ?? ctx.getInternalVariable();
+    const componentFunctionalVar = ctx.getInternalVariable();
+    const componentVNodeVar = ctx.getInternalVariable();
+    const componentCtxVar = ctx.getInternalVariable();
     const isComponentTag = node.tag.toLowerCase() === 'component';
     ctx.currentComponent = {
-        ctxVar: var_defineComponentCtx,
+        ctxVar: componentCtxVar,
         used: false
     };
     let props = node.props;
@@ -69,14 +68,13 @@ function* generateComponent(options, ctx, node) {
         };
     }
     if (matchImportName) {
-        // hover, renaming / find references support
-        yield `// @ts-ignore${utils_1.newLine}`; // #2304
-        yield `/** @type { [`;
+        // navigation support
+        yield `/** @type {[`;
         for (const tagOffset of tagOffsets) {
             yield `typeof `;
-            if (var_originalComponent === node.tag) {
+            if (componentOriginalVar === node.tag) {
                 yield [
-                    var_originalComponent,
+                    componentOriginalVar,
                     'template',
                     tagOffset,
                     ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -84,7 +82,7 @@ function* generateComponent(options, ctx, node) {
             }
             else {
                 const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
-                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
+                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: {
                         resolveRenameNewName: camelizeComponentName,
@@ -94,19 +92,19 @@ function* generateComponent(options, ctx, node) {
             }
             yield `, `;
         }
-        yield `] } */${utils_1.endOfLine}`;
+        yield `]} */${utils_1.endOfLine}`;
     }
     else if (dynamicTagInfo) {
-        yield `const ${var_originalComponent} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], dynamicTagInfo.astHolder, '(', ')');
+        yield `const ${componentOriginalVar} = (`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], dynamicTagInfo.astHolder, `(`, `)`);
         if (dynamicTagInfo.offsets[1] !== undefined) {
             yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, `(`, `)`);
         }
         yield `)${utils_1.endOfLine}`;
     }
     else if (!isComponentTag) {
-        yield `const ${var_originalComponent} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
+        yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
         if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
             yield `typeof __VLS_self & (new () => { `
                 + (0, shared_2.getSlotsPropertyName)(options.vueCompilerOptions.target)
@@ -122,14 +120,14 @@ function* generateComponent(options, ctx, node) {
         yield* generateCanonicalComponentName(node.tag, tagOffsets[0], ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
         yield `${utils_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
-        if (utils_1.variableNameRegex.test(camelizedTag)) {
-            // renaming / find references support
-            yield `/** @type { [`;
+        if (utils_1.identifierRegex.test(camelizedTag)) {
+            // navigation support
+            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, tagOffset, {
+                    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),
@@ -138,11 +136,11 @@ function* generateComponent(options, ctx, node) {
                     yield `, `;
                 }
             }
-            yield `] } */${utils_1.endOfLine}`;
+            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), tagOffsets[0], {
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], {
                     completion: {
                         isAdditional: true,
                         onlyImport: true,
@@ -153,65 +151,67 @@ function* generateComponent(options, ctx, node) {
         }
     }
     else {
-        yield `const ${var_originalComponent} = {} as any${utils_1.endOfLine}`;
+        yield `const ${componentOriginalVar} = {} as any${utils_1.endOfLine}`;
     }
     yield `// @ts-ignore${utils_1.newLine}`;
-    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({${utils_1.newLine}`;
+    yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
     yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, false);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
-    yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.resolveCodeFeatures({
+    yield* (0, wrapWith_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.resolveCodeFeatures({
         verification: {
             shouldReport(_source, code) {
+                // https://typescript.tv/errors/#ts6133
                 return String(code) !== '6133';
             },
         }
-    }), var_componentInstance);
-    yield ` = ${var_functionalComponent}`;
+    }), componentVNodeVar);
+    yield ` = ${componentFunctionalVar}`;
     yield* generateComponentGeneric(ctx);
     yield `(`;
-    yield* (0, utils_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
-    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${utils_1.endOfLine}`;
+    yield* (0, wrapWith_1.wrapWith)(tagOffsets[0], tagOffsets[0] + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    const [refName, offset] = yield* generateVScope(options, ctx, node, props);
-    const isRootNode = node === ctx.singleRootNode;
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar);
+    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
+    const [refName, offset] = yield* generateElementReference(options, ctx, node);
+    const tag = (0, shared_2.hyphenateTag)(node.tag);
+    const isRootNode = ctx.singleRootNodes.has(node) && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
     if (refName || isRootNode) {
-        const varName = ctx.getInternalVariable();
+        const componentInstanceVar = ctx.getInternalVariable();
         ctx.currentComponent.used = true;
-        yield `var ${varName} = {} as (Parameters<NonNullable<typeof ${var_defineComponentCtx}['expose']>>[0] | null)`;
-        if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
-            && node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
-            && node.codegenNode.props.properties.some(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')) {
+        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
+        if (isVForChild) {
             yield `[]`;
         }
         yield `${utils_1.endOfLine}`;
-        if (refName) {
-            ctx.templateRefs.set(refName, [varName, offset]);
+        if (refName && offset) {
+            ctx.templateRefs.set(refName, {
+                typeExp: `typeof ${ctx.getHoistVariable(componentInstanceVar)}`,
+                offset
+            });
         }
         if (isRootNode) {
-            ctx.singleRootElType = `NonNullable<typeof ${varName}>['$el']`;
+            ctx.singleRootElTypes.push(`NonNullable<typeof ${componentInstanceVar}>['$el']`);
         }
     }
-    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents);
-    if (usedComponentEventsVar) {
-        ctx.currentComponent.used = true;
-        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${utils_1.endOfLine}`;
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${utils_1.endOfLine}`;
-    }
     if (hasVBindAttrs(options, ctx, node)) {
         const attrsVar = ctx.getInternalVariable();
+        yield `let ${attrsVar}!: Parameters<typeof ${componentFunctionalVar}>[0]${utils_1.endOfLine}`;
         ctx.inheritedAttrVars.add(attrsVar);
-        yield `let ${attrsVar}!: Parameters<typeof ${var_functionalComponent}>[0];\n`;
     }
+    (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 {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, true);
+        // #932: reference for default slot
+        yield* (0, vSlot_1.generateImplicitDefaultSlot)(ctx, node);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
     if (ctx.currentComponent.used) {
-        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${utils_1.endOfLine}`;
+        yield `var ${componentCtxVar}!: __VLS_PickFunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
     }
 }
 function* generateElement(options, ctx, node, isVForChild) {
@@ -227,23 +227,28 @@ function* generateElement(options, ctx, node, isVForChild) {
         yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, endTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     }
     yield `)(`;
-    yield* (0, utils_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
+    yield* (0, wrapWith_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${utils_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, true, failedPropExps), `}`);
     yield `)${utils_1.endOfLine}`;
     yield* generateFailedPropExps(options, ctx, failedPropExps);
-    const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
-    if (refName) {
-        let refValue = `__VLS_nativeElements['${node.tag}']`;
+    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
+    const [refName, offset] = yield* generateElementReference(options, ctx, node);
+    if (refName && offset) {
+        let typeExp = `__VLS_NativeElements['${node.tag}']`;
         if (isVForChild) {
-            refValue = `[${refValue}]`;
+            typeExp += `[]`;
         }
-        ctx.templateRefs.set(refName, [refValue, offset]);
+        ctx.templateRefs.set(refName, {
+            typeExp,
+            offset
+        });
     }
-    if (ctx.singleRootNode === node) {
-        ctx.singleRootElType = `typeof __VLS_nativeElements['${node.tag}']`;
+    if (ctx.singleRootNodes.has(node)) {
+        ctx.singleRootElTypes.push(`__VLS_NativeElements['${node.tag}']`);
     }
     if (hasVBindAttrs(options, ctx, node)) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsicElements.${node.tag}`);
     }
+    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
     yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
 }
 function* generateFailedPropExps(options, ctx, failedPropExps) {
@@ -252,36 +257,8 @@ function* generateFailedPropExps(options, ctx, failedPropExps) {
         yield utils_1.endOfLine;
     }
 }
-function* generateVScope(options, ctx, node, props) {
-    const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
-    let inScope = false;
-    let originalConditionsNum = ctx.blockConditions.length;
-    if (vScope?.type === CompilerDOM.NodeTypes.DIRECTIVE && vScope.exp) {
-        const scopeVar = ctx.getInternalVariable();
-        const condition = `__VLS_withScope(__VLS_ctx, ${scopeVar})`;
-        yield `const ${scopeVar} = `;
-        yield [
-            vScope.exp.loc.source,
-            'template',
-            vScope.exp.loc.start.offset,
-            ctx.codeFeatures.all,
-        ];
-        yield utils_1.endOfLine;
-        yield `if (${condition}) {${utils_1.newLine}`;
-        ctx.blockConditions.push(condition);
-        inScope = true;
-    }
-    yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
-    const [refName, offset] = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-    (0, styleScopedClasses_1.collectStyleScopedClassReferences)(options, ctx, node);
-    if (inScope) {
-        yield `}${utils_1.newLine}`;
-        ctx.blockConditions.length = originalConditionsNum;
-    }
-    return [refName, offset];
-}
 function getCanonicalComponentName(tagText) {
-    return utils_1.variableNameRegex.test(tagText)
+    return utils_1.identifierRegex.test(tagText)
         ? tagText
         : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
 }
@@ -299,17 +276,17 @@ function getPossibleOriginalComponentNames(tagText, deduplicate) {
     return names;
 }
 function* generateCanonicalComponentName(tagText, offset, features) {
-    if (utils_1.variableNameRegex.test(tagText)) {
+    if (utils_1.identifierRegex.test(tagText)) {
         yield [tagText, 'template', offset, features];
     }
     else {
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), offset, features);
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), 'template', offset, features);
     }
 }
 function* generateComponentGeneric(ctx) {
     if (ctx.lastGenericComment) {
         const { content, offset } = ctx.lastGenericComment;
-        yield* (0, utils_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
+        yield* (0, wrapWith_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
             content,
             'template',
             offset,
@@ -318,17 +295,17 @@ function* generateComponentGeneric(ctx) {
     }
     ctx.lastGenericComment = undefined;
 }
-function* generateReferencesForElements(options, ctx, node) {
+function* generateElementReference(options, ctx, node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'ref'
             && prop.value) {
             const [content, startOffset] = (0, utils_1.normalizeAttributeValue)(prop.value);
-            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${utils_1.newLine}`;
-            yield `/** @type { typeof __VLS_ctx`;
+            // navigation support for `const foo = ref()`
+            yield `/** @type {typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
-            yield ` } */${utils_1.endOfLine}`;
-            if (utils_1.variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
+            yield `} */${utils_1.endOfLine}`;
+            if (utils_1.identifierRegex.test(content) && !options.templateRefNames.has(content)) {
                 ctx.accessExternalVariable(content, startOffset);
             }
             return [content, startOffset];
@@ -337,7 +314,7 @@ function* generateReferencesForElements(options, ctx, node) {
     return [];
 }
 function hasVBindAttrs(options, ctx, node) {
-    return options.vueCompilerOptions.fallthroughAttributes && (node === ctx.singleRootNode ||
+    return options.vueCompilerOptions.fallthroughAttributes && ((options.inheritAttrs && ctx.singleRootNodes.has(node)) ||
         node.props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'bind'
             && prop.exp?.loc.source === '$attrs'));

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, isDefaultSlot?: boolean): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

package/lib/codegen/template/elementChildren.js

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementChildren = generateElementChildren;
-const CompilerDOM = require("@vue/compiler-dom");
-const utils_1 = require("../utils");
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node, isDefaultSlot = false) {
+function* generateElementChildren(options, ctx, node) {
     yield* ctx.resetDirectiveComments('end of element children start');
     let prev;
     for (const childNode of node.children) {
@@ -12,15 +10,5 @@ function* generateElementChildren(options, ctx, node, isDefaultSlot = false) {
         prev = childNode;
     }
     yield* ctx.generateAutoImportCompletion();
-    // fix https://github.com/vuejs/language-tools/issues/932
-    if (ctx.currentComponent
-        && isDefaultSlot
-        && node.children.length
-        && node.tagType === CompilerDOM.ElementTypes.COMPONENT) {
-        ctx.currentComponent.used = true;
-        yield `${ctx.currentComponent.ctxVar}.slots!.`;
-        yield* (0, utils_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
-        yield utils_1.endOfLine;
-    }
 }
 //# sourceMappingURL=elementChildren.js.map

package/lib/codegen/template/elementDirectives.js

@@ -9,6 +9,8 @@ const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const camelized_1 = require("../utils/camelized");
 const stringLiteralKey_1 = require("../utils/stringLiteralKey");
+const wrapWith_1 = require("../utils/wrapWith");
+const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
 const builtInDirectives = new Set([
@@ -31,13 +33,13 @@ function* generateElementDirectives(options, ctx, node) {
             continue;
         }
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield* (0, wrapWith_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(options, ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
         yield utils_1.endOfLine;
     }
 }
 function* generateIdentifier(options, ctx, prop) {
     const rawName = 'v-' + prop.name;
-    yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + rawName.length, ctx.codeFeatures.verification, `__VLS_directives.`, ...(0, camelized_1.generateCamelized)(rawName, prop.loc.start.offset, ctx.resolveCodeFeatures({
+    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,
@@ -54,7 +56,7 @@ function* generateArg(options, ctx, prop) {
         return;
     }
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, utils_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, `arg`);
+    yield* (0, wrapWith_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, `arg`);
     yield `: `;
     if (arg.isStatic) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.all);
@@ -71,7 +73,7 @@ function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
     }
     const startOffset = modifiers[0].loc.start.offset - 1;
     const endOffset = modifiers.at(-1).loc.end.offset;
-    yield* (0, utils_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
+    yield* (0, wrapWith_1.wrapWith)(startOffset, endOffset, ctx.codeFeatures.verification, propertyName);
     yield `: { `;
     for (const mod of modifiers) {
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlightAndNavigation);
@@ -84,9 +86,9 @@ function* generateValue(options, ctx, prop) {
     if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, utils_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
+    yield* (0, wrapWith_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, `value`);
     yield `: `;
-    yield* (0, utils_1.wrapWith)(exp.loc.start.offset, exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, exp.content, exp.loc.start.offset, exp.loc, `(`, `)`));
+    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;

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

@@ -3,7 +3,8 @@ import type * as ts from 'typescript';
 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, eventsVar: string): Generator<Code, boolean>;
+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,73 +3,87 @@ 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");
 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, componentVar, componentInstanceVar, eventsVar) {
-    let usedComponentEventsVar = false;
+function* generateElementEvents(options, ctx, node, componentFunctionalVar, componentVNodeVar, componentCtxVar) {
+    let emitVar;
+    let eventsVar;
     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.loc.source.startsWith('[')
-            && !prop.arg.loc.source.endsWith(']')) {
-            usedComponentEventsVar = true;
-            if (!propsVar) {
+            && (prop.name === 'on' && (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)
+                || 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();
                 propsVar = ctx.getInternalVariable();
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${utils_1.endOfLine}`;
+                yield `let ${emitVar}!: typeof ${componentCtxVar}.emit${utils_1.endOfLine}`;
+                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}`;
         }
     }
-    return usedComponentEventsVar;
 }
 function* generateEventArg(ctx, name, start, directive = 'on') {
     const features = {
         ...ctx.codeFeatures.withoutHighlightAndCompletion,
         ...ctx.codeFeatures.navigationWithoutRename,
     };
-    if (utils_1.variableNameRegex.test((0, shared_1.camelize)(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), start, utils_1.combineLastMapping);
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), 'template', start, utils_1.combineLastMapping);
     }
     else {
-        yield* (0, utils_1.wrapWith)(start, start + name.length, features, `'`, ['', 'template', start, utils_1.combineLastMapping], directive, ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping), `'`);
+        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), `'`);
     }
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        let prefix = '(';
-        let suffix = ')';
+        let prefix = `(`;
+        let suffix = `)`;
         let isFirstMapping = true;
         const ast = (0, utils_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
         const _isCompoundExpression = isCompoundExpression(options.ts, ast);
         if (_isCompoundExpression) {
             yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
-            prefix = '';
-            suffix = '';
+            prefix = ``;
+            suffix = ``;
             for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!(${blockCondition})) return${utils_1.endOfLine}`;
+                prefix += `if (!${blockCondition}) return${utils_1.endOfLine}`;
             }
         }
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
@@ -101,6 +115,16 @@ function* generateEventExpression(options, ctx, prop) {
         yield `() => {}`;
     }
 }
+function* generateModelEventExpression(options, ctx, prop) {
+    if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+        yield `(...[$event]) => (`;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset, prop.exp.loc);
+        yield ` = $event)`;
+    }
+    else {
+        yield `() => {}`;
+    }
+}
 function isCompoundExpression(ts, ast) {
     let result = true;
     if (ast.statements.length === 0) {

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

@@ -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, features: VueCodeInformation, enableCodeFeatures?: boolean): Generator<Code>;