chore: simplify transitions

packages/svelte/.gitignore

@@ -11,3 +11,5 @@
 /motion.d.ts
 /store.d.ts
 /transition.d.ts
+
+/scripts/_bundle.js

packages/svelte/scripts/check-treeshakeability.js

@@ -74,7 +74,7 @@ for (const key in pkg.exports) {
 }
 
 const client_main = path.resolve(pkg.exports['.'].browser);
-const without_hydration = await bundle_code(
+const bundle = await bundle_code(
 	// Use all features which contain hydration code to ensure it's treeshakeable
 	compile(
 		`
@@ -109,15 +109,17 @@ const without_hydration = await bundle_code(
 	).js.code
 );
 
-if (!without_hydration.includes('current_hydration_fragment')) {
+if (!bundle.includes('current_hydration_fragment')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);
 } else {
 	// eslint-disable-next-line no-console
-	console.error(without_hydration);
+	console.error(bundle);
 	// eslint-disable-next-line no-console
 	console.error(`❌ Hydration code not treeshakeable`);
 	failed = true;
+
+	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 
 // eslint-disable-next-line no-console

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -28,10 +28,14 @@ import {
 	AttributeAliases,
 	DOMBooleanAttributes,
 	EACH_INDEX_REACTIVE,
+	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
 	EACH_IS_STRICT_EQUALS,
 	EACH_ITEM_REACTIVE,
-	EACH_KEYED
+	EACH_KEYED,
+	TRANSITION_GLOBAL,
+	TRANSITION_IN,
+	TRANSITION_OUT
 } from '../../../../../constants.js';
 import { regex_is_valid_identifier } from '../../../patterns.js';
 import { javascript_visitors_runes } from './javascript-runes.js';
@@ -1922,7 +1926,7 @@ export const template_visitors = {
 		state.init.push(
 			b.stmt(
 				b.call(
-					'$.animate',
+					'$.animation',
 					state.node,
 					b.thunk(
 						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
@@ -1939,25 +1943,21 @@ export const template_visitors = {
 		error(node, 'INTERNAL', 'Node should have been handled elsewhere');
 	},
 	TransitionDirective(node, { state, visit }) {
-		const type = node.intro && node.outro ? '$.transition' : node.intro ? '$.in' : '$.out';
-		const expression =
-			node.expression === null
-				? b.literal(null)
-				: b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression)));
+		let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
+		if (node.intro) flags |= TRANSITION_IN;
+		if (node.outro) flags |= TRANSITION_OUT;
 
-		state.init.push(
-			b.stmt(
-				b.call(
-					type,
-					state.node,
-					b.thunk(
-						/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name)))
-					),
-					expression,
-					node.modifiers.includes('global') ? b.true : b.false
-				)
-			)
-		);
+		const args = [
+			b.literal(flags),
+			state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (visit(parse_directive_name(node.name))))
+		];
+
+		if (node.expression) {
+			args.push(b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression))));
+		}
+
+		state.init.push(b.stmt(b.call('$.transition', ...args)));
 	},
 	RegularElement(node, context) {
 		if (node.name === 'noscript') {
@@ -2345,6 +2345,19 @@ export const template_visitors = {
 			each_type |= EACH_ITEM_REACTIVE;
 		}
 
+		// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
+		// we can determine at compile time whether the each block is animated or not (in which
+		// case it should measure animated elements before and after reconciliation).
+		if (
+			node.key &&
+			node.body.nodes.some((child) => {
+				if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+				return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+			})
+		) {
+			each_type |= EACH_IS_ANIMATED;
+		}
+
 		if (each_node_meta.is_controlled) {
 			each_type |= EACH_IS_CONTROLLED;
 		}
@@ -2557,22 +2570,44 @@ export const template_visitors = {
 			context.visit(node.consequent)
 		);
 
-		context.state.after_update.push(
-			b.stmt(
-				b.call(
-					'$.if',
-					context.state.node,
-					b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
-					b.arrow([b.id('$$anchor')], consequent),
-					node.alternate
-						? b.arrow(
-								[b.id('$$anchor')],
-								/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
-							)
-						: b.literal(null)
-				)
-			)
-		);
+		const args = [
+			context.state.node,
+			b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.test))),
+			b.arrow([b.id('$$anchor')], consequent),
+			node.alternate
+				? b.arrow(
+						[b.id('$$anchor')],
+						/** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
+					)
+				: b.literal(null)
+		];
+
+		if (node.elseif) {
+			// We treat this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else}
+			//     {#if y}
+			//       <div transition:foo>...</div>
+			//     {/if}
+			//   {/if}
+			//
+			// ...slightly differently to this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else if y}
+			//     <div transition:foo>...</div>
+			//   {/if}
+			//
+			// ...even though they're logically equivalent. In the first case, the
+			// transition will only play when `y` changes, but in the second it
+			// should play when `x` or `y` change — both are considered 'local'
+			args.push(b.literal(true));
+		}
+
+		context.state.after_update.push(b.stmt(b.call('$.if', ...args)));
 	},
 	AwaitBlock(node, context) {
 		context.state.template.push('<!>');

packages/svelte/src/constants.js

@@ -12,6 +12,10 @@ export const PROPS_IS_RUNES = 1 << 1;
 export const PROPS_IS_UPDATED = 1 << 2;
 export const PROPS_IS_LAZY_INITIAL = 1 << 3;
 
+export const TRANSITION_IN = 1;
+export const TRANSITION_OUT = 1 << 1;
+export const TRANSITION_GLOBAL = 1 << 2;
+
 /** List of Element events that will be delegated */
 export const DelegatedEvents = [
 	'beforeinput',

packages/svelte/src/internal/client/constants.js

@@ -9,17 +9,8 @@ export const DIRTY = 1 << 9;
 export const MAYBE_DIRTY = 1 << 10;
 export const INERT = 1 << 11;
 export const DESTROYED = 1 << 12;
-
-export const ROOT_BLOCK = 0;
-export const IF_BLOCK = 1;
-export const EACH_BLOCK = 2;
-export const EACH_ITEM_BLOCK = 3;
-export const AWAIT_BLOCK = 4;
-export const KEY_BLOCK = 5;
-export const HEAD_BLOCK = 6;
-export const DYNAMIC_COMPONENT_BLOCK = 7;
-export const DYNAMIC_ELEMENT_BLOCK = 8;
-export const SNIPPET_BLOCK = 9;
+export const IS_ELSEIF = 1 << 13;
+export const EFFECT_RAN = 1 << 14;
 
 export const UNINITIALIZED = Symbol();
 export const STATE_SYMBOL = Symbol('$state');