@vue/language-core 2.0.16 → 2.0.18

package/lib/codegen/template/element.js

@@ -16,21 +16,22 @@ const templateChild_1 = require("./templateChild");
 const colonReg = /:/g;
 function* generateComponent(options, ctx, node, currentComponent, componentCtxVar) {
     const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+    const endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
+    const tagOffsets = endTagOffset !== undefined
+        ? [startTagOffset, endTagOffset]
+        : [startTagOffset];
     const propsFailedExps = [];
-    const var_originalComponent = ctx.getInternalVariable();
+    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 isComponentTag = node.tag.toLowerCase() === 'component';
-    let endTagOffset = !node.isSelfClosing && options.template.lang === 'html' ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag) : undefined;
-    let tag = node.tag;
-    let tagOffsets = endTagOffset !== undefined
-        ? [startTagOffset, endTagOffset]
-        : [startTagOffset];
     let props = node.props;
     let dynamicTagInfo;
-    let defineComponentCtxVar;
-    let usedComponentEventsVar = false;
     if (isComponentTag) {
         for (const prop of node.props) {
             if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'bind' && prop.arg?.loc.source === 'is' && prop.exp) {
@@ -44,42 +45,59 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
             }
         }
     }
-    else if (tag.includes('.')) {
+    else if (node.tag.includes('.')) {
         // namespace tag
         dynamicTagInfo = {
-            exp: tag,
+            exp: node.tag,
             astHolder: node.loc,
             offset: startTagOffset,
         };
     }
-    if (dynamicTagInfo) {
+    if (matchImportName) {
+        // hover, renaming / find references support
+        yield `// @ts-ignore${common_1.newLine}`; // #2304
+        yield `[`;
+        for (const tagOffset of tagOffsets) {
+            if (var_originalComponent === node.tag) {
+                yield [
+                    var_originalComponent,
+                    'template',
+                    tagOffset,
+                    ctx.codeFeatures.withoutHighlightAndCompletion,
+                ];
+            }
+            else {
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
+                    navigation: {
+                        resolveRenameNewName: camelizeComponentName,
+                        resolveRenameEditText: getTagRenameApply(node.tag),
+                    },
+                });
+            }
+            yield `,`;
+        }
+        yield `]${common_1.endOfLine}`;
+    }
+    else if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = `;
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.exp, dynamicTagInfo.astHolder, dynamicTagInfo.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
     }
     else if (!isComponentTag) {
         yield `const ${var_originalComponent} = ({} as `;
-        for (const componentName of getPossibleOriginalComponentNames(tag, true)) {
-            yield `'${componentName}' extends keyof typeof __VLS_ctx ? { '${getCanonicalComponentName(tag)}': typeof __VLS_ctx`;
+        for (const componentName of possibleOriginalNames) {
+            yield `'${componentName}' extends keyof typeof __VLS_ctx ? { '${getCanonicalComponentName(node.tag)}': typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, componentName);
             yield ` }: `;
         }
         yield `typeof __VLS_resolvedLocalAndGlobalComponents)`;
-        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, getCanonicalComponentName(tag), startTagOffset, ctx.codeFeatures.verification);
+        yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, getCanonicalComponentName(node.tag), startTagOffset, ctx.codeFeatures.verification);
         yield common_1.endOfLine;
