@vue/language-core 3.1.7 → 3.2.0

package/lib/codegen/template/element.js

@@ -1,17 +1,51 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateComponent = generateComponent;
 exports.generateElement = generateElement;
-const CompilerDOM = require("@vue/compiler-dom");
+const CompilerDOM = __importStar(require("@vue/compiler-dom"));
 const shared_1 = require("@vue/shared");
 const muggle_string_1 = require("muggle-string");
 const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
-const names = require("../names");
+const names = __importStar(require("../names"));
 const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const elementProps_1 = require("./elementProps");
@@ -20,33 +54,14 @@ const propertyAccess_1 = require("./propertyAccess");
 const styleScopedClasses_1 = require("./styleScopedClasses");
 const templateChild_1 = require("./templateChild");
 const vSlot_1 = require("./vSlot");
-const colonReg = /:/g;
 function* generateComponent(options, ctx, node) {
-    const tagOffsets = (0, shared_2.getElementTagOffsets)(node, options.template);
-    const failGeneratedExpressions = [];
-    const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
-    const matchConst = possibleOriginalNames.find(name => options.setupConsts.has(name));
-    const componentOriginalVar = matchConst ?? ctx.getInternalVariable();
-    const componentFunctionalVar = ctx.getInternalVariable();
-    const componentVNodeVar = ctx.getInternalVariable();
-    const componentCtxVar = ctx.getInternalVariable();
-    const componentPropsVar = ctx.getInternalVariable();
-    const isComponentTag = node.tag.toLowerCase() === 'component';
-    let isCtxVarUsed = false;
-    let isPropsVarUsed = false;
-    ctx.currentComponent = {
-        get ctxVar() {
-            isCtxVarUsed = true;
-            return componentCtxVar;
-        },
-        get propsVar() {
-            isPropsVarUsed = true;
-            return componentPropsVar;
-        },
-    };
-    let props = node.props;
-    let dynamicTagInfo;
-    if (isComponentTag) {
+    let { tag, props } = node;
+    let [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
+    let isExpression = false;
+    if (tag.includes('.')) {
+        isExpression = true;
+    }
+    else if (tag === 'component') {
         for (const prop of node.props) {
             if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
                 && prop.name === 'bind'
@@ -55,122 +70,131 @@ function* generateComponent(options, ctx, node) {
                 if (prop.arg.loc.end.offset === prop.exp.loc.end.offset) {
                     ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.exp.loc, 'is'));
                 }
-                dynamicTagInfo = {
-                    tag: prop.exp.content,
-                    offsets: [prop.exp.loc.start.offset],
-                };
+                isExpression = true;
+                tag = prop.exp.content;
+                startTagOffset = prop.exp.loc.start.offset;
+                endTagOffset = undefined;
                 props = props.filter(p => p !== prop);
                 break;
             }
         }
     }
-    else if (node.tag.includes('.')) {
-        // namespace tag
-        dynamicTagInfo = {
-            tag: node.tag,
-            offsets: tagOffsets,
-        };
-    }
-    if (matchConst) {
-        // navigation support
-        yield `/** @type {[`;
-        for (const tagOffset of tagOffsets) {
-            yield `typeof `;
-            if (componentOriginalVar === node.tag) {
-                yield [
-                    componentOriginalVar,
-                    'template',
-                    tagOffset,
-                    codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
-                ];
-            }
-            else {
-                const shouldCapitalize = matchConst[0].toUpperCase() === matchConst[0];
-                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
-            }
-            yield `, `;
-        }
-        yield `]} */${utils_1.endOfLine}`;
-        // auto import support
-        yield `// @ts-ignore${utils_1.newLine}`; // #2304
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
-        yield utils_1.endOfLine;
-    }
-    else if (dynamicTagInfo) {
-        yield `const ${componentOriginalVar} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, dynamicTagInfo.tag, dynamicTagInfo.offsets[0], `(`, `)`);
-        if (dynamicTagInfo.offsets[1] !== undefined) {
-            yield `,`;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.withoutCompletion, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], `(`, `)`);
+    const componentVar = ctx.getInternalVariable();
+    if (isExpression) {
+        yield `const ${componentVar} = `;
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, tag, startTagOffset, `(`, `)`);
+        if (endTagOffset !== undefined) {
+            yield ` || `;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.withoutCompletion, tag, endTagOffset, `(`, `)`);
         }
-        yield `)${utils_1.endOfLine}`;
+        yield `${utils_1.endOfLine}`;
     }
     else {
-        yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
-        if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
-            yield `typeof ${names._export}, `;
+        const originalNames = new Set([
+            (0, shared_1.capitalize)((0, shared_1.camelize)(tag)),
+            (0, shared_1.camelize)(tag),
+            tag,
+        ]);
+        const matchedSetupConst = [...originalNames].find(name => options.setupConsts.has(name));
+        if (matchedSetupConst) {
+            // navigation & auto import support
+            yield `const ${componentVar} = `;
+            yield* (0, camelized_1.generateCamelized)(matchedSetupConst[0] + tag.slice(1), 'template', startTagOffset, {
+                ...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
+                ...codeFeatures_1.codeFeatures.importCompletionOnly,
+            });
+            if (endTagOffset !== undefined) {
+                yield ` || `;
+                yield* (0, camelized_1.generateCamelized)(matchedSetupConst[0] + tag.slice(1), 'template', endTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
+            }
+            yield utils_1.endOfLine;
         }
         else {
-            yield `void, `;
-        }
-        yield getPossibleOriginalComponentNames(node.tag, false)
-            .map(name => `'${name}'`)
-            .join(`, `);
-        yield `>).`;
-        yield* generateCanonicalComponentName(node.tag, tagOffsets[0], {
-            ...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
-            ...options.vueCompilerOptions.checkUnknownComponents
-                ? codeFeatures_1.codeFeatures.verification
-                : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551,
-        });
-        yield utils_1.endOfLine;
-        const camelizedTag = (0, shared_1.camelize)(node.tag);
-        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])) {
-                    yield `typeof ${names.components}.`;
-                    yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, 'template', tagOffset, codeFeatures_1.codeFeatures.navigation);
-                    yield `, `;
+            yield `let ${componentVar}!: __VLS_WithComponent<'${tag}', __VLS_LocalComponents, __VLS_GlobalComponents`;
+            yield originalNames.has(options.componentName)
+                ? `, typeof ${names._export}`
+                : `, void`;
+            for (const name of originalNames) {
+                yield `, '${name}'`;
+            }
+            yield `>[`;
+            yield* (0, stringLiteralKey_1.generateStringLiteralKey)(tag, startTagOffset, {
+                ...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
+                ...options.vueCompilerOptions.checkUnknownComponents
+                    ? codeFeatures_1.codeFeatures.verification
+                    : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551,
+            });
+            yield `]${utils_1.endOfLine}`;
+            if (utils_1.identifierRegex.test((0, shared_1.camelize)(tag))) {
+                // navigation support
+                yield `/** @ts-ignore @type {typeof ${names.components}.`;
+                yield* (0, camelized_1.generateCamelized)(tag, 'template', startTagOffset, codeFeatures_1.codeFeatures.navigation);
+                if (tag[0] !== tag[0].toUpperCase()) {
+                    yield ` | typeof ${names.components}.`;
+                    yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tag), 'template', startTagOffset, codeFeatures_1.codeFeatures.navigation);
+                }
+                if (endTagOffset !== undefined) {
+                    yield ` | typeof ${names.components}.`;
+                    yield* (0, camelized_1.generateCamelized)(tag, 'template', endTagOffset, codeFeatures_1.codeFeatures.navigation);
+                    if (tag[0] !== tag[0].toUpperCase()) {
+                        yield ` | typeof ${names.components}.`;
+                        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tag), 'template', endTagOffset, codeFeatures_1.codeFeatures.navigation);
+                    }
                 }
+                yield `} */${utils_1.newLine}`;
+                // auto import support
+                yield* (0, camelized_1.generateCamelized)(tag, 'template', startTagOffset, codeFeatures_1.codeFeatures.importCompletionOnly);
+                yield utils_1.endOfLine;
             }
-            yield `]} */${utils_1.endOfLine}`;
-            // auto import support
-            yield `// @ts-ignore${utils_1.newLine}`; // #2304
-            yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), 'template', tagOffsets[0], codeFeatures_1.codeFeatures.importCompletionOnly);
-            yield utils_1.endOfLine;
         }
     }
