From b077859445aae0db9dc81c6c0047f9e56adeae6b Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Fri, 30 Aug 2024 19:17:05 +0800
Subject: [PATCH 1/6] fix(language-core): isolate $refs type

---
 .../language-core/lib/codegen/globalTypes.ts  |  7 ++++
 .../language-core/lib/codegen/localTypes.ts   | 15 ---------
 .../lib/codegen/script/internalComponent.ts   |  3 --
 .../lib/codegen/script/template.ts            | 32 +++++++++++++------
 .../lib/codegen/template/index.ts             |  8 ++---
 .../tsc/tests/__snapshots__/dts.spec.ts.snap  | 32 +++----------------
 packages/tsc/tests/typecheck.spec.ts          |  4 +--
 .../vue3.5/templateRef_missingImport/main.vue |  8 +++++
 8 files changed, 48 insertions(+), 61 deletions(-)
 create mode 100644 test-workspace/tsc/passedFixtures/vue3.5/templateRef_missingImport/main.vue

diff --git a/packages/language-core/lib/codegen/globalTypes.ts b/packages/language-core/lib/codegen/globalTypes.ts
index 19689701d5..285b510600 100644
--- a/packages/language-core/lib/codegen/globalTypes.ts
+++ b/packages/language-core/lib/codegen/globalTypes.ts
@@ -69,6 +69,13 @@ type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
 	>
 >;
 type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
+type __VLS_PickRefsExpose<T> = T extends object
+	? { [K in keyof T]: (T[K] extends any[]
+	? Parameters<T[K][0]['expose']>[0][]
+	: T[K] extends { expose?: (exposed: infer E) => void }
+	? E
+	: T[K]) | null }
+	: never;
 
 declare function __VLS_getVForSourceType(source: number): [number, number, number][];
 declare function __VLS_getVForSourceType(source: string): [string, number, number][];
diff --git a/packages/language-core/lib/codegen/localTypes.ts b/packages/language-core/lib/codegen/localTypes.ts
index e244f16f0f..d4939c3bf6 100644
--- a/packages/language-core/lib/codegen/localTypes.ts
+++ b/packages/language-core/lib/codegen/localTypes.ts
@@ -80,19 +80,6 @@ type __VLS_TypePropsToOption<T> = {
 		`__VLS_OmitIndexSignature`,
 		() => `type __VLS_OmitIndexSignature<T> = { [K in keyof T as {} extends Record<K, unknown> ? never : K]: T[K]; }${endOfLine}`
 	);
-	const PickRefsExpose = defineHelper(
-		`__VLS_PickRefsExpose`,
-		() => `
-type __VLS_PickRefsExpose<T> = T extends object
-	? { [K in keyof T]: (T[K] extends any[]
-	? Parameters<T[K][0]['expose']>[0][]
-	: T[K] extends { expose?: (exposed: infer E) => void }
-	? E
-	: T[K]) | null }
-	: never;
-`.trimStart()
-	);
-
 	const helpers = {
 		[PrettifyLocal.name]: PrettifyLocal,
 		[OmitKeepDiscriminatedUnion.name]: OmitKeepDiscriminatedUnion,
@@ -101,7 +88,6 @@ type __VLS_PickRefsExpose<T> = T extends object
 		[PropsChildren.name]: PropsChildren,
 		[TypePropsToOption.name]: TypePropsToOption,
 		[OmitIndexSignature.name]: OmitIndexSignature,
-		[PickRefsExpose.name]: PickRefsExpose,
 	};
 	used.clear();
 
@@ -117,7 +103,6 @@ type __VLS_PickRefsExpose<T> = T extends object
 		get PropsChildren() { return PropsChildren.name; },
 		get TypePropsToOption() { return TypePropsToOption.name; },
 		get OmitIndexSignature() { return OmitIndexSignature.name; },
