fix(language-core): prevent the generation of generics in JS (#4836)

Co-authored-by: zhiyuanzmj <260480378@qq.com> Co-authored-by: Johnson Chu <johnsoncodehk@gmail.com>
vuejs · Oct 24, 2024 · 564aa84 · 564aa84
1 parent ae25b12
commit 564aa84
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 1 deletion.
diff --git a/packages/language-core/lib/codegen/globalTypes.ts b/packages/language-core/lib/codegen/globalTypes.ts
@@ -87,6 +87,7 @@ export function generateGlobalTypes(lib: string, target: number, strictTemplates
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
 		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
 	>>;
+	type __VLS_UseTemplateRef<T> = Readonly<import('${lib}').ShallowRef<T | null>>;
 
 	function __VLS_getVForSourceType(source: number): [number, number, number][];
 	function __VLS_getVForSourceType(source: string): [string, number, number][];

diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -211,8 +211,12 @@ function* generateSetupFunction(
 			]);
 		}
 	}
+	const isTs = options.lang !== 'js' && options.lang !== 'jsx';
 	for (const { define } of scriptSetupRanges.templateRefs) {
-		if (define?.arg) {
+		if (!define?.arg) {
+			continue;
+		}
+		if (isTs) {
 			setupCodeModifies.push([
 				[
 					`<__VLS_TemplateResult['refs'][`,
@@ -223,6 +227,21 @@ function* generateSetupFunction(
 				define.exp.end
 			]);
 		}
+		else {
+			setupCodeModifies.push([
+				[`(`],
+				define.start,
+				define.start
+			], [
+				[
+					` as __VLS_UseTemplateRef<__VLS_TemplateResult['refs'][`,
+					generateSfcBlockSection(scriptSetup, define.arg.start, define.arg.end, codeFeatures.navigation),
+					`]>)`
+				],
+				define.end,
+				define.end
+			]);
+		}
 	}
 	setupCodeModifies = setupCodeModifies.sort((a, b) => a[1] - b[1]);
 

diff --git a/test-workspace/tsc/passedFixtures/vue2/tsconfig.json b/test-workspace/tsc/passedFixtures/vue2/tsconfig.json
@@ -27,6 +27,7 @@
 		"../vue3/#4777",
 		"../vue3/#4820",
 		"../vue3/#4822",
+		"../vue3/#4826",
 		"../vue3/#4828",
 		"../vue3/components",
 		"../vue3/defineEmits",

diff --git a/test-workspace/tsc/passedFixtures/vue3.4/tsconfig.json b/test-workspace/tsc/passedFixtures/vue3.4/tsconfig.json
@@ -12,6 +12,7 @@
 		"../vue3/#3820",
 		"../vue3/#4777",
 		"../vue3/#4820",
+		"../vue3/#4826",
 		"../vue3/#4828",
 		"../vue3/rootEl",
 		"../vue3/templateRef",

diff --git a/test-workspace/tsc/passedFixtures/vue3/#4826/child.vue b/test-workspace/tsc/passedFixtures/vue3/#4826/child.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { useTemplateRef } from 'vue';
+
+const a = useTemplateRef('a');
+defineExpose({ a });
+</script>
+
+<template>
+	<a ref="a" />
+</template>
diff --git a/test-workspace/tsc/passedFixtures/vue3/#4826/main.vue b/test-workspace/tsc/passedFixtures/vue3/#4826/main.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { exactType } from '../../shared';
+import Child from './child.vue';
+
+const child = useTemplateRef('child');
+exactType(child.value?.a, {} as HTMLAnchorElement | null | undefined);
+</script>
+
+<template>
+	<Child ref="child" />
+</template>