feat: make transitions local by default (#8632)

To make them global, add the |global modifier
This is a breaking change
closes #6686

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))

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}
+		<!-- Svelte 3: <p transition:fade|local> -->
+		<p transition:fade>
+			fades in and out only when y changes
+		</p>
+
+		<!-- Svelte 3: <p transition:fade> -->
+		<p transition:fade|global>
+			fades in and out when x or y change
+		</p>
+
+	{/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}
-		<p transition:fade>
-			fades in and out when x or y change
-		</p>
-
-		<p transition:fade|local>
-			fades in and out only when y changes
-		</p>
-	{/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

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(

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) {

test/js/samples/transition-local/input.svelte

@@ -7,6 +7,6 @@
 
 {#if x}
 	{#if y}
-		<div in:foo|local>...</div>
+		<div in:foo>...</div>
 	{/if}
 {/if}

test/js/samples/transition-repeated-outro/input.svelte

@@ -5,7 +5,7 @@
 </script>
 
 {#if num < 5}
-	<div out:fade>
+	<div out:fade|global>
 		<p>wheeee</p>
 	</div>
 {/if}

test/runtime/samples/dynamic-element-transition/main.svelte

@@ -13,5 +13,5 @@
 </script>
 
 {#if visible}
-	<svelte:element this={tag} transition:foo></svelte:element>
+	<svelte:element this={tag} transition:foo|global></svelte:element>
 {/if}

test/runtime/samples/transition-js-await-block-outros/main.svelte

@@ -12,7 +12,7 @@
 </script>
 
 {#await promise}
-	<p class='pending' transition:foo>loading...</p>
+	<p class='pending' transition:foo|global>loading...</p>
 {:then value}
 	<p class='then' transition:foo>{value}</p>
 {:catch error}

test/runtime/samples/transition-js-await-block/main.svelte

@@ -12,7 +12,7 @@
 </script>
 
 {#await promise}
-	<p class='pending' transition:foo>loading...</p>
+	<p class='pending' transition:foo|global>loading...</p>
 {:then value}
 	<p class='then' transition:foo>{value}</p>
 {:catch error}

test/runtime/samples/transition-js-each-block-intro/main.svelte

@@ -12,5 +12,5 @@
 </script>
 
 {#each things as thing}
-	<div in:foo>{thing}</div>
+	<div in:foo|global>{thing}</div>
 {/each}

test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte

@@ -12,5 +12,5 @@
 </script>
 
 {#each things as thing (thing.name)}
-	<div transition:foo>{thing.name}</div>
+	<div transition:foo|global>{thing.name}</div>
 {/each}

test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte

@@ -12,5 +12,5 @@
 </script>
 
 {#each things as thing (thing.name)}
-	<div in:foo>{thing.name}</div>
+	<div in:foo|global>{thing.name}</div>
 {/each}

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}
-		<div transition:foo>{number}</div>
+		<div transition:foo|global>{number}</div>
 	{/if}
 {/each}

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}
 	<div bind:this={yes} in:foo>yes</div>
 {:else}
-	<div bind:this={no} in:foo>no</div>
+	<div bind:this={no} in:foo|global>no</div>
 {/if}

test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte

@@ -9,4 +9,4 @@
 	}
 </script>
 
-<div transition:foo></div>
+<div transition:foo|global></div>

test/runtime/samples/transition-js-local-and-global/main.svelte

@@ -14,7 +14,7 @@
 
 {#if x}
 	{#if y}
-		<div transition:foo|local>snaps if x changes</div>
+		<div transition:foo>snaps if x changes</div>
-		<div transition:foo>transitions if x changes</div>
+		<div transition:foo|global>transitions if x changes</div>
 	{/if}
 {/if}

test/runtime/samples/transition-js-local/main.svelte

@@ -14,6 +14,6 @@
 
 {#if x}
 	{#if y}
-		<div transition:foo|local></div>
+		<div transition:foo></div>
 	{/if}
 {/if}

test/runtime/samples/transition-js-nested-await/main.svelte

@@ -14,6 +14,6 @@
 
 {#if x}
 	{#await promise then value}
-		<div transition:foo></div>
+		<div transition:foo|global></div>
 	{/await}
 {/if}

test/runtime/samples/transition-js-nested-each-keyed/main.svelte

@@ -14,6 +14,6 @@
 
 {#if x}
 	{#each things as thing (thing)}
-		<div transition:foo></div>
+		<div transition:foo|global></div>
 	{/each}
 {/if}

test/runtime/samples/transition-js-nested-each/main.svelte

@@ -14,6 +14,6 @@
 
 {#if x}
 	{#each things as thing}
-		<div transition:foo></div>
+		<div transition:foo|global></div>
 	{/each}
 {/if}

test/runtime/samples/transition-js-nested-if/main.svelte

@@ -14,6 +14,6 @@
 
 {#if x}
 	{#if y}
-		<div transition:foo></div>
+		<div transition:foo|global></div>
 	{/if}
 {/if}