rename modifier 'hidden' into 'this'

fix bug with in:/out: directive
support for spreading with set_attributes()

Author: adiguba

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

@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../types' */
 import {
 	TRANSITION_GLOBAL,
-	TRANSITION_HIDDEN,
+	TRANSITION_THIS,
 	TRANSITION_IN,
 	TRANSITION_OUT
 } from '../../../../../constants.js';
@@ -18,8 +18,8 @@ export function TransitionDirective(node, context) {
 	let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
 	if (node.intro) flags |= TRANSITION_IN;
 	if (node.outro) flags |= TRANSITION_OUT;
-	if (node.modifiers.includes('hidden')) {
-		flags |= TRANSITION_HIDDEN;
+	if (node.modifiers.includes('this')) {
+		flags |= TRANSITION_THIS;
 	}
 
 	const args = [

packages/svelte/src/compiler/types/template.d.ts

@@ -251,7 +251,7 @@ export namespace AST {
 		name: string;
 		/** The 'y' in `transition:x={y}` */
 		expression: null | Expression;
-		modifiers: Array<'local' | 'global' | 'hidden'>;
+		modifiers: Array<'local' | 'global' | 'this'>;
 		/** True if this is a `transition:` or `in:` directive */
 		intro: boolean;
 		/** True if this is a `transition:` or `out:` directive */

packages/svelte/src/constants.js

@@ -14,7 +14,7 @@ export const PROPS_IS_LAZY_INITIAL = 1 << 4;
 export const TRANSITION_IN = 1;
 export const TRANSITION_OUT = 1 << 1;
 export const TRANSITION_GLOBAL = 1 << 2;
-export const TRANSITION_HIDDEN = 1 << 3;
+export const TRANSITION_THIS = 1 << 3;
 
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -75,7 +75,7 @@ export function set_checked(element, checked) {
 }
 
 /**
- * @param {Element & { hidden: boolean, __tm?: import('#client').TransitionManager}} element
+ * @param {HTMLElement} element
  * @param {boolean} hidden
  */
 export function set_hidden(element, hidden) {
@@ -84,12 +84,29 @@ export function set_hidden(element, hidden) {
 
 	if (attributes.hidden === (attributes.hidden = !!hidden)) return;
 
-	if (element.__tm) {
+	/** @type {import('#client').TransitionManager[] | undefined} */
+	// @ts-expect-error
+	const tm = element.__tm;
+	if (tm) {
 		if (hidden) {
-			element.__tm.out(() => (element.hidden = true));
+			var remaining = tm.length;
+			var check = () => {
+				if (--remaining == 0) {
+					// cleanup
+					for (var transition of tm) {
+						transition.stop();
+					}
+					element.hidden = true;
+				}
+			};
+			for (var transition of tm) {
+				transition.out(check);
+			}
 		} else {
 			element.hidden = false;
-			element.__tm.in();
+			for (const transition of tm) {
+				transition.in();
+			}
 		}
 	} else {
 		element.hidden = hidden;
@@ -292,6 +309,8 @@ export function set_attributes(
 		} else if (key === '__value' || (key === 'value' && value != null)) {
 			// @ts-ignore
 			element.value = element[key] = element.__value = value;
+		} else if (key === 'hidden') {
+			set_hidden(/** @type {HTMLElement} */ (element), value);
 		} else {
 			var name = key;
 			if (!preserve_attribute_case) {

packages/svelte/src/internal/client/dom/elements/transitions.js

@@ -7,7 +7,7 @@ import { should_intro } from '../../render.js';
 import { current_each_item } from '../blocks/each.js';
 import {
 	TRANSITION_GLOBAL,
-	TRANSITION_HIDDEN,
+	TRANSITION_THIS,
 	TRANSITION_IN,
 	TRANSITION_OUT
 } from '../../../../constants.js';
@@ -174,7 +174,7 @@ export function transition(flags, element, get_fn, get_params) {
 	var is_outro = (flags & TRANSITION_OUT) !== 0;
 	var is_both = is_intro && is_outro;
 	var is_global = (flags & TRANSITION_GLOBAL) !== 0;
-	var is_hidden = (flags & TRANSITION_HIDDEN) !== 0;
+	var is_this = (flags & TRANSITION_THIS) !== 0;
 
 	/** @type {'in' | 'out' | 'both'} */
 	var direction = is_both ? 'both' : is_intro ? 'in' : 'out';
@@ -249,9 +249,9 @@ export function transition(flags, element, get_fn, get_params) {
 		}
 	};
 
-	if (is_hidden) {
+	if (is_this) {
 		// @ts-expect-error
-		element.__tm = transition;
+		(element.__tm ??= []).push(transition);
 		return;
 	}
 

packages/svelte/types/index.d.ts

@@ -1060,7 +1060,7 @@ declare module 'svelte/compiler' {
 			name: string;
 			/** The 'y' in `transition:x={y}` */
 			expression: null | Expression;
-			modifiers: Array<'local' | 'global' | 'hidden'>;
+			modifiers: Array<'local' | 'global' | 'this'>;
 			/** True if this is a `transition:` or `in:` directive */
 			intro: boolean;
 			/** True if this is a `transition:` or `out:` directive */