-    }
-    else {
-        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
-    }
-    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
-    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
-    yield `}))${common_1.endOfLine}`;
-    if (!dynamicTagInfo
-        && !isComponentTag) {
         // hover support
         for (const offset of tagOffsets) {
-            yield `({} as { ${getCanonicalComponentName(tag)}: typeof ${var_originalComponent} }).`;
-            yield* generateCanonicalComponentName(tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
+            yield `({} as { ${getCanonicalComponentName(node.tag)}: typeof ${var_originalComponent} }).`;
+            yield* generateCanonicalComponentName(node.tag, offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
             yield common_1.endOfLine;
         }
         const camelizedTag = (0, shared_1.camelize)(node.tag);
@@ -114,10 +132,16 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
             yield `]${common_1.endOfLine}`;
         }
     }
+    else {
+        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
+    }
+    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, false);
+    yield `}))${common_1.endOfLine}`;
     if (options.vueCompilerOptions.strictTemplates) {
         // with strictTemplates, generate once for props type-checking + instance type
         yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
+        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
         yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
     }
     else {
@@ -127,33 +151,31 @@ function* generateComponent(options, ctx, node, currentComponent, componentCtxVa
         yield `}, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${common_1.endOfLine}`;
         // and this for props type-checking
         yield `({} as (props: __VLS_FunctionalComponentProps<typeof ${var_originalComponent}, typeof ${var_componentInstance}> & Record<string, unknown>) => void)(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
+        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, props, true, propsFailedExps), `}`);
         yield `)${common_1.endOfLine}`;
     }
-    defineComponentCtxVar = ctx.getInternalVariable();
-    componentCtxVar = defineComponentCtxVar;
+    componentCtxVar = var_defineComponentCtx;
     currentComponent = node;
     for (const failedExp of propsFailedExps) {
         yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.loc.source, failedExp.loc, failedExp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
         yield common_1.endOfLine;
     }
     yield* generateVScope(options, ctx, node, props);
-    if (componentCtxVar) {
-        ctx.usedComponentCtxVars.add(componentCtxVar);
-        yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents, () => usedComponentEventsVar = true);
-    }
+    ctx.usedComponentCtxVars.add(componentCtxVar);
+    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir && componentCtxVar) {
+    if (slotDir) {
         yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
     }
     else {
         yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
     }
-    if (defineComponentCtxVar && ctx.usedComponentCtxVars.has(defineComponentCtxVar)) {
+    if (var_defineComponentCtx && ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
         yield `const ${componentCtxVar} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})!${common_1.endOfLine}`;
     }
     if (usedComponentEventsVar) {
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${componentCtxVar}.emit>${common_1.endOfLine}`;
+        yield `let ${var_componentEmit}!: typeof ${componentCtxVar}.emit${common_1.endOfLine}`;
+        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${common_1.endOfLine}`;
     }
 }
 exports.generateComponent = generateComponent;
@@ -207,9 +229,7 @@ function* generateVScope(options, ctx, node, props) {
     }
     yield* (0, elementDirectives_1.generateElementDirectives)(options, ctx, node);
     yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
-    if (options.shouldGenerateScopedClasses) {
-        yield* generateReferencesForScopedCssClasses(ctx, node);
-    }
+    yield* generateReferencesForScopedCssClasses(ctx, node);
     if (inScope) {
         yield `}${common_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
@@ -339,20 +359,31 @@ function* generateReferencesForScopedCssClasses(ctx, node) {
             && prop.name === 'class'
             && prop.value) {
             let startOffset = prop.value.loc.start.offset;
-            let tempClassName = '';
-            for (const char of (prop.value.loc.source + ' ')) {
-                if (char.trim() === '' || char === '"' || char === "'") {
-                    if (tempClassName !== '') {
-                        ctx.scopedClasses.push({ className: tempClassName, offset: startOffset });
-                        startOffset += tempClassName.length;
-                        tempClassName = '';
+            let content = prop.value.loc.source;
+            if ((content.startsWith(`'`) && content.endsWith(`'`))
+                || (content.startsWith(`"`) && content.endsWith(`"`))) {
+                startOffset++;
+                content = content.slice(1, -1);
+            }
+            if (content) {
+                let currentClassName = '';
+                for (const char of (content + ' ')) {
+                    if (char.trim() === '') {
+                        if (currentClassName !== '') {
+                            ctx.scopedClasses.push({ className: currentClassName, offset: startOffset });
+                            startOffset += currentClassName.length;
+                            currentClassName = '';
+                        }
+                        startOffset += char.length;
+                    }
+                    else {
+                        currentClassName += char;
                     }
-                    startOffset += char.length;
-                }
-                else {
-                    tempClassName += char;
                 }
             }
+            else {
+                ctx.emptyClassOffsets.push(startOffset);
+            }
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION

package/lib/codegen/template/elementDirectives.js

@@ -16,7 +16,7 @@ function* generateElementDirectives(options, ctx, node) {
             && prop.name !== 'bind'
             && prop.name !== 'scope'
             && prop.name !== 'data') {
-            ctx.accessGlobalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
+            ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
             if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.isStatic) {
                 yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.arg.content, prop.arg.loc, prop.arg.loc.start.offset + prop.arg.loc.source.indexOf(prop.arg.content), ctx.codeFeatures.all, '(', ')');
                 yield common_1.endOfLine;

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

@@ -3,7 +3,7 @@ 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, used: () => void): Generator<Code>;
-export declare function generateEventArg(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, access: boolean): Generator<Code>;
+export declare function generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, emitVar: string, eventsVar: string): Generator<Code>;
+export declare function generateEventArg(ctx: TemplateCodegenContext, arg: CompilerDOM.SimpleExpressionNode, enableHover: boolean): Generator<Code>;
 export declare function generateEventExpression(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

@@ -7,31 +7,49 @@ const shared_2 = require("../../utils/shared");
 const common_1 = require("../common");
 const camelized_1 = require("./camelized");
 const interpolation_1 = require("./interpolation");
-const objectProperty_1 = require("./objectProperty");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar, used) {
+function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, emitVar, eventsVar) {
+    let usedComponentEventsVar = false;
+    let propsVar;
     for (const prop of node.props) {
         if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on'
-            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-            used();
-            const eventVar = ctx.getInternalVariable();
-            yield `let ${eventVar} = { '${prop.arg.loc.source}': __VLS_pickEvent(`;
-            yield `${eventsVar}['${prop.arg.loc.source}'], `;
-            yield `({} as __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>)`;
-            yield* generateEventArg(options, ctx, prop.arg, true);
-            yield `) }${common_1.endOfLine}`;
-            yield `${eventVar} = { `;
-            if (prop.arg.loc.source.startsWith('[') && prop.arg.loc.source.endsWith(']')) {
-                yield `[(`;
-                yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.arg.loc.source.slice(1, -1), prop.arg.loc, prop.arg.loc.start.offset + 1, ctx.codeFeatures.all, '', '');
-                yield `)!]`;
+            && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+            && !prop.arg.loc.source.startsWith('[')
+            && !prop.arg.loc.source.endsWith(']')) {
+            usedComponentEventsVar = true;
+            if (!propsVar) {
+                propsVar = ctx.getInternalVariable();
+                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${common_1.endOfLine}`;
             }
-            else {
-                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, prop.arg.loc.source, prop.arg.loc.start.offset, ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation, prop.arg.loc);
+            const originalPropName = (0, shared_1.camelize)('on-' + prop.arg.loc.source);
+            const originalPropNameObjectKey = common_1.variableNameRegex.test(originalPropName)
+                ? originalPropName
+                : `'${originalPropName}'`;
+            yield `const ${ctx.getInternalVariable()}: `;
+            if (!options.vueCompilerOptions.strictTemplates) {
+                yield `Record<string, unknown> & `;
             }
+            yield `(`;
+            yield `__VLS_IsAny<__VLS_AsFunctionOrAny<typeof ${propsVar}['${originalPropName}']>> extends false${common_1.newLine}`;
+            yield `? typeof ${propsVar}${common_1.newLine}`;
+            yield `: __VLS_IsAny<typeof ${eventsVar}['${prop.arg.loc.source}']> extends false${common_1.newLine}`;
+            yield `? {${common_1.newLine}`;
+            yield `/**__VLS_emit,${emitVar},${prop.arg.loc.source}*/${common_1.newLine}`;
+            yield `${originalPropNameObjectKey}?: typeof ${eventsVar}['${prop.arg.loc.source}']${common_1.newLine}`;
+            yield `}${common_1.newLine}`;
+            if (prop.arg.loc.source !== (0, shared_1.camelize)(prop.arg.loc.source)) {
+                yield `: __VLS_IsAny<typeof ${eventsVar}['${(0, shared_1.camelize)(prop.arg.loc.source)}']> extends false${common_1.newLine}`;
+                yield `? {${common_1.newLine}`;
+                yield `/**__VLS_emit,${emitVar},${(0, shared_1.camelize)(prop.arg.loc.source)}*/${common_1.newLine}`;
+                yield `${originalPropNameObjectKey}?: typeof ${eventsVar}['${(0, shared_1.camelize)(prop.arg.loc.source)}']${common_1.newLine}`;
+                yield `}${common_1.newLine}`;
+            }
+            yield `: typeof ${propsVar}${common_1.newLine}`;
+            yield `) = {${common_1.newLine}`;
+            yield* generateEventArg(ctx, prop.arg, true);
             yield `: `;
             yield* generateEventExpression(options, ctx, prop);
-            yield ` }${common_1.endOfLine}`;
+            yield `}${common_1.endOfLine}`;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.name === 'on'
@@ -42,6 +60,7 @@ function* generateElementEvents(options, ctx, node, componentVar, componentInsta
             yield common_1.endOfLine;
         }
     }
+    return usedComponentEventsVar;
 }
 exports.generateElementEvents = generateElementEvents;
 const eventArgFeatures = {
@@ -60,28 +79,20 @@ const eventArgFeatures = {
         },
     },
 };
-function* generateEventArg(options, ctx, arg, access) {
-    if (arg.loc.source.startsWith('[') && arg.loc.source.endsWith(']')) {
-        yield `[`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.loc.source.slice(1, -1), arg.loc, arg.loc.start.offset + 1, ctx.codeFeatures.all, '', '');
-        yield `]`;
-    }
-    else if (common_1.variableNameRegex.test((0, shared_1.camelize)(arg.loc.source))) {
-        if (access) {
-            yield `.`;
+function* generateEventArg(ctx, arg, enableHover) {
+    const features = enableHover
+        ? {
+            ...ctx.codeFeatures.withoutHighlightAndCompletion,
+            ...eventArgFeatures,
         }
-        yield ['', 'template', arg.loc.start.offset, eventArgFeatures];
+        : eventArgFeatures;
+    if (common_1.variableNameRegex.test((0, shared_1.camelize)(arg.loc.source))) {
+        yield ['', 'template', arg.loc.start.offset, features];
         yield `on`;
         yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping);
     }
     else {
-        if (access) {
-            yield `[`;
-        }
-        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, eventArgFeatures, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
-        if (access) {
-            yield `]`;
-        }
+        yield* (0, common_1.wrapWith)(arg.loc.start.offset, arg.loc.end.offset, features, `'`, ['', 'template', arg.loc.start.offset, common_1.combineLastMapping], 'on', ...(0, camelized_1.generateCamelized)((0, shared_1.capitalize)(arg.loc.source), arg.loc.start.offset, common_1.combineLastMapping), `'`);
     }
 }
 exports.generateEventArg = generateEventArg;

package/lib/codegen/template/elementProps.js

@@ -12,47 +12,34 @@ const objectProperty_1 = require("./objectProperty");
 const language_core_1 = require("@volar/language-core");
 const elementEvents_1 = require("./elementEvents");
 function* generateElementProps(options, ctx, node, props, enableCodeFeatures, propsFailedExps) {
-    let styleAttrNum = 0;
-    let classAttrNum = 0;
     const isIntrinsicElement = node.tagType === CompilerDOM.ElementTypes.ELEMENT || node.tagType === CompilerDOM.ElementTypes.TEMPLATE;
     const canCamelize = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
-    if (props.some(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-        && prop.name === 'bind'
-        && !prop.arg
-        && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)) {
-        // fix https://github.com/vuejs/language-tools/issues/2166
-        styleAttrNum++;
-        classAttrNum++;
-    }
-    if (!isIntrinsicElement) {
-        let generatedEvent = false;
-        for (const prop of props) {
-            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-                && prop.name === 'on'
-                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                if (prop.arg.loc.source.startsWith('[') && prop.arg.loc.source.endsWith(']')) {
-                    continue;
-                }
-                if (!generatedEvent) {
+    for (const prop of props) {
+        if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
+            && prop.name === 'on') {
+            if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                && !prop.arg.loc.source.startsWith('[')
+                && !prop.arg.loc.source.endsWith(']')) {
+                if (isIntrinsicElement) {
                     yield `...{ `;
-                    generatedEvent = true;
+                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg, true);
+                    yield `: `;
+                    yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
+                    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, `;
             }
-        }
-        if (generatedEvent) {
-            yield `}, `;
-        }
-    }
-    else {
-        for (const prop of props) {
-            if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
-                && prop.name === 'on'
-                && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                yield* (0, elementEvents_1.generateEventArg)(options, ctx, prop.arg, false);
-                yield `: `;
-                yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
-                yield `,${common_1.newLine}`;
+            else {
+                if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                    && prop.arg.loc.source.startsWith('[')
+                    && prop.arg.loc.source.endsWith(']')) {
+                    propsFailedExps?.push(prop.arg);
+                }
+                if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                    propsFailedExps?.push(prop.exp);
+                }
             }
         }
     }
@@ -61,33 +48,35 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             && (prop.name === 'bind' || prop.name === 'model')
             && (prop.name === 'model' || prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)
             && (!prop.exp || prop.exp.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION)) {
-            let propName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-                ? prop.arg.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
+            let propName;
+            if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+                propName = prop.arg.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
                     ? prop.arg.content
-                    : prop.arg.loc.source
-                : getModelValuePropName(node, options.vueCompilerOptions.target, options.vueCompilerOptions);
-            if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
-                propName = propName?.substring(1);
+                    : prop.arg.loc.source;
+            }
+            else {
+                propName = getModelValuePropName(node, options.vueCompilerOptions.target, options.vueCompilerOptions);
             }
             if (propName === undefined
-                || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))
-                || (propName === 'style' && ++styleAttrNum >= 2)
-                || (propName === 'class' && ++classAttrNum >= 2)
-                || (propName === 'name' && node.tagType === CompilerDOM.ElementTypes.SLOT) // #2308
-            ) {
+                || options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern))) {
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
                     propsFailedExps?.push(prop.exp);
                 }
                 continue;
             }
