continue inlining $$invalidate calls (#3548)

* finish inlining $$invalidate

* add failing test

* add test for navigator online

* add tests for store invalidate refactor

* add test for reactive_store_subscriptions

* remove failing test

* update

Author: dasZGFz

src/compiler/compile/render_dom/index.ts

@@ -228,7 +228,7 @@ export default function dom(
 				return b`${`$$subscribe_${name}`}()`;
 			}
 
-			const callback = x`$$value => { $$invalidate('${value}', ${value} = $$value) }`;
+			const callback = x`$$value => $$invalidate('${value}', ${value} = $$value)`;
 
 			let insert = b`@component_subscribe($$self, ${name}, $${callback})`;
 			if (component.compile_options.dev) {
@@ -305,7 +305,7 @@ export default function dom(
 		})
 		.map(({ name }) => b`
 			${component.compile_options.dev && `@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
-			@component_subscribe($$self, ${name.slice(1)}, $$value => { ${name} = $$value; $$invalidate('${name}', ${name}); });
+			@component_subscribe($$self, ${name.slice(1)}, $$value => $$invalidate('${name}', ${name} = $$value));
 		`);
 
 	const resubscribable_reactive_store_unsubscribers = reactive_stores
@@ -356,7 +356,7 @@ export default function dom(
 			if (store && store.reassigned) {
 				const unsubscribe = `$$unsubscribe_${name}`;
 				const subscribe = `$$subscribe_${name}`;
-				return b`let ${$name}, ${unsubscribe} = @noop, ${subscribe} = () => (${unsubscribe}(), ${unsubscribe} = @subscribe(${name}, $$value => { ${$name} = $$value; $$invalidate('${$name}', ${$name}); }), ${name})`;
+				return b`let ${$name}, ${unsubscribe} = @noop, ${subscribe} = () => (${unsubscribe}(), ${unsubscribe} = @subscribe(${name}, $$value => $$invalidate('${$name}', ${$name} = $$value)), ${name})`;
 			}
 
 			return b`let ${$name};`;

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

@@ -0,0 +1,55 @@
+import {
+	SvelteComponent,
+	append,
+	component_subscribe,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+import { writable } from "svelte/store";
+
+function create_fragment(ctx) {
+	let h1;
+	let t;
+
+	return {
+		c() {
+			h1 = element("h1");
+			t = text(ctx.$foo);
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+			append(h1, t);
+		},
+		p(changed, ctx) {
+			if (changed.$foo) set_data(t, ctx.$foo);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $foo;
+	const foo = writable(0);
+	component_subscribe($$self, foo, $$value => $$invalidate("$foo", $foo = $$value));
+	return { foo, $foo };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/component-store-access-invalidate/input.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>

test/js/samples/component-store-file-invalidate/expected.js

@@ -0,0 +1,45 @@
+import {
+	SvelteComponent,
+	component_subscribe,
+	init,
+	noop,
+	safe_not_equal,
+	set_store_value
+} from "svelte/internal";
+
+import { count } from "./store.js";
+
+function create_fragment(ctx) {
+	return {
+		c: noop,
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $count;
+	component_subscribe($$self, count, $$value => $$invalidate("$count", $count = $$value));
+
+	function increment() {
+		set_store_value(count, $count++, $count);
+	}
+
+	return { increment };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, ["increment"]);
+	}
+
+	get increment() {
+		return this.$$.ctx.increment;
+	}
+}
+
+export default Component;

test/js/samples/component-store-file-invalidate/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { count } from './store.js';
+
+	export function increment() {
+		$count++;
+	}
+</script>

test/js/samples/component-store-file-invalidate/store.js

@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export const count = writable(0);

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

@@ -0,0 +1,74 @@
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	subscribe,
+	text
+} from "svelte/internal";
+
+import { writable } from "svelte/store";
+
+function create_fragment(ctx) {
+	let h1;
+	let t0;
+	let t1;
+	let button;
+	let dispose;
+
+	return {
+		c() {
+			h1 = element("h1");
+			t0 = text(ctx.$foo);
+			t1 = space();
+			button = element("button");
+			button.textContent = "reset";
+			dispose = listen(button, "click", ctx.click_handler);
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+			append(h1, t0);
+			insert(target, t1, anchor);
+			insert(target, button, anchor);
+		},
+		p(changed, ctx) {
+			if (changed.$foo) set_data(t0, ctx.$foo);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+			if (detaching) detach(t1);
+			if (detaching) detach(button);
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $foo,
+		$$unsubscribe_foo = noop,
+		$$subscribe_foo = () => ($$unsubscribe_foo(), $$unsubscribe_foo = subscribe(foo, $$value => $$invalidate("$foo", $foo = $$value)), foo);
+
+	$$self.$$.on_destroy.push(() => $$unsubscribe_foo());
+	let foo = writable(0);
+	$$subscribe_foo();
+	const click_handler = () => $$subscribe_foo($$invalidate("foo", foo = writable(0)));
+	return { foo, $foo, click_handler };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/component-store-reassign-invalidate/input.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	let foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>
+<button on:click="{() => foo = writable(0)}">reset</button>

test/js/samples/window-binding-online/expected.js

@@ -0,0 +1,49 @@
+import {
+	SvelteComponent,
+	add_render_callback,
+	init,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let dispose;
+	add_render_callback(ctx.onlinestatuschanged);
+
+	return {
+		c() {
+			dispose = [
+				listen(window, "online", ctx.onlinestatuschanged),
+				listen(window, "offline", ctx.onlinestatuschanged)
+			];
+		},
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let online;
+
+	function onlinestatuschanged() {
+		$$invalidate("online", online = navigator.onLine);
+	}
+
+	return { online, onlinestatuschanged };
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default Component;

test/js/samples/window-binding-online/input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let online;
+</script>
+
+<svelte:window bind:online={online}/>