From c6e2332128a0ef4d7be88494e7e517c1ecbbca90 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 25 May 2023 10:35:19 +0200 Subject: [PATCH 1/2] feat: make transitions local by default To make them global, add the |global modifier This is a breaking change closes #6686 --- site/content/docs/03-template-syntax.md | 59 +++++++++++++------ src/compiler/compile/nodes/Transition.js | 2 +- .../render_dom/wrappers/Element/index.js | 4 +- test/js/samples/transition-local/input.svelte | 2 +- .../dynamic-element-transition/main.svelte | 2 +- .../main.svelte | 2 +- .../transition-js-await-block/main.svelte | 2 +- .../main.svelte | 2 +- .../main.svelte | 2 +- .../main.svelte | 2 +- .../main.svelte | 2 +- .../main.svelte | 2 +- .../main.svelte | 4 +- .../samples/transition-js-local/main.svelte | 2 +- .../transition-js-nested-await/main.svelte | 2 +- .../main.svelte | 2 +- .../transition-js-nested-each/main.svelte | 2 +- .../transition-js-nested-if/main.svelte | 2 +- 18 files changed, 59 insertions(+), 38 deletions(-) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 512cfe9be604..7c195ee78765 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -994,6 +994,12 @@ transition:fn transition:fn={params} ``` ```sv +transition:fn|global +``` +```sv +transition:fn|global={params} +``` +```sv transition:fn|local ``` ```sv @@ -1027,7 +1033,28 @@ The `transition:` directive indicates a *bidirectional* transition, which means {/if} ``` -> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api). +--- + +Transitions are local by default (in Svelte 3, they were global by default). Local transitions only play when the block they belong to is created or destroyed, *not* when parent blocks are created or destroyed. + +```sv +{#if x} + {#if y} + +

+ fades in and out only when y changes +

+ + +

+ fades in and out when x or y change +

