fix(language-core): avoid generating component options within the setup scope

packages/language-core/lib/codegen/script/component.ts

@@ -13,23 +13,7 @@ export function* generateComponent(
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	scriptSetupRanges: ScriptSetupRanges,
 ): Generator<Code> {
-	if (
-		options.script
-		&& options.scriptRanges?.componentOptions
-		&& options.scriptRanges.componentOptions.expression.start !== options.scriptRanges.componentOptions.args.start
-	) {
-		// use defineComponent() from user space code if it exist
-		yield* generateSfcBlockSection(
-			options.script,
-			options.scriptRanges.componentOptions.expression.start,
-			options.scriptRanges.componentOptions.args.start,
-			codeFeatures.all,
-		);
-		yield `{${newLine}`;
-	}
-	else {
-		yield `(await import('${options.vueCompilerOptions.lib}')).defineComponent({${newLine}`;
-	}
+	yield `(await import('${options.vueCompilerOptions.lib}')).defineComponent({${newLine}`;
 
 	const returns: string[][] = [];
 
@@ -60,10 +44,6 @@ export function* generateComponent(
 	) {
 		yield `__typeEl: {} as ${names.RootEl},${newLine}`;
 	}
-	if (options.script && options.scriptRanges?.componentOptions?.args) {
-		const { args } = options.scriptRanges.componentOptions;
-		yield* generateSfcBlockSection(options.script, args.start + 1, args.end - 1, codeFeatures.all);
-	}
 	yield `})`;
 }
 

packages/language-core/lib/codegen/script/index.ts

