@vue/language-core - npm Package Compare versions

Comparing version 2.1.10 to 2.2.0

lib/codegen/globalTypes.js

@@ -20,2 +20,3 @@ "use strict";
 	const __VLS_unref: typeof import('${lib}').unref;
+	const __VLS_placeholder: any;
 
@@ -47,3 +48,3 @@ const __VLS_nativeElements = {
 		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
-		${strictTemplates ? '{}' : '{ [K in N0]: unknown }'}
+		${strictTemplates ? '{}' : '{ [K in N0]: unknown }'};
 	type __VLS_FunctionalComponentProps<T, K> =
@@ -60,2 +61,11 @@ '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
 		: false;
+	type __VLS_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (
+		__VLS_IsFunction<Props, onEvent> extends true
+			? Props
+			: __VLS_IsFunction<Events, Event> extends true
+				? { [K in onEvent]?: Events[Event] }
+				: __VLS_IsFunction<Events, CamelizedEvent> extends true
+					? { [K in onEvent]?: Events[CamelizedEvent] }
+					: Props
+	)${strictTemplates ? '' : ' & Record<string, unknown>'};
 	// fix https://github.com/vuejs/language-tools/issues/926
@@ -125,3 +135,2 @@ type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
 	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
-	function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
 	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
@@ -128,0 +137,0 @@ T extends new (...args: any) => any

lib/codegen/localTypes.js

@@ -5,3 +5,3 @@ "use strict";
 const shared_1 = require("../utils/shared");
-const common_1 = require("./common");
+const utils_1 = require("./utils");
 function getLocalTypesGenerator(compilerOptions, vueCompilerOptions) {
@@ -21,3 +21,3 @@ const used = new Set();
 `.trimStart());
-    const PrettifyLocal = defineHelper(`__VLS_PrettifyLocal`, () => `type __VLS_PrettifyLocal<T> = { [K in keyof T]: T[K]; } & {}${common_1.endOfLine}`);
+    const PrettifyLocal = defineHelper(`__VLS_PrettifyLocal`, () => `type __VLS_PrettifyLocal<T> = { [K in keyof T]: T[K]; } & {}${utils_1.endOfLine}`);
     const WithTemplateSlots = defineHelper(`__VLS_WithTemplateSlots`, () => `
@@ -62,3 +62,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 `.trimStart());
-    const OmitIndexSignature = defineHelper(`__VLS_OmitIndexSignature`, () => `type __VLS_OmitIndexSignature<T> = { [K in keyof T as {} extends Record<K, unknown> ? never : K]: T[K]; }${common_1.endOfLine}`);
+    const OmitIndexSignature = defineHelper(`__VLS_OmitIndexSignature`, () => `type __VLS_OmitIndexSignature<T> = { [K in keyof T as {} extends Record<K, unknown> ? never : K]: T[K]; }${utils_1.endOfLine}`);
     const helpers = {
@@ -65,0 +65,0 @@ [PrettifyLocal.name]: PrettifyLocal,

lib/codegen/script/component.js

@@ -7,3 +7,3 @@ "use strict";
 exports.generatePropsOption = generatePropsOption;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const index_1 = require("./index");
@@ -13,18 +13,18 @@ function* generateComponent(options, ctx, scriptSetup, scriptSetupRanges) {
         // use defineComponent() from user space code if it exist
-        yield (0, common_1.generateSfcBlockSection)(options.sfc.script, options.scriptRanges.exportDefault.expression.start, options.scriptRanges.exportDefault.args.start, index_1.codeFeatures.all);
-        yield `{${common_1.newLine}`;
+        yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, options.scriptRanges.exportDefault.expression.start, options.scriptRanges.exportDefault.args.start, index_1.codeFeatures.all);
+        yield `{${utils_1.newLine}`;
     }
     else {
-        yield `(await import('${options.vueCompilerOptions.lib}')).defineComponent({${common_1.newLine}`;
+        yield `(await import('${options.vueCompilerOptions.lib}')).defineComponent({${utils_1.newLine}`;
     }
-    yield `setup() {${common_1.newLine}`;
-    yield `return {${common_1.newLine}`;
+    yield `setup() {${utils_1.newLine}`;
+    yield `return {${utils_1.newLine}`;
     if (ctx.bypassDefineComponent) {
         yield* generateComponentSetupReturns(scriptSetupRanges);
     }
-    if (scriptSetupRanges.expose.define) {
-        yield `...__VLS_exposed,${common_1.newLine}`;
+    if (scriptSetupRanges.defineExpose) {
+        yield `...__VLS_exposed,${utils_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `},${common_1.newLine}`;
+    yield `}${utils_1.endOfLine}`;
+    yield `},${utils_1.newLine}`;
     if (!ctx.bypassDefineComponent) {
@@ -39,9 +39,9 @@ const emitOptionCodes = [...generateEmitsOption(options, scriptSetupRanges)];
         const { args } = options.scriptRanges.exportDefault;
-        yield (0, common_1.generateSfcBlockSection)(options.sfc.script, args.start + 1, args.end - 1, index_1.codeFeatures.all);
+        yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, args.start + 1, args.end - 1, index_1.codeFeatures.all);
     }
-    if (options.vueCompilerOptions.target >= 3.5 && scriptSetupRanges.templateRefs.length) {
-        yield `__typeRefs: {} as __VLS_TemplateResult['refs'],${common_1.newLine}`;
+    if (options.vueCompilerOptions.target >= 3.5 && options.templateCodegen?.templateRefs.size) {
+        yield `__typeRefs: {} as __VLS_TemplateResult['refs'],${utils_1.newLine}`;
     }
     if (options.vueCompilerOptions.target >= 3.5 && options.templateCodegen?.singleRootElType) {
-        yield `__typeEl: {} as __VLS_TemplateResult['rootEl'],${common_1.newLine}`;
+        yield `__typeEl: {} as __VLS_TemplateResult['rootEl'],${utils_1.newLine}`;
     }
@@ -52,10 +52,10 @@ yield `})`;
     // fill $props
-    if (scriptSetupRanges.props.define) {
+    if (scriptSetupRanges.defineProps) {
         // NOTE: defineProps is inaccurate for $props
-        yield `$props: __VLS_makeOptional(${scriptSetupRanges.props.name ?? `__VLS_props`}),${common_1.newLine}`;
-        yield `...${scriptSetupRanges.props.name ?? `__VLS_props`},${common_1.newLine}`;
+        yield `$props: __VLS_makeOptional(${scriptSetupRanges.defineProps.name ?? `__VLS_props`}),${utils_1.newLine}`;
+        yield `...${scriptSetupRanges.defineProps.name ?? `__VLS_props`},${utils_1.newLine}`;
     }
     // fill $emit
-    if (scriptSetupRanges.emits.define) {
-        yield `$emit: ${scriptSetupRanges.emits.name ?? '__VLS_emit'},${common_1.newLine}`;
+    if (scriptSetupRanges.defineEmits) {
+        yield `$emit: ${scriptSetupRanges.defineEmits.name ?? '__VLS_emit'},${utils_1.newLine}`;
     }
@@ -71,6 +71,6 @@ }
     }
-    if (scriptSetupRanges.emits.define) {
-        const { typeArg, hasUnionTypeArg } = scriptSetupRanges.emits.define;
+    if (scriptSetupRanges.defineEmits) {
+        const { name, typeArg, hasUnionTypeArg } = scriptSetupRanges.defineEmits;
         codes.push({
-            optionExp: `{} as __VLS_NormalizeEmits<typeof ${scriptSetupRanges.emits.name ?? '__VLS_emit'}>`,
+            optionExp: `{} as __VLS_NormalizeEmits<typeof ${name ?? '__VLS_emit'}>`,
             typeOptionType: typeArg && !hasUnionTypeArg
@@ -85,3 +85,3 @@ ? `__VLS_Emit`
             yield codes[0].typeOptionType;
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
@@ -95,3 +95,3 @@ else if (codes.length >= 2) {
             }
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
@@ -103,12 +103,12 @@ }
             yield codes[0].optionExp;
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
         else if (codes.length >= 2) {
-            yield `emits: {${common_1.newLine}`;
+            yield `emits: {${utils_1.newLine}`;
             for (const code of codes) {
                 yield `...`;
                 yield code.optionExp;
-                yield `,${common_1.newLine}`;
+                yield `,${utils_1.newLine}`;
             }
-            yield `},${common_1.newLine}`;
+            yield `},${utils_1.newLine}`;
         }
@@ -123,5 +123,5 @@ }
                 `{} as `,
-                scriptSetupRanges.props.withDefaults?.arg ? `${ctx.localTypes.WithDefaults}<` : '',
+                scriptSetupRanges.withDefaults?.arg ? `${ctx.localTypes.WithDefaults}<` : '',
                 `${ctx.localTypes.TypePropsToOption}<__VLS_PublicProps>`,
-                scriptSetupRanges.props.withDefaults?.arg ? `, typeof __VLS_withDefaultsArg>` : '',
+                scriptSetupRanges.withDefaults?.arg ? `, typeof __VLS_withDefaultsArg>` : '',
             ].join(''),
@@ -131,6 +131,6 @@ typeOptionExp: `{} as __VLS_PublicProps`,
     }
-    if (scriptSetupRanges.props.define?.arg) {
-        const { arg } = scriptSetupRanges.props.define;
+    if (scriptSetupRanges.defineProps?.arg) {
+        const { arg } = scriptSetupRanges.defineProps;
         codes.push({
-            optionExp: (0, common_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, index_1.codeFeatures.navigation),
+            optionExp: (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, index_1.codeFeatures.navigation),
             typeOptionExp: undefined,
@@ -155,3 +155,3 @@ });
     const useTypeOption = options.vueCompilerOptions.target >= 3.5 && codes.every(code => code.typeOptionExp);
-    const useOption = !useTypeOption || scriptSetupRanges.props.withDefaults;
+    const useOption = !useTypeOption || scriptSetupRanges.withDefaults;
     if (useTypeOption) {
@@ -161,12 +161,12 @@ if (codes.length === 1) {
             yield codes[0].typeOptionExp;
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
         else if (codes.length >= 2) {
-            yield `__typeProps: {${common_1.newLine}`;
+            yield `__typeProps: {${utils_1.newLine}`;
             for (const { typeOptionExp } of codes) {
                 yield `...`;
                 yield typeOptionExp;
-                yield `,${common_1.newLine}`;
+                yield `,${utils_1.newLine}`;
             }
-            yield `},${common_1.newLine}`;
+            yield `},${utils_1.newLine}`;
         }
@@ -178,12 +178,12 @@ }
             yield codes[0].optionExp;
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
         else if (codes.length >= 2) {
-            yield `props: {${common_1.newLine}`;
+            yield `props: {${utils_1.newLine}`;
             for (const { optionExp } of codes) {
                 yield `...`;
                 yield optionExp;
-                yield `,${common_1.newLine}`;
+                yield `,${utils_1.newLine}`;
             }
-            yield `},${common_1.newLine}`;
+            yield `},${utils_1.newLine}`;
         }
@@ -190,0 +190,0 @@ }

lib/codegen/script/componentSelf.js

@@ -5,3 +5,3 @@ "use strict";
 const path = require("path-browserify");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const component_1 = require("./component");
@@ -12,5 +12,5 @@ const index_1 = require("./index");
     if (options.sfc.scriptSetup && options.scriptSetupRanges) {
-        yield `const __VLS_self = (await import('${options.vueCompilerOptions.lib}')).defineComponent({${common_1.newLine}`;
-        yield `setup() {${common_1.newLine}`;
-        yield `return {${common_1.newLine}`;
+        yield `const __VLS_self = (await import('${options.vueCompilerOptions.lib}')).defineComponent({${utils_1.newLine}`;
+        yield `setup() {${utils_1.newLine}`;
+        yield `return {${utils_1.newLine}`;
         if (ctx.bypassDefineComponent) {
@@ -27,4 +27,4 @@ yield* (0, component_1.generateComponentSetupReturns)(options.scriptSetupRanges);
         ]) {
-            for (const expose of bindings) {
-                const varName = content.substring(expose.start, expose.end);
+            for (const { range } of bindings) {
+                const varName = content.slice(range.start, range.end);
                 if (!templateUsageVars.has(varName) && !templateCodegenCtx.accessExternalVariables.has(varName)) {
@@ -36,3 +36,3 @@ continue;
                 const scriptOffset = options.getGeneratedLength();
-                yield `${varName},${common_1.newLine}`;
+                yield `${varName},${utils_1.newLine}`;
                 options.linkedCodeMappings.push({
@@ -46,4 +46,4 @@ sourceOffsets: [scriptOffset],
         }
-        yield `}${common_1.endOfLine}`; // return {
-        yield `},${common_1.newLine}`; // setup() {
+        yield `}${utils_1.endOfLine}`; // return {
+        yield `},${utils_1.newLine}`; // setup() {
         if (options.sfc.scriptSetup && options.scriptSetupRanges && !ctx.bypassDefineComponent) {
@@ -58,13 +58,13 @@ const emitOptionCodes = [...(0, component_1.generateEmitsOption)(options, options.scriptSetupRanges)];
             const { args } = options.scriptRanges.exportDefault;
-            yield (0, common_1.generateSfcBlockSection)(options.sfc.script, args.start + 1, args.end - 1, index_1.codeFeatures.all);
+            yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, args.start + 1, args.end - 1, index_1.codeFeatures.all);
         }
-        yield `})${common_1.endOfLine}`; // defineComponent {
+        yield `})${utils_1.endOfLine}`; // defineComponent {
     }
     else if (options.sfc.script) {
-        yield `let __VLS_self!: typeof import('./${path.basename(options.fileName)}').default${common_1.endOfLine}`;
+        yield `let __VLS_self!: typeof import('./${path.basename(options.fileName)}').default${utils_1.endOfLine}`;
     }
     else {
-        yield `const __VLS_self = (await import('${options.vueCompilerOptions.lib}')).defineComponent({})${common_1.endOfLine}`;
+        yield `const __VLS_self = (await import('${options.vueCompilerOptions.lib}')).defineComponent({})${utils_1.endOfLine}`;
     }
 }
 //# sourceMappingURL=componentSelf.js.map

lib/codegen/script/context.js

@@ -14,4 +14,4 @@ "use strict";
         bindingNames: new Set([
-            ...options.scriptRanges?.bindings.map(range => options.sfc.script.content.substring(range.start, range.end)) ?? [],
-            ...options.scriptSetupRanges?.bindings.map(range => options.sfc.scriptSetup.content.substring(range.start, range.end)) ?? [],
+            ...options.scriptRanges?.bindings.map(({ range }) => options.sfc.script.content.slice(range.start, range.end)) ?? [],
+            ...options.scriptSetupRanges?.bindings.map(({ range }) => options.sfc.scriptSetup.content.slice(range.start, range.end)) ?? [],
         ]),
@@ -18,0 +18,0 @@ localTypes,

lib/codegen/script/index.d.ts

@@ -16,3 +16,2 @@ import type { Mapping } from '@volar/language-core';
 export interface ScriptCodegenOptions {
-    fileName: string;
     ts: typeof ts;
@@ -22,2 +21,4 @@ compilerOptions: ts.CompilerOptions;
     sfc: Sfc;
+    edited: boolean;
+    fileName: string;
     lang: string;
@@ -29,8 +30,9 @@ scriptRanges: ScriptRanges | undefined;
     } | undefined;
-    edited: boolean;
-    appendGlobalTypes: boolean;
+    destructuredPropNames: Set<string>;
+    templateRefNames: Set<string>;
     getGeneratedLength: () => number;
     linkedCodeMappings: Mapping[];
+    appendGlobalTypes: boolean;
 }
 export declare function generateScript(options: ScriptCodegenOptions): Generator<Code, ScriptCodegenContext>;
 export declare function generateScriptSectionPartiallyEnding(source: string, end: number, mark: string): Generator<Code>;

lib/codegen/script/index.js

@@ -7,4 +7,4 @@ "use strict";
 const path = require("path-browserify");
-const common_1 = require("../common");
 const globalTypes_1 = require("../globalTypes");
+const utils_1 = require("../utils");
 const componentSelf_1 = require("./componentSelf");
@@ -47,6 +47,6 @@ const context_1 = require("./context");
             }
-            yield `/// <reference types="${relativePath}" />${common_1.newLine}`;
+            yield `/// <reference types="${relativePath}" />${utils_1.newLine}`;
         }
         else {
-            yield `/// <reference types=".vue-global-types/${options.vueCompilerOptions.lib}_${options.vueCompilerOptions.target}_${options.vueCompilerOptions.strictTemplates}.d.ts" />${common_1.newLine}`;
+            yield `/// <reference types=".vue-global-types/${options.vueCompilerOptions.lib}_${options.vueCompilerOptions.target}_${options.vueCompilerOptions.strictTemplates}.d.ts" />${utils_1.newLine}`;
         }
@@ -66,10 +66,9 @@ }
             yield* (0, scriptSetup_1.generateScriptSetupImports)(options.sfc.scriptSetup, options.scriptSetupRanges);
-            yield* generateDefineProp(options, options.sfc.scriptSetup);
             if (exportDefault) {
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, exportDefault.expression.start, exports.codeFeatures.all);
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, exportDefault.expression.start, exports.codeFeatures.all);
                 yield* (0, scriptSetup_1.generateScriptSetup)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.end, options.sfc.script.content.length, exports.codeFeatures.all);
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.end, options.sfc.script.content.length, exports.codeFeatures.all);
             }
             else {
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
                 yield* generateScriptSectionPartiallyEnding(options.sfc.script.name, options.sfc.script.content.length, '#3632/both.vue');
@@ -99,23 +98,23 @@ yield* (0, scriptSetup_1.generateScriptSetup)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
             });
-            yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, exportDefault.expression.start, exports.codeFeatures.all);
+            yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, exportDefault.expression.start, exports.codeFeatures.all);
             yield options.vueCompilerOptions.optionsWrapper[0];
-            yield (0, common_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.start, exportDefault.expression.end, exports.codeFeatures.all);
+            yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.start, exportDefault.expression.end, exports.codeFeatures.all);
             yield options.vueCompilerOptions.optionsWrapper[1];
-            yield (0, common_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.end, options.sfc.script.content.length, exports.codeFeatures.all);
+            yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, exportDefault.expression.end, options.sfc.script.content.length, exports.codeFeatures.all);
         }
         else if (classBlockEnd !== undefined) {
             if (options.vueCompilerOptions.skipTemplateCodegen) {
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
             }
             else {
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, classBlockEnd, exports.codeFeatures.all);
-                yield `__VLS_template = () => {${common_1.newLine}`;
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, classBlockEnd, exports.codeFeatures.all);
+                yield `__VLS_template = () => {${utils_1.newLine}`;
                 const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx);
                 yield* (0, componentSelf_1.generateComponentSelf)(options, ctx, templateCodegenCtx);
-                yield `}${common_1.endOfLine}`;
-                yield (0, common_1.generateSfcBlockSection)(options.sfc.script, classBlockEnd, options.sfc.script.content.length, exports.codeFeatures.all);
+                yield `}${utils_1.endOfLine}`;
+                yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, classBlockEnd, options.sfc.script.content.length, exports.codeFeatures.all);
             }
         }
         else {
-            yield (0, common_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
+            yield (0, utils_1.generateSfcBlockSection)(options.sfc.script, 0, options.sfc.script.content.length, exports.codeFeatures.all);
         }
@@ -125,3 +124,2 @@ }
         yield* (0, scriptSetup_1.generateScriptSetupImports)(options.sfc.scriptSetup, options.scriptSetupRanges);
-        yield* generateDefineProp(options, options.sfc.scriptSetup);
         yield* (0, scriptSetup_1.generateScriptSetup)(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
@@ -136,5 +134,5 @@ }
     if (!ctx.generatedTemplate) {
-        yield `function __VLS_template() {${common_1.newLine}`;
+        yield `function __VLS_template() {${utils_1.newLine}`;
         const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx);
-        yield `}${common_1.endOfLine}`;
+        yield `}${utils_1.endOfLine}`;
         yield* (0, componentSelf_1.generateComponentSelf)(options, ctx, templateCodegenCtx);
@@ -145,3 +143,3 @@ }
     if (options.edited) {
-        yield `type __VLS_IntrinsicElementsCompletion = __VLS_IntrinsicElements${common_1.endOfLine}`;
+        yield `type __VLS_IntrinsicElementsCompletion = __VLS_IntrinsicElements${utils_1.endOfLine}`;
     }
@@ -160,20 +158,4 @@ yield* ctx.localTypes.generate([...ctx.localTypes.getUsedNames()]);
     yield ['', source, end, exports.codeFeatures.verification];
-    yield `/* PartiallyEnd: ${mark} */${common_1.newLine}`;
+    yield `/* PartiallyEnd: ${mark} */${utils_1.newLine}`;
 }
-function* generateDefineProp(options, scriptSetup) {
-    const definePropProposalA = scriptSetup.content.trimStart().startsWith('// @experimentalDefinePropProposal=kevinEdition') || options.vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition';
-    const definePropProposalB = scriptSetup.content.trimStart().startsWith('// @experimentalDefinePropProposal=johnsonEdition') || options.vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition';
-    if (definePropProposalA || definePropProposalB) {
-        yield `type __VLS_PropOptions<T> = Exclude<import('${options.vueCompilerOptions.lib}').Prop<T>, import('${options.vueCompilerOptions.lib}').PropType<T>>${common_1.endOfLine}`;
-        if (definePropProposalA) {
-            yield `declare function defineProp<T>(name: string, options: ({ required: true } | { default: T }) & __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${common_1.endOfLine}`;
-            yield `declare function defineProp<T>(name?: string, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T | undefined>${common_1.endOfLine}`;
-        }
-        if (definePropProposalB) {
-            yield `declare function defineProp<T>(value: T | (() => T), required?: boolean, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${common_1.endOfLine}`;
-            yield `declare function defineProp<T>(value: T | (() => T) | undefined, required: true, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${common_1.endOfLine}`;
-            yield `declare function defineProp<T>(value?: T | (() => T), required?: boolean, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T | undefined>${common_1.endOfLine}`;
-        }
-    }
-}
 //# sourceMappingURL=index.js.map

lib/codegen/script/scriptSetup.js

@@ -5,3 +5,3 @@ "use strict";
 exports.generateScriptSetup = generateScriptSetup;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const component_1 = require("./component");
@@ -13,3 +13,3 @@ const componentSelf_1 = require("./componentSelf");
     yield [
-        scriptSetup.content.substring(0, Math.max(scriptSetupRanges.importSectionEndOffset, scriptSetupRanges.leadingCommentEndOffset)),
+        scriptSetup.content.slice(0, Math.max(scriptSetupRanges.importSectionEndOffset, scriptSetupRanges.leadingCommentEndOffset)),
         'scriptSetup',
@@ -19,6 +19,4 @@ 0,
     ];
-    yield common_1.newLine;
 }
 function* generateScriptSetup(options, ctx, scriptSetup, scriptSetupRanges) {
-    const definePropMirrors = new Map();
     if (scriptSetup.generic) {
@@ -47,11 +45,11 @@ if (!options.scriptRanges?.exportDefault) {
         }
-        yield `>(${common_1.newLine}`
-            + `	__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'],${common_1.newLine}`
-            + `	__VLS_ctx?: ${ctx.localTypes.PrettifyLocal}<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>,${common_1.newLine}` // use __VLS_Prettify for less dts code
-            + `	__VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'],${common_1.newLine}`
-            + `	__VLS_setup = (async () => {${common_1.newLine}`;
-        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, undefined, definePropMirrors);
+        yield `>(${utils_1.newLine}`
+            + `	__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'],${utils_1.newLine}`
+            + `	__VLS_ctx?: ${ctx.localTypes.PrettifyLocal}<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>,${utils_1.newLine}` // use __VLS_Prettify for less dts code
+            + `	__VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'],${utils_1.newLine}`
+            + `	__VLS_setup = (async () => {${utils_1.newLine}`;
+        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, undefined);
         const emitTypes = [];
-        if (scriptSetupRanges.emits.define) {
-            emitTypes.push(`typeof ${scriptSetupRanges.emits.name ?? '__VLS_emit'}`);
+        if (scriptSetupRanges.defineEmits) {
+            emitTypes.push(`typeof ${scriptSetupRanges.defineEmits.name ?? '__VLS_emit'}`);
         }
@@ -61,10 +59,10 @@ if (scriptSetupRanges.defineProp.some(p => p.isModel)) {
         }
-        yield `		return {} as {${common_1.newLine}`
-            + `			props: ${ctx.localTypes.PrettifyLocal}<typeof __VLS_functionalComponentProps & __VLS_TemplateResult['attrs'] & __VLS_PublicProps> & __VLS_BuiltInPublicProps,${common_1.newLine}`
-            + `			expose(exposed: import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<${scriptSetupRanges.expose.define ? 'typeof __VLS_exposed' : '{}'}>): void,${common_1.newLine}`
-            + `			attrs: any,${common_1.newLine}`
-            + `			slots: __VLS_TemplateResult['slots'],${common_1.newLine}`
-            + `			emit: ${emitTypes.length ? emitTypes.join(' & ') : `{}`},${common_1.newLine}`
-            + `		}${common_1.endOfLine}`;
-        yield `	})(),${common_1.newLine}`; // __VLS_setup = (async () => {
+        yield `return {} as {${utils_1.newLine}`
+            + `	props: ${ctx.localTypes.PrettifyLocal}<__VLS_OwnProps & __VLS_PublicProps & __VLS_TemplateResult['attrs']> & __VLS_BuiltInPublicProps,${utils_1.newLine}`
+            + `	expose(exposed: import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<${scriptSetupRanges.defineExpose ? 'typeof __VLS_exposed' : '{}'}>): void,${utils_1.newLine}`
+            + `	attrs: any,${utils_1.newLine}`
+            + `	slots: __VLS_TemplateResult['slots'],${utils_1.newLine}`
+            + `	emit: ${emitTypes.length ? emitTypes.join(' & ') : `{}`},${utils_1.newLine}`
+            + `}${utils_1.endOfLine}`;
+        yield `})(),${utils_1.newLine}`; // __VLS_setup = (async () => {
         yield `) => ({} as import('${options.vueCompilerOptions.lib}').VNode & { __ctx?: Awaited<typeof __VLS_setup> }))`;
@@ -74,3 +72,3 @@ }
         // no script block, generate script setup code at root