+    yield* generateComponentBody(options, ctx, node, tag, startTagOffset, props, componentVar);
+}
+function* generateComponentBody(options, ctx, node, tag, tagOffset, props, componentVar) {
+    let isCtxVarUsed = false;
+    let isPropsVarUsed = false;
+    const getCtxVar = () => (isCtxVarUsed = true, ctxVar);
+    const getPropsVar = () => (isPropsVarUsed = true, propsVar);
+    ctx.components.push(getCtxVar);
+    const failGeneratedExpressions = [];
     const propCodes = [...(0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.checkUnknownProps, failGeneratedExpressions)];
+    const functionalVar = ctx.getInternalVariable();
+    const vNodeVar = ctx.getInternalVariable();
+    const ctxVar = ctx.getInternalVariable();
+    const propsVar = ctx.getInternalVariable();
     yield `// @ts-ignore${utils_1.newLine}`;
-    yield `const ${componentFunctionalVar} = __VLS_asFunctionalComponent(${componentOriginalVar}, new ${componentOriginalVar}({${utils_1.newLine}`;
+    yield `const ${functionalVar} = ${options.vueCompilerOptions.checkUnknownProps ? '__VLS_asFunctionalComponent0' : '__VLS_asFunctionalComponent1'}(${componentVar}, new ${componentVar}({${utils_1.newLine}`;
     yield* (0, muggle_string_1.toString)(propCodes);
     yield `}))${utils_1.endOfLine}`;
     yield `const `;
     const token = yield* (0, boundary_1.startBoundary)('template', node.loc.start.offset, codeFeatures_1.codeFeatures.doNotReportTs6133);
-    yield componentVNodeVar;
+    yield vNodeVar;
     yield (0, boundary_1.endBoundary)(token, node.loc.end.offset);
-    yield ` = ${componentFunctionalVar}`;
-    yield* generateComponentGeneric(ctx);
+    yield ` = ${functionalVar}`;
+    if (ctx.currentInfo.generic) {
+        const { content, offset } = ctx.currentInfo.generic;
+        const token = yield* (0, boundary_1.startBoundary)('template', offset, codeFeatures_1.codeFeatures.verification);
+        yield `<`;
+        yield [content, 'template', offset, codeFeatures_1.codeFeatures.all];
+        yield `>`;
+        yield (0, boundary_1.endBoundary)(token, offset + content.length);
+    }
     yield `(`;
-    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffsets[0], codeFeatures_1.codeFeatures.verification);
+    const token2 = yield* (0, boundary_1.startBoundary)('template', tagOffset, codeFeatures_1.codeFeatures.verification);
     yield `{${utils_1.newLine}`;
     yield* propCodes;
     yield `}`;
