WIP

packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js

@@ -6,7 +6,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.async(node, [() => Promise.resolve([])], (node, $$collection) => {
+	$.async(node, [], [() => Promise.resolve([])], (node, $$collection) => {
 		$.each(
 			node,
 			16,
@@ -17,7 +17,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
 
 				var text = $.text();
 
-				$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('This should never be reached')]);
+				$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.reject('This should never be reached')]);
 				$.append($$anchor, text);
 			},
 			($$anchor) => {
@@ -25,7 +25,7 @@ export default function Async_each_fallback_hoisting($$anchor) {
 
 				var text_1 = $.text();
 
-				$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve(4)]);
+				$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve(4)]);
 				$.append($$anchor, text_1);
 			}
 		);

packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js

@@ -3,19 +3,19 @@ import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/client';
 
 export default function Async_each_hoisting($$anchor) {
-	const first = Promise.resolve(1);
+	var first = Promise.resolve(1);
-	const second = Promise.resolve(2);
+	var second = Promise.resolve(2);
-	const third = Promise.resolve(3);
+	var third = Promise.resolve(3);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.async(node, [() => Promise.resolve([first, second, third])], (node, $$collection) => {
+	$.async(node, [], [() => Promise.resolve([first, second, third])], (node, $$collection) => {
 		$.each(node, 17, () => $.get($$collection), $.index, ($$anchor, item) => {
 			$.next();
 
 			var text = $.text();
 
-			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => $.get(item)]);
+			$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => $.get(item)]);
 			$.append($$anchor, text);
 		});
 	});

packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js

@@ -2,9 +2,9 @@ import 'svelte/internal/flags/async';
 import * as $ from 'svelte/internal/server';
 
 export default function Async_each_hoisting($$renderer) {
-	const first = Promise.resolve(1);
+	var first = Promise.resolve(1);
-	const second = Promise.resolve(2);
+	var second = Promise.resolve(2);
-	const third = Promise.resolve(3);
+	var third = Promise.resolve(3);
 
 	$$renderer.push(`<!--[-->`);
 

packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js

@@ -6,18 +6,18 @@ export default function Async_if_alternate_hoisting($$anchor) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.async(node, [() => Promise.resolve(false)], (node, $$condition) => {
+	$.async(node, [], [() => Promise.resolve(false)], (node, $$condition) => {
 		var consequent = ($$anchor) => {
 			var text = $.text();
 
-			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('no no no')]);
+			$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.reject('no no no')]);
 			$.append($$anchor, text);
 		};
 
 		var alternate = ($$anchor) => {
 			var text_1 = $.text();
 
-			$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve('yes yes yes')]);
+			$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve('yes yes yes')]);
 			$.append($$anchor, text_1);
 		};
 

packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js

@@ -6,18 +6,18 @@ export default function Async_if_hoisting($$anchor) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.async(node, [() => Promise.resolve(true)], (node, $$condition) => {
+	$.async(node, [], [() => Promise.resolve(true)], (node, $$condition) => {
 		var consequent = ($$anchor) => {
 			var text = $.text();
 
-			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.resolve('yes yes yes')]);
+			$.template_effect([], ($0) => $.set_text(text, $0), void 0, [() => Promise.resolve('yes yes yes')]);
 			$.append($$anchor, text);
 		};
 
 		var alternate = ($$anchor) => {
 			var text_1 = $.text();
 
-			$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.reject('no no no')]);
+			$.template_effect([], ($0) => $.set_text(text_1, $0), void 0, [() => Promise.reject('no no no')]);
 			$.append($$anchor, text_1);
 		};
 

packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js

@@ -5,19 +5,20 @@ import * as $ from 'svelte/internal/client';
 export default function Async_in_derived($$anchor, $$props) {
 	$.push($$props, true);
 
-	$.async_body($$anchor, async ($$anchor) => {
+	var yes1, yes2, no1, no2;
-		let yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))();
-		let yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))();
 
-		let no1 = $.derived(async () => {
+	var $$promises = $.run([
-			return await 1;
+		async () => yes1 = await $.async_derived(() => 1),
-		});
+		async () => yes2 = await $.async_derived(async () => foo(await 1)),
 
-		let no2 = $.derived(() => async () => {
+		() => no1 = $.derived(async () => {
 			return await 1;
-		});
+		}),
 
-		if ($.aborted()) return;
+		() => no2 = $.derived(() => async () => {
+			return await 1;
+		})
+	]);
 
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
@@ -46,7 +47,5 @@ export default function Async_in_derived($$anchor, $$props) {
 	}
 
 	$.append($$anchor, fragment);
-	});
-
 	$.pop();
 }

packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js