-        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'export default', definePropMirrors);
+        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'export default');
     }
@@ -81,75 +79,57 @@ else {
         }
-        yield `await (async () => {${common_1.newLine}`;
-        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'return', definePropMirrors);
+        yield `await (async () => {${utils_1.newLine}`;
+        yield* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, 'return');
         yield `})()`;
     }
-    if (ctx.scriptSetupGeneratedOffset !== undefined) {
-        for (const defineProp of scriptSetupRanges.defineProp) {
-            if (!defineProp.localName) {
-                continue;
-            }
-            const [_, localName] = getPropAndLocalName(scriptSetup, defineProp);
-            const propMirror = definePropMirrors.get(localName);
-            if (propMirror !== undefined) {
-                options.linkedCodeMappings.push({
-                    sourceOffsets: [defineProp.localName.start + ctx.scriptSetupGeneratedOffset],
-                    generatedOffsets: [propMirror],
-                    lengths: [defineProp.localName.end - defineProp.localName.start],
-                    data: undefined,
-                });
-            }
-        }
-    }
 }
-function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, syntax, definePropMirrors) {
-    if (options.vueCompilerOptions.target >= 3.3) {
-        yield `const { `;
-        for (const macro of Object.keys(options.vueCompilerOptions.macros)) {
-            if (!ctx.bindingNames.has(macro) && macro !== 'templateRef') {
-                yield macro + `, `;
-            }
-        }
-        yield `} = await import('${options.vueCompilerOptions.lib}')${common_1.endOfLine}`;
-    }
+function* generateSetupFunction(options, ctx, scriptSetup, scriptSetupRanges, syntax) {
     ctx.scriptSetupGeneratedOffset = options.getGeneratedLength() - scriptSetupRanges.importSectionEndOffset;
     let setupCodeModifies = [];
-    if (scriptSetupRanges.props.define) {
-        setupCodeModifies.push(...generateDefineWithType(scriptSetup, scriptSetupRanges.props.name, scriptSetupRanges.props.define, scriptSetupRanges.props.withDefaults ?? scriptSetupRanges.props.define, '__VLS_props', '__VLS_Props'));
+    if (scriptSetupRanges.defineProps) {
+        const { name, statement, callExp, typeArg } = scriptSetupRanges.defineProps;
+        setupCodeModifies.push(...generateDefineWithType(scriptSetup, statement, scriptSetupRanges.withDefaults?.callExp ?? callExp, typeArg, name, '__VLS_props', '__VLS_Props'));
     }
-    if (scriptSetupRanges.slots.define) {
-        if (scriptSetupRanges.slots.isObjectBindingPattern) {
+    if (scriptSetupRanges.defineEmits) {
+        const { name, statement, callExp, typeArg } = scriptSetupRanges.defineEmits;
+        setupCodeModifies.push(...generateDefineWithType(scriptSetup, statement, callExp, typeArg, name, '__VLS_emit', '__VLS_Emit'));
+    }
+    if (scriptSetupRanges.defineSlots) {
+        const { name, callExp, isObjectBindingPattern } = scriptSetupRanges.defineSlots;
+        if (isObjectBindingPattern) {
             setupCodeModifies.push([
                 [`__VLS_slots;\nconst __VLS_slots = `],
-                scriptSetupRanges.slots.define.start,
-                scriptSetupRanges.slots.define.start,
+                callExp.start,
+                callExp.start,
             ]);
         }
-        else if (!scriptSetupRanges.slots.name) {
-            setupCodeModifies.push([[`const __VLS_slots = `], scriptSetupRanges.slots.define.start, scriptSetupRanges.slots.define.start]);
+        else if (!name) {
+            setupCodeModifies.push([
+                [`const __VLS_slots = `],
+                callExp.start,
+                callExp.start
+            ]);
         }
     }
-    if (scriptSetupRanges.emits.define) {
-        setupCodeModifies.push(...generateDefineWithType(scriptSetup, scriptSetupRanges.emits.name, scriptSetupRanges.emits.define, scriptSetupRanges.emits.define, '__VLS_emit', '__VLS_Emit'));
-    }
-    if (scriptSetupRanges.expose.define) {
-        if (scriptSetupRanges.expose.define?.typeArg) {
+    if (scriptSetupRanges.defineExpose) {
+        const { callExp, arg, typeArg } = scriptSetupRanges.defineExpose;
+        if (typeArg) {
             setupCodeModifies.push([
                 [
                     `let __VLS_exposed!: `,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.expose.define.typeArg.start, scriptSetupRanges.expose.define.typeArg.end, index_1.codeFeatures.navigation),
-                    `${common_1.endOfLine}`,
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, index_1.codeFeatures.navigation),
+                    `${utils_1.endOfLine}`,
                 ],
-                scriptSetupRanges.expose.define.start,
-                scriptSetupRanges.expose.define.start,
+                callExp.start,
+                callExp.start,
             ]);
         }
-        else if (scriptSetupRanges.expose.define?.arg) {
+        else if (arg) {
             setupCodeModifies.push([
                 [
                     `const __VLS_exposed = `,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.expose.define.arg.start, scriptSetupRanges.expose.define.arg.end, index_1.codeFeatures.navigation),
-                    `${common_1.endOfLine}`,
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, index_1.codeFeatures.navigation),
+                    `${utils_1.endOfLine}`,
                 ],
-                scriptSetupRanges.expose.define.start,
-                scriptSetupRanges.expose.define.start,
+                callExp.start,
+                callExp.start,
             ]);
@@ -159,45 +139,77 @@ }
             setupCodeModifies.push([
-                [`const __VLS_exposed = {}${common_1.endOfLine}`],
-                scriptSetupRanges.expose.define.start,
-                scriptSetupRanges.expose.define.start,
+                [`const __VLS_exposed = {}${utils_1.endOfLine}`],
+                callExp.start,
+                callExp.start,
             ]);
         }
     }
-    if (scriptSetupRanges.cssModules.length) {
-        for (const { define } of scriptSetupRanges.cssModules) {
+    // TODO: circular reference
+    // for (const { callExp } of scriptSetupRanges.useAttrs) {
+    // 	setupCodeModifies.push([
+    // 		[`(`],
+    // 		callExp.start,
+    // 		callExp.start
+    // 	], [
+    // 		[` as __VLS_TemplateResult['attrs'] & Record<string, unknown>)`],
+    // 		callExp.end,
+    // 		callExp.end
+    // 	]);
+    // }
+    for (const { callExp, exp, arg } of scriptSetupRanges.useCssModule) {
+        setupCodeModifies.push([
+            [`(`],
+            callExp.start,
+            callExp.start
+        ], [
+            arg ? [
+                ` as Omit<__VLS_StyleModules, '$style'>[`,
+                (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, index_1.codeFeatures.all),
+                `])`
+            ] : [
+                ` as __VLS_StyleModules[`,
+                ['', scriptSetup.name, exp.start, index_1.codeFeatures.verification],
+                `'$style'`,
+                ['', scriptSetup.name, exp.end, utils_1.combineLastMapping],
+                `])`
+            ],
+            callExp.end,
+            callExp.end
+        ]);
+        if (arg) {
             setupCodeModifies.push([
-                [`(`],
-                define.start,
-                define.start
-            ], [
-                define.arg ? [
-                    ` as Omit<__VLS_StyleModules, '$style'>[`,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, define.arg.start, define.arg.end, index_1.codeFeatures.all),
-                    `])`
-                ] : [
-                    ` as __VLS_StyleModules[`,
-                    ['', scriptSetup.name, define.exp.start, index_1.codeFeatures.verification],
-                    `'$style'`,
-                    ['', scriptSetup.name, define.exp.end, index_1.codeFeatures.verification],
-                    `])`
-                ],
-                define.end,
-                define.end
+                [`(__VLS_placeholder)`],
+                arg.start,
+                arg.end
             ]);
         }
     }
+    for (const { callExp } of scriptSetupRanges.useSlots) {
+        setupCodeModifies.push([
+            [`(`],
+            callExp.start,
+            callExp.start
+        ], [
+            [` as __VLS_TemplateResult['slots'])`],
+            callExp.end,
+            callExp.end
+        ]);
+    }
     const isTs = options.lang !== 'js' && options.lang !== 'jsx';
-    for (const { define } of scriptSetupRanges.templateRefs) {
-        if (!define.arg) {
-            continue;
-        }
+    for (const { callExp, exp, arg } of scriptSetupRanges.useTemplateRef) {
+        const templateRefType = arg
+            ? [
+                `__VLS_TemplateResult['refs'][`,
+                (0, utils_1.generateSfcBlockSection)(scriptSetup, arg.start, arg.end, index_1.codeFeatures.all),
+                `]`
+            ]
+            : [`unknown`];
         if (isTs) {
             setupCodeModifies.push([
                 [
-                    `<__VLS_TemplateResult['refs'][`,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, define.arg.start, define.arg.end, index_1.codeFeatures.navigation),
-                    `], keyof __VLS_TemplateResult['refs']>`
+                    `<`,
+                    ...templateRefType,
+                    `>`
                 ],
-                define.exp.end,
-                define.exp.end
+                exp.end,
+                exp.end
             ]);
@@ -208,19 +220,26 @@ }
                 [`(`],
-                define.start,
-                define.start
+                callExp.start,
+                callExp.start
             ], [
                 [
-                    ` as __VLS_UseTemplateRef<__VLS_TemplateResult['refs'][`,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, define.arg.start, define.arg.end, index_1.codeFeatures.navigation),
-                    `]>)`
+                    ` as __VLS_UseTemplateRef<`,
+                    ...templateRefType,
+                    `>)`
                 ],
-                define.end,
-                define.end
+                callExp.end,
+                callExp.end
             ]);
         }
+        if (arg) {
+            setupCodeModifies.push([
+                [`(__VLS_placeholder)`],
+                arg.start,
+                arg.end
+            ]);
+        }
     }
     setupCodeModifies = setupCodeModifies.sort((a, b) => a[1] - b[1]);
-    let nextStart = scriptSetupRanges.importSectionEndOffset;
+    let nextStart = Math.max(scriptSetupRanges.importSectionEndOffset, scriptSetupRanges.leadingCommentEndOffset);
     for (const [codes, start, end] of setupCodeModifies) {
-        yield (0, common_1.generateSfcBlockSection)(scriptSetup, nextStart, start, index_1.codeFeatures.all);
+        yield (0, utils_1.generateSfcBlockSection)(scriptSetup, nextStart, start, index_1.codeFeatures.all);
         for (const code of codes) {
@@ -231,24 +250,26 @@ yield code;
     }
-    yield (0, common_1.generateSfcBlockSection)(scriptSetup, nextStart, scriptSetup.content.length, index_1.codeFeatures.all);
+    yield (0, utils_1.generateSfcBlockSection)(scriptSetup, nextStart, scriptSetup.content.length, index_1.codeFeatures.all);
     yield* (0, index_1.generateScriptSectionPartiallyEnding)(scriptSetup.name, scriptSetup.content.length, '#3632/scriptSetup.vue');
-    if (scriptSetupRanges.props.define?.typeArg && scriptSetupRanges.props.withDefaults?.arg) {
+    yield* generateMacros(options, ctx);
+    yield* generateDefineProp(options);
+    if (scriptSetupRanges.defineProps?.typeArg && scriptSetupRanges.withDefaults?.arg) {
         // fix https://github.com/vuejs/language-tools/issues/1187
         yield `const __VLS_withDefaultsArg = (function <T>(t: T) { return t })(`;
-        yield (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.props.withDefaults.arg.start, scriptSetupRanges.props.withDefaults.arg.end, index_1.codeFeatures.navigation);
-        yield `)${common_1.endOfLine}`;
+        yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.withDefaults.arg.start, scriptSetupRanges.withDefaults.arg.end, index_1.codeFeatures.navigation);
+        yield `)${utils_1.endOfLine}`;
     }
-    yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, definePropMirrors);
+    yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges);
     yield* generateModelEmit(scriptSetup, scriptSetupRanges);
-    yield `function __VLS_template() {${common_1.newLine}`;
+    yield `function __VLS_template() {${utils_1.newLine}`;
     const templateCodegenCtx = yield* (0, template_1.generateTemplate)(options, ctx);
-    yield `}${common_1.endOfLine}`;
+    yield `}${utils_1.endOfLine}`;
     yield* (0, componentSelf_1.generateComponentSelf)(options, ctx, templateCodegenCtx);
-    yield `type __VLS_TemplateResult = ReturnType<typeof __VLS_template>${common_1.endOfLine}`;
+    yield `type __VLS_TemplateResult = ReturnType<typeof __VLS_template>${utils_1.endOfLine}`;
     if (syntax) {
-        if (!options.vueCompilerOptions.skipTemplateCodegen && (options.templateCodegen?.hasSlot || scriptSetupRanges?.slots.define)) {
+        if (!options.vueCompilerOptions.skipTemplateCodegen && (options.templateCodegen?.hasSlot || scriptSetupRanges.defineSlots)) {
             yield `const __VLS_component = `;
             yield* (0, component_1.generateComponent)(options, ctx, scriptSetup, scriptSetupRanges);
-            yield common_1.endOfLine;
+            yield utils_1.endOfLine;
             yield `${syntax} `;
-            yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_TemplateResult['slots']>${common_1.endOfLine}`;
+            yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_TemplateResult['slots']>${utils_1.endOfLine}`;
         }
@@ -258,13 +279,39 @@ else {
             yield* (0, component_1.generateComponent)(options, ctx, scriptSetup, scriptSetupRanges);
-            yield common_1.endOfLine;
+            yield utils_1.endOfLine;
         }
     }
 }
-function* generateDefineWithType(scriptSetup, name, define, expression, defaultName, typeName) {
-    const { statement, typeArg } = define;
+function* generateMacros(options, ctx) {
+    if (options.vueCompilerOptions.target >= 3.3) {
+        yield `declare const { `;
+        for (const macro of Object.keys(options.vueCompilerOptions.macros)) {
+            if (!ctx.bindingNames.has(macro)) {
+                yield `${macro}, `;
+            }
+        }
+        yield `}: typeof import('${options.vueCompilerOptions.lib}')${utils_1.endOfLine}`;
+    }
+}
+function* generateDefineProp(options) {
+    const definePropProposalA = options.vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition';
+    const definePropProposalB = options.vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition';
+    if (definePropProposalA || definePropProposalB) {
+        yield `type __VLS_PropOptions<T> = Exclude<import('${options.vueCompilerOptions.lib}').Prop<T>, import('${options.vueCompilerOptions.lib}').PropType<T>>${utils_1.endOfLine}`;
+        if (definePropProposalA) {
+            yield `declare function defineProp<T>(name: string, options: ({ required: true } | { default: T }) & __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${utils_1.endOfLine}`;
+            yield `declare function defineProp<T>(name?: string, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T | undefined>${utils_1.endOfLine}`;
+        }
+        if (definePropProposalB) {
+            yield `declare function defineProp<T>(value: T | (() => T), required?: boolean, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${utils_1.endOfLine}`;
+            yield `declare function defineProp<T>(value: T | (() => T) | undefined, required: true, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T>${utils_1.endOfLine}`;
+            yield `declare function defineProp<T>(value?: T | (() => T), required?: boolean, options?: __VLS_PropOptions<T>): import('${options.vueCompilerOptions.lib}').ComputedRef<T | undefined>${utils_1.endOfLine}`;
+        }
+    }
+}
+function* generateDefineWithType(scriptSetup, statement, callExp, typeArg, name, defaultName, typeName) {
     if (typeArg) {
         yield [[
                 `type ${typeName} = `,
-                (0, common_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, index_1.codeFeatures.all),
-                common_1.endOfLine,
+                (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.start, typeArg.end, index_1.codeFeatures.all),
+                utils_1.endOfLine,
             ], statement.start, statement.start];
@@ -274,4 +321,4 @@ yield [[typeName], typeArg.start, typeArg.end];
     if (!name) {
-        if (statement.start === expression.start && statement.end === expression.end) {
-            yield [[`const ${defaultName} = `], expression.start, expression.start];
+        if (statement.start === callExp.start && statement.end === callExp.end) {
+            yield [[`const ${defaultName} = `], callExp.start, callExp.start];
         }
@@ -281,10 +328,10 @@ else if (typeArg) {
                     `const ${defaultName} = `,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, expression.start, typeArg.start, index_1.codeFeatures.all)
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, callExp.start, typeArg.start, index_1.codeFeatures.all)
                 ], statement.start, typeArg.start];
             yield [[
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, typeArg.end, expression.end, index_1.codeFeatures.all),
-                    common_1.endOfLine,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, statement.start, expression.start, index_1.codeFeatures.all),
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, typeArg.end, callExp.end, index_1.codeFeatures.all),
+                    utils_1.endOfLine,
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, statement.start, callExp.start, index_1.codeFeatures.all),
                     defaultName
-                ], typeArg.end, expression.end];
+                ], typeArg.end, callExp.end];
         }
@@ -294,53 +341,56 @@ else {
                     `const ${defaultName} = `,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, expression.start, expression.end, index_1.codeFeatures.all),
-                    common_1.endOfLine,
-                    (0, common_1.generateSfcBlockSection)(scriptSetup, statement.start, expression.start, index_1.codeFeatures.all),
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, callExp.start, callExp.end, index_1.codeFeatures.all),
+                    utils_1.endOfLine,
+                    (0, utils_1.generateSfcBlockSection)(scriptSetup, statement.start, callExp.start, index_1.codeFeatures.all),
                     defaultName
-                ], statement.start, expression.end];
+                ], statement.start, callExp.end];
         }
     }
 }