-    yield (0, boundary_1.endBoundary)(token2, tagOffsets[0] + node.tag.length);
-    yield `, ...__VLS_functionalComponentArgsRest(${componentFunctionalVar}))${utils_1.endOfLine}`;
+    yield (0, boundary_1.endBoundary)(token2, tagOffset + tag.length);
+    yield `, ...__VLS_functionalComponentArgsRest(${functionalVar}))${utils_1.endOfLine}`;
     yield* generateFailedExpressions(options, ctx, failGeneratedExpressions);
-    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentOriginalVar);
+    yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, componentVar, getCtxVar, getPropsVar);
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     const templateRef = getTemplateRef(node);
-    const tag = (0, shared_2.hyphenateTag)(node.tag);
     const isRootNode = ctx.singleRootNodes.has(node)
-        && !options.vueCompilerOptions.fallthroughComponentNames.includes(tag);
+        && !options.vueCompilerOptions.fallthroughComponentNames.includes((0, shared_2.hyphenateTag)(tag));
     if (templateRef || isRootNode) {
         const componentInstanceVar = ctx.getInternalVariable();
-        isCtxVarUsed = true;
-        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${componentCtxVar}['expose']>>[0] | null)`;
+        yield `var ${componentInstanceVar} = {} as (Parameters<NonNullable<typeof ${getCtxVar()}['expose']>>[0] | null)`;
         if (ctx.inVFor) {
             yield `[]`;
         }
@@ -184,23 +208,25 @@ function* generateComponent(options, ctx, node) {
         }
     }
     if (hasVBindAttrs(options, ctx, node)) {
-        ctx.inheritedAttrVars.add(componentPropsVar);
-        isPropsVarUsed = true;
+        ctx.inheritedAttrVars.add(getPropsVar());
     }
     yield* generateStyleScopedClassReferences(options, node);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir);
+    if (slotDir || node.children.length) {
+        yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, getCtxVar());
+    }
     if (isCtxVarUsed) {
-        yield `var ${componentCtxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+        yield `var ${ctxVar}!: __VLS_FunctionalComponentCtx<typeof ${componentVar}, typeof ${vNodeVar}>${utils_1.endOfLine}`;
     }
     if (isPropsVarUsed) {
-        yield `var ${componentPropsVar}!: __VLS_FunctionalComponentProps<typeof ${componentOriginalVar}, typeof ${componentVNodeVar}>${utils_1.endOfLine}`;
+        yield `var ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${vNodeVar}>${utils_1.endOfLine}`;
     }