-		get PickRefsExpose() { return PickRefsExpose.name; },
 	};
 
 	function* generate(names: string[]) {
diff --git a/packages/language-core/lib/codegen/script/internalComponent.ts b/packages/language-core/lib/codegen/script/internalComponent.ts
index 137a15997a..bfa36b65a8 100644
--- a/packages/language-core/lib/codegen/script/internalComponent.ts
+++ b/packages/language-core/lib/codegen/script/internalComponent.ts
@@ -47,9 +47,6 @@ export function* generateInternalComponent(
 		}
 		yield `}${endOfLine}`; // return {
 		yield `},${newLine}`; // setup() {
-		if (options.vueCompilerOptions.target >= 3.5) {
-			yield `__typeRefs: {} as __VLS_Refs,${newLine}`;
-		}
 		if (options.sfc.scriptSetup && options.scriptSetupRanges && !ctx.bypassDefineComponent) {
 			const emitOptionCodes = [...generateEmitsOption(options, options.sfc.scriptSetup, options.scriptSetupRanges)];
 			for (const code of emitOptionCodes) {
diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
index 695d0ace06..ac41fb26aa 100644
--- a/packages/language-core/lib/codegen/script/template.ts
+++ b/packages/language-core/lib/codegen/script/template.ts
@@ -13,20 +13,35 @@ export function* generateTemplateCtx(
 	options: ScriptCodegenOptions,
 	isClassComponent: boolean
 ): Generator<Code> {
-	const types = [];
+	const exps = [];
 	if (isClassComponent) {
-		types.push(`typeof this`);
+		exps.push(`this`);
 	}
 	else {
-		types.push(`InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
+		exps.push(`{} as InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>>`);
 	}
 	if (options.vueCompilerOptions.petiteVueExtensions.some(ext => options.fileBaseName.endsWith(ext))) {
-		types.push(`typeof globalThis`);
+		exps.push(`globalThis`);
 	}
 	if (options.sfc.styles.some(style => style.module)) {
-		types.push(`__VLS_StyleModules`);
+		exps.push(`{} as __VLS_StyleModules`);
+	}
+	exps.push(`{ $refs: __VLS_refs }`);
+
+	yield `const __VLS_ctx = `;
+	if (exps.length === 1) {
+		yield exps[0];
+		yield endOfLine;
+	}
+	else {
+		yield `{${newLine}`;
+		for (const exp of exps) {
+			yield `...`;
+			yield exp;
+			yield `,${newLine}`;
+		}
+		yield `}${endOfLine}`;
 	}
-	yield `let __VLS_ctx!: ${types.join(' & ')}${endOfLine}`;
 }
 
 export function* generateTemplateComponents(options: ScriptCodegenOptions): Generator<Code> {
@@ -87,7 +102,7 @@ export function* generateTemplate(
 		});
 		yield* generateTemplateCtx(options, isClassComponent);
 		yield* generateTemplateComponents(options);
-		yield* generateTemplateBody(options, ctx, templateCodegenCtx);
+		yield* generateTemplateBody(options, templateCodegenCtx);
 		yield* generateInternalComponent(options, ctx, templateCodegenCtx);
 	}
 	else {
@@ -100,7 +115,6 @@ export function* generateTemplate(
 
 function* generateTemplateBody(
 	options: ScriptCodegenOptions,
-	ctx: ScriptCodegenContext,
 	templateCodegenCtx: TemplateCodegenContext
 ): Generator<Code> {
 	const firstClasses = new Set<string>();
@@ -149,7 +163,7 @@ function* generateTemplateBody(
 
 	yield `const __VLS_templateResult = {`;
 	yield `slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${newLine}`;
-	yield `refs: __VLS_refs as ${ctx.localTypes.PickRefsExpose}<typeof __VLS_refs>,${newLine}`;
+	yield `refs: __VLS_refs,${newLine}`;
 	yield `attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${newLine}`;
 	yield `}${endOfLine}`;
 }
diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
index c68a820da3..ebff979bca 100644
--- a/packages/language-core/lib/codegen/template/index.ts
+++ b/packages/language-core/lib/codegen/template/index.ts
@@ -51,7 +51,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 
 	yield* ctx.generateAutoImportCompletion();
 
-	yield* generateRefs()
+	yield* generateRefs();
 
 	return ctx;
 
@@ -59,11 +59,11 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 		for (const [, validId] of options.templateRefNames) {
 			yield `let ${validId}${newLine}`;
 		}
-		yield `const __VLS_refs = {${newLine}`;
+		yield `declare const __VLS_refs: __VLS_PickRefsExpose<{${newLine}`;
 		for (const [name, validId] of options.templateRefNames) {
-			yield `'${name}': ${validId}!,${newLine}`;
+			yield `'${name}': NonNullable<typeof ${validId}>,${newLine}`;
 		}
-		yield `}${endOfLine}`;
+		yield `}>${endOfLine}`;
 	}
 
 	function* generateSlotsType(): Generator<Code> {
diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
index a134e8d034..0b12b2b53a 100644
--- a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
+++ b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -645,7 +645,6 @@ declare var __VLS_3: {
     str: string;
 };
 declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {};
 declare const __VLS_templateResult: {
     slots: {
         "no-bind"?(_: typeof __VLS_0): any;
@@ -653,18 +652,13 @@ declare const __VLS_templateResult: {
         "named-slot"?(_: typeof __VLS_2): any;
         vbind?(_: typeof __VLS_3): any;
     };
-    refs: __VLS_PickRefsExpose<typeof __VLS_refs>;
+    refs: {};
     attrs: Partial<typeof __VLS_inheritedAttrs>;
 };
 type __VLS_Slots = typeof __VLS_templateResult['slots'];
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_PickRefsExpose<T> = T extends object ? {
-    [K in keyof T]: (T[K] extends any[] ? Parameters<T[K][0]['expose']>[0][] : T[K] extends {
-        expose?: (exposed: infer E) => void;
-    } ? E : T[K]) | null;
-} : never;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -676,7 +670,6 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 exports[`vue-tsc-dts > Input: template-slots/component-define-slots.vue, Output: template-slots/component-define-slots.vue.d.ts 1`] = `
 "import { VNode } from 'vue';
 declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {};
 declare const __VLS_templateResult: {
     slots: Readonly<{
         default: (props: {
@@ -703,18 +696,13 @@ declare const __VLS_templateResult: {
         }) => VNode[];
         'no-bind': () => VNode[];
     };
-    refs: __VLS_PickRefsExpose<typeof __VLS_refs>;
+    refs: {};
     attrs: Partial<typeof __VLS_inheritedAttrs>;
 };
 type __VLS_Slots = typeof __VLS_templateResult['slots'];
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_PickRefsExpose<T> = T extends object ? {
-    [K in keyof T]: (T[K] extends any[] ? Parameters<T[K][0]['expose']>[0][] : T[K] extends {
-        expose?: (exposed: infer E) => void;
-    } ? E : T[K]) | null;
-} : never;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -725,7 +713,6 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 
 exports[`vue-tsc-dts > Input: template-slots/component-destructuring.vue, Output: template-slots/component-destructuring.vue.d.ts 1`] = `
 "declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {};
 declare const __VLS_templateResult: {
     slots: Readonly<{
         bottom: (props: {
@@ -736,18 +723,13 @@ declare const __VLS_templateResult: {
             num: number;
         }) => any[];
     };
-    refs: __VLS_PickRefsExpose<typeof __VLS_refs>;
+    refs: {};
     attrs: Partial<typeof __VLS_inheritedAttrs>;
 };
 type __VLS_Slots = typeof __VLS_templateResult['slots'];
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_PickRefsExpose<T> = T extends object ? {
-    [K in keyof T]: (T[K] extends any[] ? Parameters<T[K][0]['expose']>[0][] : T[K] extends {
-        expose?: (exposed: infer E) => void;
-    } ? E : T[K]) | null;
-} : never;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -769,7 +751,6 @@ declare var __VLS_3: {
     str: string;
 };
 declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {};
 declare const __VLS_templateResult: {
     slots: {
         "no-bind"?(_: typeof __VLS_0): any;
@@ -777,18 +758,13 @@ declare const __VLS_templateResult: {
         "named-slot"?(_: typeof __VLS_2): any;
         vbind?(_: typeof __VLS_3): any;
     };
-    refs: __VLS_PickRefsExpose<typeof __VLS_refs>;
+    refs: {};
     attrs: Partial<typeof __VLS_inheritedAttrs>;
 };
 type __VLS_Slots = typeof __VLS_templateResult['slots'];
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_PickRefsExpose<T> = T extends object ? {
-    [K in keyof T]: (T[K] extends any[] ? Parameters<T[K][0]['expose']>[0][] : T[K] extends {
-        expose?: (exposed: infer E) => void;
-    } ? E : T[K]) | null;
-} : never;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
diff --git a/packages/tsc/tests/typecheck.spec.ts b/packages/tsc/tests/typecheck.spec.ts
index a7cc585449..905ddec632 100644
--- a/packages/tsc/tests/typecheck.spec.ts
+++ b/packages/tsc/tests/typecheck.spec.ts
@@ -9,8 +9,8 @@ describe(`vue-tsc`, () => {
 			getTscOutput('stable')
 		).toMatchInlineSnapshot(`
 			[
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
 			  "test-workspace/tsc/failureFixtures/directives/main.vue(12,2): error TS2578: Unused '@ts-expect-error' directive.",
 			]
 		`);
diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef_missingImport/main.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef_missingImport/main.vue
new file mode 100644
index 0000000000..24f56a4a07
--- /dev/null
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef_missingImport/main.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+declare const foo: number;
+</script>
+
+<template>
+	<TemplateRef ref="templateRef" />
+	{{ foo }}
+</template>

From 75ab7fcc59ee24c9956b2599b06b49464139be86 Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Fri, 30 Aug 2024 19:21:25 +0800
Subject: [PATCH 2/6] Update typecheck.spec.ts

---
 packages/tsc/tests/typecheck.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/tsc/tests/typecheck.spec.ts b/packages/tsc/tests/typecheck.spec.ts
index 905ddec632..fae766986a 100644
--- a/packages/tsc/tests/typecheck.spec.ts
+++ b/packages/tsc/tests/typecheck.spec.ts
@@ -21,8 +21,8 @@ describe(`vue-tsc`, () => {
 			getTscOutput('next')
 		).toMatchInlineSnapshot(`
 			[
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
 			  "test-workspace/tsc/failureFixtures/directives/main.vue(12,2): error TS2578: Unused '@ts-expect-error' directive.",
 			  "test-workspace/tsc/passedFixtures/#3373/tsconfig.json(4,3): error TS5102: Option 'importsNotUsedAsValues' has been removed. Please remove it from your configuration.
 			  Use 'verbatimModuleSyntax' instead.",

From f9ece309b767847a93a83ca8dcacda946188aa86 Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <260480378@qq.com>
Date: Fri, 30 Aug 2024 21:17:39 +0800
Subject: [PATCH 3/6] chore: up test

---
 .../tsc/passedFixtures/vue3.5/templateRef/components.d.ts    | 5 +++++
 .../tsc/passedFixtures/vue3.5/templateRef/template-ref.vue   | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts

diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts
new file mode 100644
index 0000000000..8cc40dc371
--- /dev/null
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts
@@ -0,0 +1,5 @@
+declare module 'vue' {
+	export interface GlobalComponents {
+		Generic: typeof import('./generic.vue')['default'];
+	}
+}
diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
index 2a08b3ce79..c490ca6c56 100644
--- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import Generic from './generic.vue';
 import { exactType } from '../../shared';
 
 const comp1 = useTemplateRef('generic');
-if (comp1.value) exactType(comp1.value.foo, 1);
 
 const comp2 = useTemplateRef('v-for');
 if (comp2.value) exactType(comp2.value[0]?.foo, {} as number | undefined);
@@ -15,6 +13,8 @@ if (comp3.value) exactType(comp3.value?.href, {} as string | undefined);
 
 <template>
 	<Generic ref="generic" :foo="1"></Generic>
+	
+	{{ exactType(comp1.foo, 1) }}
 
 	<Generic v-for="i in 4" ref="v-for" :foo="i"></Generic>
 

From 2cc52bda1d093947ca5947eedc822ac9c8a469de Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Fri, 30 Aug 2024 22:10:12 +0800
Subject: [PATCH 4/6] fixes

---
 packages/language-core/lib/codegen/globalTypes.ts   |  2 +-
 .../language-core/lib/parsers/scriptSetupRanges.ts  |  9 +++++++--
 .../vue3.5/templateRef/components.d.ts              |  4 +++-
 .../vue3.5/templateRef/template-ref.vue             | 13 +++++++++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/language-core/lib/codegen/globalTypes.ts b/packages/language-core/lib/codegen/globalTypes.ts
index 285b510600..188f15e703 100644
--- a/packages/language-core/lib/codegen/globalTypes.ts
+++ b/packages/language-core/lib/codegen/globalTypes.ts
@@ -121,7 +121,7 @@ declare function __VLS_asFunctionalComponent<T, K = T extends new (...args: any)
 	: T extends (...args: any) => any ? T
 	: (_: {}${strictTemplates ? '' : ' & Record<string, unknown>'}, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {}${strictTemplates ? '' : ' & Record<string, unknown>'} } };
 declare function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T${strictTemplates ? '' : ' & Record<string, unknown>'}) => void;
-declare function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): Parameters<T>['length'] extends 2 ? [any] : [];
+declare function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
 declare function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<
 	'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
 	, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
index 0a53528a1c..b2979c47ad 100644
--- a/packages/language-core/lib/parsers/scriptSetupRanges.ts
+++ b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -50,7 +50,6 @@ export function parseScriptSetupRanges(
 		name?: string;
 		define?: ReturnType<typeof parseDefineFunction>;
 	}[] = [];
-
 	const definePropProposalA = vueCompilerOptions.experimentalDefinePropProposal === 'kevinEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=kevinEdition');
 	const definePropProposalB = vueCompilerOptions.experimentalDefinePropProposal === 'johnsonEdition' || ast.text.trimStart().startsWith('// @experimentalDefinePropProposal=johnsonEdition');
 	const defineProp: {
@@ -63,11 +62,12 @@ export function parseScriptSetupRanges(
 		required: boolean;
 		isModel?: boolean;
 	}[] = [];
-	const bindings = parseBindingRanges(ts, ast);
 	const text = ast.text;
 	const leadingCommentEndOffset = ts.getLeadingCommentRanges(text, 0)?.reverse()[0].end ?? 0;
 	const importComponentNames = new Set<string>();
 
+	let bindings = parseBindingRanges(ts, ast);
+
 	ts.forEachChild(ast, node => {
 		const isTypeExport = (ts.isTypeAliasDeclaration(node) || ts.isInterfaceDeclaration(node)) && node.modifiers?.some(mod => mod.kind === ts.SyntaxKind.ExportKeyword);
 		if (
@@ -102,6 +102,11 @@ export function parseScriptSetupRanges(
 	});
 	ts.forEachChild(ast, child => visitNode(child, [ast]));
 
+	bindings = bindings.filter(range => {
+		const name = ast.text.substring(range.start, range.end);
+		return templateRefs.every(ref => ref.name !== name);
+	});
+
 	return {
 		leadingCommentEndOffset,
 		importSectionEndOffset,
diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts
index 8cc40dc371..3a355c3137 100644
--- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/components.d.ts
@@ -1,5 +1,7 @@
-declare module 'vue' {
+declare module 'vue3.5' {
 	export interface GlobalComponents {
 		Generic: typeof import('./generic.vue')['default'];
 	}
 }
+
+export { };
diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
index c490ca6c56..6547d70c37 100644
--- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/template-ref.vue
@@ -3,19 +3,24 @@ import { useTemplateRef } from 'vue';
 import { exactType } from '../../shared';
 
 const comp1 = useTemplateRef('generic');
+if (comp1.value) {
+	exactType(comp1.value.foo, 1)
+}
 
 const comp2 = useTemplateRef('v-for');
-if (comp2.value) exactType(comp2.value[0]?.foo, {} as number | undefined);
+if (comp2.value) {
+	exactType(comp2.value[0]?.foo, {} as number | undefined);
+}
 
 const comp3 = useTemplateRef('a');
-if (comp3.value) exactType(comp3.value?.href, {} as string | undefined);
+if (comp3.value) {
+	exactType(comp3.value.href, {} as string | undefined);
+}
 </script>
 
 <template>
 	<Generic ref="generic" :foo="1"></Generic>
 	
-	{{ exactType(comp1.foo, 1) }}
-
 	<Generic v-for="i in 4" ref="v-for" :foo="i"></Generic>
 
 	<a ref="a"></a>

From 4a983553a848514d95de22abe9aa04e481be56a1 Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Fri, 30 Aug 2024 22:20:47 +0800
Subject: [PATCH 5/6] perf

---
 packages/language-core/lib/parsers/scriptSetupRanges.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
index b2979c47ad..59de404b3e 100644
--- a/packages/language-core/lib/parsers/scriptSetupRanges.ts
+++ b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -102,9 +102,10 @@ export function parseScriptSetupRanges(
 	});
 	ts.forEachChild(ast, child => visitNode(child, [ast]));
 
+	const templateRefNames = new Set(templateRefs.map(ref => ref.name));
 	bindings = bindings.filter(range => {
-		const name = ast.text.substring(range.start, range.end);
-		return templateRefs.every(ref => ref.name !== name);
+		const name = text.substring(range.start, range.end);
+		return !templateRefNames.has(name);
 	});
 
 	return {

From ff550ced85c12a0790ae00918274644dd876c809 Mon Sep 17 00:00:00 2001
From: Johnson Chu <johnsoncodehk@gmail.com>
Date: Sat, 31 Aug 2024 02:56:24 +0800
Subject: [PATCH 6/6] fix vue-tsc speed

---
 .../language-core/lib/codegen/globalTypes.ts  |  7 ----
 .../lib/codegen/script/template.ts            |  5 +--
 .../lib/codegen/template/element.ts           | 38 +++++++------------
 .../lib/codegen/template/index.ts             | 13 +++----
 packages/tsc/tests/typecheck.spec.ts          |  8 ++--
 .../vue3.5/templateRef/main.vue               |  2 +-
 6 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/packages/language-core/lib/codegen/globalTypes.ts b/packages/language-core/lib/codegen/globalTypes.ts
index 188f15e703..2a733c60af 100644
--- a/packages/language-core/lib/codegen/globalTypes.ts
+++ b/packages/language-core/lib/codegen/globalTypes.ts
@@ -69,13 +69,6 @@ type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
 	>
 >;
 type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
-type __VLS_PickRefsExpose<T> = T extends object
-	? { [K in keyof T]: (T[K] extends any[]
-	? Parameters<T[K][0]['expose']>[0][]
-	: T[K] extends { expose?: (exposed: infer E) => void }
-	? E
-	: T[K]) | null }
-	: never;
 
 declare function __VLS_getVForSourceType(source: number): [number, number, number][];
 declare function __VLS_getVForSourceType(source: string): [string, number, number][];
diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
index ac41fb26aa..7c5d85d6ec 100644
--- a/packages/language-core/lib/codegen/script/template.ts
+++ b/packages/language-core/lib/codegen/script/template.ts
@@ -26,7 +26,6 @@ export function* generateTemplateCtx(
 	if (options.sfc.styles.some(style => style.module)) {
 		exps.push(`{} as __VLS_StyleModules`);
 	}
-	exps.push(`{ $refs: __VLS_refs }`);
 
 	yield `const __VLS_ctx = `;
 	if (exps.length === 1) {
@@ -156,14 +155,14 @@ function* generateTemplateBody(
 		yield `// no template${newLine}`;
 		if (!options.scriptSetupRanges?.slots.define) {
 			yield `const __VLS_slots = {}${endOfLine}`;
-			yield `const __VLS_refs = {}${endOfLine}`;
+			yield `const $refs = {}${endOfLine}`;
 			yield `const __VLS_inheritedAttrs = {}${endOfLine}`;
 		}
 	}
 
 	yield `const __VLS_templateResult = {`;
 	yield `slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${newLine}`;
-	yield `refs: __VLS_refs,${newLine}`;
+	yield `refs: $refs,${newLine}`;
 	yield `attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${newLine}`;
 	yield `}${endOfLine}`;
 }
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
index 2a3edac1da..9670cbf4c6 100644
--- a/packages/language-core/lib/codegen/template/element.ts
+++ b/packages/language-core/lib/codegen/template/element.ts
@@ -225,7 +225,19 @@ export function* generateComponent(
 
 	const refName = yield* generateVScope(options, ctx, node, props);
 	if (refName) {
+		const varName = ctx.getInternalVariable();
+		options.templateRefNames.set(refName, varName);
 		ctx.usedComponentCtxVars.add(var_defineComponentCtx);
+
+		yield `// @ts-ignore${newLine}`;
+		if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
+			&& node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
+			&& node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')
+		) {
+			yield `var ${varName} = [{} as Parameters<typeof ${var_defineComponentCtx}['expose']>[0]]${endOfLine}`;
+		} else {
+			yield `var ${varName} = {} as Parameters<typeof ${var_defineComponentCtx}['expose']>[0]${endOfLine}`;
+		}
 	}
 
 	const usedComponentEventsVar = yield* generateElementEvents(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
@@ -257,19 +269,6 @@ export function* generateComponent(
 
 	if (ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
 		yield `const ${var_defineComponentCtx} = __VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance})${endOfLine}`;
-		if (refName) {
-			yield `// @ts-ignore${newLine}`;
-			if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
-				&& node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
-				&& node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')
-			) {
-				yield `(${refName} ??= []).push(${var_defineComponentCtx})`;
-			} else {
-				yield `${refName} = ${var_defineComponentCtx}`;
-			}
-
-			yield endOfLine;
-		}
 	}
 }
 
@@ -335,14 +334,7 @@ export function* generateElement(
 
 	const refName = yield* generateVScope(options, ctx, node, node.props);
 	if (refName) {
-		yield `// @ts-ignore${newLine}`;
-		yield `${refName} = __VLS_intrinsicElements`;
-		yield* generatePropertyAccess(
-			options,
-			ctx,
-			node.tag
-		);
-		yield endOfLine;
+		options.templateRefNames.set(refName, `__VLS_intrinsicElements['${node.tag}']`);
 	}
 
 	const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot') as CompilerDOM.DirectiveNode;
@@ -574,9 +566,7 @@ function* generateReferencesForElements(
 				ctx.accessExternalVariable(content, startOffset);
 			}
 
-			const refName = CompilerDOM.toValidAssetId(prop.value.content, '_VLS_refs' as any);
-			options.templateRefNames.set(prop.value.content, refName);
-			return refName;
+			return prop.value.content;
 		}
 	}
 }
diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
index ebff979bca..643136d385 100644
--- a/packages/language-core/lib/codegen/template/index.ts
+++ b/packages/language-core/lib/codegen/template/index.ts
@@ -32,6 +32,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	if (options.propsAssignName) {
 		ctx.addLocalVariable(options.propsAssignName);
 	}
+	ctx.addLocalVariable('$refs');
 
 	yield* generatePreResolveComponents();
 
@@ -56,14 +57,12 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 	return ctx;
 
 	function* generateRefs(): Generator<Code> {
-		for (const [, validId] of options.templateRefNames) {
-			yield `let ${validId}${newLine}`;
+		yield `const __VLS_refs = {${newLine}`;
+		for (const [name, varName] of options.templateRefNames) {
+			yield `'${name}': ${varName}!,${newLine}`;
 		}
-		yield `declare const __VLS_refs: __VLS_PickRefsExpose<{${newLine}`;
-		for (const [name, validId] of options.templateRefNames) {
-			yield `'${name}': NonNullable<typeof ${validId}>,${newLine}`;
-		}
-		yield `}>${endOfLine}`;
+		yield `}${endOfLine}`;
+		yield `declare var $refs: typeof __VLS_refs${endOfLine}`;
 	}
 
 	function* generateSlotsType(): Generator<Code> {
diff --git a/packages/tsc/tests/typecheck.spec.ts b/packages/tsc/tests/typecheck.spec.ts
index fae766986a..a7cc585449 100644
--- a/packages/tsc/tests/typecheck.spec.ts
+++ b/packages/tsc/tests/typecheck.spec.ts
@@ -9,8 +9,8 @@ describe(`vue-tsc`, () => {
 			getTscOutput('stable')
 		).toMatchInlineSnapshot(`
 			[
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
 			  "test-workspace/tsc/failureFixtures/directives/main.vue(12,2): error TS2578: Unused '@ts-expect-error' directive.",
 			]
 		`);
@@ -21,8 +21,8 @@ describe(`vue-tsc`, () => {
 			getTscOutput('next')
 		).toMatchInlineSnapshot(`
 			[
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
-			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type '{ $refs: {}; $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; exist: typeof exist; }'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(4,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
+			  "test-workspace/tsc/failureFixtures/directives/main.vue(9,6): error TS2339: Property 'notExist' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { exist: typeof exist; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'.",
 			  "test-workspace/tsc/failureFixtures/directives/main.vue(12,2): error TS2578: Unused '@ts-expect-error' directive.",
 			  "test-workspace/tsc/passedFixtures/#3373/tsconfig.json(4,3): error TS5102: Option 'importsNotUsedAsValues' has been removed. Please remove it from your configuration.
 			  Use 'verbatimModuleSyntax' instead.",
diff --git a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue
index 7f871fac60..0eb980af65 100644
--- a/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue
+++ b/test-workspace/tsc/passedFixtures/vue3.5/templateRef/main.vue
@@ -6,5 +6,5 @@ import { exactType } from '../../shared';
 <template>
 	<TemplateRef ref="templateRef" />
 
-	{{ exactType($refs.templateRef?.$refs.generic?.foo, {} as 1 | undefined) }}
+	{{ exactType($refs.templateRef.$refs.generic.foo, {} as 1) }}
 </template>