shift injected declarations to the top (#5837)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix location of automatically declared reactive variables ([#5749](https://github.com/sveltejs/svelte/issues/5749))
 * Warn when using `className` or `htmlFor` attributes ([#5777](https://github.com/sveltejs/svelte/issues/5777))
 * Fix checkbox `bind:group` in nested `{#each}` contexts ([#5811](https://github.com/sveltejs/svelte/issues/5811))
 * Add graphics roles as known ARIA roles ([#5822](https://github.com/sveltejs/svelte/pull/5822))

src/compiler/compile/render_dom/index.ts

@@ -414,6 +414,8 @@ export default function dom(
 
 		body.push(b`
 			function ${definition}(${args}) {
+				${injected.map(name => b`let ${name};`)}
+
 				${rest}
 
 				${reactive_store_declarations}
@@ -440,8 +442,6 @@ export default function dom(
 
 				${inject_state && b`$$self.$inject_state = ${inject_state};`}
 
-				${injected.map(name => b`let ${name};`)}
-
 				${/* before reactive declarations */ props_inject}
 
 				${reactive_declarations.length > 0 && b`

src/compiler/compile/render_ssr/index.ts

@@ -101,8 +101,6 @@ export default function ssr(
 
 				${reactive_store_values}
 
-				${injected.map(name => b`let ${name};`)}
-
 				${reactive_declarations}
 
 				$$rendered = ${literal};
@@ -113,13 +111,12 @@ export default function ssr(
 		: b`
 			${reactive_store_values}
 
-			${injected.map(name => b`let ${name};`)}
-
 			${reactive_declarations}
 
 			return ${literal};`;
 
 	const blocks = [
+		...injected.map(name => b`let ${name};`),
 		rest,
 		slots,
 		...reactive_stores.map(({ name }) => {

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

@@ -98,6 +98,8 @@ let shadowedByModule;
 const priv = "priv";
 
 function instance($$self, $$props, $$invalidate) {
+	let computed;
+
 	let $prop,
 		$$unsubscribe_prop = noop,
 		$$subscribe_prop = () => ($$unsubscribe_prop(), $$unsubscribe_prop = subscribe(prop, $$value => $$invalidate(2, $prop = $$value)), prop);
@@ -145,8 +147,6 @@ function instance($$self, $$props, $$invalidate) {
 		if ("computed" in $$props) computed = $$props.computed;
 	};
 
-	let computed;
-
 	if ($$props && "$$inject" in $$props) {
 		$$self.$inject_state($$props.$$inject);
 	}

test/js/samples/unreferenced-state-not-invalidated/expected.js

@@ -39,6 +39,8 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let x;
+	let y;
 	let a = 1, b = 2, c = 3;
 
 	onMount(() => {
@@ -54,9 +56,6 @@ function instance($$self, $$props, $$invalidate) {
 		return () => clearInterval(interval);
 	});
 
-	let x;
-	let y;
-
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*b*/ 2) {
 			$: $$invalidate(0, y = b * 2);

test/runtime/samples/reactive-values-uninitialised/_config.js

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

test/runtime/samples/reactive-values-uninitialised/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let a = 'a';
+	let b;
+	$: c = a;
+
+	function foo() {
+		b = c === 'a' ? 'b' : 'c';
+	}
+	foo();
+</script>
+
+<p>{a}{b}{c}</p>