From cf44cc161c2e8effe98a3dd6587d6813486e9656 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Fri, 31 Mar 2023 22:22:38 -0400
Subject: [PATCH 01/16] Fix issue of casting a Node[] to a Node in
 rewrite_props in Component

---
 src/compiler/compile/Component.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index e87cf6218af2..c09c1d96dfd0 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1015,7 +1015,7 @@ export default class Component {
 		let scope = instance_scope;
 
 		walk(this.ast.instance.content, {
-			enter(node: Node) {
+			enter(node: Node, parent: Node, key, index) {
 				if (regex_contains_term_function.test(node.type)) {
 					return this.skip();
 				}
@@ -1138,11 +1138,16 @@ export default class Component {
 							}
 						}
 
-						this.replace(b`
-							${node.declarations.length ? node : null}
-							${ props.length > 0 && b`let { ${props} } = $$props;`}
-							${inserts}
-						` as any);
+            if (inserts.length > 0) {
+              parent[key].splice(index + 1, 0, ...inserts);
+            }
+            if (props.length > 0) {
+              parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
+            }
+            if (node.declarations.length == 0) {
+              parent[key].splice(index, 1);
+            }
+
 						return this.skip();
 					}
 				}

From a98ece855ab35448ef95678d9d798289329a99fc Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Fri, 31 Mar 2023 23:23:33 -0400
Subject: [PATCH 02/16] Add tests for var in blocks

---
 test/js/samples/var-in-block/expected.js      | 46 +++++++++++++++++++
 test/js/samples/var-in-block/input.svelte     |  7 +++
 test/runtime/samples/var-in-block/_config.js  |  3 ++
 test/runtime/samples/var-in-block/main.svelte |  9 ++++
 .../samples/var-in-for-in-loop/_config.js     |  3 ++
 .../samples/var-in-for-in-loop/main.svelte    | 10 ++++
 .../samples/var-in-for-loop/_config.js        |  3 ++
 .../samples/var-in-for-loop/main.svelte       | 10 ++++
 .../samples/var-in-function/_config.js        | 11 +++++
 .../samples/var-in-function/main.svelte       | 10 ++++
 .../samples/var-in-if-block/_config.js        | 13 ++++++
 .../samples/var-in-if-block/main.svelte       | 15 ++++++
 .../samples/var-in-while-block/_config.js     |  7 +++
 .../samples/var-in-while-block/main.svelte    |  9 ++++
 14 files changed, 156 insertions(+)
 create mode 100644 test/js/samples/var-in-block/expected.js
 create mode 100644 test/js/samples/var-in-block/input.svelte
 create mode 100644 test/runtime/samples/var-in-block/_config.js
 create mode 100644 test/runtime/samples/var-in-block/main.svelte
 create mode 100644 test/runtime/samples/var-in-for-in-loop/_config.js
 create mode 100644 test/runtime/samples/var-in-for-in-loop/main.svelte
 create mode 100644 test/runtime/samples/var-in-for-loop/_config.js
 create mode 100644 test/runtime/samples/var-in-for-loop/main.svelte
 create mode 100644 test/runtime/samples/var-in-function/_config.js
 create mode 100644 test/runtime/samples/var-in-function/main.svelte
 create mode 100644 test/runtime/samples/var-in-if-block/_config.js
 create mode 100644 test/runtime/samples/var-in-if-block/main.svelte
 create mode 100644 test/runtime/samples/var-in-while-block/_config.js
 create mode 100644 test/runtime/samples/var-in-while-block/main.svelte

diff --git a/test/js/samples/var-in-block/expected.js b/test/js/samples/var-in-block/expected.js
new file mode 100644
index 000000000000..53e0e43530ae
--- /dev/null
+++ b/test/js/samples/var-in-block/expected.js
@@ -0,0 +1,46 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let t;
+
+	return {
+		c() {
+			t = text(/*one*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, t, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(t);
+		}
+	};
+}
+
+function instance($$self) {
+	{
+		var one = 1;
+	}
+
+	return [one];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/var-in-block/input.svelte b/test/js/samples/var-in-block/input.svelte
new file mode 100644
index 000000000000..5aa45f0aa4ec
--- /dev/null
+++ b/test/js/samples/var-in-block/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	{
+		var one = 1;
+	}
+</script>
+
+{one}
diff --git a/test/runtime/samples/var-in-block/_config.js b/test/runtime/samples/var-in-block/_config.js
new file mode 100644
index 000000000000..69523b27b45e
--- /dev/null
+++ b/test/runtime/samples/var-in-block/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>12345</p><p>67890</p>'
+}
diff --git a/test/runtime/samples/var-in-block/main.svelte b/test/runtime/samples/var-in-block/main.svelte
new file mode 100644
index 000000000000..ee3ca575a9aa
--- /dev/null
+++ b/test/runtime/samples/var-in-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  {
+    var foo = 12345;
+    var bar = 67890;
+  }
+</script>
+
+<p>{foo}</p>
+<p>{bar}</p>
diff --git a/test/runtime/samples/var-in-for-in-loop/_config.js b/test/runtime/samples/var-in-for-in-loop/_config.js
new file mode 100644
index 000000000000..65ef73b63ff7
--- /dev/null
+++ b/test/runtime/samples/var-in-for-in-loop/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>0</p><p>2</p><p>4</p><p>6</p><p>8</p>'
+}
diff --git a/test/runtime/samples/var-in-for-in-loop/main.svelte b/test/runtime/samples/var-in-for-in-loop/main.svelte
new file mode 100644
index 000000000000..8cc83d9305c7
--- /dev/null
+++ b/test/runtime/samples/var-in-for-in-loop/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  var array = [0, 1, 2, 3, 4];
+  for (var i in array) {
+    array[i] = 2 * i;
+  }
+</script>
+
+{#each array as a}
+  <p>{a}</p>
+{/each}
diff --git a/test/runtime/samples/var-in-for-loop/_config.js b/test/runtime/samples/var-in-for-loop/_config.js
new file mode 100644
index 000000000000..ba7a73f4efe2
--- /dev/null
+++ b/test/runtime/samples/var-in-for-loop/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>0</p><p>1</p><p>2</p><p>3</p><p>4</p>'
+}
diff --git a/test/runtime/samples/var-in-for-loop/main.svelte b/test/runtime/samples/var-in-for-loop/main.svelte
new file mode 100644
index 000000000000..acf38eecaefe
--- /dev/null
+++ b/test/runtime/samples/var-in-for-loop/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  var array = [];
+  for (var i = 0; i < 5; i++) {
+    array[i] = i;
+  }
+</script>
+
+{#each array as a}
+  <p>{a}</p>
+{/each}
diff --git a/test/runtime/samples/var-in-function/_config.js b/test/runtime/samples/var-in-function/_config.js
new file mode 100644
index 000000000000..f5c4a16cc046
--- /dev/null
+++ b/test/runtime/samples/var-in-function/_config.js
@@ -0,0 +1,11 @@
+export default {
+  html: '<button></button><p>0</p>',
+
+  async test({ assert, target, window }) {
+    const button = target.querySelector('button');
+    const clickEvent = new window.MouseEvent('click');
+
+    await button.dispatchEvent(clickEvent);
+    assert.htmlEqual(target.innerHTML, '<button></button><p>4</p>');
+  }
+};
diff --git a/test/runtime/samples/var-in-function/main.svelte b/test/runtime/samples/var-in-function/main.svelte
new file mode 100644
index 000000000000..1dab3ff6b607
--- /dev/null
+++ b/test/runtime/samples/var-in-function/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  let foo = 0;
+  function handleClick() {
+    var random = 4;
+    foo += random;
+  }
+</script>
+
+<button on:click={handleClick} />
+<p>{foo}</p>
diff --git a/test/runtime/samples/var-in-if-block/_config.js b/test/runtime/samples/var-in-if-block/_config.js
new file mode 100644
index 000000000000..ac343ee414ce
--- /dev/null
+++ b/test/runtime/samples/var-in-if-block/_config.js
@@ -0,0 +1,13 @@
+export default {
+  props: {
+    condition: true 
+  },
+
+  html: '<p>true</p><p>123</p><p>0</p>',
+
+  test({ assert, component, target }) {
+    component.condition = false;
+
+    assert.htmlEqual(target.innerHTML, '<p>false</p><p>123</p><p>0</p>');
+  }
+};
diff --git a/test/runtime/samples/var-in-if-block/main.svelte b/test/runtime/samples/var-in-if-block/main.svelte
new file mode 100644
index 000000000000..fe65066444d6
--- /dev/null
+++ b/test/runtime/samples/var-in-if-block/main.svelte
@@ -0,0 +1,15 @@
+<script>
+  export var condition;
+
+  if (condition) {
+    var b = 123;
+    var c = 0;
+  } else {
+    var b = 0;
+    var c = 456;
+  }
+</script>
+
+<p>{condition}</p>
+<p>{b}</p>
+<p>{c}</p>
diff --git a/test/runtime/samples/var-in-while-block/_config.js b/test/runtime/samples/var-in-while-block/_config.js
new file mode 100644
index 000000000000..1ba2c535ec4a
--- /dev/null
+++ b/test/runtime/samples/var-in-while-block/_config.js
@@ -0,0 +1,7 @@
+export default {
+  props: {
+    a: 13 
+  },
+
+  html: '<p>169</p>'
+};
diff --git a/test/runtime/samples/var-in-while-block/main.svelte b/test/runtime/samples/var-in-while-block/main.svelte
new file mode 100644
index 000000000000..87a231c37c16
--- /dev/null
+++ b/test/runtime/samples/var-in-while-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let a;
+  let i = 0; 
+  while (++i <= a) {
+    var b = a * i;
+  }
+</script>
+
+<p>{b}</p>

From d13416590c8ac871f162eb8bf27ad34eed26f915 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Fri, 31 Mar 2023 23:23:46 -0400
Subject: [PATCH 03/16] Add tests for variable declarations in switch
 statements without brackets

---
 .../expected.js                               | 20 +++++++++++++++
 .../input.svelte                              |  7 ++++++
 .../_config.js                                | 16 ++++++++++++
 .../main.svelte                               | 25 +++++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 test/js/samples/variable-declaration-in-switch-case/expected.js
 create mode 100644 test/js/samples/variable-declaration-in-switch-case/input.svelte
 create mode 100644 test/runtime/samples/variable-declarations-in-switch-no-brackets/_config.js
 create mode 100644 test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte

diff --git a/test/js/samples/variable-declaration-in-switch-case/expected.js b/test/js/samples/variable-declaration-in-switch-case/expected.js
new file mode 100644
index 000000000000..71fbab6a3468
--- /dev/null
+++ b/test/js/samples/variable-declaration-in-switch-case/expected.js
@@ -0,0 +1,20 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self) {
+	switch (1) {
+		case 1:
+			const value = Math.random();
+	}
+
+	return [];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/variable-declaration-in-switch-case/input.svelte b/test/js/samples/variable-declaration-in-switch-case/input.svelte
new file mode 100644
index 000000000000..bef86a4967c0
--- /dev/null
+++ b/test/js/samples/variable-declaration-in-switch-case/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	switch (1) {
+		case 1:
+			const value = Math.random();
+	}
+</script>
+
diff --git a/test/runtime/samples/variable-declarations-in-switch-no-brackets/_config.js b/test/runtime/samples/variable-declarations-in-switch-no-brackets/_config.js
new file mode 100644
index 000000000000..66462fd9fd8b
--- /dev/null
+++ b/test/runtime/samples/variable-declarations-in-switch-no-brackets/_config.js
@@ -0,0 +1,16 @@
+export default {
+  props: {
+    q: 0 
+  },
+
+  html: '<p>3</p>',
+
+  test({ assert, component, target }) {
+    component.q = 1;
+    assert.htmlEqual(target.innerHTML, '<p>4</p>');
+    component.q = 2;
+    assert.htmlEqual(target.innerHTML, '<p>5</p>');
+    component.q = 3;
+    assert.htmlEqual(target.innerHTML, '<p>6</p>');
+  }
+};
diff --git a/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte b/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte
new file mode 100644
index 000000000000..04ed9d827d17
--- /dev/null
+++ b/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let q;
+	let p = 3;
+	$: {
+    switch (q) {
+		  case 1:
+		    let value = Math.floor(Math.random()); // gives 0
+			  p = 4 + value;
+			  break;
+		  case 2:
+		    var number = Math.ceil(Math.random()); // gives 1
+		    p = 4 + number;
+		    break;
+		  case 3:
+		    const foo = 2; // gives 2
+		    p = 4 + foo;
+        break;
+    }
+  }
+</script>
+
+<p>
+	{p}
+</p>
+

From 1945d506f4af8c3996e2d3f0ac60352aebb3dd89 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Fri, 31 Mar 2023 23:33:31 -0400
Subject: [PATCH 04/16] Fix eslint erros in _config.js

---
 test/runtime/samples/var-in-block/_config.js       | 2 +-
 test/runtime/samples/var-in-for-in-loop/_config.js | 2 +-
 test/runtime/samples/var-in-for-loop/_config.js    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/runtime/samples/var-in-block/_config.js b/test/runtime/samples/var-in-block/_config.js
index 69523b27b45e..273d728e2762 100644
--- a/test/runtime/samples/var-in-block/_config.js
+++ b/test/runtime/samples/var-in-block/_config.js
@@ -1,3 +1,3 @@
 export default {
   html: '<p>12345</p><p>67890</p>'
-}
+};
diff --git a/test/runtime/samples/var-in-for-in-loop/_config.js b/test/runtime/samples/var-in-for-in-loop/_config.js
index 65ef73b63ff7..fc3f1797c417 100644
--- a/test/runtime/samples/var-in-for-in-loop/_config.js
+++ b/test/runtime/samples/var-in-for-in-loop/_config.js
@@ -1,3 +1,3 @@
 export default {
   html: '<p>0</p><p>2</p><p>4</p><p>6</p><p>8</p>'
-}
+};
diff --git a/test/runtime/samples/var-in-for-loop/_config.js b/test/runtime/samples/var-in-for-loop/_config.js
index ba7a73f4efe2..fd54cb4f85dd 100644
--- a/test/runtime/samples/var-in-for-loop/_config.js
+++ b/test/runtime/samples/var-in-for-loop/_config.js
@@ -1,3 +1,3 @@
 export default {
   html: '<p>0</p><p>1</p><p>2</p><p>3</p><p>4</p>'
-}
+};

From c7102b3073f6961b9540cec8b81cd2bf56fbe3e3 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Sat, 1 Apr 2023 00:01:34 -0400
Subject: [PATCH 05/16] Formatting

---
 src/compiler/compile/Component.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index c09c1d96dfd0..10cd1d5e91f8 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1138,15 +1138,15 @@ export default class Component {
 							}
 						}
 
-            if (inserts.length > 0) {
-              parent[key].splice(index + 1, 0, ...inserts);
-            }
-            if (props.length > 0) {
-              parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
-            }
-            if (node.declarations.length == 0) {
-              parent[key].splice(index, 1);
-            }
+						if (inserts.length > 0) {
+							parent[key].splice(index + 1, 0, ...inserts);
+						}
+						if (props.length > 0) {
+							parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
+						}
+						if (node.declarations.length == 0) {
+							parent[key].splice(index, 1);
+						}
 
 						return this.skip();
 					}

From 7352b2d9021aad1436687051cfd794ca11fbacc1 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 24 Apr 2023 09:26:40 -0400
Subject: [PATCH 06/16] Add tests where variable declarations might not be in a
 statement array

---
 .../samples/var-in-do-while-block/_config.js  |  7 ++++
 .../samples/var-in-do-while-block/main.svelte |  9 +++++
 .../var-store-in-do-while-loop/_config.js     |  3 ++
 .../var-store-in-do-while-loop/main.svelte    | 15 +++++++
 .../samples/var-store-in-for-loop/_config.js  |  3 ++
 .../samples/var-store-in-for-loop/main.svelte | 16 ++++++++
 .../samples/var-store-in-if/_config.js        |  3 ++
 .../samples/var-store-in-if/main.svelte       | 20 ++++++++++
 .../var-store-in-labeled-statement/_config.js |  3 ++
 .../main.svelte                               | 15 +++++++
 .../var-store-in-switch-statement/_config.js  |  3 ++
 .../var-store-in-switch-statement/main.svelte | 39 +++++++++++++++++++
 .../var-store-in-while-loop/_config.js        |  3 ++
 .../var-store-in-while-loop/main.svelte       | 16 ++++++++
 14 files changed, 155 insertions(+)
 create mode 100644 test/runtime/samples/var-in-do-while-block/_config.js
 create mode 100644 test/runtime/samples/var-in-do-while-block/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-do-while-loop/_config.js
 create mode 100644 test/runtime/samples/var-store-in-do-while-loop/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-for-loop/_config.js
 create mode 100644 test/runtime/samples/var-store-in-for-loop/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-if/_config.js
 create mode 100644 test/runtime/samples/var-store-in-if/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-labeled-statement/_config.js
 create mode 100644 test/runtime/samples/var-store-in-labeled-statement/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-switch-statement/_config.js
 create mode 100644 test/runtime/samples/var-store-in-switch-statement/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-while-loop/_config.js
 create mode 100644 test/runtime/samples/var-store-in-while-loop/main.svelte

diff --git a/test/runtime/samples/var-in-do-while-block/_config.js b/test/runtime/samples/var-in-do-while-block/_config.js
new file mode 100644
index 000000000000..1ba2c535ec4a
--- /dev/null
+++ b/test/runtime/samples/var-in-do-while-block/_config.js
@@ -0,0 +1,7 @@
+export default {
+  props: {
+    a: 13 
+  },
+
+  html: '<p>169</p>'
+};
diff --git a/test/runtime/samples/var-in-do-while-block/main.svelte b/test/runtime/samples/var-in-do-while-block/main.svelte
new file mode 100644
index 000000000000..cb4d4ff93e2c
--- /dev/null
+++ b/test/runtime/samples/var-in-do-while-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let a;
+  let i = 0; 
+  do {
+    var b = a * i;
+  } while (++i <= a);
+</script>
+
+<p>{b}</p>
diff --git a/test/runtime/samples/var-store-in-do-while-loop/_config.js b/test/runtime/samples/var-store-in-do-while-loop/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-do-while-loop/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-do-while-loop/main.svelte b/test/runtime/samples/var-store-in-do-while-loop/main.svelte
new file mode 100644
index 000000000000..22eb676fc11f
--- /dev/null
+++ b/test/runtime/samples/var-store-in-do-while-loop/main.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { writable } from "svelte/store";
+
+  do {
+    var a = writable(3); 
+  } while (false);
+
+  do var b = writable(5); while (false);
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
diff --git a/test/runtime/samples/var-store-in-for-loop/_config.js b/test/runtime/samples/var-store-in-for-loop/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-loop/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-for-loop/main.svelte b/test/runtime/samples/var-store-in-for-loop/main.svelte
new file mode 100644
index 000000000000..21b8beed200d
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-loop/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { writable } from "svelte/store";
+
+  for (let i = 0; i < 1; i += 1) {
+    var a = writable(3);
+  }
+
+  for (let i = 0; i < 1; i += 1)
+    var b = writable(5);
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
diff --git a/test/runtime/samples/var-store-in-if/_config.js b/test/runtime/samples/var-store-in-if/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-if/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-if/main.svelte b/test/runtime/samples/var-store-in-if/main.svelte
new file mode 100644
index 000000000000..e652968a7935
--- /dev/null
+++ b/test/runtime/samples/var-store-in-if/main.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { writable } from "svelte/store";
+
+  if (true) {
+    var a = writable(3);
+  } else {
+		var a = writable(4);
+	}
+
+  if (false)
+    var b = writable(2);
+	else
+		var b = writable(5);
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
diff --git a/test/runtime/samples/var-store-in-labeled-statement/_config.js b/test/runtime/samples/var-store-in-labeled-statement/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-labeled-statement/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-labeled-statement/main.svelte b/test/runtime/samples/var-store-in-labeled-statement/main.svelte
new file mode 100644
index 000000000000..1e28bea21d05
--- /dev/null
+++ b/test/runtime/samples/var-store-in-labeled-statement/main.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { writable } from "svelte/store";
+
+	yes: {
+	  var a = writable(3);
+  }
+
+  no: var b = writable(5);
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
diff --git a/test/runtime/samples/var-store-in-switch-statement/_config.js b/test/runtime/samples/var-store-in-switch-statement/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-switch-statement/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-switch-statement/main.svelte b/test/runtime/samples/var-store-in-switch-statement/main.svelte
new file mode 100644
index 000000000000..951b118fc779
--- /dev/null
+++ b/test/runtime/samples/var-store-in-switch-statement/main.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { writable } from "svelte/store";
+	
+	const val1 = 1;
+	const val2 = 10;
+
+	switch (val1) {
+		case 1:
+			var a = writable(3);
+			break;
+		case 2:
+			var a = writable(4);
+			break;
+		default:
+			var a = writable(5);
+			break;
+	}
+
+	switch (val2) {
+		case 1: {
+			var b = writable(3);
+			break;
+		}
+		case 2: {
+			var b = writable(4);
+			break;
+		}
+		default: {
+			var b = writable(5);
+			break;
+		}
+	}
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
diff --git a/test/runtime/samples/var-store-in-while-loop/_config.js b/test/runtime/samples/var-store-in-while-loop/_config.js
new file mode 100644
index 000000000000..59ee78d297e4
--- /dev/null
+++ b/test/runtime/samples/var-store-in-while-loop/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-in-while-loop/main.svelte b/test/runtime/samples/var-store-in-while-loop/main.svelte
new file mode 100644
index 000000000000..9621d4c68476
--- /dev/null
+++ b/test/runtime/samples/var-store-in-while-loop/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { writable } from "svelte/store";
+
+  while (!a) {
+    var a = writable(3);
+  }
+
+  while (!b)
+    var b = writable(5);
+
+  var x = $a;
+  var y = $b;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>

From 915b8b194e9dd4d570fdf28a882d11c4ee0bf457 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 24 Apr 2023 10:39:32 -0400
Subject: [PATCH 07/16] Fix issue where var declarations aren't in a block

---
 src/compiler/compile/Component.ts | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 10cd1d5e91f8..26fc30316088 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -25,7 +25,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Statement } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b } from 'code-red';
@@ -38,6 +38,7 @@ import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
 import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 import check_enable_sourcemap from './utils/check_enable_sourcemap';
+import { flatten } from '../utils/flatten';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -1138,14 +1139,23 @@ export default class Component {
 							}
 						}
 
-						if (inserts.length > 0) {
-							parent[key].splice(index + 1, 0, ...inserts);
-						}
-						if (props.length > 0) {
-							parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
-						}
-						if (node.declarations.length == 0) {
-							parent[key].splice(index, 1);
+						if (Array.isArray(parent[key])) {
+							if (inserts.length > 0) {
+								inserts.reverse().forEach((insert) => {
+									parent[key].splice(index + 1, 0, ...insert);
+								});
+							}
+							if (props.length > 0) {
+								parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
+						  }
+							if (node.declarations.length == 0) {
+								parent[key].splice(index, 1);
+							}
+						} else if (inserts.length > 0) {
+							this.replace({
+								type: 'BlockStatement',
+								body: flatten([node, inserts]) as Statement[]
+							});
 						}
 
 						return this.skip();

From cf03a66da81a516f66c2cae049dcd45f0d3f1acd Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 24 Apr 2023 12:51:53 -0400
Subject: [PATCH 08/16] Add tests to deal with variable declarations in for
 loop initialization

---
 .../var-store-in-for-init-destructured/_config.js    |  3 +++
 .../var-store-in-for-init-destructured/main.svelte   | 10 ++++++++++
 .../runtime/samples/var-store-in-for-init/_config.js |  3 +++
 .../samples/var-store-in-for-init/main.svelte        | 12 ++++++++++++
 4 files changed, 28 insertions(+)
 create mode 100644 test/runtime/samples/var-store-in-for-init-destructured/_config.js
 create mode 100644 test/runtime/samples/var-store-in-for-init-destructured/main.svelte
 create mode 100644 test/runtime/samples/var-store-in-for-init/_config.js
 create mode 100644 test/runtime/samples/var-store-in-for-init/main.svelte

diff --git a/test/runtime/samples/var-store-in-for-init-destructured/_config.js b/test/runtime/samples/var-store-in-for-init-destructured/_config.js
new file mode 100644
index 000000000000..37249c14d31c
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-init-destructured/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>33</p><p>32</p>'
+};
diff --git a/test/runtime/samples/var-store-in-for-init-destructured/main.svelte b/test/runtime/samples/var-store-in-for-init-destructured/main.svelte
new file mode 100644
index 000000000000..4992bab8315b
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-init-destructured/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { writable } from "svelte/store";
+  for (var { a = writable(4), z: b } = { z: writable(3) }; $a * $b < 1000; ) {
+    a.update(c => c + 1);
+    b.update(b => b + 1);
+  }
+</script>
+
+<p>{$a}</p>
+<p>{$b}</p>
diff --git a/test/runtime/samples/var-store-in-for-init/_config.js b/test/runtime/samples/var-store-in-for-init/_config.js
new file mode 100644
index 000000000000..fd54cb4f85dd
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-init/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>0</p><p>1</p><p>2</p><p>3</p><p>4</p>'
+};
diff --git a/test/runtime/samples/var-store-in-for-init/main.svelte b/test/runtime/samples/var-store-in-for-init/main.svelte
new file mode 100644
index 000000000000..a85764978d57
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-init/main.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { writable } from "svelte/store";
+  const array = [];
+  for (var i = writable(0); $i < 5; ) {
+    array.push($i);
+    i.update(n => n + 1);
+  }
+</script>
+
+{#each array as a}
+  <p>{a}</p>
+{/each}

From 04d20a0a3a8c88151aa9755c0bd235b3cdf120f6 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 24 Apr 2023 13:14:15 -0400
Subject: [PATCH 09/16] Fix issue of having var store declarations in for loop
 initialization

---
 src/compiler/compile/Component.ts             | 38 ++++++++++++++++---
 .../expected.js                               |  8 +++-
 .../expected.js                               |  8 +++-
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 26fc30316088..fdf05b94c4c6 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -25,10 +25,10 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Statement } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Statement, VariableDeclarator } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
-import { print, b } from 'code-red';
+import { print, b, x } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
 import { apply_preprocessor_sourcemap } from '../utils/mapped_code';
 import Element from './nodes/Element';
@@ -1053,6 +1053,16 @@ export default class Component {
 							});
 						}
 
+						function create_insert_vars(name: string, insert: Node[]): VariableDeclarator {
+							return {
+								type: 'VariableDeclarator',
+								id: component.get_unique_name(`_inserts_for_${name}`),
+								init: x`(() => { 
+									${insert}
+								})()`
+							};
+            }
+
 						// transform
 						// ```
 						// export let { x, y = 123 } = OBJ, z = 456
@@ -1065,13 +1075,21 @@ export default class Component {
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
 							if (declarator.id.type !== 'Identifier') {
+                const variable_insert_declarators = [];
+
 								function get_new_name(local) {
 									const variable = component.var_lookup.get(local.name);
+                  const is_props = variable.export_name && variable.writable;
 									if (variable.subscribable) {
-										inserts.push(get_insert(variable));
+                    const insert = get_insert(variable);
+                    if (is_props) {
+										  inserts.push(insert);
+                    } else {
+                      variable_insert_declarators.push(create_insert_vars(local.name, insert));
+                    }
 									}
 
-									if (variable.export_name && variable.writable) {
+									if (is_props) {
 										const alias_name = component.get_unique_name(local.name);
 										add_new_props({ type: 'Identifier', name: variable.export_name }, local, alias_name);
 										return alias_name;
@@ -1125,6 +1143,9 @@ export default class Component {
 								}
 
 								rename_identifiers(declarator.id);
+
+                node.declarations.splice(index + 1, 0, ...variable_insert_declarators);
+                index += variable_insert_declarators.length;
 							} else {
 								const { name } = declarator.id;
 								const variable = component.var_lookup.get(name);
@@ -1134,7 +1155,14 @@ export default class Component {
 									node.declarations.splice(index--, 1);
 								}
 								if (variable.subscribable && (is_props || declarator.init)) {
-									inserts.push(get_insert(variable));
+									const insert = get_insert(variable);
+									if (declarator.init && !is_props) {
+										node.declarations.splice(index + 1, 0, create_insert_vars(name, insert));
+
+                    index += 1;
+									} else {
+										inserts.push(insert);
+									}
 								}
 							}
 						}
diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js
index 2742481aef10..785245efba86 100644
--- a/test/js/samples/component-store-access-invalidate/expected.js
+++ b/test/js/samples/component-store-access-invalidate/expected.js
@@ -41,8 +41,12 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let $foo;
-	const foo = writable(0);
-	component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
+
+	const foo = writable(0),
+		_inserts_for_foo = (() => {
+			component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
+		})();
+
 	return [$foo, foo];
 }
 
diff --git a/test/js/samples/component-store-reassign-invalidate/expected.js b/test/js/samples/component-store-reassign-invalidate/expected.js
index 9047316cef92..cb3fbc114b94 100644
--- a/test/js/samples/component-store-reassign-invalidate/expected.js
+++ b/test/js/samples/component-store-reassign-invalidate/expected.js
@@ -65,8 +65,12 @@ function instance($$self, $$props, $$invalidate) {
 		$$subscribe_foo = () => ($$unsubscribe_foo(), $$unsubscribe_foo = subscribe(foo, $$value => $$invalidate(1, $foo = $$value)), foo);
 
 	$$self.$$.on_destroy.push(() => $$unsubscribe_foo());
-	let foo = writable(0);
-	$$subscribe_foo();
+
+	let foo = writable(0),
+		_inserts_for_foo = (() => {
+			$$subscribe_foo();
+		})();
+
 	const click_handler = () => $$subscribe_foo($$invalidate(0, foo = writable(0)));
 	return [foo, $foo, click_handler];
 }

From 879cb1c4baef704c2215c2260cb19ff5e29aca57 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Mon, 24 Apr 2023 23:13:36 -0400
Subject: [PATCH 10/16] Simplify solution for var declaration not in block
 array

---
 src/compiler/compile/Component.ts             | 56 +++++++------------
 .../expected.js                               |  8 +--
 .../expected.js                               |  8 +--
 3 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index fdf05b94c4c6..b9c1806e6e96 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -25,7 +25,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, Statement, VariableDeclarator } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b, x } from 'code-red';
@@ -38,7 +38,6 @@ import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
 import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 import check_enable_sourcemap from './utils/check_enable_sourcemap';
-import { flatten } from '../utils/flatten';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -1053,16 +1052,6 @@ export default class Component {
 							});
 						}
 
-						function create_insert_vars(name: string, insert: Node[]): VariableDeclarator {
-							return {
-								type: 'VariableDeclarator',
-								id: component.get_unique_name(`_inserts_for_${name}`),
-								init: x`(() => { 
-									${insert}
-								})()`
-							};
-            }
-
 						// transform
 						// ```
 						// export let { x, y = 123 } = OBJ, z = 456
@@ -1075,21 +1064,13 @@ export default class Component {
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
 							if (declarator.id.type !== 'Identifier') {
-                const variable_insert_declarators = [];
-
 								function get_new_name(local) {
 									const variable = component.var_lookup.get(local.name);
-                  const is_props = variable.export_name && variable.writable;
 									if (variable.subscribable) {
-                    const insert = get_insert(variable);
-                    if (is_props) {
-										  inserts.push(insert);
-                    } else {
-                      variable_insert_declarators.push(create_insert_vars(local.name, insert));
-                    }
+										inserts.push(get_insert(variable));
 									}
 
-									if (is_props) {
+									if (variable.export_name && variable.writable) {
 										const alias_name = component.get_unique_name(local.name);
 										add_new_props({ type: 'Identifier', name: variable.export_name }, local, alias_name);
 										return alias_name;
@@ -1143,9 +1124,6 @@ export default class Component {
 								}
 
 								rename_identifiers(declarator.id);
-
-                node.declarations.splice(index + 1, 0, ...variable_insert_declarators);
-                index += variable_insert_declarators.length;
 							} else {
 								const { name } = declarator.id;
 								const variable = component.var_lookup.get(name);
@@ -1155,34 +1133,40 @@ export default class Component {
 									node.declarations.splice(index--, 1);
 								}
 								if (variable.subscribable && (is_props || declarator.init)) {
-									const insert = get_insert(variable);
-									if (declarator.init && !is_props) {
-										node.declarations.splice(index + 1, 0, create_insert_vars(name, insert));
-
-                    index += 1;
-									} else {
-										inserts.push(insert);
-									}
+									inserts.push(get_insert(variable));
 								}
 							}
 						}
 
+						// Assertion that if we see props, it must be at the top level
+						if (props.length > 0 && !(parent.type === 'Program' && Array.isArray(parent[key]))) {
+							throw new Error('export is not at the top level');
+						}
+
 						if (Array.isArray(parent[key])) {
+							// If the variable declaration is part of some block, that is, among an array of statements
+							// then, we add the inserts and the $$props declaration after declaration
 							if (inserts.length > 0) {
 								inserts.reverse().forEach((insert) => {
 									parent[key].splice(index + 1, 0, ...insert);
 								});
 							}
 							if (props.length > 0) {
+								// b`` might return a Node array, but the $$props declaration will be flattened later
 								parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
 						  }
 							if (node.declarations.length == 0) {
 								parent[key].splice(index, 1);
 							}
 						} else if (inserts.length > 0) {
-							this.replace({
-								type: 'BlockStatement',
-								body: flatten([node, inserts]) as Statement[]
+							// If the variable declaration is not part of a block, we instead get a dummy variable setting
+							// calling an immediately-invoked function expression containing all the subscription functions
+              node.declarations.push({
+								type: 'VariableDeclarator',
+								id: component.get_unique_name('$$subscription_inserts', scope),
+								init: x`(() => { 
+									${inserts}
+								})()`
 							});
 						}
 
diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js
index 785245efba86..2742481aef10 100644
--- a/test/js/samples/component-store-access-invalidate/expected.js
+++ b/test/js/samples/component-store-access-invalidate/expected.js
@@ -41,12 +41,8 @@ function create_fragment(ctx) {
 
 function instance($$self, $$props, $$invalidate) {
 	let $foo;
-
-	const foo = writable(0),
-		_inserts_for_foo = (() => {
-			component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
-		})();
-
+	const foo = writable(0);
+	component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
 	return [$foo, foo];
 }
 
diff --git a/test/js/samples/component-store-reassign-invalidate/expected.js b/test/js/samples/component-store-reassign-invalidate/expected.js
index cb3fbc114b94..9047316cef92 100644
--- a/test/js/samples/component-store-reassign-invalidate/expected.js
+++ b/test/js/samples/component-store-reassign-invalidate/expected.js
@@ -65,12 +65,8 @@ function instance($$self, $$props, $$invalidate) {
 		$$subscribe_foo = () => ($$unsubscribe_foo(), $$unsubscribe_foo = subscribe(foo, $$value => $$invalidate(1, $foo = $$value)), foo);
 
 	$$self.$$.on_destroy.push(() => $$unsubscribe_foo());
-
-	let foo = writable(0),
-		_inserts_for_foo = (() => {
-			$$subscribe_foo();
-		})();
-
+	let foo = writable(0);
+	$$subscribe_foo();
 	const click_handler = () => $$subscribe_foo($$invalidate(0, foo = writable(0)));
 	return [foo, $foo, click_handler];
 }

From b56050b60a3d2c6766b602933d8c61248d061bf6 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 08:47:46 -0400
Subject: [PATCH 11/16] Add more destructured var store tests

---
 .../_config.js                                |  3 +++
 .../main.svelte                               | 19 ++++++++++++++++++
 .../var-store-destructured-in-if/_config.js   |  3 +++
 .../var-store-destructured-in-if/main.svelte  | 20 +++++++++++++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 test/runtime/samples/var-store-destructured-in-do-while/_config.js
 create mode 100644 test/runtime/samples/var-store-destructured-in-do-while/main.svelte
 create mode 100644 test/runtime/samples/var-store-destructured-in-if/_config.js
 create mode 100644 test/runtime/samples/var-store-destructured-in-if/main.svelte

diff --git a/test/runtime/samples/var-store-destructured-in-do-while/_config.js b/test/runtime/samples/var-store-destructured-in-do-while/_config.js
new file mode 100644
index 000000000000..2f1e16b80c69
--- /dev/null
+++ b/test/runtime/samples/var-store-destructured-in-do-while/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p><p>4</p>'
+};
diff --git a/test/runtime/samples/var-store-destructured-in-do-while/main.svelte b/test/runtime/samples/var-store-destructured-in-do-while/main.svelte
new file mode 100644
index 000000000000..95dd38cffedc
--- /dev/null
+++ b/test/runtime/samples/var-store-destructured-in-do-while/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { writable } from "svelte/store";
+
+	var thing = { a: writable(3), m: writable(4), n: writable(5) };
+
+  do {
+    var { a } = thing;
+  } while (false);
+
+  do var { m: c, n: b } = thing; while (false);
+
+	var x = $a;
+	var y = $b;
+	var z = $c;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
+<p>{z}</p>
diff --git a/test/runtime/samples/var-store-destructured-in-if/_config.js b/test/runtime/samples/var-store-destructured-in-if/_config.js
new file mode 100644
index 000000000000..2f1e16b80c69
--- /dev/null
+++ b/test/runtime/samples/var-store-destructured-in-if/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>5</p><p>4</p>'
+};
diff --git a/test/runtime/samples/var-store-destructured-in-if/main.svelte b/test/runtime/samples/var-store-destructured-in-if/main.svelte
new file mode 100644
index 000000000000..ab7d6d110e47
--- /dev/null
+++ b/test/runtime/samples/var-store-destructured-in-if/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { writable } from "svelte/store";
+
+	var thing = [writable(3), writable(4), writable(5)];
+
+	if (true) {
+		var [a] = thing;
+	}
+
+	if (true) 
+		var [,c,b] = thing;
+
+	var x = $a;
+	var y = $b;
+	var z = $c;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
+<p>{z}</p>

From 67663a56c625ca359d4922ef1c2e1846d4ed13c8 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 08:48:24 -0400
Subject: [PATCH 12/16] Clean up code - rename functions and var names

---
 src/compiler/compile/Component.ts        | 22 +++++++++++-----------
 src/compiler/compile/render_dom/index.ts |  2 +-
 src/compiler/compile/render_ssr/index.ts |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index b9c1806e6e96..459277a6688f 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1007,7 +1007,7 @@ export default class Component {
 		return null;
 	}
 
-	rewrite_props(get_insert: (variable: Var) => Node[]) {
+	rewrite_props_and_add_subscriptions(get_subscriptions: (variable: Var) => Node[]) {
 		if (!this.ast.instance) return;
 
 		const component = this;
@@ -1031,7 +1031,7 @@ export default class Component {
 				if (node.type === 'VariableDeclaration') {
 					// NOTE: `var` does not follow block scoping
 					if (node.kind === 'var' || scope === instance_scope) {
-						const inserts = [];
+						const subscriptions = [];
 						const props = [];
 
 						function add_new_props(exported, local, default_value) {
@@ -1067,7 +1067,7 @@ export default class Component {
 								function get_new_name(local) {
 									const variable = component.var_lookup.get(local.name);
 									if (variable.subscribable) {
-										inserts.push(get_insert(variable));
+										subscriptions.push(get_subscriptions(variable));
 									}
 
 									if (variable.export_name && variable.writable) {
@@ -1133,7 +1133,7 @@ export default class Component {
 									node.declarations.splice(index--, 1);
 								}
 								if (variable.subscribable && (is_props || declarator.init)) {
-									inserts.push(get_insert(variable));
+									subscriptions.push(get_subscriptions(variable));
 								}
 							}
 						}
@@ -1145,10 +1145,10 @@ export default class Component {
 
 						if (Array.isArray(parent[key])) {
 							// If the variable declaration is part of some block, that is, among an array of statements
-							// then, we add the inserts and the $$props declaration after declaration
-							if (inserts.length > 0) {
-								inserts.reverse().forEach((insert) => {
-									parent[key].splice(index + 1, 0, ...insert);
+							// then, we add the subscriptions and the $$props declaration after declaration
+							if (subscriptions.length > 0) {
+								subscriptions.reverse().forEach((subscription) => {
+									parent[key].splice(index + 1, 0, ...subscription);
 								});
 							}
 							if (props.length > 0) {
@@ -1158,14 +1158,14 @@ export default class Component {
 							if (node.declarations.length == 0) {
 								parent[key].splice(index, 1);
 							}
-						} else if (inserts.length > 0) {
+						} else if (subscriptions.length > 0) {
 							// If the variable declaration is not part of a block, we instead get a dummy variable setting
 							// calling an immediately-invoked function expression containing all the subscription functions
               node.declarations.push({
 								type: 'VariableDeclarator',
-								id: component.get_unique_name('$$subscription_inserts', scope),
+								id: component.get_unique_name('$$subscriptions', scope),
 								init: x`(() => { 
-									${inserts}
+									${subscriptions}
 								})()`
 							});
 						}
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 58b7a8317b29..ad550d0862ca 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -306,7 +306,7 @@ export default function dom(
 			}
 		});
 
-		component.rewrite_props(({ name, reassigned, export_name }) => {
+		component.rewrite_props_and_add_subscriptions(({ name, reassigned, export_name }) => {
 			const value = `$${name}`;
 			const i = renderer.context_lookup.get(`$${name}`).index;
 
diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
index e256ba78fbf0..46acca7f2f1b 100644
--- a/src/compiler/compile/render_ssr/index.ts
+++ b/src/compiler/compile/render_ssr/index.ts
@@ -123,7 +123,7 @@ export default function ssr(
 		});
 	}
 
-	component.rewrite_props(({ name, reassigned }) => {
+	component.rewrite_props_and_add_subscriptions(({ name, reassigned }) => {
 		const value = `$${name}`;
 
 		let insert = reassigned

From ffd22ae4f63d7b1d41ba0b4429c045f3f07830b3 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Tue, 25 Apr 2023 13:47:17 -0400
Subject: [PATCH 13/16] Formatting

---
 .../samples/var-store-in-if/main.svelte       |  8 +--
 .../main.svelte                               |  4 +-
 .../var-store-in-switch-statement/main.svelte | 56 +++++++++----------
 .../main.svelte                               | 30 +++++-----
 4 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/test/runtime/samples/var-store-in-if/main.svelte b/test/runtime/samples/var-store-in-if/main.svelte
index e652968a7935..cb68a87d0aeb 100644
--- a/test/runtime/samples/var-store-in-if/main.svelte
+++ b/test/runtime/samples/var-store-in-if/main.svelte
@@ -4,13 +4,13 @@
   if (true) {
     var a = writable(3);
   } else {
-		var a = writable(4);
-	}
+    var a = writable(4);
+  }
 
   if (false)
     var b = writable(2);
-	else
-		var b = writable(5);
+  else
+    var b = writable(5);
 
   var x = $a;
   var y = $b;
diff --git a/test/runtime/samples/var-store-in-labeled-statement/main.svelte b/test/runtime/samples/var-store-in-labeled-statement/main.svelte
index 1e28bea21d05..38d0858bf6dd 100644
--- a/test/runtime/samples/var-store-in-labeled-statement/main.svelte
+++ b/test/runtime/samples/var-store-in-labeled-statement/main.svelte
@@ -1,8 +1,8 @@
 <script>
   import { writable } from "svelte/store";
 
-	yes: {
-	  var a = writable(3);
+  yes: {
+    var a = writable(3);
   }
 
   no: var b = writable(5);
diff --git a/test/runtime/samples/var-store-in-switch-statement/main.svelte b/test/runtime/samples/var-store-in-switch-statement/main.svelte
index 951b118fc779..15e3d15b5ebe 100644
--- a/test/runtime/samples/var-store-in-switch-statement/main.svelte
+++ b/test/runtime/samples/var-store-in-switch-statement/main.svelte
@@ -1,35 +1,35 @@
 <script>
   import { writable } from "svelte/store";
-	
-	const val1 = 1;
-	const val2 = 10;
+  
+  const val1 = 1;
+  const val2 = 10;
 
-	switch (val1) {
-		case 1:
-			var a = writable(3);
-			break;
-		case 2:
-			var a = writable(4);
-			break;
-		default:
-			var a = writable(5);
-			break;
-	}
+  switch (val1) {
+    case 1:
+      var a = writable(3);
+      break;
+    case 2:
+      var a = writable(4);
+      break;
+    default:
+      var a = writable(5);
+      break;
+  }
 
-	switch (val2) {
-		case 1: {
-			var b = writable(3);
-			break;
-		}
-		case 2: {
-			var b = writable(4);
-			break;
-		}
-		default: {
-			var b = writable(5);
-			break;
-		}
-	}
+  switch (val2) {
+    case 1: {
+      var b = writable(3);
+      break;
+    }
+    case 2: {
+      var b = writable(4);
+      break;
+    }
+    default: {
+      var b = writable(5);
+      break;
+    }
+  }
 
   var x = $a;
   var y = $b;
diff --git a/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte b/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte
index 04ed9d827d17..213f75a11e11 100644
--- a/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte
+++ b/test/runtime/samples/variable-declarations-in-switch-no-brackets/main.svelte
@@ -1,25 +1,25 @@
 <script>
-	export let q;
-	let p = 3;
-	$: {
+  export let q;
+  let p = 3;
+  $: {
     switch (q) {
-		  case 1:
-		    let value = Math.floor(Math.random()); // gives 0
-			  p = 4 + value;
-			  break;
-		  case 2:
-		    var number = Math.ceil(Math.random()); // gives 1
-		    p = 4 + number;
-		    break;
-		  case 3:
-		    const foo = 2; // gives 2
-		    p = 4 + foo;
+      case 1:
+        let value = Math.floor(Math.random()); // gives 0
+        p = 4 + value;
+        break;
+      case 2:
+        var number = Math.ceil(Math.random()); // gives 1
+        p = 4 + number;
+        break;
+      case 3:
+        const foo = 2; // gives 2
+        p = 4 + foo;
         break;
     }
   }
 </script>
 
 <p>
-	{p}
+  {p}
 </p>
 

From 3651b6ace8be0b7ddfa0f0bcfa4a88e88e873504 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Sat, 29 Apr 2023 11:01:32 -0400
Subject: [PATCH 14/16] Another test testing scopes and vars without statement
 list

---
 .../var-store-different-brackets/_config.js   |  3 +++
 .../var-store-different-brackets/main.svelte  | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/runtime/samples/var-store-different-brackets/_config.js
 create mode 100644 test/runtime/samples/var-store-different-brackets/main.svelte

diff --git a/test/runtime/samples/var-store-different-brackets/_config.js b/test/runtime/samples/var-store-different-brackets/_config.js
new file mode 100644
index 000000000000..3cd7653ac29b
--- /dev/null
+++ b/test/runtime/samples/var-store-different-brackets/_config.js
@@ -0,0 +1,3 @@
+export default {
+  html: '<p>3</p><p>4</p><p>5</p>'
+};
diff --git a/test/runtime/samples/var-store-different-brackets/main.svelte b/test/runtime/samples/var-store-different-brackets/main.svelte
new file mode 100644
index 000000000000..beb2e8af7c17
--- /dev/null
+++ b/test/runtime/samples/var-store-different-brackets/main.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { writable } from "svelte/store";
+
+	{
+		{
+			if (true) var a = writable(3);
+		}
+
+		if (true) var b = writable(4);
+	}
+
+	{
+		if (true)
+			var c = writable(5);
+	}
+
+  var x = $a;
+  var y = $b;
+  var z = $c;
+</script>
+
+<p>{x}</p>
+<p>{y}</p>
+<p>{z}</p>

From defb2f1a3d69157dc7427f0accf982db26589d53 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Thu, 4 May 2023 22:30:28 -0400
Subject: [PATCH 15/16] Deal with for-of loops for var store autosubscriptions

---
 src/compiler/compile/Component.ts             | 52 ++++++++++++++-----
 .../var-store-in-for-of-loop/_config.js       | 12 +++++
 .../var-store-in-for-of-loop/main.svelte      | 25 +++++++++
 3 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 test/runtime/samples/var-store-in-for-of-loop/_config.js
 create mode 100644 test/runtime/samples/var-store-in-for-of-loop/main.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 598eb3e587af..e46b573fd3b9 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -38,6 +38,7 @@ import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
 import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 import check_enable_sourcemap from './utils/check_enable_sourcemap';
+import { flatten } from '../utils/flatten';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -1136,7 +1137,9 @@ export default class Component {
 									add_new_props({ type: 'Identifier', name: variable.export_name }, declarator.id, declarator.init);
 									node.declarations.splice(index--, 1);
 								}
-								if (variable.subscribable && (is_props || declarator.init)) {
+
+								const for_in_of_loop_init = key === 'left' && (parent.type === 'ForInStatement' || parent.type === 'ForOfStatement');
+								if (variable.subscribable && (is_props || declarator.init || for_in_of_loop_init)) {
 									subscriptions.push(get_subscriptions(variable));
 								}
 							}
@@ -1147,31 +1150,52 @@ export default class Component {
 							throw new Error('export is not at the top level');
 						}
 
+						const flattened_subscriptions = flatten(subscriptions);
+						// parent.type === 'Program' or 'BlockStatement' or 'SwitchCase' and key === 'body'
 						if (Array.isArray(parent[key])) {
 							// If the variable declaration is part of some block, that is, among an array of statements
 							// then, we add the subscriptions and the $$props declaration after declaration
 							if (subscriptions.length > 0) {
-								subscriptions.reverse().forEach((subscription) => {
-									parent[key].splice(index + 1, 0, ...subscription);
-								});
+								parent[key].splice(index + 1, 0, ...flattened_subscriptions);
 							}
 							if (props.length > 0) {
 								// b`` might return a Node array, but the $$props declaration will be flattened later
 								parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
-						  }
+							}
 							if (node.declarations.length == 0) {
 								parent[key].splice(index, 1);
 							}
 						} else if (subscriptions.length > 0) {
-							// If the variable declaration is not part of a block, we instead get a dummy variable setting
-							// calling an immediately-invoked function expression containing all the subscription functions
-              node.declarations.push({
-								type: 'VariableDeclarator',
-								id: component.get_unique_name('$$subscriptions', scope),
-								init: x`(() => { 
-									${subscriptions}
-								})()`
-							});
+							// if it is for (var x in array) or for (var x of array)
+							// we are transforming from:
+							// 
+							// for (var x of array) {
+							//   // body
+							// }
+							// to:
+							// for (var x of array) {
+							//   // subscription inserts
+							//   // body
+							// }
+							if (key === 'left' && (parent.type === 'ForInStatement' || parent.type === 'ForOfStatement')) {
+								if (parent.body.type !== 'BlockStatement') {
+									parent.body = {
+										type: 'BlockStatement',
+										body: [parent.body]
+									};
+								}
+								parent.body.body.unshift(...flattened_subscriptions);
+							} else {
+								// If the variable declaration is not part of a block, we instead get a dummy variable setting
+								// calling an immediately-invoked function expression containing all the subscription functions
+								node.declarations.push({
+									type: 'VariableDeclarator',
+									id: component.get_unique_name('$$subscriptions', scope),
+									init: x`(() => { 
+										${flattened_subscriptions}
+									})()`
+								});
+							}
 						}
 
 						return this.skip();
diff --git a/test/runtime/samples/var-store-in-for-of-loop/_config.js b/test/runtime/samples/var-store-in-for-of-loop/_config.js
new file mode 100644
index 000000000000..7d09ed566165
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-of-loop/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+	  <p>362880</p>
+	  <p>9</p>
+		<p>45</p>
+		<p>1</p>
+		<p>object</p>
+		<p>function</p>
+		<p>object</p>
+		<p>function</p>
+	`
+};
diff --git a/test/runtime/samples/var-store-in-for-of-loop/main.svelte b/test/runtime/samples/var-store-in-for-of-loop/main.svelte
new file mode 100644
index 000000000000..0898fe7c2426
--- /dev/null
+++ b/test/runtime/samples/var-store-in-for-of-loop/main.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { readable } from "svelte/store";
+  const array = [];
+  for (let i = 1; i < 10; i++) {
+    array.push(readable(i));
+  }
+
+  let ten_factorial = 1;
+  for (var read of array) {
+    ten_factorial *= $read;
+  }
+
+  let sum_to_ten = 0;
+  for (var read2 of array.reverse())
+    sum_to_ten += $read2; 
+</script>
+
+<p>{ten_factorial}</p>
+<p>{$read}</p>
+<p>{sum_to_ten}</p>
+<p>{$read2}</p>
+<p>{typeof read}</p>
+<p>{typeof read.subscribe}</p>
+<p>{typeof read2}</p>
+<p>{typeof read2.subscribe}</p>

From 8cb890964040fce8974afcbeeb691f92cde6a6d8 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <nguyen.tran1072e@gmail.com>
Date: Fri, 5 May 2023 00:14:12 -0400
Subject: [PATCH 16/16] Prettify JS output + comments

---
 src/compiler/compile/Component.ts | 47 ++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index e46b573fd3b9..d2649a7d5980 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -1163,21 +1163,26 @@ export default class Component {
 								parent[key].splice(index + 1, 0, b`let { ${props} } = $$props;`);
 							}
 							if (node.declarations.length == 0) {
+								// After extracting all the prop names, remove if there are no declarations left
 								parent[key].splice(index, 1);
 							}
 						} else if (subscriptions.length > 0) {
-							// if it is for (var x in array) or for (var x of array)
-							// we are transforming from:
-							// 
-							// for (var x of array) {
-							//   // body
-							// }
-							// to:
-							// for (var x of array) {
-							//   // subscription inserts
-							//   // body
-							// }
+							
 							if (key === 'left' && (parent.type === 'ForInStatement' || parent.type === 'ForOfStatement')) {
+								// if it is for (var x in array) or for (var x of array)
+								// we are transforming from:
+								// 
+								// for (var x of array) {
+								//	 // body
+								// } 
+								// or
+								// for (var x of array)
+								//	 // statement
+								// to:
+								// for (var x of array) {
+								//	 // subscription inserts
+								//	 // body or statement
+								// }
 								if (parent.body.type !== 'BlockStatement') {
 									parent.body = {
 										type: 'BlockStatement',
@@ -1185,9 +1190,10 @@ export default class Component {
 									};
 								}
 								parent.body.body.unshift(...flattened_subscriptions);
-							} else {
-								// If the variable declaration is not part of a block, we instead get a dummy variable setting
+							} else if (key === 'init' && parent.type === 'ForStatement') {
+								// If the variable declaration is like for (var i = writable(1); ...), we instead get a dummy variable setting
 								// calling an immediately-invoked function expression containing all the subscription functions
+								// e.g. for (var i = writable(1), $$subscriptions = (() => { subscription inserts })(); ...)
 								node.declarations.push({
 									type: 'VariableDeclarator',
 									id: component.get_unique_name('$$subscriptions', scope),
@@ -1195,6 +1201,21 @@ export default class Component {
 										${flattened_subscriptions}
 									})()`
 								});
+							} else {
+								// Variable declaration is a statement without a parent list of statements, so we transform it by
+								// putting the var in a block statement and call subscription inserts
+								// e.g.
+								// if (condition)
+								//	 var a = writable(1);
+								// turns into
+								// if (condition) {
+								//	 var a = writable(1);
+								//	 // subscription inserts here
+								// }
+								parent[key] = {
+									type: 'BlockStatement',
+									body: [parent[key], ...flattened_subscriptions]
+								};
 							}
 						}