@@ -55,20 +55,25 @@ function* generateWorker(
 	// <script> + <script setup>
 	if (script && scriptRanges && scriptSetup && scriptSetupRanges) {
 		// <script>
-		const { exportDefault, componentOptions } = scriptRanges;
+		let selfType: string | undefined;
+		const { exportDefault } = scriptRanges;
 		if (exportDefault) {
-			const { expression: options } = componentOptions ?? exportDefault;
-			yield* generateSfcBlockSection(script, 0, options.start, codeFeatures.all);
-			yield exportExpression;
-			yield* generateSfcBlockSection(script, options.end, script.content.length, codeFeatures.all);
+			yield* generateScriptWithExportDefault(
+				ctx,
+				script,
+				scriptRanges,
+				exportDefault,
+				vueCompilerOptions,
+				selfType = '__VLS_self',
+			);
 		}
 		else {
 			yield* generateSfcBlockSection(script, 0, script.content.length, codeFeatures.all);
 			yield `export default ${exportExpression}${endOfLine}`;
 		}
 
 		// <script setup>
-		yield* generateExportDeclareEqual(scriptSetup);
+		yield* generateExportDeclareEqual(scriptSetup, names._export);
 		if (scriptSetup.generic) {
 			yield* generateGeneric(
 				options,
@@ -81,7 +86,7 @@ function* generateWorker(
 					ctx,
 					scriptSetup,
 					scriptSetupRanges,
-					generateTemplate(options, ctx),
+					generateTemplate(options, ctx, selfType),
 				),
 			);
 		}
@@ -92,7 +97,7 @@ function* generateWorker(
 				ctx,
 				scriptSetup,
 				scriptSetupRanges,
-				generateTemplate(options, ctx),
+				generateTemplate(options, ctx, selfType),
 				[`return `],
 			);
 			yield `})()${endOfLine}`;
@@ -101,7 +106,7 @@ function* generateWorker(
 	// only <script setup>
 	else if (scriptSetup && scriptSetupRanges) {
 		if (scriptSetup.generic) {
-			yield* generateExportDeclareEqual(scriptSetup);
+			yield* generateExportDeclareEqual(scriptSetup, names._export);
 			yield* generateGeneric(
 				options,
 				ctx,
@@ -125,7 +130,7 @@ function* generateWorker(
 				scriptSetup,
 				scriptSetupRanges,
 				generateTemplate(options, ctx),
-				generateExportDeclareEqual(scriptSetup),
+				generateExportDeclareEqual(scriptSetup, names._export),
 			);
 		}
 		yield `export default ${exportExpression}${endOfLine}`;
@@ -134,49 +139,19 @@ function* generateWorker(
 	else if (script && scriptRanges) {
 		const { exportDefault } = scriptRanges;
 		if (exportDefault) {
-			const { expression, isObjectLiteral } = exportDefault;
-
-			let wrapLeft: string | undefined;
-			let wrapRight: string | undefined;
-			if (
-				isObjectLiteral
-				&& vueCompilerOptions.optionsWrapper.length
-			) {
-				[wrapLeft, wrapRight] = vueCompilerOptions.optionsWrapper;
-				ctx.inlayHints.push({
-					blockName: script.name,
-					offset: expression.start,
-					setting: 'vue.inlayHints.optionsWrapper',
-					label: wrapLeft || '[Missing optionsWrapper[0]]',
-					tooltip: [
-						'This is virtual code that is automatically wrapped for type support, it does not affect your runtime behavior, you can customize it via `vueCompilerOptions.optionsWrapper` option in tsconfig / jsconfig.',
-						'To hide it, you can set `"vue.inlayHints.optionsWrapper": false` in IDE settings.',
-					].join('\n\n'),
-				}, {
-					blockName: script.name,
-					offset: expression.end,
-					setting: 'vue.inlayHints.optionsWrapper',
-					label: wrapRight || '[Missing optionsWrapper[1]]',
-				});
-			}
-
-			yield* generateSfcBlockSection(script, 0, expression.start, codeFeatures.all);
-			yield `${exportExpression}${endOfLine}`;
-			yield* generateTemplate(options, ctx, names._export);
-			yield* generateExportDeclareEqual(script);
-			if (wrapLeft && wrapRight) {
-				yield wrapLeft;
-				yield* generateSfcBlockSection(script, expression.start, expression.end, codeFeatures.all);
-				yield wrapRight;
-				yield* generateSfcBlockSection(script, expression.end, script.content.length, codeFeatures.all);
-			}
-			else {
-				yield* generateSfcBlockSection(script, expression.start, script.content.length, codeFeatures.all);
-			}
+			yield* generateScriptWithExportDefault(
+				ctx,
+				script,
+				scriptRanges,
+				exportDefault,
+				vueCompilerOptions,
+				names._export,
+				generateTemplate(options, ctx, names._export),
+			);
 		}
 		else {
 			yield* generateSfcBlockSection(script, 0, script.content.length, codeFeatures.all);
-			yield* generateExportDeclareEqual(script);
+			yield* generateExportDeclareEqual(script, names._export);
 			yield `(await import('${vueCompilerOptions.lib}')).defineComponent({})${endOfLine}`;
 			yield* generateTemplate(options, ctx, names._export);
 			yield `export default ${exportExpression}${endOfLine}`;
@@ -186,6 +161,62 @@ function* generateWorker(
 	yield* ctx.localTypes.generate();
 }
 
+function* generateScriptWithExportDefault(
+	ctx: ScriptCodegenContext,
+	script: NonNullable<Sfc['script']>,
+	scriptRanges: ScriptRanges,
+	exportDefault: NonNullable<ScriptRanges['exportDefault']>,
+	vueCompilerOptions: VueCompilerOptions,
+	varName: string,
+	templateGenerator?: Generator<Code>,
+): Generator<Code> {
+	const { componentOptions } = scriptRanges;
+	const { expression, isObjectLiteral } = componentOptions ?? exportDefault;
+
+	let wrapLeft: string | undefined;
+	let wrapRight: string | undefined;
+	if (
+		isObjectLiteral
+		&& vueCompilerOptions.optionsWrapper.length
+	) {
+		[wrapLeft, wrapRight] = vueCompilerOptions.optionsWrapper;
+		ctx.inlayHints.push({
+			blockName: script.name,
+			offset: expression.start,
+			setting: 'vue.inlayHints.optionsWrapper',
+			label: wrapLeft || '[Missing optionsWrapper[0]]',
+			tooltip: [
+				'This is virtual code that is automatically wrapped for type support, it does not affect your runtime behavior, you can customize it via `vueCompilerOptions.optionsWrapper` option in tsconfig / jsconfig.',
+				'To hide it, you can set `"vue.inlayHints.optionsWrapper": false` in IDE settings.',
+			].join('\n\n'),
+		}, {
+			blockName: script.name,
+			offset: expression.end,
+			setting: 'vue.inlayHints.optionsWrapper',
+			label: wrapRight || '[Missing optionsWrapper[1]]',
+		});
+	}
+
+	yield* generateSfcBlockSection(script, 0, expression.start, codeFeatures.all);
+	yield exportExpression;
+	yield* generateSfcBlockSection(script, expression.end, exportDefault.end, codeFeatures.all);
+	yield endOfLine;
+	if (templateGenerator) {
+		yield* templateGenerator;
+	}
+	yield* generateExportDeclareEqual(script, varName);
+	if (wrapLeft && wrapRight) {
+		yield wrapLeft;
+		yield* generateSfcBlockSection(script, expression.start, expression.end, codeFeatures.all);
+		yield wrapRight;
+	}
+	else {
+		yield* generateSfcBlockSection(script, expression.start, expression.end, codeFeatures.all);
+	}
+	yield endOfLine;
+	yield* generateSfcBlockSection(script, exportDefault.end, script.content.length, codeFeatures.all);
+}
+
 function* generateGlobalTypesReference(options: ScriptCodegenOptions): Generator<Code> {
 	const globalTypesPath = options.vueCompilerOptions.globalTypesPath(options.fileName);
 	if (!globalTypesPath) {
@@ -207,10 +238,10 @@ function* generateGlobalTypesReference(options: ScriptCodegenOptions): Generator
 	}
 }
 
-function* generateExportDeclareEqual(block: SfcBlock): Generator<Code> {
+function* generateExportDeclareEqual(block: SfcBlock, name: string): Generator<Code> {
 	yield `const `;
 	const token = yield* startBoundary(block.name, 0, codeFeatures.doNotReportTs6133);
-	yield names._export;
+	yield name;
 	yield endBoundary(token, block.content.length);
 	yield ` = `;
 }

packages/language-core/lib/codegen/script/template.ts

@@ -12,7 +12,6 @@ export function* generateTemplate(
 	ctx: ScriptCodegenContext,
 	selfType?: string,
 ): Generator<Code> {
-	selfType ??= yield* generateSelf(options);
 	yield* generateSetupExposed(options, ctx);
 	yield* generateTemplateCtx(options, ctx, selfType);
 	yield* generateTemplateComponents(options);
@@ -26,24 +25,6 @@ export function* generateTemplate(
 	}
 }
 
-function* generateSelf({ script, scriptRanges, vueCompilerOptions }: ScriptCodegenOptions): Generator<Code> {
-	const varName = '__VLS_self';
-	if (script && scriptRanges?.componentOptions) {
-		yield `const ${varName} = (await import('${vueCompilerOptions.lib}')).defineComponent(`;
-		const { args } = scriptRanges.componentOptions;
-		yield* generateSfcBlockSection(script, args.start, args.end, codeFeatures.all);
-		yield `)${endOfLine}`;
-		return varName;
-	}
-	else if (script && scriptRanges?.exportDefault) {
-		yield `const ${varName} = `;
-		const { expression } = scriptRanges.exportDefault;
-		yield* generateSfcBlockSection(script, expression.start, expression.end, codeFeatures.all);
-		yield endOfLine;
-		return varName;
-	}
-}
-
 function* generateTemplateCtx(
 	{ vueCompilerOptions, script, styleCodegen, scriptSetupRanges, fileName }: ScriptCodegenOptions,
 	ctx: ScriptCodegenContext,

packages/language-core/lib/parsers/scriptRanges.ts

@@ -18,6 +18,7 @@ export function parseScriptRanges(
 		| undefined;
 	let componentOptions:
 		| {
+			isObjectLiteral: boolean;
 			expression: TextRange;
 			args: TextRange;
 			argsNode: ts.ObjectLiteralExpression;
@@ -81,6 +82,7 @@ export function parseScriptRanges(
 					}
 				});
 				componentOptions = {
+					isObjectLiteral: ts.isObjectLiteralExpression(node.expression),
 					expression: _getStartEnd(node.expression),
 					args: _getStartEnd(obj),
 					argsNode: obj,

test-workspace/tsc/passedFixtures/vue3/#5604/main.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+export default {
+	beforeRouteEnter() {
+		// @ts-expect-error
+		console.log('counter', counter);
+	},
+};
+</script>
+
+<script setup lang="ts">
+const counter = 1;
+</script>
+
+<template>
+	{{ counter }}
+</template>

test-workspace/tsc/passedFixtures/vue3/directives/option.vue

@@ -2,6 +2,8 @@
 import type { FunctionDirective } from 'vue';
 import { exactType } from '../../shared';
 
+let Comp!: (_: { foo?: string; }) => void;
+
 export default {
 	directives: {
 		foo: {} as FunctionDirective<typeof Comp, (_: string) => void>
@@ -10,7 +12,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-let Comp!: (_: { foo?: string; }) => void;
 </script>
 
 <template>