fix: fixed <slot> error when strictTemplates enabled

close #2726, close #2723
vuejs · Apr 27, 2023 · 242dda6 · 242dda6
1 parent 4c70880
commit 242dda6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- fix: avoid `<component>` type checking with string literal assignment ([#2725](https://github.com/johnsoncodehk/volar/issues/2725))
+- fix: `<slot>` reporting false positive error when `strictTemplates` enabled ([#2726](https://github.com/johnsoncodehk/volar/issues/2726)) ([#2723](https://github.com/johnsoncodehk/volar/issues/2723))
+
 ## 1.6.0 (2023/4/27)
 
 - feat(doctor): show warning for TS 4.9 ([#2190](https://github.com/johnsoncodehk/volar/issues/2190))

diff --git a/packages/vue-language-core/src/generators/template.ts b/packages/vue-language-core/src/generators/template.ts
@@ -256,7 +256,10 @@ export function generate(
 		const tagOffsetsMap: Record<string, number[]> = {};
 
 		walkElementNodes(templateAst, node => {
-			if (node.tag === 'component' || node.tag === 'Component') {
+			if (node.tag === 'slot') {
+				// ignore
+			}
+			else if (node.tag === 'component' || node.tag === 'Component') {
 				for (const prop of node.props) {
 					if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'is' && prop.value) {
 						const tag = prop.value.content;
@@ -512,7 +515,10 @@ export function generate(
 
 		let dynamicTagExp: CompilerDOM.ExpressionNode | undefined;
 
-		if (tag === 'component' || tag === 'Component') {
+		if (tag === 'slot') {
+			tagOffsets.length = 0;
+		}
+		else if (tag === 'component' || tag === 'Component') {
 			tagOffsets.length = 0;
 			for (const prop of node.props) {
 				if (prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'is' && prop.value) {
@@ -529,7 +535,10 @@ export function generate(
 			}
 		}
 
-		if (isNamespacedTag) {
+		if (node.tag === 'slot') {
+			codes.push(`const ${componentVar} = {} as any;\n`);
+		}
+		else if (isNamespacedTag) {
 			codes.push(
 				`const ${componentVar} = (await import('./__VLS_types.d.ts')).asFunctionalComponent(${tag}, new ${tag}({`,
 				...createPropsCode(node, props, 'slots'),
@@ -606,7 +615,7 @@ export function generate(
 			`, ...(await import('./__VLS_types.d.ts')).functionalComponentArgsRest(${componentVar}));\n`,
 		);
 
-		if (tag !== 'template') {
+		if (tag !== 'template' && tag !== 'slot') {
 			componentCtxVar = `__VLS_${elementIndex++}`;
 			codes.push(`const ${componentCtxVar} = (await import('./__VLS_types.d.ts')).pickFunctionalComponentCtx(${componentVar}, ${componentInstanceVar})!;\n`);
 			parentEl = node;
@@ -670,8 +679,8 @@ export function generate(
 		if (componentCtxVar) {
 			generateEvents(node, componentVar, componentInstanceVar, componentCtxVar);
 		}
-		if (tagOffsets.length) {
-			generateSlot(node, tagOffsets[0]);
+		if (node.tag === 'slot') {
+			generateSlot(node, startTagOffset);
 		}
 
 		if (inScope) {
@@ -1477,9 +1486,6 @@ export function generate(
 
 	function generateSlot(node: CompilerDOM.ElementNode, startTagOffset: number) {
 
-		if (node.tag !== 'slot')
-			return;
-
 		const varSlot = `__VLS_${elementIndex++}`;
 		const slotNameExpNode = getSlotNameExpNode();
 

diff --git a/packages/vue-test-workspace/vue-tsc/#2726/main.vue b/packages/vue-test-workspace/vue-tsc/#2726/main.vue
@@ -0,0 +1,18 @@
+<!-- TODO: This problem only happens when strictTemplates is enabled -->
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const foo = ref('bar');
+
+defineSlots<{
+	default: {
+		foo: string;
+		buz: number;
+	};
+}>();
+</script>
+
+<template>
+	<slot v-bind="{ foo }" />
+</template>