fix: v-scope data type loss in inline handlers

close #1442
vuejs · Jun 13, 2022 · 0b1ec91 · 0b1ec91
1 parent 908fccf
commit 0b1ec91
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -551,9 +551,14 @@ export function generate(
 
 			const vScope = node.props.find(prop => prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === 'scope');
 			let inScope = false;
+			let originalConditionsNum = blockConditions.length;
 
 			if (vScope?.type === CompilerDOM.NodeTypes.DIRECTIVE && vScope.exp) {
-				tsCodeGen.addText(`if (__VLS_types.withScope(__VLS_ctx, `);
+
+				const scopeVar = `__VLS_${elementIndex++}`;
+				const condition = `__VLS_types.withScope(__VLS_ctx, ${scopeVar})`;
+
+				tsCodeGen.addText(`const ${scopeVar} = `);
 				writeCode(
 					vScope.exp.loc.source,
 					{
@@ -566,8 +571,10 @@ export function generate(
 						capabilities: capabilitiesSet.all,
 					},
 				);
+				tsCodeGen.addText(';\n');
+				tsCodeGen.addText(`if (${condition}) {\n`);
+				blockConditions.push(condition);
 				inScope = true;
-				tsCodeGen.addText(')) {\n');
 			}
 
 			writeDirectives(node);
@@ -587,6 +594,7 @@ export function generate(
 
 			if (inScope) {
 				tsCodeGen.addText('}\n');
+				blockConditions.length = originalConditionsNum;
 			}
 		}
 		tsCodeGen.addText(`}\n`);

diff --git a/packages/vue-code-gen/src/transform.ts b/packages/vue-code-gen/src/transform.ts
@@ -22,7 +22,8 @@ export function walkInterpolationFragment(
 			!!localVars[id.text] ||
 			// https://github.com/vuejs/core/blob/245230e135152900189f13a4281302de45fdcfaa/packages/compiler-core/src/transforms/transformExpression.ts#L342-L352
 			isGloballyWhitelisted(id.text) ||
-			id.text === 'require'
+			id.text === 'require' ||
+			id.text.startsWith('__VLS_')
 		) {
 			// localVarOffsets.push(localVar.getStart(ast));
 		}

diff --git a/packages/vue-test-workspace/tsconfig.json b/packages/vue-test-workspace/tsconfig.json
@@ -6,6 +6,7 @@
 		],
 		"strict": true,
 		"allowJs": true,
+		"checkJs": true,
 		"noUncheckedIndexedAccess": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,

diff --git a/packages/vue-test-workspace/typeChecks/petite-vue.html b/packages/vue-test-workspace/typeChecks/petite-vue.html
@@ -0,0 +1,23 @@
+<script type="module" lang="ts">
+import { exactType } from './shared';
+
+createApp({ foo: 1, exactType })
+
+const bar = 123;
+
+function createApp(_ = {}) { }
+</script>
+
+{{ exactType(foo, {} as number) }}
+{{
+	// @ts-expect-error
+	bar
+}}
+
+<div id="app" v-scope="{ open: true, elseOpen: true }">
+	{{ exactType(open, {} as boolean) }}
+	{{ exactType(elseOpen, {} as boolean) }}
+	<button @click="elseOpen = !elseOpen">toggle else</button>
+</div>
+
+<button @click="elseOpen = !elseOpen">toggle else</button>