+ + {/if} +{/if} +``` + +> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api) and marking the transition as `global`. ##### Transition parameters @@ -1153,24 +1180,6 @@ An element with transitions will dispatch the following events in addition to an {/if} ``` ---- - -Local transitions only play when the block they belong to is created or destroyed, *not* when parent blocks are created or destroyed. - -```sv -{#if x} - {#if y} -

- fades in and out when x or y change -

- -

- fades in and out only when y changes -

- {/if} -{/if} -``` - #### in:*fn*/out:*fn* @@ -1181,6 +1190,12 @@ in:fn in:fn={params} ``` ```sv +in:fn|global +``` +```sv +in:fn|global={params} +``` +```sv in:fn|local ``` ```sv @@ -1194,6 +1209,12 @@ out:fn out:fn={params} ``` ```sv +out:fn|global +``` +```sv +out:fn|global={params} +``` +```sv out:fn|local ``` ```sv diff --git a/src/compiler/compile/nodes/Transition.js b/src/compiler/compile/nodes/Transition.js index 8b8e68682a71..1da4d6a7d51e 100644 --- a/src/compiler/compile/nodes/Transition.js +++ b/src/compiler/compile/nodes/Transition.js @@ -28,7 +28,7 @@ export default class Transition extends Node { this.name = info.name; component.add_reference(/** @type {any} */ (this), info.name.split('.')[0]); this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out'; - this.is_local = info.modifiers.includes('local'); + this.is_local = !info.modifiers.includes('global'); if ((info.intro && parent.intro) || (info.outro && parent.outro)) { const parent_transition = parent.intro || parent.outro; component.error( diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.js b/src/compiler/compile/render_dom/wrappers/Element/index.js index 6af5ed0c74ba..687741d21afe 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.js +++ b/src/compiler/compile/render_dom/wrappers/Element/index.js @@ -422,10 +422,10 @@ export default class ElementWrapper extends Wrapper { `); } if (this.child_dynamic_element_block.has_intros) { - block.chunks.intro.push(b`@transition_in(${this.var});`); + block.chunks.intro.push(b`@transition_in(${this.var}, #local);`); } if (this.child_dynamic_element_block.has_outros) { - block.chunks.outro.push(b`@transition_out(${this.var});`); + block.chunks.outro.push(b`@transition_out(${this.var}, #local);`); } block.chunks.destroy.push(b`if (${this.var}) ${this.var}.d(detaching)`); if (this.node.animation) { diff --git a/test/js/samples/transition-local/input.svelte b/test/js/samples/transition-local/input.svelte index 3f87627c6219..53c9b2b03ed8 100644 --- a/test/js/samples/transition-local/input.svelte +++ b/test/js/samples/transition-local/input.svelte @@ -7,6 +7,6 @@ {#if x} {#if y} -
...
+
...
{/if} {/if} \ No newline at end of file diff --git a/test/runtime/samples/dynamic-element-transition/main.svelte b/test/runtime/samples/dynamic-element-transition/main.svelte index b8c0eff0bd6f..b30d948d6b30 100644 --- a/test/runtime/samples/dynamic-element-transition/main.svelte +++ b/test/runtime/samples/dynamic-element-transition/main.svelte @@ -13,5 +13,5 @@ {#if visible} - + {/if} diff --git a/test/runtime/samples/transition-js-await-block-outros/main.svelte b/test/runtime/samples/transition-js-await-block-outros/main.svelte index 6060b7672b40..4973022672d2 100644 --- a/test/runtime/samples/transition-js-await-block-outros/main.svelte +++ b/test/runtime/samples/transition-js-await-block-outros/main.svelte @@ -12,7 +12,7 @@ {#await promise} -

loading...

+

loading...

{:then value}

{value}

{:catch error} diff --git a/test/runtime/samples/transition-js-await-block/main.svelte b/test/runtime/samples/transition-js-await-block/main.svelte index 0a0bb0005d7a..8e7a381fb2ca 100644 --- a/test/runtime/samples/transition-js-await-block/main.svelte +++ b/test/runtime/samples/transition-js-await-block/main.svelte @@ -12,7 +12,7 @@ {#await promise} -

loading...

+

loading...

{:then value}

{value}

{:catch error} diff --git a/test/runtime/samples/transition-js-each-block-intro/main.svelte b/test/runtime/samples/transition-js-each-block-intro/main.svelte index d19924af61c3..5685232b7cef 100644 --- a/test/runtime/samples/transition-js-each-block-intro/main.svelte +++ b/test/runtime/samples/transition-js-each-block-intro/main.svelte @@ -12,5 +12,5 @@ {#each things as thing} -
{thing}
+
{thing}
{/each} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte index 89282dafeb95..4fc7e972291c 100644 --- a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte +++ b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte @@ -12,5 +12,5 @@ {#each things as thing (thing.name)} -
{thing.name}
+
{thing.name}
{/each} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte b/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte index 69697b444f26..4615de11e78f 100644 --- a/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte +++ b/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte @@ -12,5 +12,5 @@ {#each things as thing (thing.name)} -
{thing.name}
+
{thing.name}
{/each} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte index 5e8979b2d471..8fa37645b3c5 100644 --- a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte +++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte @@ -13,6 +13,6 @@ {#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number} {#if threshold >= number} -
{number}
+
{number}
{/if} {/each} diff --git a/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte b/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte index 64d17e0db369..b78c53f8c187 100644 --- a/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte +++ b/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte @@ -9,4 +9,4 @@ } -
\ No newline at end of file +
\ No newline at end of file diff --git a/test/runtime/samples/transition-js-local-and-global/main.svelte b/test/runtime/samples/transition-js-local-and-global/main.svelte index 18fbaa1b7812..6143adb63a70 100644 --- a/test/runtime/samples/transition-js-local-and-global/main.svelte +++ b/test/runtime/samples/transition-js-local-and-global/main.svelte @@ -14,7 +14,7 @@ {#if x} {#if y} -
snaps if x changes
-
transitions if x changes
+
snaps if x changes
+
transitions if x changes
{/if} {/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-local/main.svelte b/test/runtime/samples/transition-js-local/main.svelte index cbdfbd8c256b..fac9e062ff56 100644 --- a/test/runtime/samples/transition-js-local/main.svelte +++ b/test/runtime/samples/transition-js-local/main.svelte @@ -14,6 +14,6 @@ {#if x} {#if y} -
+
{/if} {/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-nested-await/main.svelte b/test/runtime/samples/transition-js-nested-await/main.svelte index bcd531c44cb9..536a976e1df3 100644 --- a/test/runtime/samples/transition-js-nested-await/main.svelte +++ b/test/runtime/samples/transition-js-nested-await/main.svelte @@ -14,6 +14,6 @@ {#if x} {#await promise then value} -
+
{/await} {/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-nested-each-keyed/main.svelte b/test/runtime/samples/transition-js-nested-each-keyed/main.svelte index 5f86eebf7068..571aee60681d 100644 --- a/test/runtime/samples/transition-js-nested-each-keyed/main.svelte +++ b/test/runtime/samples/transition-js-nested-each-keyed/main.svelte @@ -14,6 +14,6 @@ {#if x} {#each things as thing (thing)} -
+
{/each} {/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-nested-each/main.svelte b/test/runtime/samples/transition-js-nested-each/main.svelte index f9be834a0143..7ab2315c72d1 100644 --- a/test/runtime/samples/transition-js-nested-each/main.svelte +++ b/test/runtime/samples/transition-js-nested-each/main.svelte @@ -14,6 +14,6 @@ {#if x} {#each things as thing} -
+
{/each} {/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-nested-if/main.svelte b/test/runtime/samples/transition-js-nested-if/main.svelte index fac9e062ff56..2a8a6f7607fb 100644 --- a/test/runtime/samples/transition-js-nested-if/main.svelte +++ b/test/runtime/samples/transition-js-nested-if/main.svelte @@ -14,6 +14,6 @@ {#if x} {#if y} -
+
{/if} {/if} \ No newline at end of file From 89fdee3ace50ff3cfb413a82550c2772fcd6efc1 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 25 May 2023 11:14:50 +0200 Subject: [PATCH 2/2] test fixes, changelog --- CHANGELOG.md | 1 + test/js/samples/transition-repeated-outro/input.svelte | 2 +- .../samples/transition-js-if-else-block-intro/main.svelte | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbafadc80703..e8f15e0f1197 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ * **breaking** Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136)) * **breaking** Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github.com/sveltejs/svelte/pull/8457)) * **breaking** Deprecate `SvelteComponentTyped`, use `SvelteComponent` instead ([#8512](https://github.com/sveltejs/svelte/pull/8512)) +* **breaking** Make transitions local by default to prevent confusion around page navigations ([#6686](https://github.com/sveltejs/svelte/issues/6686)) * **breaking** Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947)) * **breaking** Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750)) * **breaking** Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618)) diff --git a/test/js/samples/transition-repeated-outro/input.svelte b/test/js/samples/transition-repeated-outro/input.svelte index d5114846b845..c1c8d077adb7 100644 --- a/test/js/samples/transition-repeated-outro/input.svelte +++ b/test/js/samples/transition-repeated-outro/input.svelte @@ -5,7 +5,7 @@ {#if num < 5} -
+

wheeee

{/if} \ No newline at end of file diff --git a/test/runtime/samples/transition-js-if-else-block-intro/main.svelte b/test/runtime/samples/transition-js-if-else-block-intro/main.svelte index d25cbb0412c2..939ebace1452 100644 --- a/test/runtime/samples/transition-js-if-else-block-intro/main.svelte +++ b/test/runtime/samples/transition-js-if-else-block-intro/main.svelte @@ -4,7 +4,7 @@ export let x; - function foo(node, params) { + function foo(node) { return { duration: 400, tick: t => { @@ -17,5 +17,5 @@ {#if x}
yes
{:else} -
no
+
no
{/if} \ No newline at end of file