-function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, definePropMirrors) {
-    yield `const __VLS_fnComponent = (await import('${options.vueCompilerOptions.lib}')).defineComponent({${common_1.newLine}`;
-    if (scriptSetupRanges.props.define?.arg) {
-        yield `props: `;
-        yield (0, common_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.props.define.arg.start, scriptSetupRanges.props.define.arg.end, index_1.codeFeatures.navigation);
-        yield `,${common_1.newLine}`;
+function* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges) {
+    if (scriptSetup.generic) {
+        yield `const __VLS_fnComponent = (await import('${options.vueCompilerOptions.lib}')).defineComponent({${utils_1.newLine}`;
+        if (scriptSetupRanges.defineProps?.arg) {
+            yield `props: `;
+            yield (0, utils_1.generateSfcBlockSection)(scriptSetup, scriptSetupRanges.defineProps.arg.start, scriptSetupRanges.defineProps.arg.end, index_1.codeFeatures.navigation);
+            yield `,${utils_1.newLine}`;
+        }
+        yield* (0, component_1.generateEmitsOption)(options, scriptSetupRanges);
+        yield `})${utils_1.endOfLine}`;
+        yield `type __VLS_BuiltInPublicProps = ${options.vueCompilerOptions.target >= 3.4
+            ? `import('${options.vueCompilerOptions.lib}').PublicProps`
+            : options.vueCompilerOptions.target >= 3.0
+                ? `import('${options.vueCompilerOptions.lib}').VNodeProps`
+                    + ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
+                    + ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
+                : `globalThis.JSX.IntrinsicAttributes`}`;
+        yield utils_1.endOfLine;
+        yield `type __VLS_OwnProps = `;
+        yield `${ctx.localTypes.OmitKeepDiscriminatedUnion}<InstanceType<typeof __VLS_fnComponent>['$props'], keyof __VLS_BuiltInPublicProps>`;
+        yield utils_1.endOfLine;
     }
-    yield* (0, component_1.generateEmitsOption)(options, scriptSetupRanges);
-    yield `})${common_1.endOfLine}`;
-    yield `type __VLS_BuiltInPublicProps = ${options.vueCompilerOptions.target >= 3.4
-        ? `import('${options.vueCompilerOptions.lib}').PublicProps;`
-        : options.vueCompilerOptions.target >= 3.0
-            ? `import('${options.vueCompilerOptions.lib}').VNodeProps
-					& import('${options.vueCompilerOptions.lib}').AllowedComponentProps
-					& import('${options.vueCompilerOptions.lib}').ComponentCustomProps;`
-            : `globalThis.JSX.IntrinsicAttributes;`}`;
-    yield common_1.endOfLine;
-    yield `let __VLS_functionalComponentProps!: `;
-    yield `${ctx.localTypes.OmitKeepDiscriminatedUnion}<InstanceType<typeof __VLS_fnComponent>['$props'], keyof __VLS_BuiltInPublicProps>`;
-    yield common_1.endOfLine;
     if (scriptSetupRanges.defineProp.length) {
-        yield `const __VLS_defaults = {${common_1.newLine}`;
+        yield `const __VLS_defaults = {${utils_1.newLine}`;
         for (const defineProp of scriptSetupRanges.defineProp) {
-            if (defineProp.defaultValue) {
-                const [propName, localName] = getPropAndLocalName(scriptSetup, defineProp);
-                if (defineProp.name || defineProp.isModel) {
-                    yield propName;
-                }
-                else if (defineProp.localName) {
-                    yield localName;
-                }
-                else {
-                    continue;
-                }
-                yield `: `;
-                yield getRangeName(scriptSetup, defineProp.defaultValue);
-                yield `,${common_1.newLine}`;
+            if (!defineProp.defaultValue) {
+                continue;
             }
+            const [propName, localName] = getPropAndLocalName(scriptSetup, defineProp);
+            if (defineProp.name || defineProp.isModel) {
+                yield `'${propName}'`;
+            }
+            else if (defineProp.localName) {
+                yield localName;
+            }
+            else {
+                continue;
+            }
+            yield `: `;
+            yield getRangeName(scriptSetup, defineProp.defaultValue);
+            yield `,${utils_1.newLine}`;
         }
-        yield `}${common_1.endOfLine}`;
+        yield `}${utils_1.endOfLine}`;
     }
     yield `type __VLS_PublicProps = `;
-    if (scriptSetupRanges.slots.define && options.vueCompilerOptions.jsxSlots) {
+    if (scriptSetupRanges.defineSlots && options.vueCompilerOptions.jsxSlots) {
         if (ctx.generatedPropsType) {
@@ -357,3 +407,3 @@ yield ` & `;
         ctx.generatedPropsType = true;
-        yield `{${common_1.newLine}`;
+        yield `{${utils_1.newLine}`;
         for (const defineProp of scriptSetupRanges.defineProp) {
@@ -365,8 +415,6 @@ const [propName, localName] = getPropAndLocalName(scriptSetup, defineProp);
             else if (defineProp.name) {
-                // renaming support
-                yield (0, common_1.generateSfcBlockSection)(scriptSetup, defineProp.name.start, defineProp.name.end, index_1.codeFeatures.navigation);
+                yield (0, utils_1.generateSfcBlockSection)(scriptSetup, defineProp.name.start, defineProp.name.end, index_1.codeFeatures.navigation);
             }
             else if (defineProp.localName) {
-                definePropMirrors.set(localName, options.getGeneratedLength());
-                yield localName;
+                yield (0, utils_1.generateSfcBlockSection)(scriptSetup, defineProp.localName.start, defineProp.localName.end, index_1.codeFeatures.navigation);
             }
@@ -380,11 +428,7 @@ else {
             yield* generateDefinePropType(scriptSetup, propName, localName, defineProp);
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
             if (defineProp.modifierType) {
-                let propModifierName = 'modelModifiers';
-                if (defineProp.name) {
-                    propModifierName = `${getRangeName(scriptSetup, defineProp.name, true)}Modifiers`;
-                }
+                const modifierName = `${defineProp.name ? propName : 'model'}Modifiers`;
                 const modifierType = getRangeName(scriptSetup, defineProp.modifierType);
-                definePropMirrors.set(propModifierName, options.getGeneratedLength());
-                yield `${propModifierName}?: Record<${modifierType}, true>,${common_1.endOfLine}`;
+                yield `'${modifierName}'?: Partial<Record<${modifierType}, true>>,${utils_1.newLine}`;
             }
@@ -394,3 +438,3 @@ }
     }
-    if (scriptSetupRanges.props.define?.typeArg) {
+    if (scriptSetupRanges.defineProps?.typeArg) {
         if (ctx.generatedPropsType) {
@@ -405,3 +449,3 @@ yield ` & `;
     }
-    yield common_1.endOfLine;
+    yield utils_1.endOfLine;
 }
@@ -411,11 +455,11 @@ function* generateModelEmit(scriptSetup, scriptSetupRanges) {
     if (defineModels.length) {
-        yield `type __VLS_ModelEmit = {${common_1.newLine}`;
+        yield `type __VLS_ModelEmit = {${utils_1.newLine}`;
         for (const defineModel of defineModels) {
             const [propName, localName] = getPropAndLocalName(scriptSetup, defineModel);
-            yield `'update:${propName}': [value:`;
+            yield `'update:${propName}': [value: `;
             yield* generateDefinePropType(scriptSetup, propName, localName, defineModel);
-            yield `]${common_1.endOfLine}`;
+            yield `]${utils_1.endOfLine}`;
         }
-        yield `}${common_1.endOfLine}`;
-        yield `const __VLS_modelEmit = defineEmits<__VLS_ModelEmit>()${common_1.endOfLine}`;
+        yield `}${utils_1.endOfLine}`;
+        yield `const __VLS_modelEmit = defineEmits<__VLS_ModelEmit>()${utils_1.endOfLine}`;
     }
@@ -454,6 +498,5 @@ }
 }
-function getRangeName(scriptSetup, range, unwrap = false) {
-    const offset = unwrap ? 1 : 0;
-    return scriptSetup.content.substring(range.start + offset, range.end - offset);
+function getRangeName(scriptSetup, range) {
+    return scriptSetup.content.slice(range.start, range.end);
 }
 //# sourceMappingURL=scriptSetup.js.map

lib/codegen/script/src.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSrc = generateSrc;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const index_1 = require("./index");
 function* generateSrc(script, src) {
     if (src.endsWith('.d.ts')) {
-        src = src.substring(0, src.length - '.d.ts'.length);
+        src = src.slice(0, -'.d.ts'.length);
     }
     else if (src.endsWith('.ts')) {
-        src = src.substring(0, src.length - '.ts'.length);
+        src = src.slice(0, -'.ts'.length);
     }
     else if (src.endsWith('.tsx')) {
-        src = src.substring(0, src.length - '.tsx'.length) + '.jsx';
+        src = src.slice(0, -'.tsx'.length) + '.jsx';
     }
@@ -48,5 +48,5 @@ if (!src.endsWith('.js') && !src.endsWith('.jsx')) {
     ];
-    yield common_1.endOfLine;
-    yield `export { default } from '${src}'${common_1.endOfLine}`;
+    yield utils_1.endOfLine;
+    yield `export { default } from '${src}'${utils_1.endOfLine}`;
 }
 //# sourceMappingURL=src.js.map

lib/codegen/script/styleModulesType.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateStyleModulesType = generateStyleModulesType;
+const utils_1 = require("../utils");
 const index_1 = require("./index");
 const template_1 = require("./template");
-const common_1 = require("../common");
 function* generateStyleModulesType(options, ctx) {
     const styles = options.sfc.styles.map((style, i) => [style, i]).filter(([style]) => style.module);
-    if (!styles.length && !options.scriptSetupRanges?.cssModules.length) {
+    if (!styles.length && !options.scriptSetupRanges?.useCssModule.length) {
         return;
     }
-    yield `type __VLS_StyleModules = {${common_1.newLine}`;
+    yield `type __VLS_StyleModules = {${utils_1.newLine}`;
     for (const [style, i] of styles) {
@@ -30,6 +30,6 @@ const { name, offset } = style.module;
         }
-        yield `>${common_1.endOfLine}`;
+        yield `>${utils_1.endOfLine}`;
     }
-    yield `}${common_1.endOfLine}`;
+    yield `}${utils_1.endOfLine}`;
 }
 //# sourceMappingURL=styleModulesType.js.map

lib/codegen/script/template.d.ts

@@ -5,5 +5,5 @@ import type { Code } from '../../types';
 import { type ScriptCodegenOptions } from './index';
+export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code, TemplateCodegenContext>;
 export declare function generateTemplateDirectives(options: ScriptCodegenOptions): Generator<Code>;
-export declare function generateTemplate(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Generator<Code, TemplateCodegenContext>;
 export declare function generateCssClassProperty(styleIndex: number, classNameWithDot: string, offset: number, propertyType: string, optional: boolean): Generator<Code>;
 export declare function getTemplateUsageVars(options: ScriptCodegenOptions, ctx: ScriptCodegenContext): Set<string>;

lib/codegen/script/template.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTemplate = generateTemplate;
 exports.generateTemplateDirectives = generateTemplateDirectives;
-exports.generateTemplate = generateTemplate;
 exports.generateCssClassProperty = generateCssClassProperty;
@@ -9,7 +9,19 @@ exports.getTemplateUsageVars = getTemplateUsageVars;
 const shared_1 = require("../../utils/shared");
-const common_1 = require("../common");
 const context_1 = require("../template/context");
 const interpolation_1 = require("../template/interpolation");
 const styleScopedClasses_1 = require("../template/styleScopedClasses");
+const utils_1 = require("../utils");
 const index_1 = require("./index");
+function* generateTemplate(options, ctx) {
+    ctx.generatedTemplate = true;
+    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
+        scriptSetupBindingNames: new Set(),
+        edited: options.edited,
+    });
+    yield* generateTemplateCtx(options);
+    yield* generateTemplateComponents(options);
+    yield* generateTemplateDirectives(options);
+    yield* generateTemplateBody(options, templateCodegenCtx);
+    return templateCodegenCtx;
+}
 function* generateTemplateCtx(options) {
@@ -27,24 +39,27 @@ const exps = [];
         yield exps[0];
-        yield `${common_1.endOfLine}`;
+        yield `${utils_1.endOfLine}`;
     }
     else {
-        yield `{${common_1.newLine}`;
+        yield `{${utils_1.newLine}`;
         for (const exp of exps) {
             yield `...`;
             yield exp;
-            yield `,${common_1.newLine}`;
+            yield `,${utils_1.newLine}`;
         }
-        yield `}${common_1.endOfLine}`;
+        yield `}${utils_1.endOfLine}`;
     }
 }
 function* generateTemplateComponents(options) {
-    const exps = [];
+    const types = [];
     if (options.sfc.script && options.scriptRanges?.exportDefault?.componentsOption) {
         const { componentsOption } = options.scriptRanges.exportDefault;
-        exps.push([
-            options.sfc.script.content.substring(componentsOption.start, componentsOption.end),
+        yield `const __VLS_componentsOption = `;
+        yield [
+            options.sfc.script.content.slice(componentsOption.start, componentsOption.end),
             'script',
             componentsOption.start,
             index_1.codeFeatures.navigation,
-        ]);
+        ];
+        yield utils_1.endOfLine;
+        types.push(`typeof __VLS_componentsOption`);
     }
@@ -54,64 +69,73 @@ let nameType;
         const { nameOption } = options.scriptRanges.exportDefault;
-        nameType = options.sfc.script.content.substring(nameOption.start, nameOption.end);
+        nameType = options.sfc.script.content.slice(nameOption.start, nameOption.end);
     }
     else if (options.sfc.scriptSetup) {
         const baseName = path.basename(options.fileName);
-        nameType = `'${options.scriptSetupRanges?.options.name ?? baseName.substring(0, baseName.lastIndexOf('.'))}'`;
+        nameType = `'${options.scriptSetupRanges?.defineOptions?.name ?? baseName.slice(0, baseName.lastIndexOf('.'))}'`;
     }
     if (nameType) {
-        exps.push(`{} as {
-			[K in ${nameType}]: typeof __VLS_self
-				& (new () => {
-					${(0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target)}: typeof ${options.scriptSetupRanges?.slots?.name ?? '__VLS_slots'}
-				})
-		}`);
+        types.push(`{ [K in ${nameType}]: typeof __VLS_self & (new () => { `
+            + (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target)
+            + `: typeof ${options.scriptSetupRanges?.defineSlots?.name ?? `__VLS_slots`} }) }`);
     }
-    exps.push(`{} as NonNullable<typeof __VLS_self extends { components: infer C } ? C : {}>`);
-    exps.push(`__VLS_ctx`);
-    yield `const __VLS_localComponents = {${common_1.newLine}`;
-    for (const type of exps) {
-        yield `...`;
+    types.push(`typeof __VLS_ctx`);
+    yield `type __VLS_LocalComponents =`;
+    for (const type of types) {
+        yield ` & `;
         yield type;
-        yield `,${common_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `let __VLS_components!: typeof __VLS_localComponents & __VLS_GlobalComponents${common_1.endOfLine}`;
+    yield utils_1.endOfLine;
+    yield `let __VLS_components!: __VLS_LocalComponents & __VLS_GlobalComponents${utils_1.endOfLine}`;
 }
 function* generateTemplateDirectives(options) {
-    const exps = [];
+    const types = [];
     if (options.sfc.script && options.scriptRanges?.exportDefault?.directivesOption) {
         const { directivesOption } = options.scriptRanges.exportDefault;
-        exps.push([
-            options.sfc.script.content.substring(directivesOption.start, directivesOption.end),
+        yield `const __VLS_directivesOption = `;
+        yield [
+            options.sfc.script.content.slice(directivesOption.start, directivesOption.end),
             'script',
             directivesOption.start,
             index_1.codeFeatures.navigation,
-        ]);
+        ];
+        yield utils_1.endOfLine;
+        types.push(`typeof __VLS_directivesOption`);
     }
-    exps.push(`{} as NonNullable<typeof __VLS_self extends { directives: infer D } ? D : {}>`);
-    exps.push(`__VLS_ctx`);
-    yield `const __VLS_localDirectives = {${common_1.newLine}`;
-    for (const type of exps) {
-        yield `...`;
+    types.push(`typeof __VLS_ctx`);
+    yield `type __VLS_LocalDirectives =`;
+    for (const type of types) {
+        yield ` & `;
         yield type;
-        yield `,${common_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `let __VLS_directives!: typeof __VLS_localDirectives & __VLS_GlobalDirectives${common_1.endOfLine}`;
+    yield utils_1.endOfLine;
+    yield `let __VLS_directives!: __VLS_LocalDirectives & __VLS_GlobalDirectives${utils_1.endOfLine}`;
 }
-function* generateTemplate(options, ctx) {
-    ctx.generatedTemplate = true;
-    const templateCodegenCtx = (0, context_1.createTemplateCodegenContext)({
-        scriptSetupBindingNames: new Set(),
-        edited: options.edited,
-    });
-    yield* generateTemplateCtx(options);
-    yield* generateTemplateComponents(options);
-    yield* generateTemplateDirectives(options);
-    yield* generateTemplateBody(options, templateCodegenCtx);
-    return templateCodegenCtx;
+function* generateTemplateBody(options, templateCodegenCtx) {
+    yield* generateStyleScopedClasses(options, templateCodegenCtx);
+    yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(templateCodegenCtx, true);
+    yield* generateCssVars(options, templateCodegenCtx);
+    if (options.templateCodegen) {
+        for (const code of options.templateCodegen.codes) {
+            yield code;
+        }
+    }
+    else {
+        yield `// no template${utils_1.newLine}`;
+        if (!options.scriptSetupRanges?.defineSlots) {
+            yield `const __VLS_slots = {}${utils_1.endOfLine}`;
+        }
+        yield `const __VLS_inheritedAttrs = {}${utils_1.endOfLine}`;
+        yield `const $refs = {}${utils_1.endOfLine}`;
+        yield `const $el = {} as any${utils_1.endOfLine}`;
+    }
+    yield `return {${utils_1.newLine}`;
+    yield `	attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${utils_1.newLine}`;
+    yield `	slots: ${options.scriptSetupRanges?.defineSlots?.name ?? '__VLS_slots'},${utils_1.newLine}`;
+    yield `	refs: $refs,${utils_1.newLine}`;
+    yield `	rootEl: $el,${utils_1.newLine}`;
+    yield `}${utils_1.endOfLine}`;
 }
-function* generateTemplateBody(options, templateCodegenCtx) {
+function* generateStyleScopedClasses(options, ctx) {
     const firstClasses = new Set();
-    yield `let __VLS_styleScopedClasses!: {}`;
+    yield `type __VLS_StyleScopedClasses = {}`;
     for (let i = 0; i < options.sfc.styles.length; i++) {
@@ -123,3 +147,3 @@ const style = options.sfc.styles[i];
                 if (firstClasses.has(className.text)) {
-                    templateCodegenCtx.scopedClasses.push({
+                    ctx.scopedClasses.push({
                         source: 'style_' + i,
@@ -136,28 +160,6 @@ className: className.text.slice(1),
     }
-    yield common_1.endOfLine;
-    yield* (0, styleScopedClasses_1.generateStyleScopedClasses)(templateCodegenCtx, true);
-    yield* generateCssVars(options, templateCodegenCtx);
-    if (options.templateCodegen) {
-        for (const code of options.templateCodegen.codes) {
-            yield code;
-        }
-    }
-    else {
-        yield `// no template${common_1.newLine}`;
-        if (!options.scriptSetupRanges?.slots.define) {
-            yield `const __VLS_slots = {}${common_1.endOfLine}`;
-        }
-        yield `const __VLS_inheritedAttrs = {}${common_1.endOfLine}`;
-        yield `const $refs = {}${common_1.endOfLine}`;
-        yield `const $el = {} as any${common_1.endOfLine}`;
-    }
-    yield `return {${common_1.newLine}`;
-    yield `	attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${common_1.newLine}`;
-    yield `	slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${common_1.newLine}`;
-    yield `	refs: $refs,${common_1.newLine}`;
-    yield `	rootEl: $el,${common_1.newLine}`;
-    yield `}${common_1.endOfLine}`;
+    yield utils_1.endOfLine;
 }
 function* generateCssClassProperty(styleIndex, classNameWithDot, offset, propertyType, optional) {
-    yield `${common_1.newLine} & { `;
+    yield `${utils_1.newLine} & { `;
     yield [
@@ -171,3 +173,3 @@ '',
     yield [
-        classNameWithDot.substring(1),
+        classNameWithDot.slice(1),
         'style_' + styleIndex,
@@ -191,24 +193,10 @@ offset + 1,
     }
-    yield `// CSS variable injection ${common_1.newLine}`;
+    yield `// CSS variable injection ${utils_1.newLine}`;
     for (const style of options.sfc.styles) {
         for (const cssBind of style.cssVars) {
-            for (const [segment, offset, onlyError] of (0, interpolation_1.forEachInterpolationSegment)(options.ts, undefined, undefined, ctx, cssBind.text, cssBind.offset, options.ts.createSourceFile('/a.txt', cssBind.text, 99))) {
-                if (offset === undefined) {
-                    yield segment;
-                }
-                else {
-                    yield [
-                        segment,
-                        style.name,
-                        cssBind.offset + offset,
-                        onlyError
-                            ? index_1.codeFeatures.navigation
-                            : index_1.codeFeatures.all,
-                    ];
-                }
-            }
-            yield common_1.endOfLine;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, style.name, index_1.codeFeatures.all, cssBind.text, cssBind.offset);
+            yield utils_1.endOfLine;
         }
     }
-    yield `// CSS variable injection end ${common_1.newLine}`;
+    yield `// CSS variable injection end ${utils_1.newLine}`;
 }
@@ -226,3 +214,3 @@ function getTemplateUsageVars(options, ctx) {
         for (const component of components) {
-            if (component.indexOf('.') >= 0) {
+            if (component.includes('.')) {
                 usageVars.add(component.split('.')[0]);
@@ -229,0 +217,0 @@ }

lib/codegen/template/context.d.ts

 import type * as CompilerDOM from '@vue/compiler-dom';
 import type { Code, VueCodeInformation } from '../../types';
+import { InlayHintInfo } from '../inlayHints';
 import type { TemplateCodegenOptions } from './index';
-import { InlayHintInfo } from '../inlayHints';
 export type TemplateCodegenContext = ReturnType<typeof createTemplateCodegenContext>;
@@ -27,2 +27,3 @@ export declare function createTemplateCodegenContext(options: Pick<TemplateCodegenOptions, 'scriptSetupBindingNames' | 'edited'>): {
         navigationAndAdditionalCompletion: VueCodeInformation;
+        withoutNavigation: VueCodeInformation;
         withoutHighlight: VueCodeInformation;
@@ -33,5 +34,8 @@ withoutHighlightAndCompletion: VueCodeInformation;
     accessExternalVariables: Map<string, Set<number>>;
+    lastGenericComment: {
+        content: string;
+        offset: number;
+    } | undefined;
     hasSlotElements: Set<CompilerDOM.ElementNode>;
     blockConditions: string[];
-    usedComponentCtxVars: Set<string>;
     scopedClasses: {
@@ -45,4 +49,10 @@ source: string;
     hasSlot: boolean;
-    inheritedAttrVars: Set<unknown>;
+    bindingAttrLocs: CompilerDOM.SourceLocation[];
+    inheritedAttrVars: Set<string>;
     templateRefs: Map<string, [varName: string, offset: number]>;
+    currentComponent: {
+        node: CompilerDOM.ElementNode;
+        ctxVar: string;
+        used: boolean;
+    } | undefined;
     singleRootElType: string | undefined;
@@ -49,0 +59,0 @@ singleRootNode: CompilerDOM.ElementNode | undefined;

lib/codegen/template/context.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTemplateCodegenContext = createTemplateCodegenContext;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const _codeFeatures = {
@@ -39,2 +39,7 @@ all: {
     },
+    withoutNavigation: {
+        verification: true,
+        completion: true,
+        semantic: true,
+    },
     withoutHighlight: {
@@ -59,2 +64,3 @@ semantic: { shouldHighlight: () => false },
     let expectErrorToken;
+    let lastGenericComment;
     let variableId = 0;
@@ -96,6 +102,7 @@ const codeFeatures = new Proxy(_codeFeatures, {
     const blockConditions = [];
-    const usedComponentCtxVars = new Set();
     const scopedClasses = [];
     const emptyClassOffsets = [];
     const inlayHints = [];
+    const bindingAttrLocs = [];
+    const inheritedAttrVars = new Set();
     const templateRefs = new Map();
@@ -107,5 +114,5 @@ return {
         accessExternalVariables,
+        lastGenericComment,
         hasSlotElements,
         blockConditions,
-        usedComponentCtxVars,
         scopedClasses,
@@ -115,4 +122,6 @@ emptyClassOffsets,
         hasSlot: false,
-        inheritedAttrVars: new Set(),
+        bindingAttrLocs,
+        inheritedAttrVars,
         templateRefs,
+        currentComponent: undefined,
         singleRootElType: undefined,
@@ -144,3 +153,3 @@ singleRootNode: undefined,
                 ignoredError = true;
-                yield `// @vue-ignore start${common_1.newLine}`;
+                yield `// @vue-ignore start${utils_1.newLine}`;
             }
@@ -154,3 +163,3 @@ },
                 };
-                yield `// @vue-expect-error start${common_1.newLine}`;
+                yield `// @vue-expect-error start${utils_1.newLine}`;
             }
@@ -161,3 +170,3 @@ },
                 const token = expectErrorToken;
-                yield* (0, common_1.wrapWith)(expectErrorToken.node.loc.start.offset, expectErrorToken.node.loc.end.offset, {
+                yield* (0, utils_1.wrapWith)(expectErrorToken.node.loc.start.offset, expectErrorToken.node.loc.end.offset, {
                     verification: {
@@ -167,9 +176,9 @@ shouldReport: () => token.errors === 0,
                 }, `// @ts-expect-error __VLS_TS_EXPECT_ERROR`);
-                yield `${common_1.newLine}${common_1.endOfLine}`;
+                yield `${utils_1.newLine}${utils_1.endOfLine}`;
                 expectErrorToken = undefined;
-                yield `// @vue-expect-error ${endStr}${common_1.newLine}`;
+                yield `// @vue-expect-error ${endStr}${utils_1.newLine}`;
             }
             if (ignoredError) {
                 ignoredError = false;
-                yield `// @vue-ignore ${endStr}${common_1.newLine}`;
+                yield `// @vue-ignore ${endStr}${utils_1.newLine}`;
             }
@@ -185,3 +194,3 @@ },
             }
-            yield `// @ts-ignore${common_1.newLine}`; // #2304
+            yield `// @ts-ignore${utils_1.newLine}`; // #2304
             yield `[`;
@@ -214,3 +223,3 @@ for (const [varName, offsets] of all) {
             }
-            yield `]${common_1.endOfLine}`;
+            yield `]${utils_1.endOfLine}`;
         }
@@ -217,0 +226,0 @@ };

lib/codegen/template/element.d.ts

@@ -5,5 +5,3 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined): Generator<Code>;
-export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined, isVForChild: boolean): Generator<Code>;
-export declare function getCanonicalComponentName(tagText: string): string;
-export declare function getPossibleOriginalComponentNames(tagText: string, deduplicate: boolean): string[];
+export declare function generateComponent(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateElement(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, isVForChild: boolean): Generator<Code>;

lib/codegen/template/element.js

@@ -5,9 +5,9 @@ "use strict";
 exports.generateElement = generateElement;
-exports.getCanonicalComponentName = getCanonicalComponentName;
-exports.getPossibleOriginalComponentNames = getPossibleOriginalComponentNames;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
+const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
 const elementChildren_1 = require("./elementChildren");
@@ -18,15 +18,15 @@ const elementDirectives_1 = require("./elementDirectives");
 const interpolation_1 = require("./interpolation");
+const objectProperty_1 = require("./objectProperty");
 const propertyAccess_1 = require("./propertyAccess");
 const templateChild_1 = require("./templateChild");
-const objectProperty_1 = require("./objectProperty");
-const inlayHints_1 = require("../inlayHints");
-const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
 const colonReg = /:/g;
-function* generateComponent(options, ctx, node, currentComponent) {
-    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 && endTagOffset > startTagOffset
-        ? [startTagOffset, endTagOffset]
-        : [startTagOffset];
-    const propsFailedExps = [];
+function* generateComponent(options, ctx, node) {
+    const tagOffsets = [node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag)];
+    if (!node.isSelfClosing && options.template.lang === 'html') {
+        const endTagOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+        if (endTagOffset > tagOffsets[0]) {
+            tagOffsets.push(endTagOffset);
+        }
+    }
+    const failedPropExps = [];
     const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
@@ -41,2 +41,7 @@ const matchImportName = possibleOriginalNames.find(name => options.scriptSetupImportComponentNames.has(name));
     const isComponentTag = node.tag.toLowerCase() === 'component';
+    ctx.currentComponent = {
+        node,
+        ctxVar: var_defineComponentCtx,
+        used: false
+    };
     let props = node.props;
@@ -55,3 +60,3 @@ let dynamicTagInfo;
                     tag: prop.exp.content,
-                    offsets: [prop.exp.loc.start.offset, undefined],
+                    offsets: [prop.exp.loc.start.offset],
                     astHolder: prop.exp.loc,
@@ -68,3 +73,3 @@ };
             tag: node.tag,
-            offsets: [startTagOffset, endTagOffset],
+            offsets: tagOffsets,
             astHolder: node.loc,
@@ -75,5 +80,6 @@ };
         // hover, renaming / find references support
-        yield `// @ts-ignore${common_1.newLine}`; // #2304
-        yield `[`;
+        yield `// @ts-ignore${utils_1.newLine}`; // #2304
+        yield `/** @type { [`;
         for (const tagOffset of tagOffsets) {
+            yield `typeof `;
             if (var_originalComponent === node.tag) {
@@ -88,3 +94,4 @@ yield [
             else {
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffset, {
+                const shouldCapitalize = matchImportName[0].toUpperCase() === matchImportName[0];
+                yield* (0, camelized_1.generateCamelized)(shouldCapitalize ? (0, shared_1.capitalize)(node.tag) : node.tag, tagOffset, {
                     ...ctx.codeFeatures.withoutHighlightAndCompletion,
@@ -97,28 +104,28 @@ navigation: {
             }
-            yield `,`;
+            yield `, `;
         }
-        yield `]${common_1.endOfLine}`;
+        yield `] } */${utils_1.endOfLine}`;
     }
     else if (dynamicTagInfo) {
         yield `const ${var_originalComponent} = (`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[0], ctx.codeFeatures.all, '(', ')');
+        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, dynamicTagInfo.tag, dynamicTagInfo.astHolder, dynamicTagInfo.offsets[1], {
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', {
                 ...ctx.codeFeatures.all,
                 completion: false,
-            }, '(', ')');
+            }, dynamicTagInfo.tag, dynamicTagInfo.offsets[1], dynamicTagInfo.astHolder, '(', ')');
         }
-        yield `)${common_1.endOfLine}`;
+        yield `)${utils_1.endOfLine}`;
     }
     else if (!isComponentTag) {
-        yield `const ${var_originalComponent} = __VLS_resolvedLocalAndGlobalComponents.`;
-        yield* generateCanonicalComponentName(node.tag, startTagOffset, {
-            // with hover support
-            ...ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation,
-            ...ctx.codeFeatures.verification,
-        });
-        yield `${common_1.endOfLine}`;
+        yield `const ${var_originalComponent} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
+        yield getPossibleOriginalComponentNames(node.tag, false)
+            .map(name => `'${name}'`)
+            .join(`, `);
+        yield `>).`;
+        yield* generateCanonicalComponentName(node.tag, tagOffsets[0], ctx.codeFeatures.withoutHighlightAndCompletionAndNavigation);
+        yield `${utils_1.endOfLine}`;
         const camelizedTag = (0, shared_1.camelize)(node.tag);
-        if (common_1.variableNameRegex.test(camelizedTag)) {
+        if (utils_1.variableNameRegex.test(camelizedTag)) {
             // renaming / find references support
@@ -139,7 +146,7 @@ yield `/** @type { [`;
             }
-            yield `] } */${common_1.newLine}`;
+            yield `] } */${utils_1.endOfLine}`;
             // auto import support
             if (options.edited) {
-                yield `// @ts-ignore${common_1.newLine}`; // #2304
-                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), startTagOffset, {
+                yield `// @ts-ignore${utils_1.newLine}`; // #2304
+                yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(node.tag), tagOffsets[0], {
                     completion: {
@@ -150,3 +157,3 @@ isAdditional: true,
                 });
-                yield `${common_1.endOfLine}`;
+                yield `${utils_1.endOfLine}`;
             }
@@ -156,16 +163,22 @@ }
     else {
-        yield `const ${var_originalComponent} = {} as any${common_1.endOfLine}`;
+        yield `const ${var_originalComponent} = {} as any${utils_1.endOfLine}`;
     }
-    yield `// @ts-ignore${common_1.newLine}`;
-    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}`;
-    yield `const ${var_componentInstance} = ${var_functionalComponent}(`;
-    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}`;
-    currentComponent = node;
-    for (const failedExp of propsFailedExps) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
-        yield common_1.endOfLine;
-    }
+    yield `// @ts-ignore${utils_1.newLine}`;
+    yield `const ${var_functionalComponent} = __VLS_asFunctionalComponent(${var_originalComponent}, new ${var_originalComponent}({${utils_1.newLine}`;
+    yield* (0, elementProps_1.generateElementProps)(options, ctx, node, props, options.vueCompilerOptions.strictTemplates, false);
+    yield `}))${utils_1.endOfLine}`;
+    yield `const `;
+    yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, {
+        verification: {
+            shouldReport(_source, code) {
+                return String(code) !== '6133';
+            },
+        }
+    }, var_componentInstance);
+    yield ` = ${var_functionalComponent}`;
+    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.strictTemplates, true, failedPropExps), `}`);
+    yield `, ...__VLS_functionalComponentArgsRest(${var_functionalComponent}))${utils_1.endOfLine}`;
+    yield* generateFailedPropExps(options, ctx, failedPropExps);
     const [refName, offset] = yield* generateVScope(options, ctx, node, props);
@@ -175,3 +188,3 @@ const isRootNode = node === ctx.singleRootNode;
         const varName = ctx.getInternalVariable();
-        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
+        ctx.currentComponent.used = true;
         yield `var ${varName} = {} as (Parameters<NonNullable<typeof ${var_defineComponentCtx}['expose']>>[0] | null)`;
@@ -183,3 +196,3 @@ if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
         }
-        yield `${common_1.endOfLine}`;
+        yield `${utils_1.endOfLine}`;
         if (refName) {
@@ -192,7 +205,7 @@ ctx.templateRefs.set(refName, [varName, offset]);
     }
-    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
+    const usedComponentEventsVar = yield* (0, elementEvents_1.generateElementEvents)(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEvents);
     if (usedComponentEventsVar) {
-        ctx.usedComponentCtxVars.add(var_defineComponentCtx);
-        yield `let ${var_componentEmit}!: typeof ${var_defineComponentCtx}.emit${common_1.endOfLine}`;
-        yield `let ${var_componentEvents}!: __VLS_NormalizeEmits<typeof ${var_componentEmit}>${common_1.endOfLine}`;
+        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}`;
     }
@@ -208,17 +221,17 @@ if (options.vueCompilerOptions.fallthroughAttributes
     if (slotDir) {
-        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, var_defineComponentCtx);
+        yield* generateComponentSlot(options, ctx, node, slotDir);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, var_defineComponentCtx);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
-    if (ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
-        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${common_1.endOfLine}`;
+    if (ctx.currentComponent.used) {
+        yield `var ${var_defineComponentCtx}!: __VLS_PickFunctionalComponentCtx<typeof ${var_originalComponent}, typeof ${var_componentInstance}>${utils_1.endOfLine}`;
     }
 }
-function* generateElement(options, ctx, node, currentComponent, componentCtxVar, isVForChild) {
-    const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+function* generateElement(options, ctx, node, isVForChild) {
+    const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
     const endTagOffset = !node.isSelfClosing && options.template.lang === 'html'
         ? node.loc.start.offset + node.loc.source.lastIndexOf(node.tag)
         : undefined;
-    const propsFailedExps = [];
+    const failedPropExps = [];
     yield `__VLS_elementAsFunction(__VLS_intrinsicElements`;
@@ -231,8 +244,5 @@ yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, node.tag, startTagOffset, ctx.codeFeatures.withoutHighlightAndCompletion);
     yield `)(`;
-    yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props, true, propsFailedExps), `}`);
-    yield `)${common_1.endOfLine}`;
-    for (const failedExp of propsFailedExps) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, failedExp.node.loc.source, failedExp.node.loc, failedExp.node.loc.start.offset, ctx.codeFeatures.all, failedExp.prefix, failedExp.suffix);
-        yield common_1.endOfLine;
-    }
+    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.strictTemplates, true, failedPropExps), `}`);
+    yield `)${utils_1.endOfLine}`;
+    yield* generateFailedPropExps(options, ctx, failedPropExps);
     const [refName, offset] = yield* generateVScope(options, ctx, node, node.props);
@@ -250,7 +260,7 @@ if (refName) {
     const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot');
-    if (slotDir && componentCtxVar) {
-        yield* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar);
+    if (slotDir && ctx.currentComponent) {
+        yield* generateComponentSlot(options, ctx, node, slotDir);
     }
     else {
-        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
     }
@@ -263,2 +273,8 @@ if (options.vueCompilerOptions.fallthroughAttributes
 }
+function* generateFailedPropExps(options, ctx, failedPropExps) {
+    for (const failedExp of failedPropExps) {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, failedExp.node.loc.source, failedExp.node.loc.start.offset, failedExp.node.loc, failedExp.prefix, failedExp.suffix);
+        yield utils_1.endOfLine;
+    }
+}
 function* generateVScope(options, ctx, node, props) {
@@ -278,4 +294,4 @@ const vScope = props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && (prop.name === 'scope' || prop.name === 'data'));
         ];
