fix: dealt with var declarations in bracket issue

packages/svelte/src/compiler/compile/Component.js

@@ -18,7 +18,7 @@ import fuzzymatch from '../utils/fuzzymatch.js';
 import get_object from './utils/get_object.js';
 import add_to_set from './utils/add_to_set.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
-import { print, b } from 'code-red';
+import { print, b, x } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords.js';
 import { apply_preprocessor_sourcemap } from '../utils/mapped_code.js';
 import { clone } from '../utils/clone.js';
@@ -1124,7 +1124,9 @@ export default class Component {
 				if (node.type === 'VariableDeclaration') {
 					// NOTE: `var` does not follow block scoping
 					if (node.kind === 'var' || scope === instance_scope) {
+						/** @type {import('estree').Node[][]} */
 						const inserts = [];
+						/** @type {import('estree').AssignmentProperty[]} */
 						const props = [];
 
 						/**
@@ -1155,8 +1157,7 @@ export default class Component {
 						// ```
 						// into
 						// ```
-						// let { x: x$, y: y$ = 123 } = OBJ;
-						// let { x = x$, y = y$, z = 456 } = $$props;
+						// let { x: x$, y: y$ = 123 } = OBJ, { x = x$, y = y$, z = 456 } = $$props;
 						// ```
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
@@ -1251,15 +1252,28 @@ export default class Component {
 								}
 							}
 						}
-						this.replace(
-							/** @type {any} */ (
-								b`
-							${node.declarations.length ? node : null}
-							${props.length > 0 && b`let { ${props} } = $$props;`}
-							${inserts}
-						`
-							)
-						);
+
+						if (props.length > 0) {
+							node.declarations.push({
+								type: 'VariableDeclarator',
+								id: {
+									type: 'ObjectPattern',
+									properties: props
+								},
+								init: x`$$props`
+							});
+						}
+
+						if (inserts.length > 0) {
+							node.declarations.push({
+								type: 'VariableDeclarator',
+								id: component.get_unique_name('$$subscriptions'),
+								init: x`(() => { 
+									${inserts}
+								})()`
+							});
+						}
+
 						return this.skip();
 					}
 				}

packages/svelte/test/js/samples/capture-inject-state/expected.js

@@ -109,9 +109,13 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$.on_destroy.push(() => $$unsubscribe_prop());
 	let { $$slots: slots = {}, $$scope } = $$props;
 	validate_slots('Component', slots, []);
-	let { prop } = $$props;
-	validate_store(prop, 'prop');
-	$$subscribe_prop();
+
+	let { prop } = $$props,
+		$$subscriptions = (() => {
+			validate_store(prop, 'prop');
+			$$subscribe_prop();
+		})();
+
 	let { alias: realName } = $$props;
 	let local;
 	let shadowedByModule;

packages/svelte/test/js/samples/component-store-access-invalidate/expected.js

@@ -43,8 +43,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),
+		$$subscriptions = (() => {
+			component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
+		})();
+
 	return [$foo, foo];
 }
 

packages/svelte/test/js/samples/component-store-reassign-invalidate/expected.js

@@ -68,8 +68,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),
+		$$subscriptions = (() => {
+			$$subscribe_foo();
+		})();
+
 	const click_handler = () => $$subscribe_foo($$invalidate(0, foo = writable(0)));
 	return [foo, $foo, click_handler];
 }

packages/svelte/test/js/samples/var-in-block/expected.js

@@ -0,0 +1,48 @@
+/* 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;

packages/svelte/test/js/samples/var-in-block/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	{
+		var one = 1;
+	}
+</script>
+
+{one}

packages/svelte/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;

packages/svelte/test/js/samples/variable-declaration-in-switch-case/input.svelte

@@ -0,0 +1,6 @@
+<script>
+	switch (1) {
+		case 1:
+			const value = Math.random();
+	}
+</script>

packages/svelte/test/runtime/samples/var-in-block/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<p>12345</p><p>67890</p>'
+};

packages/svelte/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>

packages/svelte/test/runtime/samples/var-in-do-while-block/_config.js

@@ -0,0 +1,7 @@
+export default {
+	props: {
+		a: 13
+	},
+
+	html: '<p>169</p>'
+};

packages/svelte/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>

packages/svelte/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>'
+};

packages/svelte/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}

packages/svelte/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>'
+};

packages/svelte/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}

packages/svelte/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>');
+	}
+};

packages/svelte/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>

packages/svelte/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>');
+	}
+};

packages/svelte/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>

packages/svelte/test/runtime/samples/var-in-while-block/_config.js

@@ -0,0 +1,7 @@
+export default {
+	props: {
+		a: 13
+	},
+
+	html: '<p>169</p>'
+};

packages/svelte/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>

packages/svelte/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>'
+};

packages/svelte/test/runtime/samples/var-store-destructured-in-do-while/main.svelte

@@ -0,0 +1,20 @@
+<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>

packages/svelte/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>'
+};

packages/svelte/test/runtime/samples/var-store-destructured-in-if/main.svelte

@@ -0,0 +1,19 @@
+<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>

packages/svelte/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>'
+};