From 54a129c7fa3e17fda299d1972eaaa17e936fd83d Mon Sep 17 00:00:00 2001 From: das Date: Wed, 16 Oct 2019 20:13:37 -0400 Subject: [PATCH] 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 --- src/compiler/compile/render_dom/index.ts | 6 +- .../expected.js | 55 ++++++++++++++ .../input.svelte | 6 ++ .../expected.js | 45 +++++++++++ .../input.svelte | 7 ++ .../component-store-file-invalidate/store.js | 3 + .../expected.js | 74 +++++++++++++++++++ .../input.svelte | 7 ++ .../samples/window-binding-online/expected.js | 49 ++++++++++++ .../window-binding-online/input.svelte | 5 ++ 10 files changed, 254 insertions(+), 3 deletions(-) create mode 100644 test/js/samples/component-store-access-invalidate/expected.js create mode 100644 test/js/samples/component-store-access-invalidate/input.svelte create mode 100644 test/js/samples/component-store-file-invalidate/expected.js create mode 100644 test/js/samples/component-store-file-invalidate/input.svelte create mode 100644 test/js/samples/component-store-file-invalidate/store.js create mode 100644 test/js/samples/component-store-reassign-invalidate/expected.js create mode 100644 test/js/samples/component-store-reassign-invalidate/input.svelte create mode 100644 test/js/samples/window-binding-online/expected.js create mode 100644 test/js/samples/window-binding-online/input.svelte diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 1186f1b483..bd7b99bd8f 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/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};`; diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js new file mode 100644 index 0000000000..029c0a6d21 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/test/js/samples/component-store-access-invalidate/input.svelte b/test/js/samples/component-store-access-invalidate/input.svelte new file mode 100644 index 0000000000..f42bbe295c --- /dev/null +++ b/test/js/samples/component-store-access-invalidate/input.svelte @@ -0,0 +1,6 @@ + + +

{$foo}

\ No newline at end of file diff --git a/test/js/samples/component-store-file-invalidate/expected.js b/test/js/samples/component-store-file-invalidate/expected.js new file mode 100644 index 0000000000..8082d6e7ee --- /dev/null +++ b/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; \ No newline at end of file diff --git a/test/js/samples/component-store-file-invalidate/input.svelte b/test/js/samples/component-store-file-invalidate/input.svelte new file mode 100644 index 0000000000..3c2fca2e80 --- /dev/null +++ b/test/js/samples/component-store-file-invalidate/input.svelte @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/test/js/samples/component-store-file-invalidate/store.js b/test/js/samples/component-store-file-invalidate/store.js new file mode 100644 index 0000000000..99e27e5584 --- /dev/null +++ b/test/js/samples/component-store-file-invalidate/store.js @@ -0,0 +1,3 @@ +import { writable } from '../../../../store'; + +export const count = writable(0); \ No newline at end of file diff --git a/test/js/samples/component-store-reassign-invalidate/expected.js b/test/js/samples/component-store-reassign-invalidate/expected.js new file mode 100644 index 0000000000..fc3cc65366 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/test/js/samples/component-store-reassign-invalidate/input.svelte b/test/js/samples/component-store-reassign-invalidate/input.svelte new file mode 100644 index 0000000000..bbb52b9669 --- /dev/null +++ b/test/js/samples/component-store-reassign-invalidate/input.svelte @@ -0,0 +1,7 @@ + + +

{$foo}

+ \ No newline at end of file diff --git a/test/js/samples/window-binding-online/expected.js b/test/js/samples/window-binding-online/expected.js new file mode 100644 index 0000000000..30087ca615 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/test/js/samples/window-binding-online/input.svelte b/test/js/samples/window-binding-online/input.svelte new file mode 100644 index 0000000000..9f4b7064d8 --- /dev/null +++ b/test/js/samples/window-binding-online/input.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file