-        yield common_1.endOfLine;
-        yield `if (${condition}) {${common_1.newLine}`;
+        yield utils_1.endOfLine;
+        yield `if (${condition}) {${utils_1.newLine}`;
         ctx.blockConditions.push(condition);
@@ -288,3 +304,3 @@ inScope = true;
     if (inScope) {
-        yield `}${common_1.newLine}`;
+        yield `}${utils_1.newLine}`;
         ctx.blockConditions.length = originalConditionsNum;
@@ -295,3 +311,3 @@ }
 function getCanonicalComponentName(tagText) {
-    return common_1.variableNameRegex.test(tagText)
+    return utils_1.variableNameRegex.test(tagText)
         ? tagText
@@ -314,3 +330,3 @@ : (0, shared_1.capitalize)((0, shared_1.camelize)(tagText.replace(colonReg, '-')));
 function* generateCanonicalComponentName(tagText, offset, features) {
-    if (common_1.variableNameRegex.test(tagText)) {
+    if (utils_1.variableNameRegex.test(tagText)) {
         yield [tagText, 'template', offset, features];
@@ -322,8 +338,20 @@ }
 }
-function* generateComponentSlot(options, ctx, node, slotDir, currentComponent, componentCtxVar) {
-    yield `{${common_1.newLine}`;
-    ctx.usedComponentCtxVars.add(componentCtxVar);
-    if (currentComponent) {
-        ctx.hasSlotElements.add(currentComponent);
+function* generateComponentGeneric(ctx) {
+    if (ctx.lastGenericComment) {
+        const { content, offset } = ctx.lastGenericComment;
+        yield* (0, utils_1.wrapWith)(offset, offset + content.length, ctx.codeFeatures.verification, `<`, [
+            content,
+            'template',
+            offset,
+            ctx.codeFeatures.all
+        ], `>`);
     }
+    ctx.lastGenericComment = undefined;
+}
+function* generateComponentSlot(options, ctx, node, slotDir) {
+    yield `{${utils_1.newLine}`;
+    if (ctx.currentComponent) {
+        ctx.currentComponent.used = true;
+        ctx.hasSlotElements.add(ctx.currentComponent.node);
+    }
     const slotBlockVars = [];
@@ -333,16 +361,10 @@ yield `const {`;
         yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slotDir.arg.loc.source, slotDir.arg.loc.start.offset, slotDir.arg.isStatic ? ctx.codeFeatures.withoutHighlight : ctx.codeFeatures.all, slotDir.arg.loc, false, true);
-        yield ': __VLS_thisSlot';
     }
     else {
-        yield `default: `;
-        yield* (0, common_1.wrapWith)(slotDir.loc.start.offset, slotDir.loc.start.offset + (slotDir.loc.source.startsWith('#')
-            ? '#'.length
-            : slotDir.loc.source.startsWith('v-slot:')
-                ? 'v-slot:'.length
-                : 0), ctx.codeFeatures.withoutHighlightAndCompletion, `__VLS_thisSlot`);
+        yield* (0, utils_1.wrapWith)(slotDir.loc.start.offset, slotDir.loc.start.offset + (slotDir.rawName?.length ?? 0), ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
     }
-    yield `} = __VLS_nonNullable(${componentCtxVar}.slots)${common_1.endOfLine}`;
+    yield `: __VLS_thisSlot } = ${ctx.currentComponent.ctxVar}.slots!${utils_1.endOfLine}`;
     if (slotDir?.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-        const slotAst = (0, common_1.createTsAst)(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
-        (0, common_1.collectVars)(options.ts, slotAst, slotAst, slotBlockVars);
+        const slotAst = (0, utils_1.createTsAst)(options.ts, slotDir, `(${slotDir.exp.content}) => {}`);
+        (0, utils_1.collectVars)(options.ts, slotAst, slotAst, slotBlockVars);
         if (!slotDir.exp.content.includes(':')) {
@@ -356,3 +378,3 @@ yield `const [`;
             ];
-            yield `] = __VLS_getSlotParams(__VLS_thisSlot)${common_1.endOfLine}`;
+            yield `] = __VLS_getSlotParams(__VLS_thisSlot)${utils_1.endOfLine}`;
         }
@@ -367,3 +389,3 @@ else {
             ];
-            yield ` = __VLS_getSlotParam(__VLS_thisSlot)${common_1.endOfLine}`;
+            yield ` = __VLS_getSlotParam(__VLS_thisSlot)${utils_1.endOfLine}`;
         }
@@ -377,3 +399,3 @@ }
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
         prev = childNode;
@@ -389,3 +411,3 @@ }
     if (isStatic && slotDir && !slotDir.arg) {
-        yield `__VLS_nonNullable(${componentCtxVar}.slots)['`;
+        yield `${ctx.currentComponent.ctxVar}.slots!['`;
         yield [
@@ -400,6 +422,6 @@ '',
         ];
-        yield `'/* empty slot name completion */]${common_1.newLine}`;
+        yield `'/* empty slot name completion */]${utils_1.newLine}`;
     }
     yield* ctx.generateAutoImportCompletion();
-    yield `}${common_1.newLine}`;
+    yield `}${utils_1.newLine}`;
 }
@@ -412,7 +434,7 @@ function* generateReferencesForElements(options, ctx, node) {
             const [content, startOffset] = normalizeAttributeValue(prop.value);
-            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${common_1.newLine}`;
-            yield `__VLS_ctx`;
+            yield `// @ts-ignore navigation for \`const ${content} = ref()\`${utils_1.newLine}`;
+            yield `/** @type { typeof __VLS_ctx`;
             yield* (0, propertyAccess_1.generatePropertyAccess)(options, ctx, content, startOffset, ctx.codeFeatures.navigation, prop.value.loc);
-            yield common_1.endOfLine;
-            if (common_1.variableNameRegex.test(content)) {
+            yield ` } */${utils_1.endOfLine}`;
+            if (utils_1.variableNameRegex.test(content) && !options.templateRefNames.has(content)) {
                 ctx.accessExternalVariable(content, startOffset);
@@ -483,4 +505,9 @@ }
             for (const literal of literals) {
-                const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
-                ctx.scopedClasses.push(...classes);
+                if (literal.text) {
+                    const classes = collectClasses(literal.text, literal.end - literal.text.length - 1 + startOffset);
+                    ctx.scopedClasses.push(...classes);
+                }
+                else {
+                    ctx.emptyClassOffsets.push(literal.end - 1 + startOffset);
+                }
             }
@@ -487,0 +514,0 @@ function walkArrayLiteral(node) {

lib/codegen/template/elementChildren.d.ts

@@ -5,2 +5,2 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateElementChildren(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;

lib/codegen/template/elementChildren.js

@@ -5,9 +5,9 @@ "use strict";
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const templateChild_1 = require("./templateChild");
-function* generateElementChildren(options, ctx, node, currentComponent, componentCtxVar) {
+function* generateElementChildren(options, ctx, node) {
     yield* ctx.resetDirectiveComments('end of element children start');
     let prev;
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
         prev = childNode;
@@ -17,3 +17,3 @@ }
     // fix https://github.com/vuejs/language-tools/issues/932
-    if (componentCtxVar
+    if (ctx.currentComponent
         && !ctx.hasSlotElements.has(node)
@@ -23,8 +23,8 @@ && node.children.length
         && node.tagType !== CompilerDOM.ElementTypes.TEMPLATE) {
-        ctx.usedComponentCtxVars.add(componentCtxVar);
-        yield `__VLS_nonNullable(${componentCtxVar}.slots).`;
-        yield* (0, common_1.wrapWith)(node.children[0].loc.start.offset, node.children[node.children.length - 1].loc.end.offset, ctx.codeFeatures.navigation, `default`);
-        yield common_1.endOfLine;
+        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

lib/codegen/template/elementDirectives.d.ts

@@ -6,1 +6,2 @@ import * as CompilerDOM from '@vue/compiler-dom';
 export declare function generateElementDirectives(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode): Generator<Code>;
+export declare function generateModifiers(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, prop: CompilerDOM.DirectiveNode, propertyName?: string): Generator<Code>;

lib/codegen/template/elementDirectives.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateElementDirectives = generateElementDirectives;
+exports.generateModifiers = generateModifiers;
 const CompilerDOM = require("@vue/compiler-dom");
 const shared_1 = require("@vue/shared");
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generateElementDirectives(options, ctx, node) {
@@ -24,4 +25,4 @@ for (const prop of node.props) {
         ctx.accessExternalVariable((0, shared_1.camelize)('v-' + prop.name), prop.loc.start.offset);
-        yield* (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), `}, null!, null!)`);
-        yield common_1.endOfLine;
+        yield* (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, `__VLS_asFunctionalDirective(`, ...generateIdentifier(ctx, prop), `)(null!, { ...__VLS_directiveBindingRestFields, `, ...generateArg(options, ctx, prop), ...generateModifiers(options, ctx, prop), ...generateValue(options, ctx, prop), ` }, null!, null!)`);
+        yield utils_1.endOfLine;
     }
@@ -31,3 +32,3 @@ }
     const rawName = 'v-' + prop.name;
-    yield* (0, common_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, {
+    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.codeFeatures.all,
@@ -51,30 +52,35 @@ verification: false,
     const startOffset = arg.loc.start.offset + arg.loc.source.indexOf(arg.content);
-    yield* (0, common_1.wrapWith)(startOffset, startOffset + arg.content.length, ctx.codeFeatures.verification, 'arg');
-    yield ': ';
+    yield* (0, utils_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.withoutHighlight);
+        yield* (0, stringLiteralKey_1.generateStringLiteralKey)(arg.content, startOffset, ctx.codeFeatures.all);
     }
     else {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, arg.content, arg.loc, startOffset, ctx.codeFeatures.all, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, arg.content, startOffset, arg.loc, `(`, `)`);
     }
-    yield ', ';
+    yield `, `;
 }
-function* generateModifiers(options, ctx, prop) {
-    if (options.vueCompilerOptions.target < 3.5) {
+function* generateModifiers(options, ctx, prop, propertyName = 'modifiers') {
+    const { modifiers } = prop;
+    if (!modifiers.length) {
         return;
     }
-    yield 'modifiers: { ';
-    for (const mod of prop.modifiers) {
-        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutHighlight);
-        yield ': true, ';
+    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 `: { `;
+    for (const mod of modifiers) {
+        yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, mod.content, mod.loc.start.offset, ctx.codeFeatures.withoutNavigation);
+        yield `: true, `;
     }
-    yield '}, ';
+    yield `}, `;
 }
 function* generateValue(options, ctx, prop) {
-    if (prop.exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
+    const { exp } = prop;
+    if (exp?.type !== CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
         return;
     }
-    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, 'value');
-    yield ': ';
-    yield* (0, common_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'));
+    yield* (0, utils_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, `(`, `)`));
 }
@@ -81,0 +87,0 @@ function getPropRenameApply(oldName) {

lib/codegen/template/elementEvents.d.ts

@@ -6,5 +6,5 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-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 generateElementEvents(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, componentVar: string, componentInstanceVar: string, eventsVar: string): Generator<Code, boolean>;
+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 isCompoundExpression(ts: typeof import('typescript'), ast: ts.SourceFile): boolean;

lib/codegen/template/elementEvents.js

@@ -9,7 +9,6 @@ "use strict";
 const shared_1 = require("@vue/shared");
-const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
 const interpolation_1 = require("./interpolation");
-function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, emitVar, eventsVar) {
+function* generateElementEvents(options, ctx, node, componentVar, componentInstanceVar, eventsVar) {
     let usedComponentEventsVar = false;
@@ -26,33 +25,19 @@ let propsVar;
                 propsVar = ctx.getInternalVariable();
-                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${common_1.endOfLine}`;
+                yield `let ${propsVar}!: __VLS_FunctionalComponentProps<typeof ${componentVar}, typeof ${componentInstanceVar}>${utils_1.endOfLine}`;
             }
-            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> & `;
+            let source = prop.arg.loc.source;
+            let start = prop.arg.loc.start.offset;
+            let propPrefix = 'on';
+            let emitPrefix = '';
+            if (source.startsWith('vue:')) {
+                source = source.slice('vue:'.length);
+                start = start + 'vue:'.length;
+                propPrefix = 'onVnode';
+                emitPrefix = 'vnode-';
             }
-            yield `(${common_1.newLine}`;
-            yield `__VLS_IsFunction<typeof ${propsVar}, '${originalPropName}'> extends true${common_1.newLine}`;
-            yield `? typeof ${propsVar}${common_1.newLine}`;
-            yield `: __VLS_IsFunction<typeof ${eventsVar}, '${prop.arg.loc.source}'> extends true${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_IsFunction<typeof ${eventsVar}, '${(0, shared_1.camelize)(prop.arg.loc.source)}'> extends true${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 `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 `}${common_1.endOfLine}`;
+            yield `}${utils_1.endOfLine}`;
         }
@@ -62,32 +47,14 @@ }
 }
-const eventArgFeatures = {
-    navigation: {
-        // @click-outside -> onClickOutside
-        resolveRenameNewName(newName) {
-            return (0, shared_1.camelize)('on-' + newName);
-        },
-        // onClickOutside -> @click-outside
-        resolveRenameEditText(newName) {
-            const hName = (0, shared_2.hyphenateAttr)(newName);
-            if ((0, shared_2.hyphenateAttr)(newName).startsWith('on-')) {
-                return (0, shared_1.camelize)(hName.slice('on-'.length));
-            }
-            return newName;
-        },
-    },
-};
-function* generateEventArg(ctx, arg, enableHover) {
-    const features = enableHover
-        ? {
-            ...ctx.codeFeatures.withoutHighlightAndCompletion,
-            ...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);
+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))) {
+        yield ['', 'template', start, features];
+        yield directive;
+        yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(name), start, utils_1.combineLastMapping);
     }
     else {
-        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), `'`);
+        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), `'`);
     }
@@ -100,6 +67,6 @@ }
         let isFirstMapping = true;
-        const ast = (0, common_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
+        const ast = (0, utils_1.createTsAst)(options.ts, prop.exp, prop.exp.content);
         const _isCompoundExpression = isCompoundExpression(options.ts, ast);
         if (_isCompoundExpression) {
-            yield `(...[$event]) => {${common_1.newLine}`;
+            yield `(...[$event]) => {${utils_1.newLine}`;
             ctx.addLocalVariable('$event');
@@ -109,6 +76,6 @@ prefix = '';
             for (const blockCondition of ctx.blockConditions) {
-                prefix += `if (!(${blockCondition})) return${common_1.endOfLine}`;
+                prefix += `if (!(${blockCondition})) return${utils_1.endOfLine}`;
             }
         }
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, offset => {
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', offset => {
             if (_isCompoundExpression && isFirstMapping) {
@@ -130,6 +97,6 @@ isFirstMapping = false;
             return ctx.codeFeatures.all;
-        }, prefix, suffix);
+        }, prop.exp.content, prop.exp.loc.start.offset, prop.exp.loc, prefix, suffix);
         if (_isCompoundExpression) {
             ctx.removeLocalVariable('$event');
-            yield common_1.endOfLine;
+            yield utils_1.endOfLine;
             yield* ctx.generateAutoImportCompletion();
@@ -136,0 +103,0 @@ yield `}`;

lib/codegen/template/elementProps.d.ts

@@ -5,6 +5,7 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], enableCodeFeatures: boolean, propsFailedExps?: {
+export interface FailedPropExpression {
     node: CompilerDOM.SimpleExpressionNode;
     prefix: string;
     suffix: string;
-}[]): Generator<Code>;
+}
+export declare function generateElementProps(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ElementNode, props: CompilerDOM.ElementNode['props'], strictPropsCheck: boolean, enableCodeFeatures: boolean, failedPropExps?: FailedPropExpression[]): Generator<Code>;

lib/codegen/template/elementProps.js

@@ -9,9 +9,11 @@ "use strict";
 const shared_2 = require("../../utils/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const unicode_1 = require("../utils/unicode");
+const elementDirectives_1 = require("./elementDirectives");
 const elementEvents_1 = require("./elementEvents");
 const interpolation_1 = require("./interpolation");
 const objectProperty_1 = require("./objectProperty");
-const inlayHints_1 = require("../inlayHints");
-function* generateElementProps(options, ctx, node, props, enableCodeFeatures, propsFailedExps) {
+function* generateElementProps(options, ctx, node, props, strictPropsCheck, enableCodeFeatures, failedPropExps) {
     const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
@@ -26,10 +28,11 @@ for (const prop of props) {
                     yield `...{ `;
-                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg, true);
+                    yield* (0, elementEvents_1.generateEventArg)(ctx, prop.arg.loc.source, prop.arg.loc.start.offset);
                     yield `: `;
                     yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
-                    yield `}, `;
+                    yield `},`;
                 }
                 else {
-                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any }, `;
+                    yield `...{ '${(0, shared_1.camelize)('on-' + prop.arg.loc.source)}': {} as any },`;
                 }
+                yield utils_1.newLine;
             }
@@ -40,8 +43,8 @@ else if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
                 && prop.arg.loc.source.endsWith(']')) {
-                propsFailedExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
-                propsFailedExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
+                failedPropExps?.push({ node: prop.arg, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '() => {', suffix: '}' });
             }
             else if (!prop.arg
                 && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
             }
@@ -62,3 +65,3 @@ }
             else {
-                propName = getModelValuePropName(node, options.vueCompilerOptions.target, options.vueCompilerOptions);
+                propName = getModelPropName(node, options.vueCompilerOptions);
             }
@@ -68,46 +71,24 @@ if (propName === undefined
                 if (prop.exp && prop.exp.constType !== CompilerDOM.ConstantTypes.CAN_STRINGIFY) {
-                    propsFailedExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
+                    failedPropExps?.push({ node: prop.exp, prefix: '(', suffix: ')' });
                 }
                 continue;
             }
-            if (prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
-                propName = propName.substring(1);
+            if (prop.name === 'bind'
+                && prop.modifiers.some(m => m.content === 'prop' || m.content === 'attr')) {
+                propName = propName.slice(1);
             }
             const shouldSpread = propName === 'style' || propName === 'class';
-            const shouldCamelize = isComponent
-                && (!prop.arg || (prop.arg.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic)) // isStatic
-                && (0, shared_2.hyphenateAttr)(propName) === propName
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, propName);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize);
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
-            const codes = (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
-                ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, {
-                    ...codeInfo,
-                    verification: options.vueCompilerOptions.strictTemplates
-                        ? codeInfo.verification
-                        : {
-                            shouldReport(_source, code) {
-                                if (String(code) === '2353' || String(code) === '2561') {
-                                    return false;
-                                }
-                                return typeof codeInfo.verification === 'object'
-                                    ? codeInfo.verification.shouldReport?.(_source, code) ?? true
-                                    : true;
-                            },
-                        },
-                    navigation: codeInfo.navigation
-                        ? {
-                            resolveRenameNewName: shared_1.camelize,
-                            resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
-                        }
-                        : false,
-                }, prop.loc.name_2 ?? (prop.loc.name_2 = {}), shouldCamelize)
-                : (0, common_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(prop.arg
+                ? (0, objectProperty_1.generateObjectProperty)(options, ctx, propName, prop.arg.loc.start.offset, codeInfo, prop.loc.name_2 ??= {}, shouldCamelize)
+                : (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.start.offset + 'v-model'.length, ctx.codeFeatures.verification, propName)), `: (`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, prop.arg?.loc.start.offset === prop.exp?.loc.start.offset, enableCodeFeatures), `)`);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
@@ -117,7 +98,22 @@ if (shouldSpread) {
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
+            if (prop.name === 'model' && prop.modifiers.length) {
+                const propertyName = prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+                    ? !prop.arg.isStatic
+                        ? `[__VLS_tryAsConstant(\`$\{${prop.arg.content}\}Modifiers\`)]`
+                        : (0, shared_1.camelize)(propName) + `Modifiers`
+                    : `modelModifiers`;
+                const codes = (0, elementDirectives_1.generateModifiers)(options, ctx, prop, propertyName);
+                if (enableCodeFeatures) {
+                    yield* codes;
+                }
+                else {
+                    yield (0, muggle_string_1.toString)([...codes]);
+                }
+                yield utils_1.newLine;
+            }
         }
         else if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE) {
             if (options.vueCompilerOptions.dataAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern))
-                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom always adds it (#3881)
+                // Vue 2 Transition doesn't support "persisted" property but `@vue/compiler-dom` always adds it (#3881)
                 || (options.vueCompilerOptions.target < 3
@@ -129,42 +125,15 @@ && prop.name === 'persisted'
             const shouldSpread = prop.name === 'style' || prop.name === 'class';
-            const shouldCamelize = isComponent
-                && (0, shared_2.hyphenateAttr)(prop.name) === prop.name
-                && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(prop.name, pattern));
+            const shouldCamelize = isComponent && getShouldCamelize(options, prop, prop.name);
+            const codeInfo = getPropsCodeInfo(ctx, strictPropsCheck, true);
             if (shouldSpread) {
                 yield `...{ `;
             }
-            const codeInfo = shouldCamelize
-                ? {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                    navigation: ctx.codeFeatures.withoutHighlightAndCompletion.navigation
-                        ? {
-                            resolveRenameNewName: shared_1.camelize,
-                            resolveRenameEditText: shared_2.hyphenateAttr,
-                        }
-                        : false,
-                }
-                : {
-                    ...ctx.codeFeatures.withoutHighlightAndCompletion,
-                };
-            if (!options.vueCompilerOptions.strictTemplates) {
-                const verification = codeInfo.verification;
-                codeInfo.verification = {
-                    shouldReport(_source, code) {
-                        if (String(code) === '2353' || String(code) === '2561') {
-                            return false;
-                        }
-                        return typeof verification === 'object'
-                            ? verification.shouldReport?.(_source, code) ?? true
-                            : true;
-                    },
-                };
-            }
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ?? (prop.loc.name_1 = {}), shouldCamelize), `: (`, ...(prop.value
-                ? generateAttrValue(prop.value, ctx.codeFeatures.all)
+            const codes = (0, utils_1.wrapWith)(prop.loc.start.offset, prop.loc.end.offset, ctx.codeFeatures.verification, ...(0, objectProperty_1.generateObjectProperty)(options, ctx, prop.name, prop.loc.start.offset, codeInfo, prop.loc.name_1 ??= {}, shouldCamelize), `: (`, ...(prop.value
+                ? generateAttrValue(prop.value, ctx.codeFeatures.withoutNavigation)
                 : [`true`]), `)`);
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (enableCodeFeatures) {
+                yield* codes;
             }
             else {
-                yield* codes;
+                yield (0, muggle_string_1.toString)([...codes]);
             }
@@ -174,3 +143,3 @@ if (shouldSpread) {
             }
-            yield `, `;
+            yield `,${utils_1.newLine}`;
         }
@@ -181,15 +150,18 @@ else if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE
             && prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-            const codes = (0, common_1.conditionWrapWith)(enableCodeFeatures, prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...(0, interpolation_1.generateInterpolation)(options, ctx, prop.exp.content, prop.exp.loc, prop.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')'));
-            if (!enableCodeFeatures) {
-                yield (0, muggle_string_1.toString)([...codes]);
+            if (prop.exp.loc.source === '$attrs') {
+                if (enableCodeFeatures) {
+                    ctx.bindingAttrLocs.push(prop.exp.loc);
+                }
             }
             else {
-                yield* codes;
+                const codes = (0, utils_1.wrapWith)(prop.exp.loc.start.offset, prop.exp.loc.end.offset, ctx.codeFeatures.verification, `...`, ...generatePropExp(options, ctx, prop, prop.exp, ctx.codeFeatures.all, false, enableCodeFeatures));
+                if (enableCodeFeatures) {
+                    yield* codes;
+                }
+                else {
+                    yield (0, muggle_string_1.toString)([...codes]);
+                }
+                yield `,${utils_1.newLine}`;
             }
-            yield `, `;
         }
-        else {
-            // comment this line to avoid affecting comments in prop expressions
-            // tsCodeGen.addText("/* " + [prop.type, prop.name, prop.arg?.loc.source, prop.exp?.loc.source, prop.loc.source].join(", ") + " */ ");
-        }
     }