+    ctx.components.pop();
 }
 function* generateElement(options, ctx, node) {
     const [startTagOffset, endTagOffset] = (0, shared_2.getElementTagOffsets)(node, options.template);
     const failedPropExps = [];
-    yield `__VLS_asFunctionalElement(${names.intrinsics}`;
+    yield `${options.vueCompilerOptions.checkUnknownProps ? `__VLS_asFunctionalElement0` : `__VLS_asFunctionalElement1`}(${names.intrinsics}`;
     yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, codeFeatures_1.codeFeatures.withoutHighlightAndCompletion);
     if (endTagOffset !== undefined) {
         yield `, `;
@@ -231,14 +257,11 @@ function* generateElement(options, ctx, node) {
         ctx.inheritedAttrVars.add(`__VLS_intrinsics.${node.tag}`);
     }
     yield* generateStyleScopedClassReferences(options, node);
-    const { currentComponent } = ctx;
-    ctx.currentComponent = undefined;
     for (const child of node.children) {
         yield* (0, templateChild_1.generateTemplateChild)(options, ctx, child);
     }
-    ctx.currentComponent = currentComponent;
 }
-function* generateStyleScopedClassReferences({ template, ts }, node) {
+function* generateStyleScopedClassReferences({ template, typescript: ts }, node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
             && prop.name === 'class'
@@ -339,42 +362,6 @@ function* generateFailedExpressions(options, ctx, failGeneratedExpressions) {
         yield utils_1.endOfLine;
     }
 }
-function getCanonicalComponentName(tagText) {
-    return utils_1.identifierRegex.test(tagText)
-        ? tagText
-        : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
-}
-function getPossibleOriginalComponentNames(tagText, deduplicate) {
-    const name1 = (0, shared_1.capitalize)((0, shared_1.camelize)(tagText));
-    const name2 = (0, shared_1.camelize)(tagText);
-    const name3 = tagText;
-    const names = [name1];
-    if (!deduplicate || name2 !== name1) {
-        names.push(name2);
-    }
-    if (!deduplicate || name3 !== name2) {
-        names.push(name3);
-    }
-    return names;
-}
-function* generateCanonicalComponentName(tagText, offset, features) {
-    if (utils_1.identifierRegex.test(tagText)) {
-        yield [tagText, 'template', offset, features];
-    }
-    else {
-        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tagText.replace(colonReg, '-')), 'template', offset, features);
-    }
-}
-function* generateComponentGeneric(ctx) {
-    if (ctx.currentInfo.generic) {
-        const { content, offset } = ctx.currentInfo.generic;
-        const token = yield* (0, boundary_1.startBoundary)('template', offset, codeFeatures_1.codeFeatures.verification);
-        yield `<`;
-        yield [content, 'template', offset, codeFeatures_1.codeFeatures.all];
-        yield `>`;
-        yield (0, boundary_1.endBoundary)(token, offset + content.length);
-    }
-}
 function getTemplateRef(node) {
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE

package/lib/codegen/template/elementDirectives.js

@@ -1,11 +1,44 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementDirectives = generateElementDirectives;
 exports.generateModifiers = generateModifiers;
-const CompilerDOM = require("@vue/compiler-dom");
+const CompilerDOM = __importStar(require("@vue/compiler-dom"));
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
-const names = require("../names");
+const names = __importStar(require("../names"));
 const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
@@ -33,7 +66,7 @@ function* generateElementDirectives(options, ctx, node) {
         const token = yield* (0, boundary_1.startBoundary)('template', prop.loc.start.offset, codeFeatures_1.codeFeatures.verification);
         yield `__VLS_asFunctionalDirective(`;
         yield* generateIdentifier(options, ctx, prop);
-        yield `)(null!, { ...__VLS_directiveBindingRestFields, `;
+        yield `, {} as import('${options.vueCompilerOptions.lib}').ObjectDirective)(null!, { ...__VLS_directiveBindingRestFields, `;
         yield* generateArg(options, ctx, prop);
         yield* generateModifiers(options, ctx, prop);
         yield* generateValue(options, ctx, prop);

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

@@ -3,7 +3,7 @@ import type * as ts from 'typescript';
 import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentOriginalVar: string, getCtxVar: () => string, getPropsVar: () => string): Generator<Code>;
 export declare function generateEventArg(options: TemplateCodegenOptions, name: string, start: number, directive?: string, features?: VueCodeInformation): Generator<Code>;
 export declare function generateEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;
 export declare function generateModelEventExpression(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode): Generator<Code>;

package/lib/codegen/template/elementEvents.js

@@ -1,18 +1,51 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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 CompilerDOM = __importStar(require("@vue/compiler-dom"));
 const shared_1 = require("@vue/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentOriginalVar) {
+function* generateElementEvents(options, ctx, node, componentOriginalVar, getCtxVar, getPropsVar) {
     let emitsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -23,7 +56,7 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar) {
                     && (!prop.arg || prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))) {
             if (!emitsVar) {
                 emitsVar = ctx.getInternalVariable();
-                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${ctx.currentComponent.ctxVar}.emit>${utils_1.endOfLine}`;
+                yield `let ${emitsVar}!: __VLS_ResolveEmits<typeof ${componentOriginalVar}, typeof ${getCtxVar()}.emit>${utils_1.endOfLine}`;
             }
             let source = prop.arg?.loc.source ?? 'model-value';
             let start = prop.arg?.loc.start.offset;
@@ -42,7 +75,7 @@ function* generateElementEvents(options, ctx, node, componentOriginalVar) {
             const propName = (0, shared_1.camelize)(propPrefix + source);
             const emitName = emitPrefix + source;
             const camelizedEmitName = (0, shared_1.camelize)(emitName);
-            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${ctx.currentComponent.propsVar}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
+            yield `const ${ctx.getInternalVariable()}: __VLS_NormalizeComponentEvent<typeof ${getPropsVar()}, typeof ${emitsVar}, '${propName}', '${emitName}', '${camelizedEmitName}'> = (${utils_1.newLine}`;
             if (prop.name === 'on') {
                 yield `{ `;
                 yield* generateEventArg(options, source, start, emitPrefix.slice(0, -1), codeFeatures_1.codeFeatures.navigation);
@@ -89,8 +122,8 @@ function* generateEventArg(options, name, start, directive = 'on', features) {
 }
 function* generateEventExpression(options, ctx, prop) {
     if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        const ast = (0, utils_1.getTypeScriptAST)(options.ts, options.template, prop.exp.content);
-        const isCompound = isCompoundExpression(options.ts, ast);
+        const ast = (0, utils_1.getTypeScriptAST)(options.typescript, options.template, prop.exp.content);
+        const isCompound = isCompoundExpression(options.typescript, ast);
         const interpolation = (0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.all, prop.exp.content, prop.exp.loc.start.offset, isCompound ? `` : `(`, isCompound ? `` : `)`);
         if (isCompound) {
             yield `(...[$event]) => {${utils_1.newLine}`;

package/lib/codegen/template/elementProps.js

@@ -1,14 +1,47 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementProps = generateElementProps;
 exports.generatePropExp = generatePropExp;
-const CompilerDOM = require("@vue/compiler-dom");
+const CompilerDOM = __importStar(require("@vue/compiler-dom"));
 const shared_1 = require("@vue/shared");
 const picomatch_1 = require("picomatch");
 const shared_2 = require("../../utils/shared");
 const codeFeatures_1 = require("../codeFeatures");
 const inlayHints_1 = require("../inlayHints");
-const names = require("../names");
+const names = __importStar(require("../names"));
 const utils_1 = require("../utils");
 const boundary_1 = require("../utils/boundary");
 const camelized_1 = require("../utils/camelized");