Fix 6794: var scope should not extend outside the reactive block

Fixes: https://github.com/sveltejs/svelte/issues/6794

src/compiler/compile/Component.ts

@@ -1303,10 +1303,23 @@ export default class Component {
 				const module_dependencies = new Set<string>();
 
 				let scope = this.instance_scope;
+				const {declarations: outset_scope_decalarations} = this.instance_scope;
 				const map = this.instance_scope_map;
 
 				walk(node.body, {
 					enter(node: Node, parent) {
+						if (node.type === 'VariableDeclaration' && node.kind === 'var') {
+							const names = extract_names(node.declarations[0].id);
+							const is_var_in_outset = names.every((i: string) => {
+								if (outset_scope_decalarations.has(i)) {
+									const varNode = outset_scope_decalarations.get(i);
+									return varNode === node;
+								}
+							});
+							if (is_var_in_outset) {
+								return component.error(node as any, compiler_errors.invalid_var_declaration);
+							}
+						}
 						if (map.has(node)) {
 							scope = map.get(node);
 						}

src/compiler/compile/compiler_errors.ts

@@ -281,5 +281,9 @@ export default {
 	invalid_component_style_directive: {
 		code: 'invalid-component-style-directive',
 		message: 'Style directives cannot be used on components'
+	},
+	invalid_var_declaration: {
+		code: 'invalid_var_declaration',
+		message: '"var" scope should not extend outside the reactive block'
 	}
 };

test/validator/samples/invalid-reactive-var-1/errors.json

@@ -0,0 +1,7 @@
+[{
+	"code": "invalid_var_declaration",
+	"message": "\"var\" scope should not extend outside the reactive block",
+  "start": { "line": 14, "column": 7, "character": 204 },
+  "end": { "line": 14, "column": 16, "character": 213 },
+  "pos": 204
+}]

test/validator/samples/invalid-reactive-var-1/input.svelte

@@ -0,0 +1,20 @@
+<script>
+	var a;
+	var {a, b: [d, f], c}= {a: 1, b: [1, 2], c: 2};
+	$: {
+		function one() {
+			var a = 'a';
+			function two() {
+				var a = 'b';
+				return a;
+			}
+			return two();
+		}
+		a = one();
+		for (var i = 0; i<5; i ++ ) {
+			// Todo
+		}
+	}
+</script>
+
+<h1>Hello {a}</h1>

test/validator/samples/invalid-reactive-var-2/errors.json

@@ -0,0 +1,7 @@
+[{
+	"code": "invalid_var_declaration",
+	"message": "\"var\" scope should not extend outside the reactive block",
+  "start": { "line": 4, "column": 2, "character": 32 },
+  "end": { "line": 4, "column": 50, "character": 80 },
+  "pos": 32
+}]

test/validator/samples/invalid-reactive-var-2/input.svelte

@@ -0,0 +1,8 @@
+<script>
+	$: {
+		let f = 'f';
+		var {a, b: [c, d], e} = {a: 1, b: [2, 3], e: 4};
+	}
+</script>
+
+<h1>Hello</h1>

test/validator/samples/valid-reactive-vars/errors.json

@@ -0,0 +1 @@
+[]

test/validator/samples/valid-reactive-vars/input.svelte

@@ -0,0 +1,18 @@
+<script>
+  var name = 'name';
+  var c = 'cc';
+  let d = 'd';
+  $: {
+      function a() {
+        function b() {
+          var c = 'c';
+          return c;
+        }
+        return b;
+      }
+    let d = 'dd';
+    name = a()();
+  }
+</script>
+
+<h1>Hello {name}</h1>