@@ -206,12 +178,25 @@ }
         if (!isShorthand) { // vue 3.4+
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, exp.loc.source, exp.loc, exp.loc.start.offset, features, '(', ')');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, exp.loc.source, exp.loc.start.offset, exp.loc, '(', ')');
         }
         else {
             const propVariableName = (0, shared_1.camelize)(exp.loc.source);
-            if (common_1.variableNameRegex.test(propVariableName)) {
-                if (!ctx.hasLocalVariable(propVariableName)) {
+            if (utils_1.variableNameRegex.test(propVariableName)) {
+                const isDestructuredProp = options.destructuredPropNames?.has(propVariableName) ?? false;
+                const isTemplateRef = options.templateRefNames?.has(propVariableName) ?? false;
+                const codes = (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
+                if (ctx.hasLocalVariable(propVariableName) || isDestructuredProp) {
+                    yield* codes;
+                }
+                else {
                     ctx.accessExternalVariable(propVariableName, exp.loc.start.offset);
-                    yield `__VLS_ctx.`;
+                    if (isTemplateRef) {
+                        yield `__VLS_unref(`;
+                        yield* codes;
+                        yield `)`;
+                    }
+                    else {
+                        yield `__VLS_ctx.`;
+                        yield* codes;
+                    }
                 }
-                yield* (0, camelized_1.generateCamelized)(exp.loc.source, exp.loc.start.offset, features);
                 if (enableCodeFeatures) {
@@ -228,6 +213,5 @@ ctx.inlayHints.push((0, inlayHints_1.createVBindShorthandInlayHintInfo)(prop.loc, propVariableName));
 function* generateAttrValue(attrNode, features) {
-    const char = attrNode.loc.source.startsWith("'") ? "'" : '"';
-    yield char;
+    const quote = attrNode.loc.source.startsWith("'") ? "'" : '"';
+    yield quote;
     let start = attrNode.loc.start.offset;
-    let end = attrNode.loc.end.offset;
     let content = attrNode.loc.source;
@@ -237,26 +221,39 @@ if ((content.startsWith('"') && content.endsWith('"'))
         start++;
-        end--;
         content = content.slice(1, -1);
     }
-    if (needToUnicode(content)) {
-        yield* (0, common_1.wrapWith)(start, end, features, toUnicode(content));
-    }
-    else {
-        yield [content, 'template', start, features];
-    }
-    yield char;
+    yield* (0, unicode_1.generateUnicode)(content, start, features);
+    yield quote;
 }
-function needToUnicode(str) {
-    return str.includes('\\') || str.includes('\n');
+function getShouldCamelize(options, prop, propName) {
+    return (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE
+        || !prop.arg
+        || (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && prop.arg.isStatic))
+        && (0, shared_2.hyphenateAttr)(propName) === propName
+        && !options.vueCompilerOptions.htmlAttributes.some(pattern => (0, minimatch_1.minimatch)(propName, pattern));
 }
-function toUnicode(str) {
-    return str.split('').map(value => {
-        const temp = value.charCodeAt(0).toString(16).padStart(4, '0');
-        if (temp.length > 2) {
-            return '\\u' + temp;
-        }
-        return value;
-    }).join('');
+function getPropsCodeInfo(ctx, strictPropsCheck, shouldCamelize) {
+    const codeInfo = ctx.codeFeatures.withoutHighlightAndCompletion;
+    return {
+        ...codeInfo,
+        navigation: codeInfo.navigation
+            ? {
+                resolveRenameNewName: shared_1.camelize,
+                resolveRenameEditText: shouldCamelize ? shared_2.hyphenateAttr : undefined,
+            }
+            : false,
+        verification: strictPropsCheck
+            ? codeInfo.verification
+            : {
+                shouldReport(_source, code) {
+                    if (String(code) === '2353' || String(code) === '2561') {
+                        return false;
+                    }
+                    return typeof codeInfo.verification === 'object'
+                        ? codeInfo.verification.shouldReport?.(_source, code) ?? true
+                        : true;
+                },
+            }
+    };
 }
-function getModelValuePropName(node, vueVersion, vueCompilerOptions) {
+function getModelPropName(node, vueCompilerOptions) {
     for (const modelName in vueCompilerOptions.experimentalModelPropName) {
@@ -266,5 +263,5 @@ const tags = vueCompilerOptions.experimentalModelPropName[modelName];
             if (node.tag === tag || node.tag === (0, shared_2.hyphenateTag)(tag)) {
-                const v = tags[tag];
-                if (typeof v === 'object') {
-                    const arr = Array.isArray(v) ? v : [v];
+                const val = tags[tag];
+                if (typeof val === 'object') {
+                    const arr = Array.isArray(val) ? val : [val];
                     for (const attrs of arr) {
@@ -299,4 +296,4 @@ let failed = false;
     }
-    return vueVersion < 3 ? 'value' : 'modelValue';
+    return vueCompilerOptions.target < 3 ? 'value' : 'modelValue';
 }
 //# sourceMappingURL=elementProps.js.map

lib/codegen/template/index.js

@@ -6,9 +6,9 @@ "use strict";
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const shared_1 = require("../../utils/shared");
+const utils_1 = require("../utils");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const context_1 = require("./context");
-const element_1 = require("./element");
 const objectProperty_1 = require("./objectProperty");
-const stringLiteralKey_1 = require("./stringLiteralKey");
+const styleScopedClasses_1 = require("./styleScopedClasses");
 const templateChild_1 = require("./templateChild");
-const styleScopedClasses_1 = require("./styleScopedClasses");
 function* generateTemplate(options) {
@@ -22,86 +22,78 @@ const ctx = (0, context_1.createTemplateCodegenContext)(options);
     }
+    ctx.addLocalVariable((0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target));
+    ctx.addLocalVariable('$attrs');
+    ctx.addLocalVariable('$refs');
     ctx.addLocalVariable('$el');
-    ctx.addLocalVariable('$refs');
-    yield* generatePreResolveComponents(options);
     if (options.template.ast) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined, undefined, undefined);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, options.template.ast, undefined);
     }
-    yield* (0, styleScopedClasses_1.generateStyleScopedClasses)(ctx);
-    if (!options.hasDefineSlots) {
-        yield `var __VLS_slots!:`;
-        yield* generateSlotsType(options, ctx);
-        yield common_1.endOfLine;
-    }
-    yield* ctx.generateAutoImportCompletion();
+    yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(ctx);
+    yield* generateSlots(options, ctx);
     yield* generateInheritedAttrs(ctx);
     yield* generateRefs(ctx);
     yield* generateRootEl(ctx);
+    yield* ctx.generateAutoImportCompletion();
     return ctx;
 }
-function* generateSlotsType(options, ctx) {
-    for (const { expVar, varName } of ctx.dynamicSlots) {
-        ctx.hasSlot = true;
-        yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${common_1.newLine}`;
-    }
-    yield `{${common_1.newLine}`;
-    for (const slot of ctx.slots) {
-        ctx.hasSlot = true;
-        if (slot.name && slot.loc !== undefined) {
-            yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+function* generateSlots(options, ctx) {
+    if (!options.hasDefineSlots) {
+        yield `var __VLS_slots!: `;
+        for (const { expVar, varName } of ctx.dynamicSlots) {
+            ctx.hasSlot = true;
+            yield `Partial<Record<NonNullable<typeof ${expVar}>, (_: typeof ${varName}) => any>> &${utils_1.newLine}`;
         }
-        else {
-            yield* (0, common_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+        yield `{${utils_1.newLine}`;
+        for (const slot of ctx.slots) {
+            ctx.hasSlot = true;
+            if (slot.name && slot.loc !== undefined) {
+                yield* (0, objectProperty_1.generateObjectProperty)(options, ctx, slot.name, slot.loc, ctx.codeFeatures.withoutHighlightAndCompletion, slot.nodeLoc);
+            }
+            else {
+                yield* (0, utils_1.wrapWith)(slot.tagRange[0], slot.tagRange[1], ctx.codeFeatures.withoutHighlightAndCompletion, `default`);
+            }
+            yield `?(_: typeof ${slot.varName}): any,${utils_1.newLine}`;
         }
-        yield `?(_: typeof ${slot.varName}): any,${common_1.newLine}`;
+        yield `}${utils_1.endOfLine}`;
     }
-    yield `}`;
+    const name = (0, shared_1.getSlotsPropertyName)(options.vueCompilerOptions.target);
+    yield `var ${name}!: typeof ${options.slotsAssignName ?? '__VLS_slots'}${utils_1.endOfLine}`;
 }
 function* generateInheritedAttrs(ctx) {
-    yield 'var __VLS_inheritedAttrs!: {}';
+    yield 'let __VLS_inheritedAttrs!: {}';
     for (const varName of ctx.inheritedAttrVars) {
         yield ` & typeof ${varName}`;
     }
-    yield common_1.endOfLine;
+    yield utils_1.endOfLine;
+    yield `var $attrs!: Partial<typeof __VLS_inheritedAttrs> & Record<string, unknown>${utils_1.endOfLine}`;
+    if (ctx.bindingAttrLocs.length) {
+        yield `[`;
+        for (const loc of ctx.bindingAttrLocs) {
+            yield [
+                loc.source,
+                'template',
+                loc.start.offset,
+                ctx.codeFeatures.all
+            ];
+            yield `,`;
+        }
+        yield `]${utils_1.endOfLine}`;
+    }
 }
 function* generateRefs(ctx) {
-    yield `const __VLS_refs = {${common_1.newLine}`;
+    yield `const __VLS_refs = {${utils_1.newLine}`;
     for (const [name, [varName, offset]] of ctx.templateRefs) {
         yield* (0, stringLiteralKey_1.generateStringLiteralKey)(name, offset, ctx.codeFeatures.navigationAndCompletion);
-        yield `: ${varName},${common_1.newLine}`;
+        yield `: ${varName},${utils_1.newLine}`;
     }
-    yield `}${common_1.endOfLine}`;
-    yield `var $refs!: typeof __VLS_refs${common_1.endOfLine}`;
+    yield `}${utils_1.endOfLine}`;
+    yield `var $refs!: typeof __VLS_refs${utils_1.endOfLine}`;
 }
 function* generateRootEl(ctx) {
     if (ctx.singleRootElType) {
-        yield `var $el!: ${ctx.singleRootElType}${common_1.endOfLine}`;
+        yield `var $el!: ${ctx.singleRootElType}${utils_1.endOfLine}`;
     }
     else {
-        yield `var $el!: any${common_1.endOfLine}`;
+        yield `var $el!: any${utils_1.endOfLine}`;
     }
 }
-function* generatePreResolveComponents(options) {
-    yield `let __VLS_resolvedLocalAndGlobalComponents!: Required<{}`;
-    if (options.template.ast) {
-        const components = new Set();
-        for (const node of forEachElementNode(options.template.ast)) {
-            if (node.tagType === CompilerDOM.ElementTypes.COMPONENT
-                && node.tag.toLowerCase() !== 'component'
-                && !node.tag.includes('.') // namespace tag 
-            ) {
-                if (components.has(node.tag)) {
-                    continue;
-                }
-                components.add(node.tag);
-                yield common_1.newLine;
-                yield ` & __VLS_WithComponent<'${(0, element_1.getCanonicalComponentName)(node.tag)}', typeof __VLS_localComponents, `;
-                yield (0, element_1.getPossibleOriginalComponentNames)(node.tag, false)
-                    .map(name => `"${name}"`)
-                    .join(', ');
-                yield `>`;
-            }
-        }
-    }
-    yield `>${common_1.endOfLine}`;
-}
 function* forEachElementNode(node) {
@@ -108,0 +100,0 @@ if (node.type === CompilerDOM.NodeTypes.ROOT) {

lib/codegen/template/interpolation.d.ts

 import type * as ts from 'typescript';
 import type { Code, VueCodeInformation } from '../../types';
 import type { TemplateCodegenContext } from './context';
-import type { TemplateCodegenOptions } from './index';
-export declare function generateInterpolation(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, _code: string, astHolder: any, start: number | undefined, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, prefix: string, suffix: string): Generator<Code>;
-export declare function forEachInterpolationSegment(ts: typeof import('typescript'), destructuredPropNames: Set<string> | undefined, templateRefNames: Set<string> | undefined, ctx: TemplateCodegenContext, code: string, offset: number | undefined, ast: ts.SourceFile): Generator<[fragment: string, offset: number | undefined, type?: 'errorMappingOnly' | 'startText' | 'endText']>;
+export declare function generateInterpolation(options: {
+    ts: typeof ts;
+    destructuredPropNames: Set<string> | undefined;
+    templateRefNames: Set<string> | undefined;
+}, ctx: TemplateCodegenContext, source: string, data: VueCodeInformation | ((offset: number) => VueCodeInformation) | undefined, _code: string, start: number | undefined, astHolder?: any, prefix?: string, suffix?: string): Generator<Code>;

lib/codegen/template/interpolation.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateInterpolation = generateInterpolation;
-exports.forEachInterpolationSegment = forEachInterpolationSegment;
 const shared_1 = require("@vue/shared");
 const scriptSetupRanges_1 = require("../../parsers/scriptSetupRanges");
-const common_1 = require("../common");
-function* generateInterpolation(options, ctx, _code, astHolder, start, data, prefix, suffix) {
+const utils_1 = require("../utils");
+function* generateInterpolation(options, ctx, source, data, _code, start, astHolder = {}, prefix = '', suffix = '') {
     const code = prefix + _code + suffix;
-    const ast = (0, common_1.createTsAst)(options.ts, astHolder, code);
+    const ast = (0, utils_1.createTsAst)(options.ts, astHolder, code);
     for (let [section, offset, type] of forEachInterpolationSegment(options.ts, options.destructuredPropNames, options.templateRefNames, ctx, code, start !== undefined ? start - prefix.length : undefined, ast)) {
@@ -20,8 +19,8 @@ if (offset === undefined) {
             if (overLength > 0) {
-                addSuffix = section.substring(section.length - overLength);
-                section = section.substring(0, section.length - overLength);
+                addSuffix = section.slice(section.length - overLength);
+                section = section.slice(0, -overLength);
             }
             if (offset < 0) {
-                yield section.substring(0, -offset);
-                section = section.substring(-offset);
+                yield section.slice(0, -offset);
+                section = section.slice(-offset);
                 offset = 0;
@@ -35,3 +34,3 @@ }
                         section,
-                        'template',
+                        source,
                         start + offset,
@@ -57,3 +56,3 @@ type === 'errorMappingOnly'
             // https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
-            (0, shared_1.isGloballyWhitelisted)(text) ||
+            (0, shared_1.isGloballyAllowed)(text) ||
             text === 'require' ||
@@ -84,7 +83,7 @@ text.startsWith('__VLS_')) {
         if (ctxVars[0].isShorthand) {
-            yield [code.substring(0, ctxVars[0].offset + ctxVars[0].text.length), 0];
+            yield [code.slice(0, ctxVars[0].offset + ctxVars[0].text.length), 0];
             yield [': ', undefined];
         }
         else if (ctxVars[0].offset > 0) {
-            yield [code.substring(0, ctxVars[0].offset), 0, 'startText'];
+            yield [code.slice(0, ctxVars[0].offset), 0, 'startText'];
         }
@@ -96,7 +95,7 @@ for (let i = 0; i < ctxVars.length - 1; i++) {
             if (nextVar.isShorthand) {
-                yield [code.substring(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
+                yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset + nextVar.text.length), curVar.offset + curVar.text.length];
                 yield [': ', undefined];
             }
             else {
-                yield [code.substring(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
+                yield [code.slice(curVar.offset + curVar.text.length, nextVar.offset), curVar.offset + curVar.text.length];
             }
@@ -107,3 +106,3 @@ }
         if (lastVar.offset + lastVar.text.length < code.length) {
-            yield [code.substring(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
+            yield [code.slice(lastVar.offset + lastVar.text.length), lastVar.offset + lastVar.text.length, 'endText'];
         }
@@ -123,3 +122,3 @@ }
         yield [`__VLS_unref(`, undefined];
-        yield [code.substring(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
+        yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
         yield [`)`, undefined];
@@ -131,3 +130,3 @@ }
         }
-        yield [code.substring(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
+        yield [code.slice(curVar.offset, curVar.offset + curVar.text.length), curVar.offset];
     }
@@ -146,3 +145,3 @@ }
     else if (ts.isVariableDeclaration(node)) {
-        (0, common_1.collectVars)(ts, node.name, ast, blockVars);
+        (0, utils_1.collectVars)(ts, node.name, ast, blockVars);
         for (const varName of blockVars) {
@@ -208,3 +207,3 @@ ctx.addLocalVariable(varName);
     for (const param of node.parameters) {
-        (0, common_1.collectVars)(ts, param.name, ast, functionArgs);
+        (0, utils_1.collectVars)(ts, param.name, ast, functionArgs);
         if (param.type) {
@@ -211,0 +210,0 @@ walkIdentifiers(ts, param.type, ast, cb, ctx);

lib/codegen/template/objectProperty.js

@@ -5,25 +5,25 @@ "use strict";
 const shared_1 = require("@vue/shared");
-const common_1 = require("../common");
-const camelized_1 = require("./camelized");
+const utils_1 = require("../utils");
+const camelized_1 = require("../utils/camelized");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generateObjectProperty(options, ctx, code, offset, features, astHolder, shouldCamelize = false, shouldBeConstant = false) {
     if (code.startsWith('[') && code.endsWith(']') && astHolder) {
         if (shouldBeConstant) {
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, code.slice(1, -1), astHolder, offset + 1, features, `[__VLS_tryAsConstant(`, `)]`);
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code.slice(1, -1), offset + 1, astHolder, `[__VLS_tryAsConstant(`, `)]`);
         }
         else {
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code, offset, astHolder);
         }
     }
     else if (shouldCamelize) {
-        if (common_1.variableNameRegex.test((0, shared_1.camelize)(code))) {
+        if (utils_1.variableNameRegex.test((0, shared_1.camelize)(code))) {
             yield* (0, camelized_1.generateCamelized)(code, offset, features);
         }
         else {
-            yield* (0, common_1.wrapWith)(offset, offset + code.length, features, `"`, ...(0, camelized_1.generateCamelized)(code, offset, common_1.combineLastMapping), `"`);
+            yield* (0, utils_1.wrapWith)(offset, offset + code.length, features, `'`, ...(0, camelized_1.generateCamelized)(code, offset, utils_1.combineLastMapping), `'`);
         }
     }
     else {
-        if (common_1.variableNameRegex.test(code)) {
+        if (utils_1.variableNameRegex.test(code)) {
             yield [code, 'template', offset, features];
@@ -30,0 +30,0 @@ }

lib/codegen/template/propertyAccess.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generatePropertyAccess = generatePropertyAccess;
-const common_1 = require("../common");
+const utils_1 = require("../utils");
+const stringLiteralKey_1 = require("../utils/stringLiteralKey");
 const interpolation_1 = require("./interpolation");
-const stringLiteralKey_1 = require("./stringLiteralKey");
 function* generatePropertyAccess(options, ctx, code, offset, features, astHolder) {
-    if (!options.compilerOptions.noPropertyAccessFromIndexSignature && common_1.variableNameRegex.test(code)) {
+    if (!options.compilerOptions.noPropertyAccessFromIndexSignature && utils_1.variableNameRegex.test(code)) {
         yield `.`;
@@ -15,3 +15,3 @@ yield offset !== undefined && features
     else if (code.startsWith('[') && code.endsWith(']')) {
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, code, astHolder, offset, features, '', '');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', features, code, offset, astHolder);
     }
@@ -18,0 +18,0 @@ else {

lib/codegen/template/slotOutlet.d.ts

@@ -5,2 +5,2 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateSlotOutlet(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.SlotOutletNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateSlotOutlet(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.SlotOutletNode): Generator<Code>;

lib/codegen/template/slotOutlet.js

@@ -5,9 +5,9 @@ "use strict";
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const inlayHints_1 = require("../inlayHints");
+const utils_1 = require("../utils");
 const elementChildren_1 = require("./elementChildren");
 const elementProps_1 = require("./elementProps");
 const interpolation_1 = require("./interpolation");
-const inlayHints_1 = require("../inlayHints");
-function* generateSlotOutlet(options, ctx, node, currentComponent, componentCtxVar) {
-    const startTagOffset = node.loc.start.offset + options.template.content.substring(node.loc.start.offset).indexOf(node.tag);
+function* generateSlotOutlet(options, ctx, node) {
+    const startTagOffset = node.loc.start.offset + options.template.content.slice(node.loc.start.offset).indexOf(node.tag);
     const varSlot = ctx.getInternalVariable();
@@ -26,3 +26,3 @@ const nameProp = node.props.find(prop => {
         yield `__VLS_normalizeSlot(`;
-        yield* (0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, common_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value
+        yield* (0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, `${options.slotsAssignName ?? '__VLS_slots'}[`, ...(0, utils_1.wrapWith)(node.loc.start.offset, node.loc.end.offset, ctx.codeFeatures.verification, nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value
             ? `'${nameProp.value.content}'`
@@ -33,9 +33,9 @@ : nameProp?.type === CompilerDOM.NodeTypes.DIRECTIVE && nameProp.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
         yield `)?.(`;
-        yield* (0, common_1.wrapWith)(startTagOffset, startTagOffset + node.tag.length, ctx.codeFeatures.verification, `{${common_1.newLine}`, ...(0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true), `}`);
-        yield `)${common_1.endOfLine}`;
+        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.filter(prop => prop !== nameProp), true, true), `}`);
+        yield `)${utils_1.endOfLine}`;
     }
     else {
-        yield `var ${varSlot} = {${common_1.newLine}`;
-        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), true);
-        yield `}${common_1.endOfLine}`;
+        yield `var ${varSlot} = {${utils_1.newLine}`;
+        yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter(prop => prop !== nameProp), options.vueCompilerOptions.strictTemplates, true);
+        yield `}${utils_1.endOfLine}`;
         if (nameProp?.type === CompilerDOM.NodeTypes.ATTRIBUTE
@@ -59,4 +59,4 @@ && nameProp.value) {
             yield `var ${slotExpVar} = `;
-            yield* (0, interpolation_1.generateInterpolation)(options, ctx, nameProp.exp.content, nameProp.exp, nameProp.exp.loc.start.offset, ctx.codeFeatures.all, '(', ')');
-            yield ` as const${common_1.endOfLine}`;
+            yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, nameProp.exp.content, nameProp.exp.loc.start.offset, nameProp.exp, '(', ')');
+            yield ` as const${utils_1.endOfLine}`;
             ctx.dynamicSlots.push({
@@ -77,4 +77,4 @@ expVar: slotExpVar,
     yield* ctx.generateAutoImportCompletion();
-    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node, currentComponent, componentCtxVar);
+    yield* (0, elementChildren_1.generateElementChildren)(options, ctx, node);
 }
 //# sourceMappingURL=slotOutlet.js.map

lib/codegen/template/styleScopedClasses.d.ts

 import type { Code } from '../../types';
 import type { TemplateCodegenContext } from './context';
-export declare function generateStyleScopedClasses(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;
+export declare function generateStyleScopedClassReferences(ctx: TemplateCodegenContext, withDot?: boolean): Generator<Code>;

lib/codegen/template/styleScopedClasses.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateStyleScopedClasses = generateStyleScopedClasses;
-const common_1 = require("../common");
-function* generateStyleScopedClasses(ctx, withDot = false) {
+exports.generateStyleScopedClassReferences = generateStyleScopedClassReferences;
+const utils_1 = require("../utils");
+function* generateStyleScopedClassReferences(ctx, withDot = false) {
+    if (!ctx.emptyClassOffsets.length && !ctx.scopedClasses.length) {
+        return;
+    }
+    yield `[`;
     for (const offset of ctx.emptyClassOffsets) {
-        yield `__VLS_styleScopedClasses['`;
+        yield `'`;
         yield [
@@ -14,6 +18,5 @@ '',
         ];
-        yield `']${common_1.endOfLine}`;
+        yield `', `;
     }
     for (const { source, className, offset } of ctx.scopedClasses) {
-        yield `__VLS_styleScopedClasses[`;
         yield [
@@ -35,5 +38,5 @@ '',
         ];
-        yield `]${common_1.endOfLine}`;
+        yield `, `;
     }
-    yield common_1.newLine;
+    yield `] as (keyof __VLS_StyleScopedClasses)[]${utils_1.endOfLine}`;
     function* escapeString(source, className, offset, escapeTargets) {
@@ -40,0 +43,0 @@ let count = 0;

lib/codegen/template/templateChild.d.ts

@@ -5,4 +5,4 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, currentComponent: CompilerDOM.ElementNode | undefined, prevNode: CompilerDOM.TemplateChildNode | undefined, componentCtxVar: string | undefined, isVForChild?: boolean): Generator<Code>;
+export declare function generateTemplateChild(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.RootNode | CompilerDOM.TemplateChildNode | CompilerDOM.SimpleExpressionNode, prevNode: CompilerDOM.TemplateChildNode | undefined, isVForChild?: boolean): Generator<Code>;
 export declare function getVForNode(node: CompilerDOM.ElementNode): CompilerDOM.ForNode | undefined;
 export declare function parseInterpolationNode(node: CompilerDOM.InterpolationNode, template: string): readonly [string, number];

lib/codegen/template/templateChild.js

@@ -7,3 +7,3 @@ "use strict";
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const element_1 = require("./element");
@@ -29,15 +29,25 @@ const interpolation_1 = require("./interpolation");
 };
-function* generateTemplateChild(options, ctx, node, currentComponent, prevNode, componentCtxVar, isVForChild = false) {
+function* generateTemplateChild(options, ctx, node, prevNode, isVForChild = false) {
     if (prevNode?.type === CompilerDOM.NodeTypes.COMMENT) {
         const commentText = prevNode.content.trim().split(' ')[0];
-        if (commentText.match(/^@vue-skip\b[\s\S]*/)) {
-            yield `// @vue-skip${common_1.newLine}`;
+        if (/^@vue-skip\b[\s\S]*/.test(commentText)) {
+            yield `// @vue-skip${utils_1.newLine}`;
             return;
         }
-        else if (commentText.match(/^@vue-ignore\b[\s\S]*/)) {
+        else if (/^@vue-ignore\b[\s\S]*/.test(commentText)) {
             yield* ctx.ignoreError();
         }
-        else if (commentText.match(/^@vue-expect-error\b[\s\S]*/)) {
+        else if (/^@vue-expect-error\b[\s\S]*/.test(commentText)) {
             yield* ctx.expectError(prevNode);
         }
+        else {
+            const match = prevNode.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
+            if (match) {
+                const { content } = match.groups ?? {};
+                ctx.lastGenericComment = {
+                    content,
+                    offset: prevNode.loc.start.offset + match[0].indexOf(content)
+                };
+            }
+        }
     }
@@ -55,3 +65,3 @@ const shouldInheritRootNodeAttrs = options.inheritAttrs;
         for (const childNode of node.children) {
-            yield* generateTemplateChild(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+            yield* generateTemplateChild(options, ctx, childNode, prev);
             prev = childNode;
@@ -65,17 +75,19 @@ }
         if (vForNode) {
-            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode, currentComponent, componentCtxVar);
+            yield* (0, vFor_1.generateVFor)(options, ctx, vForNode);
         }
         else if (vIfNode) {
-            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode, currentComponent, componentCtxVar);
+            yield* (0, vIf_1.generateVIf)(options, ctx, vIfNode);
         }
         else {
             if (node.tagType === CompilerDOM.ElementTypes.SLOT) {
-                yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node, currentComponent, componentCtxVar);
+                yield* (0, slotOutlet_1.generateSlotOutlet)(options, ctx, node);
             }
             else if (node.tagType === CompilerDOM.ElementTypes.ELEMENT
                 || node.tagType === CompilerDOM.ElementTypes.TEMPLATE) {
-                yield* (0, element_1.generateElement)(options, ctx, node, currentComponent, componentCtxVar, isVForChild);
+                yield* (0, element_1.generateElement)(options, ctx, node, isVForChild);
             }
             else {
-                yield* (0, element_1.generateComponent)(options, ctx, node, currentComponent);
+                const { currentComponent } = ctx;
+                yield* (0, element_1.generateComponent)(options, ctx, node);
+                ctx.currentComponent = currentComponent;
             }
@@ -86,3 +98,3 @@ }
         // {{ var }}
-        yield* generateTemplateChild(options, ctx, node.content, currentComponent, undefined, componentCtxVar);
+        yield* generateTemplateChild(options, ctx, node.content, undefined);
     }
@@ -93,3 +105,3 @@ else if (node.type === CompilerDOM.NodeTypes.COMPOUND_EXPRESSION) {
             if (typeof childNode === 'object') {
-                yield* generateTemplateChild(options, ctx, childNode, currentComponent, undefined, componentCtxVar);
+                yield* generateTemplateChild(options, ctx, childNode, undefined);
             }
@@ -101,3 +113,3 @@ }
         const [content, start] = parseInterpolationNode(node, options.template.content);
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, content, node.content.loc, start, ctx.codeFeatures.all, `(`, `)${common_1.endOfLine}`);
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, content, start, node.content.loc, `(`, `)${utils_1.endOfLine}`);
         yield* ctx.resetDirectiveComments('end of INTERPOLATION');
@@ -107,7 +119,7 @@ }
         // v-if / v-else-if / v-else
-        yield* (0, vIf_1.generateVIf)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, vIf_1.generateVIf)(options, ctx, node);
     }
     else if (node.type === CompilerDOM.NodeTypes.FOR) {
         // v-for
-        yield* (0, vFor_1.generateVFor)(options, ctx, node, currentComponent, componentCtxVar);
+        yield* (0, vFor_1.generateVFor)(options, ctx, node);
     }
@@ -163,7 +175,7 @@ else if (node.type === CompilerDOM.NodeTypes.TEXT) {
     // fix https://github.com/vuejs/language-tools/issues/1787
-    while ((leftCharacter = template.substring(start - 1, start)).trim() === '' && leftCharacter.length) {
+    while ((leftCharacter = template.slice(start - 1, start)).trim() === '' && leftCharacter.length) {
         start--;
         content = leftCharacter + content;
     }
-    while ((rightCharacter = template.substring(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
+    while ((rightCharacter = template.slice(start + content.length, start + content.length + 1)).trim() === '' && rightCharacter.length) {
         content = content + rightCharacter;
@@ -170,0 +182,0 @@ }

lib/codegen/template/vFor.d.ts

@@ -5,3 +5,3 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateVFor(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ForNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateVFor(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.ForNode): Generator<Code>;
 export declare function parseVForNode(node: CompilerDOM.ForNode): {
@@ -8,0 +8,0 @@ leftExpressionRange: {

lib/codegen/template/vFor.js

@@ -6,6 +6,6 @@ "use strict";
 const CompilerDOM = require("@vue/compiler-dom");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const interpolation_1 = require("./interpolation");
 const templateChild_1 = require("./templateChild");
-function* generateVFor(options, ctx, node, currentComponent, componentCtxVar) {
+function* generateVFor(options, ctx, node) {
     const { source } = node.parseResult;
@@ -16,4 +16,4 @@ const { leftExpressionRange, leftExpressionText } = parseVForNode(node);
     if (leftExpressionRange && leftExpressionText) {
-        const collectAst = (0, common_1.createTsAst)(options.ts, node.parseResult, `const [${leftExpressionText}]`);
-        (0, common_1.collectVars)(options.ts, collectAst, collectAst, forBlockVars);
+        const collectAst = (0, utils_1.createTsAst)(options.ts, node.parseResult, `const [${leftExpressionText}]`);
+        (0, utils_1.collectVars)(options.ts, collectAst, collectAst, forBlockVars);
         yield [
@@ -29,3 +29,3 @@ leftExpressionText,
         yield `__VLS_getVForSourceType(`;
-        yield* (0, interpolation_1.generateInterpolation)(options, ctx, source.content, source.loc, source.loc.start.offset, ctx.codeFeatures.all, '(', ')');
+        yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, source.content, source.loc.start.offset, source.loc, '(', ')');
         yield `!)`; // #3102
@@ -36,3 +36,3 @@ }
     }
-    yield `) {${common_1.newLine}`;
+    yield `) {${utils_1.newLine}`;
     for (const varName of forBlockVars) {
@@ -53,4 +53,4 @@ ctx.addLocalVariable(varName);
                     && !prop.value.isStatic) {
-                    yield* (0, interpolation_1.generateInterpolation)(options, ctx, prop.value.content, prop.value.loc, prop.value.loc.start.offset, ctx.codeFeatures.all, '(', ')');
-                    yield common_1.endOfLine;
+                    yield* (0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, prop.value.content, prop.value.loc.start.offset, prop.value.loc, '(', ')');
+                    yield utils_1.endOfLine;
                 }
@@ -65,3 +65,3 @@ }
     for (const childNode of node.children) {
-        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar, true);
+        yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev, true);
         prev = childNode;
@@ -73,3 +73,3 @@ }
     yield* ctx.generateAutoImportCompletion();
-    yield `}${common_1.newLine}`;
+    yield `}${utils_1.newLine}`;
 }
@@ -85,3 +85,3 @@ function parseVForNode(node) {
     const leftExpressionText = leftExpressionRange
-        ? node.loc.source.substring(leftExpressionRange.start - node.loc.start.offset, leftExpressionRange.end - node.loc.start.offset)
+        ? node.loc.source.slice(leftExpressionRange.start - node.loc.start.offset, leftExpressionRange.end - node.loc.start.offset)
         : undefined;
@@ -88,0 +88,0 @@ return {

lib/codegen/template/vIf.d.ts

@@ -5,2 +5,2 @@ import * as CompilerDOM from '@vue/compiler-dom';
 import type { TemplateCodegenOptions } from './index';
-export declare function generateVIf(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.IfNode, currentComponent: CompilerDOM.ElementNode | undefined, componentCtxVar: string | undefined): Generator<Code>;
+export declare function generateVIf(options: TemplateCodegenOptions, ctx: TemplateCodegenContext, node: CompilerDOM.IfNode): Generator<Code>;

lib/codegen/template/vIf.js

@@ -6,6 +6,6 @@ "use strict";
 const muggle_string_1 = require("muggle-string");
-const common_1 = require("../common");
+const utils_1 = require("../utils");
 const interpolation_1 = require("./interpolation");
 const templateChild_1 = require("./templateChild");
-function* generateVIf(options, ctx, node, currentComponent, componentCtxVar) {
+function* generateVIf(options, ctx, node) {
     let originalBlockConditionsLength = ctx.blockConditions.length;
@@ -26,3 +26,3 @@ for (let i = 0; i < node.branches.length; i++) {
             const codes = [
-                ...(0, interpolation_1.generateInterpolation)(options, ctx, branch.condition.content, branch.condition.loc, branch.condition.loc.start.offset, ctx.codeFeatures.all, '(', ')'),
+                ...(0, interpolation_1.generateInterpolation)(options, ctx, 'template', ctx.codeFeatures.all, branch.condition.content, branch.condition.loc.start.offset, branch.condition.loc, '(', ')'),
             ];
@@ -36,3 +36,3 @@ for (const code of codes) {
         }
-        yield `{${common_1.newLine}`;
+        yield `{${utils_1.newLine}`;
         if (isFragment(node)) {
@@ -43,7 +43,7 @@ yield* ctx.resetDirectiveComments('end of v-if start');
         for (const childNode of branch.children) {
-            yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, currentComponent, prev, componentCtxVar);
+            yield* (0, templateChild_1.generateTemplateChild)(options, ctx, childNode, prev);
             prev = childNode;
         }
         yield* ctx.generateAutoImportCompletion();
-        yield `}${common_1.newLine}`;
+        yield `}${utils_1.newLine}`;
         if (addedBlockCondition) {
@@ -50,0 +50,0 @@ ctx.blockConditions[ctx.blockConditions.length - 1] = `!(${ctx.blockConditions[ctx.blockConditions.length - 1]})`;

lib/languagePlugin.js

@@ -93,3 +93,3 @@ "use strict";
                     if (/script_(js|jsx|ts|tsx)/.test(code.id)) {
-                        const lang = code.id.substring('script_'.length);
+                        const lang = code.id.slice('script_'.length);
                         return {
@@ -96,0 +96,0 @@ code,

lib/parsers/scriptRanges.d.ts

@@ -0,3 +1,3 @@
+import type * as ts from 'typescript';
 import type { TextRange } from '../types';
-import type * as ts from 'typescript';
 export interface ScriptRanges extends ReturnType<typeof parseScriptRanges> {
@@ -17,3 +17,8 @@ }
     classBlockEnd: number | undefined;
-    bindings: TextRange[];
+    bindings: {
+        range: TextRange;
+        moduleName?: string;
+        isDefaultImport?: boolean;
+        isNamespace?: boolean;
+    }[];
 };

lib/parsers/scriptSetupRanges.d.ts

 import type * as ts from 'typescript';
-import type { VueCompilerOptions, TextRange } from '../types';
+import type { TextRange, VueCompilerOptions } from '../types';
+type CallExpressionRange = {
+    callExp: TextRange;
+    exp: TextRange;
+    arg?: TextRange;
+    typeArg?: TextRange;
+};
+type DefineProp = {
+    localName?: TextRange;
+    name?: TextRange;
+    type?: TextRange;
+    modifierType?: TextRange;
+    runtimeType?: TextRange;
+    defaultValue?: TextRange;
+    required?: boolean;
+    isModel?: boolean;
+};
+type DefineProps = CallExpressionRange & {
+    name?: string;
+    destructured?: Set<string>;
+    destructuredRest?: string;
+    statement: TextRange;
+};
+type WithDefaults = Pick<CallExpressionRange, 'callExp' | 'exp' | 'arg'>;
+type DefineEmits = CallExpressionRange & {
+    name?: string;
+    hasUnionTypeArg?: boolean;
+    statement: TextRange;
+};
+type DefineSlots = CallExpressionRange & {
+    name?: string;
+    isObjectBindingPattern?: boolean;
+    statement: TextRange;
+};
+type DefineOptions = {
+    name?: string;
+    inheritAttrs?: string;
+};
+type UseTemplateRef = CallExpressionRange & {
+    name?: string;
+};
 export interface ScriptSetupRanges extends ReturnType<typeof parseScriptSetupRanges> {
@@ -8,85 +48,29 @@ }
     importSectionEndOffset: number;
-    bindings: TextRange[];
-    importComponentNames: Set<string>;
-    props: {
-        name?: string;
-        destructured?: Set<string>;
-        destructuredRest?: string;
-        define?: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }> & {
-            statement: TextRange;
-        };
-        withDefaults?: TextRange & {
-            arg?: TextRange;
-        };
-    };
-    slots: {
-        name?: string;
-        isObjectBindingPattern?: boolean;
-        define?: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }> & {
-            statement: TextRange;
-        };
-    };
-    emits: {
-        name?: string;
-        define?: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }> & {
-            statement: TextRange;
-            hasUnionTypeArg?: boolean;
-        };
-    };
-    expose: {
-        name?: string;
-        define?: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }>;
-    };
-    options: {
-        name?: string;
-        inheritAttrs?: string;
-    };
-    cssModules: {
-        define: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }>;
+    bindings: {
+        range: TextRange;
+        moduleName?: string;
+        isDefaultImport?: boolean;
+        isNamespace?: boolean;
     }[];
-    defineProp: {
-        localName: TextRange | undefined;
-        name: TextRange | undefined;
-        type: TextRange | undefined;
-        modifierType?: TextRange | undefined;
-        runtimeType: TextRange | undefined;
-        defaultValue: TextRange | undefined;
-        required: boolean;
-        isModel?: boolean;
-    }[];
-    templateRefs: {
-        name?: string;
-        define: ReturnType<(node: ts.CallExpression) => TextRange & {
-            exp: TextRange;
-            arg?: TextRange;
-            typeArg?: TextRange;
-        }>;
-    }[];
+    defineProp: DefineProp[];
+    defineProps: DefineProps | undefined;
+    withDefaults: WithDefaults | undefined;
+    defineEmits: DefineEmits | undefined;
+    defineSlots: DefineSlots | undefined;
+    defineExpose: CallExpressionRange | undefined;
+    defineOptions: DefineOptions | undefined;
+    useAttrs: CallExpressionRange[];
+    useCssModule: CallExpressionRange[];
+    useSlots: CallExpressionRange[];
+    useTemplateRef: UseTemplateRef[];
 };
-export declare function parseBindingRanges(ts: typeof import('typescript'), sourceFile: ts.SourceFile): TextRange[];
-export declare function findBindingVars(ts: typeof import('typescript'), left: ts.BindingName, sourceFile: ts.SourceFile): TextRange[];
-export declare function getStartEnd(ts: typeof import('typescript'), node: ts.Node, sourceFile: ts.SourceFile): {
-    start: number;
-    end: number;
-};
-export declare function getNodeText(ts: typeof import('typescript'), node: ts.Node, sourceFile: ts.SourceFile): string;
+export declare function parseBindingRanges(ts: typeof import('typescript'), ast: ts.SourceFile): {
+    range: TextRange;
+    moduleName?: string;
+    isDefaultImport?: boolean;
+    isNamespace?: boolean;
+}[];
+export declare function findBindingVars(ts: typeof import('typescript'), left: ts.BindingName, ast: ts.SourceFile): TextRange[];
+export declare function getStartEnd(ts: typeof import('typescript'), node: ts.Node, ast: ts.SourceFile): TextRange;
+export declare function getNodeText(ts: typeof import('typescript'), node: ts.Node, ast: ts.SourceFile): string;
+export {};

lib/parsers/scriptSetupRanges.js

@@ -8,22 +8,27 @@ "use strict";
 exports.getNodeText = getNodeText;
-const common_1 = require("../codegen/common");
+const utils_1 = require("../codegen/utils");
+const tsCheckReg = /^\/\/\s*@ts-(?:no)?check($|\s)/;
 function parseScriptSetupRanges(ts, ast, vueCompilerOptions) {
-    let foundNonImportExportNode = false;
-    let importSectionEndOffset = 0;
-    const props = {};
-    const slots = {};
-    const emits = {};
-    const expose = {};
-    const options = {};
-    const cssModules = [];
-    const templateRefs = [];
-    const definePropProposalA = vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=kevinEdition');
-    const definePropProposalB = vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=johnsonEdition');
     const defineProp = [];
+    let defineProps;
+    let withDefaults;
+    let defineEmits;
+    let defineSlots;
+    let defineExpose;
+    let defineOptions;
+    const useAttrs = [];
+    const useCssModule = [];
+    const useSlots = [];
+    const useTemplateRef = [];
+    const definePropProposalA = vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition';
+    const definePropProposalB = vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition';
     const text = ast.text;
-    const leadingCommentEndOffset = ts.getLeadingCommentRanges(text, 0)?.reverse()[0].end ?? 0;
-    const importComponentNames = new Set();
+    const leadingCommentRanges = ts.getLeadingCommentRanges(text, 0)?.reverse() ?? [];
+    const leadingCommentEndOffset = leadingCommentRanges.find(range => tsCheckReg.test(text.slice(range.pos, range.end)))?.end ?? 0;
     let bindings = parseBindingRanges(ts, ast);
+    let foundNonImportExportNode = false;
+    let importSectionEndOffset = 0;
     ts.forEachChild(ast, node => {
-        const isTypeExport = (ts.isTypeAliasDeclaration(node) || ts.isInterfaceDeclaration(node)) && node.modifiers?.some(mod => mod.kind === ts.SyntaxKind.ExportKeyword);
+        const isTypeExport = (ts.isTypeAliasDeclaration(node) || ts.isInterfaceDeclaration(node))
+            && node.modifiers?.some(mod => mod.kind === ts.SyntaxKind.ExportKeyword);
         if (!foundNonImportExportNode
@@ -45,15 +50,7 @@ && !ts.isImportDeclaration(node)
         }
-        if (ts.isImportDeclaration(node)
-            && node.importClause?.name
-            && !node.importClause.isTypeOnly) {
-            const moduleName = getNodeText(ts, node.moduleSpecifier, ast).slice(1, -1);
-            if (vueCompilerOptions.extensions.some(ext => moduleName.endsWith(ext))) {
-                importComponentNames.add(getNodeText(ts, node.importClause.name, ast));
-            }
-        }
     });
-    ts.forEachChild(ast, child => visitNode(child, [ast]));
-    const templateRefNames = new Set(templateRefs.map(ref => ref.name));
-    bindings = bindings.filter(range => {
-        const name = text.substring(range.start, range.end);
+    ts.forEachChild(ast, node => visitNode(node, [ast]));
+    const templateRefNames = new Set(useTemplateRef.map(ref => ref.name));
+    bindings = bindings.filter(({ range }) => {
+        const name = text.slice(range.start, range.end);
         return !templateRefNames.has(name);
@@ -65,23 +62,14 @@ });
         bindings,
-        importComponentNames,
-        props,
-        slots,
-        emits,
-        expose,
-        options,
-        cssModules,
         defineProp,
-        templateRefs,
+        defineProps,
+        withDefaults,
+        defineEmits,
+        defineSlots,
+        defineExpose,
+        defineOptions,
+        useAttrs,
+        useCssModule,
+        useSlots,
+        useTemplateRef,
     };
-    function _getStartEnd(node) {
-        return getStartEnd(ts, node, ast);
-    }
-    function parseDefineFunction(node) {
-        return {
-            ..._getStartEnd(node),
-            exp: _getStartEnd(node.expression),
-            arg: node.arguments.length ? _getStartEnd(node.arguments[0]) : undefined,
-            typeArg: node.typeArguments?.length ? _getStartEnd(node.typeArguments[0]) : undefined,
-        };
-    }
     function visitNode(node, parents) {
@@ -91,3 +79,3 @@ const parent = parents[parents.length - 1];
             && ts.isIdentifier(node.expression)) {
-            const callText = getNodeText(ts, node.expression, ast);
+            const callText = _getNodeText(node.expression);
             if (vueCompilerOptions.macros.defineModel.includes(callText)) {
@@ -106,3 +94,3 @@ let localName;
                 else if (node.arguments.length >= 1) {
-                    if (ts.isStringLiteral(node.arguments[0])) {
+                    if (ts.isStringLiteralLike(node.arguments[0])) {
                         propName = _getStartEnd(node.arguments[0]);
@@ -122,3 +110,3 @@ }
                         }
-                        const text = getNodeText(ts, property.name, ast);
+                        const text = _getNodeText(property.name);
                         if (text === 'type') {
@@ -169,3 +157,3 @@ runtimeType = _getStartEnd(property.initializer);
                             }
-                            const text = getNodeText(ts, property.name, ast);
+                            const text = _getNodeText(property.name);
                             if (text === 'type') {
@@ -200,3 +188,3 @@ runtimeType = _getStartEnd(property.initializer);
                             }
-                            const text = getNodeText(ts, property.name, ast);
+                            const text = _getNodeText(property.name);
                             if (text === 'type') {
@@ -217,29 +205,57 @@ runtimeType = _getStartEnd(property.initializer);
             }
-            else if (vueCompilerOptions.macros.defineSlots.includes(callText)) {
-                slots.define = {
-                    ...parseDefineFunction(node),
+            else if (vueCompilerOptions.macros.defineProps.includes(callText)) {
+                defineProps = {
+                    ...parseCallExpression(node),
                     statement: getStatementRange(ts, parents, node, ast)
                 };
                 if (ts.isVariableDeclaration(parent)) {
-                    if (ts.isIdentifier(parent.name)) {
-                        slots.name = getNodeText(ts, parent.name, ast);
+                    if (ts.isObjectBindingPattern(parent.name)) {
+                        defineProps.destructured = new Set();
+                        const identifiers = (0, utils_1.collectIdentifiers)(ts, parent.name, []);
+                        for (const [id, isRest] of identifiers) {
+                            const name = _getNodeText(id);
+                            if (isRest) {
+                                defineProps.destructuredRest = name;
+                            }
+                            else {
+                                defineProps.destructured.add(name);
+                            }
+                        }
                     }
                     else {
-                        slots.isObjectBindingPattern = ts.isObjectBindingPattern(parent.name);
+                        defineProps.name = _getNodeText(parent.name);
                     }
                 }
+                else if (ts.isCallExpression(parent)
+                    && vueCompilerOptions.macros.withDefaults.includes(_getNodeText(parent.expression))) {
+                    const grand = parents.at(-2);
+                    if (grand && ts.isVariableDeclaration(grand)) {
+                        defineProps.name = _getNodeText(grand.name);
+                    }
+                }
             }
+            else if (vueCompilerOptions.macros.withDefaults.includes(callText)) {
+                const [, arg] = node.arguments;
+                withDefaults = {
+                    callExp: _getStartEnd(node),
+                    exp: _getStartEnd(node.expression),
+                    arg: arg ? _getStartEnd(arg) : undefined
+                };
+            }
             else if (vueCompilerOptions.macros.defineEmits.includes(callText)) {
-                emits.define = {
-                    ...parseDefineFunction(node),
+                defineEmits = {
+                    ...parseCallExpression(node),
                     statement: getStatementRange(ts, parents, node, ast)
                 };
                 if (ts.isVariableDeclaration(parent)) {
-                    emits.name = getNodeText(ts, parent.name, ast);
+                    defineEmits.name = _getNodeText(parent.name);
                 }
-                if (node.typeArguments?.length && ts.isTypeLiteralNode(node.typeArguments[0]) && node.typeArguments[0].members.at(0)) {
+                if (node.typeArguments?.length && ts.isTypeLiteralNode(node.typeArguments[0])) {
                     for (const member of node.typeArguments[0].members) {
-                        if (ts.isCallSignatureDeclaration(member) && member.parameters[0].type && ts.isUnionTypeNode(member.parameters[0].type)) {
-                            emits.define.hasUnionTypeArg = true;
-                            return;
+                        if (ts.isCallSignatureDeclaration(member)) {
+                            const type = member.parameters[0]?.type;
+                            if (type && ts.isUnionTypeNode(type)) {
+                                defineEmits.hasUnionTypeArg = true;
+                                break;
+                            }
                         }
@@ -249,59 +265,32 @@ }
             }
-            else if (vueCompilerOptions.macros.defineExpose.includes(callText)) {
-                expose.define = parseDefineFunction(node);
-            }
-            else if (vueCompilerOptions.macros.defineProps.includes(callText)) {
+            else if (vueCompilerOptions.macros.defineSlots.includes(callText)) {
+                defineSlots = {
+                    ...parseCallExpression(node),
+                    statement: getStatementRange(ts, parents, node, ast)
+                };
                 if (ts.isVariableDeclaration(parent)) {
-                    if (ts.isObjectBindingPattern(parent.name)) {
-                        props.destructured = new Set();
-                        const identifiers = (0, common_1.collectIdentifiers)(ts, parent.name, []);
-                        for (const [id, isRest] of identifiers) {
-                            const name = getNodeText(ts, id, ast);
-                            if (isRest) {
-                                props.destructuredRest = name;
-                            }
-                            else {
-                                props.destructured.add(name);
-                            }
-                        }
+                    if (ts.isIdentifier(parent.name)) {
+                        defineSlots.name = _getNodeText(parent.name);
                     }
                     else {
-                        props.name = getNodeText(ts, parent.name, ast);
+                        defineSlots.isObjectBindingPattern = ts.isObjectBindingPattern(parent.name);
                     }
                 }
-                props.define = {
-                    ...parseDefineFunction(node),
-                    statement: getStatementRange(ts, parents, node, ast),
-                };
-                if (node.arguments.length) {
-                    props.define.arg = _getStartEnd(node.arguments[0]);
-                }
-                if (node.typeArguments?.length) {
-                    props.define.typeArg = _getStartEnd(node.typeArguments[0]);
-                }
             }
-            else if (vueCompilerOptions.macros.withDefaults.includes(callText)) {
-                props.withDefaults = _getStartEnd(node);
-                if (node.arguments.length >= 2) {
-                    const arg = node.arguments[1];
-                    props.withDefaults.arg = _getStartEnd(arg);
-                }
-                if (ts.isVariableDeclaration(parent)) {
-                    props.name = getNodeText(ts, parent.name, ast);
-                }
+            else if (vueCompilerOptions.macros.defineExpose.includes(callText)) {
+                defineExpose = parseCallExpression(node);
             }
-            else if (vueCompilerOptions.macros.defineOptions.includes(callText)) {
-                if (node.arguments.length && ts.isObjectLiteralExpression(node.arguments[0])) {
-                    const obj = node.arguments[0];
-                    ts.forEachChild(obj, node => {
-                        if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
-                            const name = getNodeText(ts, node.name, ast);
-                            if (name === 'inheritAttrs') {
-                                options.inheritAttrs = getNodeText(ts, node.initializer, ast);
-                            }
+            else if (vueCompilerOptions.macros.defineOptions.includes(callText)
+                && node.arguments.length
+                && ts.isObjectLiteralExpression(node.arguments[0])) {
+                defineOptions = {};
+                const obj = node.arguments[0];
+                for (const prop of obj.properties) {
+                    if (ts.isPropertyAssignment(prop) && ts.isIdentifier(prop.name)) {
+                        const name = _getNodeText(prop.name);
+                        if (name === 'inheritAttrs') {
+                            defineOptions.inheritAttrs = _getNodeText(prop.initializer);
                         }
-                    });
-                    for (const prop of node.arguments[0].properties) {
-                        if ((ts.isPropertyAssignment(prop)) && getNodeText(ts, prop.name, ast) === 'name' && ts.isStringLiteral(prop.initializer)) {
-                            options.name = prop.initializer.text;
+                        else if (name === 'name' && ts.isStringLiteral(prop.initializer)) {
+                            defineOptions.name = prop.initializer.text;
                         }
@@ -311,17 +300,16 @@ }
             }
-            else if (vueCompilerOptions.composibles.useTemplateRef.includes(callText) && node.arguments.length && !node.typeArguments?.length) {
-                const define = parseDefineFunction(node);
-                let name;
-                if (ts.isVariableDeclaration(parent)) {
-                    name = getNodeText(ts, parent.name, ast);
-                }
-                templateRefs.push({
-                    name,
-                    define
-                });
+            else if (vueCompilerOptions.composables.useAttrs.includes(callText)) {
+                useAttrs.push(parseCallExpression(node));
             }
-            else if (vueCompilerOptions.composibles.useCssModule.includes(callText)) {
-                const define = parseDefineFunction(node);
-                cssModules.push({
-                    define
+            else if (vueCompilerOptions.composables.useCssModule.includes(callText)) {
+                useCssModule.push(parseCallExpression(node));
+            }
+            else if (vueCompilerOptions.composables.useSlots.includes(callText)) {
+                useSlots.push(parseCallExpression(node));
+            }
+            else if (vueCompilerOptions.composables.useTemplateRef.includes(callText)
+                && !node.typeArguments?.length) {
+                useTemplateRef.push({
+                    name: ts.isVariableDeclaration(parent) ? _getNodeText(parent.name) : undefined,
+                    ...parseCallExpression(node)
                 });
@@ -331,2 +319,5 @@ }
         ts.forEachChild(node, child => {
+            if (ts.isFunctionLike(node)) {
+                return;
+            }
             parents.push(node);
@@ -337,12 +328,24 @@ visitNode(child, parents);
     }
+    function parseCallExpression(node) {
+        return {
+            callExp: _getStartEnd(node),
+            exp: _getStartEnd(node.expression),
+            arg: node.arguments.length ? _getStartEnd(node.arguments[0]) : undefined,
+            typeArg: node.typeArguments?.length ? _getStartEnd(node.typeArguments[0]) : undefined,
+        };
+    }
+    function _getStartEnd(node) {
+        return getStartEnd(ts, node, ast);
+    }
+    function _getNodeText(node) {
+        return getNodeText(ts, node, ast);
+    }
 }
-function parseBindingRanges(ts, sourceFile) {
+function parseBindingRanges(ts, ast) {
     const bindings = [];
-    ts.forEachChild(sourceFile, node => {
+    ts.forEachChild(ast, node => {
         if (ts.isVariableStatement(node)) {
-            for (const node_2 of node.declarationList.declarations) {
-                const vars = _findBindingVars(node_2.name);
-                for (const _var of vars) {
-                    bindings.push(_var);
-                }
+            for (const decl of node.declarationList.declarations) {
+                const vars = _findBindingVars(decl.name);
+                bindings.push(...vars.map(range => ({ range })));
             }
@@ -352,3 +355,5 @@ }
             if (node.name && ts.isIdentifier(node.name)) {
-                bindings.push(_getStartEnd(node.name));
+                bindings.push({
+                    range: _getStartEnd(node.name)
+                });
             }
@@ -358,24 +363,42 @@ }
             if (node.name) {
-                bindings.push(_getStartEnd(node.name));
+                bindings.push({
+                    range: _getStartEnd(node.name)
+                });
             }
         }
         else if (ts.isEnumDeclaration(node)) {
-            bindings.push(_getStartEnd(node.name));
+            bindings.push({
+                range: _getStartEnd(node.name)
+            });
         }
         if (ts.isImportDeclaration(node)) {
+            const moduleName = _getNodeText(node.moduleSpecifier).slice(1, -1);
             if (node.importClause && !node.importClause.isTypeOnly) {
-                if (node.importClause.name) {
-                    bindings.push(_getStartEnd(node.importClause.name));
+                const { name, namedBindings } = node.importClause;
+                if (name) {
+                    bindings.push({
+                        range: _getStartEnd(name),
+                        moduleName,
+                        isDefaultImport: true
+                    });
                 }
-                if (node.importClause.namedBindings) {
-                    if (ts.isNamedImports(node.importClause.namedBindings)) {
-                        for (const element of node.importClause.namedBindings.elements) {
+                if (namedBindings) {
+                    if (ts.isNamedImports(namedBindings)) {
+                        for (const element of namedBindings.elements) {
                             if (element.isTypeOnly) {
                                 continue;
                             }
-                            bindings.push(_getStartEnd(element.name));
+                            bindings.push({
+                                range: _getStartEnd(element.name),
+                                moduleName,
+                                isDefaultImport: element.propertyName?.text === 'default'
+                            });
                         }
                     }
-                    else if (ts.isNamespaceImport(node.importClause.namedBindings)) {
-                        bindings.push(_getStartEnd(node.importClause.namedBindings.name));
+                    else {
+                        bindings.push({
+                            range: _getStartEnd(namedBindings.name),
+                            moduleName,
+                            isNamespace: true
+                        });
                     }
@@ -388,20 +411,23 @@ }
     function _getStartEnd(node) {
-        return getStartEnd(ts, node, sourceFile);
+        return getStartEnd(ts, node, ast);
     }
+    function _getNodeText(node) {
+        return getNodeText(ts, node, ast);
+    }
     function _findBindingVars(left) {
-        return findBindingVars(ts, left, sourceFile);
+        return findBindingVars(ts, left, ast);
     }
 }
-function findBindingVars(ts, left, sourceFile) {
+function findBindingVars(ts, left, ast) {
     const vars = [];
     worker(left);
     return vars;
-    function worker(_node) {
-        if (ts.isIdentifier(_node)) {
-            vars.push(getStartEnd(ts, _node, sourceFile));
+    function worker(node) {
+        if (ts.isIdentifier(node)) {
+            vars.push(getStartEnd(ts, node, ast));
         }
         // { ? } = ...
         // [ ? ] = ...
-        else if (ts.isObjectBindingPattern(_node) || ts.isArrayBindingPattern(_node)) {
-            for (const property of _node.elements) {
+        else if (ts.isObjectBindingPattern(node) || ts.isArrayBindingPattern(node)) {
+            for (const property of node.elements) {
                 if (ts.isBindingElement(property)) {
@@ -413,27 +439,27 @@ worker(property.name);
         // { foo: ? } = ...
-        else if (ts.isPropertyAssignment(_node)) {
-            worker(_node.initializer);
+        else if (ts.isPropertyAssignment(node)) {
+            worker(node.initializer);
         }
         // { foo } = ...
-        else if (ts.isShorthandPropertyAssignment(_node)) {
-            vars.push(getStartEnd(ts, _node.name, sourceFile));
+        else if (ts.isShorthandPropertyAssignment(node)) {
+            vars.push(getStartEnd(ts, node.name, ast));
         }
         // { ...? } = ...
         // [ ...? ] = ...
-        else if (ts.isSpreadAssignment(_node) || ts.isSpreadElement(_node)) {
-            worker(_node.expression);
+        else if (ts.isSpreadAssignment(node) || ts.isSpreadElement(node)) {
+            worker(node.expression);
         }
     }
 }
-function getStartEnd(ts, node, sourceFile) {
+function getStartEnd(ts, node, ast) {
     return {
-        start: ts.getTokenPosOfNode(node, sourceFile),
+        start: ts.getTokenPosOfNode(node, ast),
         end: node.end,
     };
 }
-function getNodeText(ts, node, sourceFile) {
-    const { start, end } = getStartEnd(ts, node, sourceFile);
-    return sourceFile.text.substring(start, end);
+function getNodeText(ts, node, ast) {
+    const { start, end } = getStartEnd(ts, node, ast);
+    return ast.text.slice(start, end);
 }
-function getStatementRange(ts, parents, node, sourceFile) {
+function getStatementRange(ts, parents, node, ast) {
     let statementRange;
@@ -444,3 +470,3 @@ for (let i = parents.length - 1; i >= 0; i--) {
             ts.forEachChild(statement, child => {
-                const range = getStartEnd(ts, child, sourceFile);
+                const range = getStartEnd(ts, child, ast);
                 statementRange ??= range;
@@ -453,3 +479,3 @@ statementRange.end = range.end;
     if (!statementRange) {
-        statementRange = getStartEnd(ts, node, sourceFile);
+        statementRange = getStartEnd(ts, node, ast);
     }
@@ -456,0 +482,0 @@ return statementRange;

lib/plugins/file-html.js

@@ -24,2 +24,3 @@ "use strict";
                     source: content,
+                    comments: [],
                     template: null,
@@ -58,4 +59,4 @@ script: null,
                 // ignore `<script src="...">`
-                else if (tag === 'script' && attrs.indexOf('src=') === -1) {
-                    let type = attrs.indexOf('type=') >= 0 ? 'scriptSetup' : 'script';
+                else if (tag === 'script' && !attrs.includes('src=')) {
+                    let type = attrs.includes('type=') ? 'scriptSetup' : 'script';
                     sfc.descriptor[type] = {
@@ -73,3 +74,3 @@ attrs: {},
                 }
-                templateContent = templateContent.substring(0, match.index) + ' '.repeat(matchText.length) + templateContent.substring(match.index + matchText.length);
+                templateContent = templateContent.slice(0, match.index) + ' '.repeat(matchText.length) + templateContent.slice(match.index + matchText.length);
             }
@@ -76,0 +77,0 @@ sfc.descriptor.template = {

lib/plugins/file-md.js

@@ -44,3 +44,3 @@ "use strict";
                     codes.push('\n\n');
-                    content = content.substring(0, match.index) + ' '.repeat(matchText.length) + content.substring(match.index + matchText.length);
+                    content = content.slice(0, match.index) + ' '.repeat(matchText.length) + content.slice(match.index + matchText.length);
                 }
@@ -47,0 +47,0 @@ }

lib/plugins/file-vue.js

@@ -28,3 +28,3 @@ "use strict";
                 ...sfc.descriptor.customBlocks,
-            ].filter((block) => !!block);
+            ].filter(block => !!block);
             const hitBlock = blocks.find(block => change.start >= block.loc.start.offset && change.end <= block.loc.end.offset);
@@ -36,8 +36,8 @@ if (!hitBlock) {
             const newContent = hitBlock.content =
-                hitBlock.content.substring(0, change.start - hitBlock.loc.start.offset)
+                hitBlock.content.slice(0, change.start - hitBlock.loc.start.offset)
                     + change.newText
-                    + hitBlock.content.substring(change.end - hitBlock.loc.start.offset);
+                    + hitBlock.content.slice(change.end - hitBlock.loc.start.offset);
             // #3449
             const endTagRegex = new RegExp(`</\\s*${hitBlock.type}\\s*>`);
-            const insertedEndTag = !!oldContent.match(endTagRegex) !== !!newContent.match(endTagRegex);
+            const insertedEndTag = endTagRegex.test(oldContent) !== endTagRegex.test(newContent);
             if (insertedEndTag) {
@@ -44,0 +44,0 @@ return;

lib/plugins/vue-root-tags.js

@@ -36,3 +36,3 @@ "use strict";
                     // fix folding range end position failed to mapping
-                    (0, muggle_string_1.replaceSourceRange)(embeddedFile.content, undefined, block.startTagEnd, block.endTagStart, sfc.content.substring(block.startTagEnd, block.startTagEnd + offset), [
+                    (0, muggle_string_1.replaceSourceRange)(embeddedFile.content, undefined, block.startTagEnd, block.endTagStart, sfc.content.slice(block.startTagEnd, block.startTagEnd + offset), [
                         '',
@@ -42,3 +42,3 @@ undefined,
                         { structure: true },
-                    ], sfc.content.substring(block.startTagEnd + offset, block.endTagStart));
+                    ], sfc.content.slice(block.startTagEnd + offset, block.endTagStart));
                 }
@@ -45,0 +45,0 @@ }

lib/plugins/vue-template-html.js

@@ -158,2 +158,6 @@ "use strict";
                             }
+                            else if (!node.loc.source) {
+                                // :class="..." -> :class=""
+                                return false;
+                            }
                             else {
@@ -172,5 +176,5 @@ node.content = node.loc.source;
                     loc.source =
-                        loc.source.substring(0, change.start - loc.start.offset)
+                        loc.source.slice(0, change.start - loc.start.offset)
                             + change.newText
-                            + loc.source.substring(change.end - loc.start.offset);
+                            + loc.source.slice(change.end - loc.start.offset);
                     loc.__endOffset = loc.end.offset;
@@ -177,0 +181,0 @@ loc.end.offset += lengthDiff;

lib/plugins/vue-template-inline-css.js

@@ -42,3 +42,3 @@ "use strict";
                 const end = prop.arg.loc.source.lastIndexOf(endCrt);
-                const content = prop.arg.loc.source.substring(start, end);
+                const content = prop.arg.loc.source.slice(start, end);
                 yield `x { `;
@@ -45,0 +45,0 @@ yield [

lib/plugins/vue-template-inline-ts.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const common_1 = require("../codegen/common");
+const CompilerDOM = require("@vue/compiler-dom");
 const elementEvents_1 = require("../codegen/template/elementEvents");
 const templateChild_1 = require("../codegen/template/templateChild");
 const vFor_1 = require("../codegen/template/vFor");
-const CompilerDOM = require("@vue/compiler-dom");
+const utils_1 = require("../codegen/utils");
 const codeFeatures = {
@@ -21,2 +21,3 @@ format: true,
     event: ['() => ', ';'],
+    generic: ['<', '>() => {};'],
 };
@@ -62,3 +63,10 @@ const plugin = ctx => {
         function visit(node) {
-            if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
+            if (node.type === CompilerDOM.NodeTypes.COMMENT) {
+                const match = node.loc.source.match(/^<!--\s*@vue-generic\b\s*\{(?<content>[^}]*)\}/);
+                if (match) {
+                    const { content } = match.groups ?? {};
+                    addFormatCodes(content, node.loc.start.offset + match[0].indexOf(content), formatBrackets.generic);
+                }
+            }
+            else if (node.type === CompilerDOM.NodeTypes.ELEMENT) {
                 for (const prop of node.props) {
@@ -79,3 +87,3 @@ if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE) {
                         if (prop.name === 'on' && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
-                            const ast = (0, common_1.createTsAst)(ctx.modules.typescript, prop.exp, prop.exp.content);
+                            const ast = (0, utils_1.createTsAst)(ctx.modules.typescript, prop.exp, prop.exp.content);
                             addFormatCodes(prop.exp.content, prop.exp.loc.start.offset, (0, elementEvents_1.isCompoundExpression)(ctx.modules.typescript, ast)
@@ -111,3 +119,3 @@ ? formatBrackets.event
                     const end = source.loc.start.offset + source.content.length;
-                    addFormatCodes(templateContent.substring(start, end), start, formatBrackets.for);
+                    addFormatCodes(templateContent.slice(start, end), start, formatBrackets.for);
                 }
@@ -114,0 +122,0 @@ for (const child of node.children) {

lib/plugins/vue-tsx.d.ts

 import type { Mapping } from '@volar/language-core';
 import type { Code, Sfc, VueLanguagePlugin } from '../types';
 export declare const tsCodegen: WeakMap<Sfc, {
-    scriptRanges: import("alien-signals").ISignal<{
+    scriptRanges: import("alien-signals").Computed<{
         exportDefault: (import("../types").TextRange & {
@@ -16,86 +16,103 @@ expression: import("../types").TextRange;
         classBlockEnd: number | undefined;
-        bindings: import("../types").TextRange[];
+        bindings: {
+            range: import("../types").TextRange;
+            moduleName?: string;
+            isDefaultImport?: boolean;
+            isNamespace?: boolean;
+        }[];
     } | undefined>;
-    scriptSetupRanges: import("alien-signals").ISignal<{
+    scriptSetupRanges: import("alien-signals").Computed<{
         leadingCommentEndOffset: number;
         importSectionEndOffset: number;
-        bindings: import("../types").TextRange[];
-        importComponentNames: Set<string>;
-        props: {
+        bindings: {
+            range: import("../types").TextRange;
+            moduleName?: string;
+            isDefaultImport?: boolean;
+            isNamespace?: boolean;
+        }[];
+        defineProp: {
+            localName?: import("../types").TextRange;
+            name?: import("../types").TextRange;
+            type?: import("../types").TextRange;
+            modifierType?: import("../types").TextRange;
+            runtimeType?: import("../types").TextRange;
+            defaultValue?: import("../types").TextRange;
+            required?: boolean;
+            isModel?: boolean;
+        }[];
+        defineProps: ({
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        } & {
             name?: string;
             destructured?: Set<string>;
             destructuredRest?: string;
-            define?: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }> & {
-                statement: import("../types").TextRange;
-            };
-            withDefaults?: import("../types").TextRange & {
-                arg?: import("../types").TextRange;
-            };
-        };
-        slots: {
+            statement: import("../types").TextRange;
+        }) | undefined;
+        withDefaults: {
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange | undefined;
+        } | undefined;
+        defineEmits: ({
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        } & {
             name?: string;
+            hasUnionTypeArg?: boolean;
+            statement: import("../types").TextRange;
+        }) | undefined;
+        defineSlots: ({
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        } & {
+            name?: string;
             isObjectBindingPattern?: boolean;
-            define?: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }> & {
-                statement: import("../types").TextRange;
-            };
-        };
-        emits: {
+            statement: import("../types").TextRange;
+        }) | undefined;
+        defineExpose: {
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        } | undefined;
+        defineOptions: {
             name?: string;
-            define?: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }> & {
-                statement: import("../types").TextRange;
-                hasUnionTypeArg?: boolean;
-            };
-        };
-        expose: {
-            name?: string;
-            define?: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }>;
-        };
-        options: {
-            name?: string;
             inheritAttrs?: string;
-        };
-        cssModules: {
-            define: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }>;
+        } | undefined;
+        useAttrs: {
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
         }[];
-        defineProp: {
-            localName: import("../types").TextRange | undefined;
-            name: import("../types").TextRange | undefined;
-            type: import("../types").TextRange | undefined;
-            modifierType?: import("../types").TextRange | undefined;
-            runtimeType: import("../types").TextRange | undefined;
-            defaultValue: import("../types").TextRange | undefined;
-            required: boolean;
-            isModel?: boolean;
+        useCssModule: {
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
         }[];
-        templateRefs: {
+        useSlots: {
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        }[];
+        useTemplateRef: ({
+            callExp: import("../types").TextRange;
+            exp: import("../types").TextRange;
+            arg?: import("../types").TextRange;
+            typeArg?: import("../types").TextRange;
+        } & {
             name?: string;
-            define: ReturnType<(node: import("typescript").CallExpression) => import("../types").TextRange & {
-                exp: import("../types").TextRange;
-                arg?: import("../types").TextRange;
-                typeArg?: import("../types").TextRange;
-            }>;
-        }[];
+        })[];
     } | undefined>;
-    lang: import("alien-signals").ISignal<string>;
-    generatedScript: import("alien-signals").ISignal<{
+    lang: import("alien-signals").Computed<string>;
+    generatedScript: import("alien-signals").Computed<{
         codes: Code[];
@@ -121,3 +138,3 @@ linkedCodeMappings: Mapping<unknown>[];
     }>;
-    generatedTemplate: import("alien-signals").ISignal<{
+    generatedTemplate: import("alien-signals").Computed<{
         codes: Code[];
@@ -144,2 +161,3 @@ slots: {
             navigationAndAdditionalCompletion: import("../types").VueCodeInformation;
+            withoutNavigation: import("../types").VueCodeInformation;
             withoutHighlight: import("../types").VueCodeInformation;
@@ -150,5 +168,8 @@ withoutHighlightAndCompletion: import("../types").VueCodeInformation;
         accessExternalVariables: Map<string, Set<number>>;
+        lastGenericComment: {
+            content: string;
+            offset: number;
+        } | undefined;
         hasSlotElements: Set<import("@vue/compiler-dom").ElementNode>;
         blockConditions: string[];
-        usedComponentCtxVars: Set<string>;
         scopedClasses: {
@@ -162,4 +183,10 @@ source: string;
         hasSlot: boolean;
-        inheritedAttrVars: Set<unknown>;
+        bindingAttrLocs: import("@vue/compiler-dom").SourceLocation[];
+        inheritedAttrVars: Set<string>;
         templateRefs: Map<string, [varName: string, offset: number]>;
+        currentComponent: {
+            node: import("@vue/compiler-dom").ElementNode;
+            ctxVar: string;
+            used: boolean;
+        } | undefined;
         singleRootElType: string | undefined;
@@ -166,0 +193,0 @@ singleRootNode: import("@vue/compiler-dom").ElementNode | undefined;

lib/plugins/vue-tsx.js

@@ -9,2 +9,4 @@ "use strict";
 const scriptSetupRanges_1 = require("../parsers/scriptSetupRanges");
+const vueCompilerOptions_1 = require("../parsers/vueCompilerOptions");
+const ts_1 = require("../utils/ts");
 exports.tsCodegen = new WeakMap();
@@ -33,4 +35,3 @@ const fileEditTimes = new Map();
                 if (tsx) {
-                    const content = [...tsx.codes];
-                    embeddedFile.content = content;
+                    embeddedFile.content = [...tsx.codes];
                     embeddedFile.linkedCodeMappings = [...tsx.linkedCodeMappings];
@@ -62,2 +63,8 @@ }
     });
+    const vueCompilerOptions = (0, alien_signals_1.computed)(() => {
+        const options = (0, vueCompilerOptions_1.parseVueCompilerOptions)(_sfc.comments);
+        return options
+            ? (0, ts_1.resolveVueCompilerOptions)(options, ctx.vueCompilerOptions)
+            : ctx.vueCompilerOptions;
+    });
     const scriptRanges = (0, alien_signals_1.computed)(() => _sfc.script
@@ -67,6 +74,52 @@ ? (0, scriptRanges_1.parseScriptRanges)(ts, _sfc.script.ast, !!_sfc.scriptSetup, false)
     const scriptSetupRanges = (0, alien_signals_1.computed)(() => _sfc.scriptSetup
-        ? (0, scriptSetupRanges_1.parseScriptSetupRanges)(ts, _sfc.scriptSetup.ast, ctx.vueCompilerOptions)
+        ? (0, scriptSetupRanges_1.parseScriptSetupRanges)(ts, _sfc.scriptSetup.ast, vueCompilerOptions.get())
         : undefined);
+    const scriptSetupBindingNames = alien_signals_1.unstable.computedSet((0, alien_signals_1.computed)(() => {
+        const newNames = new Set();
+        const bindings = scriptSetupRanges.get()?.bindings;
+        if (_sfc.scriptSetup && bindings) {
+            for (const { range } of bindings) {
+                newNames.add(_sfc.scriptSetup.content.slice(range.start, range.end));
+            }
+        }
+        return newNames;
+    }));
+    const scriptSetupImportComponentNames = alien_signals_1.unstable.computedSet((0, alien_signals_1.computed)(() => {
+        const newNames = new Set();
+        const bindings = scriptSetupRanges.get()?.bindings;
+        if (_sfc.scriptSetup && bindings) {
+            for (const { range, moduleName, isDefaultImport, isNamespace } of bindings) {
+                if (moduleName
+                    && isDefaultImport
+                    && !isNamespace
+                    && ctx.vueCompilerOptions.extensions.some(ext => moduleName.endsWith(ext))) {
+                    newNames.add(_sfc.scriptSetup.content.slice(range.start, range.end));
+                }
+            }
+        }
+        return newNames;
+    }));
+    const destructuredPropNames = alien_signals_1.unstable.computedSet((0, alien_signals_1.computed)(() => {
+        const newNames = new Set(scriptSetupRanges.get()?.defineProps?.destructured);
+        const rest = scriptSetupRanges.get()?.defineProps?.destructuredRest;
+        if (rest) {
+            newNames.add(rest);
+        }
+        return newNames;
+    }));
+    const templateRefNames = alien_signals_1.unstable.computedSet((0, alien_signals_1.computed)(() => {
+        const newNames = new Set(scriptSetupRanges.get()?.useTemplateRef
+            .map(({ name }) => name)
+            .filter(name => name !== undefined));
+        return newNames;
+    }));
+    const hasDefineSlots = (0, alien_signals_1.computed)(() => !!scriptSetupRanges.get()?.defineSlots);
+    const slotsAssignName = (0, alien_signals_1.computed)(() => scriptSetupRanges.get()?.defineSlots?.name);
+    const propsAssignName = (0, alien_signals_1.computed)(() => scriptSetupRanges.get()?.defineProps?.name);
+    const inheritAttrs = (0, alien_signals_1.computed)(() => {
+        const value = scriptSetupRanges.get()?.defineOptions?.inheritAttrs ?? scriptRanges.get()?.exportDefault?.inheritAttrsOption;
+        return value !== 'false';
+    });
     const generatedTemplate = (0, alien_signals_1.computed)(() => {
-        if (ctx.vueCompilerOptions.skipTemplateCodegen || !_sfc.template) {
+        if (vueCompilerOptions.get().skipTemplateCodegen || !_sfc.template) {
             return;
@@ -78,5 +131,5 @@ }
             compilerOptions: ctx.compilerOptions,
-            vueCompilerOptions: ctx.vueCompilerOptions,
+            vueCompilerOptions: vueCompilerOptions.get(),
             template: _sfc.template,
-            edited: ctx.vueCompilerOptions.__test || (fileEditTimes.get(fileName) ?? 0) >= 2,
+            edited: vueCompilerOptions.get().__test || (fileEditTimes.get(fileName) ?? 0) >= 2,
             scriptSetupBindingNames: scriptSetupBindingNames.get(),
@@ -102,49 +155,2 @@ scriptSetupImportComponentNames: scriptSetupImportComponentNames.get(),
     });
-    const scriptSetupBindingNames = (0, alien_signals_1.computed)(oldNames => {
-        const newNames = new Set();
-        const bindings = scriptSetupRanges.get()?.bindings;
-        if (_sfc.scriptSetup && bindings) {
-            for (const binding of bindings) {
-                newNames.add(_sfc.scriptSetup?.content.substring(binding.start, binding.end));
-            }
-        }
-        if (newNames && oldNames && twoSetsEqual(newNames, oldNames)) {
-            return oldNames;
-        }
-        return newNames;
-    });
-    const scriptSetupImportComponentNames = (0, alien_signals_1.computed)(oldNames => {
-        const newNames = scriptSetupRanges.get()?.importComponentNames ?? new Set();
-        if (oldNames && twoSetsEqual(newNames, oldNames)) {
-            return oldNames;
-        }
-        return newNames;
-    });
-    const destructuredPropNames = (0, alien_signals_1.computed)(oldNames => {
-        const newNames = scriptSetupRanges.get()?.props.destructured ?? new Set();
-        const rest = scriptSetupRanges.get()?.props.destructuredRest;
-        if (rest) {
-            newNames.add(rest);
-        }
-        if (oldNames && twoSetsEqual(newNames, oldNames)) {
-            return oldNames;
-        }
-        return newNames;
-    });
-    const templateRefNames = (0, alien_signals_1.computed)(oldNames => {
-        const newNames = new Set(scriptSetupRanges.get()?.templateRefs
-            .map(({ name }) => name)
-            .filter(name => name !== undefined));
-        if (oldNames && twoSetsEqual(newNames, oldNames)) {
-            return oldNames;
-        }
-        return newNames;
-    });
-    const hasDefineSlots = (0, alien_signals_1.computed)(() => !!scriptSetupRanges.get()?.slots.define);
-    const slotsAssignName = (0, alien_signals_1.computed)(() => scriptSetupRanges.get()?.slots.name);
-    const propsAssignName = (0, alien_signals_1.computed)(() => scriptSetupRanges.get()?.props.name);
-    const inheritAttrs = (0, alien_signals_1.computed)(() => {
-        const value = scriptSetupRanges.get()?.options.inheritAttrs ?? scriptRanges.get()?.exportDefault?.inheritAttrsOption;
-        return value !== 'false';
-    });
     const generatedScript = (0, alien_signals_1.computed)(() => {
@@ -156,4 +162,7 @@ const codes = [];
             ts,
+            compilerOptions: ctx.compilerOptions,
+            vueCompilerOptions: vueCompilerOptions.get(),
+            sfc: _sfc,
+            edited: vueCompilerOptions.get().__test || (fileEditTimes.get(fileName) ?? 0) >= 2,
             fileName,
-            sfc: _sfc,
             lang: lang.get(),
@@ -163,5 +172,4 @@ scriptRanges: scriptRanges.get(),
             templateCodegen: generatedTemplate.get(),
-            compilerOptions: ctx.compilerOptions,
-            vueCompilerOptions: ctx.vueCompilerOptions,
-            edited: ctx.vueCompilerOptions.__test || (fileEditTimes.get(fileName) ?? 0) >= 2,
+            destructuredPropNames: destructuredPropNames.get(),
+            templateRefNames: templateRefNames.get(),
             getGeneratedLength: () => generatedLength,
@@ -195,13 +203,2 @@ linkedCodeMappings,
 }
-function twoSetsEqual(a, b) {
-    if (a.size !== b.size) {
-        return false;
-    }
-    for (const file of a) {
-        if (!b.has(file)) {
-            return false;
-        }
-    }
-    return true;
-}
 //# sourceMappingURL=vue-tsx.js.map

lib/types.d.ts

@@ -40,4 +40,6 @@ import type { CodeInformation } from '@volar/language-core';
     };
-    composibles: {
+    composables: {
+        useAttrs: string[];
         useCssModule: string[];
+        useSlots: string[];
         useTemplateRef: string[];
@@ -85,4 +87,4 @@ };
     modules: {
-        typescript: typeof import('typescript');
-        '@vue/compiler-dom': typeof import('@vue/compiler-dom');
+        typescript: typeof ts;
+        '@vue/compiler-dom': typeof CompilerDOM;
     };
@@ -102,10 +104,5 @@ compilerOptions: ts.CompilerOptions;
 }
-export interface SFCStyleOverride {
-    module?: {
-        name: string;
-        offset?: number;
-    };
-}
 export interface Sfc {
     content: string;
+    comments: string[];
     template: SfcBlock & {
@@ -126,4 +123,8 @@ ast: CompilerDOM.RootNode | undefined;
     } | undefined;
-    styles: readonly (SfcBlock & SFCStyleOverride & {
+    styles: readonly (SfcBlock & {
         scoped: boolean;
+        module?: {
+            name: string;
+            offset?: number;
+        };
         cssVars: {
@@ -142,2 +143,10 @@ text: string;
 }
+declare module '@vue/compiler-sfc' {
+    interface SFCStyleBlock {
+        __module?: {
+            name: string;
+            offset?: number;
+        };
+    }
+}
 export interface TextRange {
@@ -144,0 +153,0 @@ start: number;

lib/utils/buildMappings.d.ts

@@ -0,3 +1,3 @@
+import type { Mapping } from '@volar/language-core';
 import type { Segment } from 'muggle-string';
-import type { Mapping } from '@volar/language-core';
 export declare function buildMappings<T>(chunks: Segment<T>[]): Mapping<T>[];

lib/utils/parseSfc.d.ts

 import type { SFCParseResult } from '@vue/compiler-sfc';
+declare module '@vue/compiler-sfc' {
+    interface SFCDescriptor {
+        comments: string[];
+    }
+}
 export declare function parse(source: string): SFCParseResult;

lib/utils/parseSfc.js

@@ -21,2 +21,3 @@ "use strict";
         source,
+        comments: [],
         template: null,
@@ -32,5 +33,9 @@ script: null,
     ast.children.forEach(node => {
-        if (node.type !== compiler.NodeTypes.ELEMENT) {
+        if (node.type === compiler.NodeTypes.COMMENT) {
+            descriptor.comments.push(node.content);
             return;
         }
+        else if (node.type !== compiler.NodeTypes.ELEMENT) {
+            return;
+        }
         switch (node.tag) {
@@ -112,3 +117,3 @@ case 'template':
                 else if (p.name === 'module') {
-                    block.module = {
+                    block.__module = {
                         name: p.value?.content ?? '$style',
@@ -115,0 +120,0 @@ offset: p.value?.content ? p.value?.loc.start.offset - node.loc.start.offset : undefined

lib/utils/ts.d.ts

@@ -10,3 +10,3 @@ import type * as ts from 'typescript';
 export declare function createParsedCommandLine(ts: typeof import('typescript'), parseConfigHost: ts.ParseConfigHost, tsConfigPath: string, skipGlobalTypesSetup?: boolean): ParsedCommandLine;
-export declare function resolveVueCompilerOptions(vueOptions: Partial<VueCompilerOptions>): VueCompilerOptions;
+export declare function resolveVueCompilerOptions(options: Partial<VueCompilerOptions>, defaults?: VueCompilerOptions): VueCompilerOptions;
 export declare function setupGlobalTypes(rootDir: string, vueOptions: VueCompilerOptions, host: {
@@ -13,0 +13,0 @@ fileExists(path: string): boolean;

lib/utils/ts.js

@@ -9,4 +9,4 @@ "use strict";
 const path_browserify_1 = require("path-browserify");
+const globalTypes_1 = require("../codegen/globalTypes");
 const languagePlugin_1 = require("../languagePlugin");
-const globalTypes_1 = require("../codegen/globalTypes");
 function createParsedCommandLineByJson(ts, parseConfigHost, rootDir, json, configFileName = rootDir + '/jsconfig.json', skipGlobalTypesSetup = false) {
@@ -172,21 +172,20 @@ const proxyHost = proxyParseConfigHostForExtendConfigPaths(parseConfigHost);
 }
-function resolveVueCompilerOptions(vueOptions) {
-    const target = vueOptions.target ?? 3.3;
-    const lib = vueOptions.lib ?? 'vue';
+function getDefaultOptions(options) {
+    const target = options.target ?? 3.3;
+    const lib = options.lib ?? 'vue';
     return {
-        ...vueOptions,
         target,
-        extensions: vueOptions.extensions ?? ['.vue'],
-        vitePressExtensions: vueOptions.vitePressExtensions ?? [],
-        petiteVueExtensions: vueOptions.petiteVueExtensions ?? [],
         lib,
-        jsxSlots: vueOptions.jsxSlots ?? false,
-        strictTemplates: vueOptions.strictTemplates ?? false,
-        skipTemplateCodegen: vueOptions.skipTemplateCodegen ?? false,
-        fallthroughAttributes: vueOptions.fallthroughAttributes ?? false,
-        dataAttributes: vueOptions.dataAttributes ?? [],
-        htmlAttributes: vueOptions.htmlAttributes ?? ['aria-*'],
-        optionsWrapper: vueOptions.optionsWrapper ?? (target >= 2.7
+        extensions: ['.vue'],
+        vitePressExtensions: [],
+        petiteVueExtensions: [],
+        jsxSlots: false,
+        strictTemplates: false,
+        skipTemplateCodegen: false,
+        fallthroughAttributes: false,
+        dataAttributes: [],
+        htmlAttributes: ['aria-*'],
+        optionsWrapper: target >= 2.7
             ? [`(await import('${lib}')).defineComponent(`, `)`]
-            : [`(await import('${lib}')).default.extend(`, `)`]),
+            : [`(await import('${lib}')).default.extend(`, `)`],
         macros: {
@@ -200,16 +199,31 @@ defineProps: ['defineProps'],
             withDefaults: ['withDefaults'],
-            ...vueOptions.macros,
         },
-        composibles: {
+        composables: {
+            useAttrs: ['useAttrs'],
             useCssModule: ['useCssModule'],
+            useSlots: ['useSlots'],
             useTemplateRef: ['useTemplateRef', 'templateRef'],
-            ...vueOptions.composibles,
         },
-        plugins: vueOptions.plugins ?? [],
-        // experimental
-        experimentalDefinePropProposal: vueOptions.experimentalDefinePropProposal ?? false,
-        experimentalResolveStyleCssClasses: vueOptions.experimentalResolveStyleCssClasses ?? 'scoped',
+        plugins: [],
+        experimentalDefinePropProposal: false,
+        experimentalResolveStyleCssClasses: 'scoped',
+        experimentalModelPropName: null
+    };
+}
+;
+function resolveVueCompilerOptions(options, defaults = getDefaultOptions(options)) {
+    return {
+        ...defaults,
+        ...options,
+        macros: {
+            ...defaults.macros,
+            ...options.macros,
+        },
+        composables: {
+            ...defaults.composables,
+            ...options.composables,
+        },
         // https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L49-L51
         // https://vuejs.org/guide/essentials/forms.html#form-input-bindings
-        experimentalModelPropName: Object.fromEntries(Object.entries(vueOptions.experimentalModelPropName ?? {
+        experimentalModelPropName: Object.fromEntries(Object.entries(options.experimentalModelPropName ?? defaults.experimentalModelPropName ?? {
             '': {
@@ -216,0 +230,0 @@ input: true

lib/virtualFile/computedEmbeddedCodes.d.ts

 import type { VirtualCode } from '@volar/language-core';
-import { ISignal } from 'alien-signals';
 import type { Sfc, VueLanguagePluginReturn } from '../types';
-export declare function computedEmbeddedCodes(plugins: VueLanguagePluginReturn[], fileName: string, sfc: Sfc): ISignal<VirtualCode[]>;
+export declare function computedEmbeddedCodes(plugins: VueLanguagePluginReturn[], fileName: string, sfc: Sfc): import("alien-signals").Computed<VirtualCode[]>;
 export declare function resolveCommonLanguageId(lang: string): string;

lib/virtualFile/computedSfc.js

@@ -9,6 +9,7 @@ "use strict";
     const untrackedSnapshot = () => {
-        const prevTrackId = alien_signals_1.System.activeTrackId;
-        alien_signals_1.System.activeTrackId = 0;
+        const prevSub = alien_signals_1.activeSub;
+        const prevTrackId = alien_signals_1.activeTrackId;
+        (0, alien_signals_1.setActiveSub)(undefined, 0);
         const res = snapshot.get();
-        alien_signals_1.System.activeTrackId = prevTrackId;
+        (0, alien_signals_1.setActiveSub)(prevSub, prevTrackId);
         return res;
@@ -19,2 +20,10 @@ };
     });
+    const comments = (0, alien_signals_1.computed)(oldValue => {
+        const newValue = parsed.get()?.descriptor.comments ?? [];
+        if (oldValue?.length === newValue.length
+            && oldValue.every((v, i) => v === newValue[i])) {
+            return oldValue;
+        }
+        return newValue;
+    });
     const template = computedNullableSfcBlock('template', 'html', (0, alien_signals_1.computed)(() => parsed.get()?.descriptor.template ?? undefined), (_block, base) => {
@@ -94,9 +103,9 @@ const compiledAst = computedTemplateAst(base);
     });
-    const styles = alien_signals_1.Unstable.computedArray((0, alien_signals_1.computed)(() => parsed.get()?.descriptor.styles ?? []), (block, i) => {
+    const styles = alien_signals_1.unstable.computedArray((0, alien_signals_1.computed)(() => parsed.get()?.descriptor.styles ?? []), (block, i) => {
         const base = computedSfcBlock('style_' + i, 'css', block);
         const module = (0, alien_signals_1.computed)(() => {
-            const _module = block.get().module;
-            return _module ? {
-                name: _module.name,
-                offset: _module.offset ? base.start + _module.offset : undefined
+            const { __module } = block.get();
+            return __module ? {
+                name: __module.name,
+                offset: __module.offset ? base.start + __module.offset : undefined
             } : undefined;
@@ -114,3 +123,3 @@ });
     });
-    const customBlocks = alien_signals_1.Unstable.computedArray((0, alien_signals_1.computed)(() => parsed.get()?.descriptor.customBlocks ?? []), (block, i) => {
+    const customBlocks = alien_signals_1.unstable.computedArray((0, alien_signals_1.computed)(() => parsed.get()?.descriptor.customBlocks ?? []), (block, i) => {
         const base = computedSfcBlock('custom_block_' + i, 'txt', block);
@@ -124,2 +133,3 @@ const type = (0, alien_signals_1.computed)(() => block.get().type);
         get content() { return content.get(); },
+        get comments() { return comments.get(); },
         get template() { return template.get(); },
@@ -145,6 +155,7 @@ get script() { return script.get(); },
                 if (change) {
-                    const prevTrackId = alien_signals_1.System.activeTrackId;
-                    alien_signals_1.System.activeTrackId = 0;
+                    const prevSub = alien_signals_1.activeSub;
+                    const prevTrackId = alien_signals_1.activeTrackId;
+                    (0, alien_signals_1.setActiveSub)(undefined, 0);
                     const templateOffset = base.startTagEnd;
-                    alien_signals_1.System.activeTrackId = prevTrackId;
+                    (0, alien_signals_1.setActiveSub)(prevSub, prevTrackId);
                     const newText = untrackedSnapshot().getText(change.span.start, change.span.start + change.newLength);
@@ -151,0 +162,0 @@ const newResult = cache.plugin.updateSFCTemplate(cache.result, {

lib/virtualFile/computedVueSfc.d.ts

@@ -5,2 +5,2 @@ import type { SFCParseResult } from '@vue/compiler-sfc';
 import type { VueLanguagePluginReturn } from '../types';
-export declare function computedVueSfc(plugins: VueLanguagePluginReturn[], fileName: string, languageId: string, snapshot: Signal<ts.IScriptSnapshot>): import("alien-signals").ISignal<SFCParseResult | undefined>;
+export declare function computedVueSfc(plugins: VueLanguagePluginReturn[], fileName: string, languageId: string, snapshot: Signal<ts.IScriptSnapshot>): import("alien-signals").Computed<SFCParseResult | undefined>;

lib/virtualFile/vueFile.d.ts

@@ -13,5 +13,5 @@ import type { VirtualCode } from '@volar/language-core';
     _snapshot: import("alien-signals").Signal<ts.IScriptSnapshot>;
-    _vueSfc: import("alien-signals").ISignal<import("@vue/compiler-sfc").SFCParseResult | undefined>;
+    _vueSfc: import("alien-signals").Computed<import("@vue/compiler-sfc").SFCParseResult | undefined>;
     _sfc: import("../types").Sfc;
-    _mappings: import("alien-signals").ISignal<{
+    _mappings: import("alien-signals").Computed<{
         sourceOffsets: number[];
@@ -22,3 +22,3 @@ generatedOffsets: number[];
     }[]>;
-    _embeddedCodes: import("alien-signals").ISignal<VirtualCode[]>;
+    _embeddedCodes: import("alien-signals").Computed<VirtualCode[]>;
     get embeddedCodes(): VirtualCode[];
@@ -25,0 +25,0 @@ get snapshot(): ts.IScriptSnapshot;

package.json

 {
 	"name": "@vue/language-core",
-	"version": "2.1.10",
+	"version": "2.2.0",
 	"license": "MIT",
@@ -16,7 +16,7 @@ "files": [
 	"dependencies": {
-		"@volar/language-core": "~2.4.8",
+		"@volar/language-core": "~2.4.11",
 		"@vue/compiler-dom": "^3.5.0",
 		"@vue/compiler-vue2": "^2.7.16",
 		"@vue/shared": "^3.5.0",
-		"alien-signals": "^0.2.0",
+		"alien-signals": "^0.4.9",
 		"minimatch": "^9.0.3",
@@ -30,3 +30,3 @@ "muggle-string": "^0.4.1",
 		"@types/path-browserify": "^1.0.1",
-		"@volar/typescript": "~2.4.8",
+		"@volar/typescript": "~2.4.11",
 		"@vue/compiler-sfc": "^3.5.0"
@@ -42,3 +42,3 @@ },
 	},
-	"gitHead": "b0af30caee2f8dfb1a8393c1b400f38e31fa4883"
+	"gitHead": "5babca774658d4b9afbe877ac7c8cafdaecf2c3e"
 }

No alert changes

Improved metrics

Total package byte prevSize

336321

increased by0.19%

Number of package files

128

increased by1.59%

Lines of code

7725

increased by2.34%

Dependency changes

• + Addedalien-signals@0.4.14(transitive)

• - Removedalien-signals@0.2.2(transitive)

• Updated@volar/language-core@~2.4.11

• Updatedalien-signals@^0.4.9