@@ -3,17 +3,20 @@ import * as $ from 'svelte/internal/server';
 
 export default function Async_in_derived($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		$$renderer.async(async ($$renderer) => {
+		var yes1, yes2, no1, no2;
-			let yes1 = (await $.save(1))();
+
-			let yes2 = foo((await $.save(1))());
+		var $$promises = $$renderer.run([
+			async () => yes1 = await 1,
+			async () => yes2 = foo(await 1),
 
-			let no1 = (async () => {
+			() => no1 = (async () => {
 				return await 1;
-			})();
+			})(),
 
-			let no2 = async () => {
+			() => no2 = async () => {
 				return await 1;
-			};
+			}
+		]);
 
 		$$renderer.async(async ($$renderer) => {
 			if (true) {
@@ -36,5 +39,4 @@ export default function Async_in_derived($$renderer, $$props) {
 
 		$$renderer.push(`<!--]-->`);
 	});
-	});
 }

packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js

@@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
 var root = $.from_html(`<button> </button> <!> `, 1);
 
 export default function Await_block_scope($$anchor) {
-	let counter = $.proxy({ count: 0 });
+	var counter = $.proxy({ count: 0 });
-	const promise = $.derived(() => Promise.resolve(counter));
+	var promise = $.derived(() => Promise.resolve(counter));
 
 	function increment() {
 		counter.count += 1;
@@ -26,7 +26,7 @@ export default function Await_block_scope($$anchor) {
 
 	var text_1 = $.sibling(node);
 
-	$.template_effect(() => {
+	$.template_effect([], () => {
 		$.set_text(text, `clicks: ${counter.count ?? ''}`);
 		$.set_text(text_1, ` ${counter.count ?? ''}`);
 	});

packages/svelte/tests/snapshot/samples/await-block-scope/_expected/server/index.svelte.js

@@ -1,8 +1,8 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Await_block_scope($$renderer) {
-	let counter = { count: 0 };
+	var counter = { count: 0 };
-	const promise = Promise.resolve(counter);
+	var promise = Promise.resolve(counter);
 
 	function increment() {
 		counter.count += 1;

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js

@@ -13,8 +13,8 @@ const snippet = ($$anchor) => {
 var root = $.from_html(`<!> `, 1);
 
 export default function Bind_component_snippet($$anchor) {
-	let value = $.state('');
+	var value = $.state('');
-	const _snippet = snippet;
+	var _snippet = snippet;
 	var fragment = root();
 	var node = $.first_child(fragment);
 
@@ -30,6 +30,6 @@ export default function Bind_component_snippet($$anchor) {
 
 	var text_1 = $.sibling(node);
 
-	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ''}`));
+	$.template_effect([], () => $.set_text(text_1, ` value: ${$.get(value) ?? ''}`));
 	$.append($$anchor, fragment);
 }

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js

@@ -6,8 +6,8 @@ function snippet($$renderer) {
 }
 
 export default function Bind_component_snippet($$renderer) {
-	let value = '';
+	var value = '';
-	const _snippet = snippet;
+	var _snippet = snippet;
 	let $$settled = true;
 	let $$inner_renderer;
 

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -4,10 +4,10 @@ import * as $ from 'svelte/internal/client';
 var root = $.from_html(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
 
 export default function Main($$anchor) {
-	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
+	var // needs to be a snapshot test because jsdom does auto-correct the attribute casing
-	let x = 'test';
+	x = 'test';
 
-	let y = () => 'test';
+	var y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
 
@@ -25,9 +25,10 @@ export default function Main($$anchor) {
 	var svg_1 = $.sibling(div_1, 2);
 	var custom_element_1 = $.sibling(svg_1, 2);
 
-	$.template_effect(() => $.set_custom_element_data(custom_element_1, 'fooBar', y()));
+	$.template_effect([], () => $.set_custom_element_data(custom_element_1, 'fooBar', y()));
 
 	$.template_effect(
+		[],
 		($0, $1) => {
 			$.set_attribute(div_1, 'foobar', $0);
 			$.set_attribute(svg_1, 'viewBox', $1);

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js

@@ -1,10 +1,10 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Main($$renderer) {
-	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
+	var // needs to be a snapshot test because jsdom does auto-correct the attribute casing
-	let x = 'test';
+	x = 'test';
 
-	let y = () => 'test';
+	var y = () => 'test';
 
 	$$renderer.push(`<div${$.attr('foobar', x)}></div> <svg${$.attr('viewBox', x)}></svg> <custom-element${$.attr('foobar', x)}></custom-element> <div${$.attr('foobar', y())}></div> <svg${$.attr('viewBox', y())}></svg> <custom-element${$.attr('foobar', y())}></custom-element>`);
 }

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -11,7 +11,7 @@ export default function Each_string_template($$anchor) {
 
 		var text = $.text();
 
-		$.template_effect(() => $.set_text(text, `${thing ?? ''}, `));
+		$.template_effect([], () => $.set_text(text, `${thing ?? ''}, `));
 		$.append($$anchor, text);
 	});
 

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -2,13 +2,13 @@ import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
 export default function Function_prop_no_getter($$anchor) {
-	let count = $.state(0);
+	var count = $.state(0);
 
 	function onmouseup() {
 		$.set(count, $.get(count) + 2);
 	}
 
-	const plusOne = (num) => num + 1;
+	var plusOne = (num) => num + 1;
 
 	Button($$anchor, {
 		onmousedown: () => $.set(count, $.get(count) + 1),
@@ -20,7 +20,7 @@ export default function Function_prop_no_getter($$anchor) {
 
 			var text = $.text();
 
-			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
+			$.template_effect([], () => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
 			$.append($$anchor, text);
 		},
 

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js

@@ -1,13 +1,13 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Function_prop_no_getter($$renderer) {
-	let count = 0;
+	var count = 0;
 
 	function onmouseup() {
 		count += 2;
 	}
 
-	const plusOne = (num) => num + 1;
+	var plusOne = (num) => num + 1;
 
 	Button($$renderer, {
 		onmousedown: () => count += 1,

packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js

@@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
 var root = $.from_html(`<h1></h1> <b></b> <button> </button> <h1></h1>`, 1);
 
 export default function Nullish_coallescence_omittance($$anchor) {
-	let name = 'world';
+	var name = 'world';
-	let count = $.state(0);
+	var count = $.state(0);
 	var fragment = root();
 	var h1 = $.first_child(fragment);
 
@@ -26,7 +26,7 @@ export default function Nullish_coallescence_omittance($$anchor) {
 	var h1_1 = $.sibling(button, 2);
 
 	h1_1.textContent = 'Hello, world';
-	$.template_effect(() => $.set_text(text, `Count is ${$.get(count) ?? ''}`));
+	$.template_effect([], () => $.set_text(text, `Count is ${$.get(count) ?? ''}`));
 	$.append($$anchor, fragment);
 }
 

packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js

@@ -1,8 +1,8 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Nullish_coallescence_omittance($$renderer) {
-	let name = 'world';
+	var name = 'world';
-	let count = 0;
+	var count = 0;
 
 	$$renderer.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1>`);
 }

packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js

@@ -4,7 +4,7 @@ import * as $ from 'svelte/internal/client';
 export default function Props_identifier($$anchor, $$props) {
 	$.push($$props, true);
 
-	let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);
+	var props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);
 
 	$$props.a;
 	props[a];

packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js

@@ -2,7 +2,7 @@ import * as $ from 'svelte/internal/server';
 
 export default function Props_identifier($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { $$slots, $$events, ...props } = $$props;
+		var { $$slots, $$events, ...props } = $$props;
 
 		props.a;
 		props[a];

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js

@@ -44,6 +44,6 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	var img = $.sibling(select, 2);
 
 	$.next(2);
-	$.template_effect(() => $.set_text(text, $$props.title));
+	$.template_effect([], () => $.set_text(text, $$props.title));
 	$.append($$anchor, fragment);
 }

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js

@@ -1,7 +1,7 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Skip_static_subtree($$renderer, $$props) {
-	let { title, content } = $$props;
+	var { title, content } = $$props;
 
 	$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select>`);
 

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js

@@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
 var root = $.from_html(`<input/> <input/> <button>reset</button>`, 1);
 
 export default function State_proxy_literal($$anchor) {
-	let str = $.state('');
+	var str = $.state('');
-	let tpl = $.state(``);
+	var tpl = $.state(``);
 
 	function reset() {
 		$.set(str, '');

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/server/index.svelte.js

@@ -1,8 +1,8 @@
 import * as $ from 'svelte/internal/server';
 
 export default function State_proxy_literal($$renderer) {
-	let str = '';
+	var str = '';
-	let tpl = ``;
+	var tpl = ``;
 
 	function reset() {
 		str = '';

packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js

@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
 export default function Svelte_element($$anchor, $$props) {
-	let tag = $.prop($$props, 'tag', 3, 'hr');
+	var tag = $.prop($$props, 'tag', 3, 'hr');
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 

packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js

@@ -1,7 +1,7 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Svelte_element($$renderer, $$props) {
-	let { tag = 'hr' } = $$props;
+	var { tag = 'hr' } = $$props;
 
 	$.element($$renderer, tag);
 }

packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js

@@ -4,8 +4,8 @@ import * as $ from 'svelte/internal/client';
 var root = $.from_html(`<p> </p>`);
 
 export default function Text_nodes_deriveds($$anchor) {
-	let count1 = 0;
+	var count1 = 0;
-	let count2 = 0;
+	var count2 = 0;
 
 	function text1() {
 		return count1;
@@ -19,6 +19,6 @@ export default function Text_nodes_deriveds($$anchor) {
 	var text = $.child(p);
 
 	$.reset(p);
-	$.template_effect(($0, $1) => $.set_text(text, `${$0 ?? ''}${$1 ?? ''}`), [text1, text2]);
+	$.template_effect([], ($0, $1) => $.set_text(text, `${$0 ?? ''}${$1 ?? ''}`), [text1, text2]);
 	$.append($$anchor, p);
 }

packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/server/index.svelte.js

@@ -1,8 +1,8 @@
 import * as $ from 'svelte/internal/server';
 
 export default function Text_nodes_deriveds($$renderer) {
-	let count1 = 0;
+	var count1 = 0;
-	let count2 = 0;
+	var count2 = 0;
 
 	function text1() {
 		return count1;