+            if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
+                propName = propName.substring(1);
+            }
+            const shouldSpread = propName === 'style' || propName === 'class';
             const shouldCamelize = canCamelize
                 && (!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 codes = (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg
-                ? prop.arg.loc.start.offset
-                : prop.loc.start.offset, prop.arg
-                ? {
+            if (shouldSpread) {
+                yield `...{ `;
+            }
+            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, {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
                     navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
                         ? {
@@ -95,33 +84,34 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
                             resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
                         }
                         : false,
-                }
-                : ctx.codeFeatures.withoutHighlightAndCompletion, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize), `: (`, ...genereatePropExp(options, ctx, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+                }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
+                : [propName]), `: (`, ...genereatePropExp(options, ctx, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
             if (!enableCodeFeatures) {
                 yield (0, language_core_1.toString)([...codes]);
             }
             else {
                 yield* codes;
             }
+            if (shouldSpread) {
+                yield ` }`;
+            }
             yield `, `;
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
             if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
-                || (prop.name === 'style' && ++styleAttrNum >= 2)
-                || (prop.name === 'class' && ++classAttrNum >= 2)
-                || (prop.name === 'name' && node.tagType === CompilerDOM.ElementTypes.SLOT) // #2308
-            ) {
-                continue;
-            }
-            if (options.vueCompilerOptions.target < 3
-                && prop.name === 'persisted'
-                && node.tag.toLowerCase() === 'transition') {
                 // 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 = canCamelize
                 && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
                 && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
+            if (shouldSpread) {
+                yield `...{ `;
+            }
             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, shouldCamelize
                 ? {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -141,6 +131,9 @@ function* generateElementProps(options, ctx, node, props, enableCodeFeatures, pr
             else {
                 yield* codes;
             }
+            if (shouldSpread) {
+                yield ` }`;
+            }
             yield `, `;
         }
         else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
@@ -172,7 +165,7 @@ function* genereatePropExp(options, ctx, exp, features, isShorthand, inlayHints)
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
             if (common_1.variableNameRegex.test(propVariableName)) {
                 if (!ctx.hasLocalVariable(propVariableName)) {
-                    ctx.accessGlobalVariable(propVariableName, exp.loc.start.offset);
+                    ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
                     yield `__VLS_ctx.`;
                 }
                 yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);

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

@@ -1,60 +1,18 @@
 import * as CompilerDOM from '@vue/compiler-dom';
 import type * as ts from 'typescript';
 import type { Code, Sfc, VueCompilerOptions } from '../../types';
+import { TemplateCodegenContext } from './context';
 export interface TemplateCodegenOptions {
     ts: typeof ts;
     compilerOptions: ts.CompilerOptions;
     vueCompilerOptions: VueCompilerOptions;
     template: NonNullable<Sfc['template']>;
-    shouldGenerateScopedClasses?: boolean;
-    stylesScopedClasses: Set<string>;
+    scriptSetupBindingNames: Set<string>;
+    scriptSetupImportComponentNames: Set<string>;
     hasDefineSlots?: boolean;
     slotsAssignName?: string;
     propsAssignName?: string;
 }
-export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, {
-    ctx: {
-        slots: {
-            name: string;
-            loc?: number | undefined;
-            tagRange: [number, number];
-            varName: string;
-            nodeLoc: any;
-        }[];
-        dynamicSlots: {
-            expVar: string;
-            varName: string;
-        }[];
-        codeFeatures: {
-            all: import("../../types").VueCodeInformation;
-            verification: import("../../types").VueCodeInformation;
-            completion: import("../../types").VueCodeInformation;
-            additionalCompletion: import("../../types").VueCodeInformation;
-            navigation: import("../../types").VueCodeInformation;
-            navigationAndCompletion: import("../../types").VueCodeInformation;
-            withoutHighlight: import("../../types").VueCodeInformation;
-            withoutHighlightAndCompletion: import("../../types").VueCodeInformation;
-            withoutHighlightAndCompletionAndNavigation: import("../../types").VueCodeInformation;
-        };
-        accessGlobalVariables: Map<string, Set<number>>;
-        hasSlotElements: Set<CompilerDOM.ElementNode>;
-        blockConditions: string[];
-        usedComponentCtxVars: Set<string>;
-        scopedClasses: {
-            className: string;
-            offset: number;
-        }[];
-        accessGlobalVariable(name: string, offset?: number | undefined): void;
-        hasLocalVariable: (name: string) => boolean;
-        addLocalVariable: (name: string) => void;
-        removeLocalVariable: (name: string) => void;
-        getInternalVariable: () => string;
-        ignoreError: () => Generator<Code, any, unknown>;
-        expectError: (prevNode: CompilerDOM.CommentNode) => Generator<Code, any, unknown>;
-        resetDirectiveComments: (endStr: string) => Generator<Code, any, unknown>;
-        generateAutoImportCompletion: () => Generator<Code, any, unknown>;
-    };
-    hasSlot: boolean;
-}, unknown>;
+export declare function generateTemplate(options: TemplateCodegenOptions): Generator<Code, TemplateCodegenContext>;
 export declare function forEachElementNode(node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode): Generator<CompilerDOM.ElementNode>;
 export declare function isFragment(node: CompilerDOM.IfNode | CompilerDOM.ForNode): boolean | undefined;