feat: delegate action events

Patches dom instances when they are passed to actions so that addEventListener delegates events. This ensures that people adding listeners imperatively will still have the event order preserved.

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

@@ -1,3 +1,4 @@
+import { DelegatedEvents } from '../../../../constants.js';
 import { effect, render_effect } from '../../reactivity/effects.js';
 import { deep_read_state, untrack } from '../../runtime.js';
 
@@ -10,6 +11,66 @@ import { deep_read_state, untrack } from '../../runtime.js';
  */
 export function action(dom, action, get_value) {
 	effect(() => {
+		var addEventListener = dom.addEventListener;
+		var removeEventListener = dom.removeEventListener;
+
+		/**
+		 * @param {string} event_name
+		 * @param {EventListenerOrEventListenerObject} listener
+		 * @param {AddEventListenerOptions} options
+		 */
+		dom.addEventListener = function (event_name, listener, options) {
+			var delegated =
+				DelegatedEvents.includes(event_name) && !options?.capture && typeof listener === 'function';
+
+			if (delegated) {
+				var event_key = `__${event_name}`;
+				// @ts-ignore
+				var existing = dom[event_key];
+				if (existing != null) {
+					if (!Array.isArray(existing)) {
+						// @ts-ignore
+						dom[event_key] = [existing];
+					}
+					existing.push(listener);
+				} else {
+					// @ts-ignore
+					dom[event_key] = listener;
+				}
+			} else {
+				addEventListener.call(dom, event_name, listener, options);
+			}
+		};
+
+		/**
+		 * @param {string} event_name
+		 * @param {EventListenerOrEventListenerObject} listener
+		 * @param {AddEventListenerOptions} options
+		 */
+		dom.removeEventListener = function (event_name, listener, options) {
+			var delegated =
+				DelegatedEvents.includes(event_name) && !options?.capture && typeof listener === 'function';
+
+			if (delegated) {
+				var event_key = `__${event_name}`;
+				// @ts-ignore
+				var existing = dom[event_key];
+				if (existing != null) {
+					if (Array.isArray(existing)) {
+						var index = existing.indexOf(listener);
+						if (index !== -1) {
+							existing.splice(index, 1);
+						}
+					} else {
+						// @ts-ignore
+						dom[event_key] = null;
+					}
+				}
+			} else {
+				removeEventListener.call(dom, event_name, listener, options);
+			}
+		};
+
 		var payload = untrack(() => action(dom, get_value?.()) || {});
 
 		if (get_value && payload?.update) {

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

@@ -124,6 +124,9 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 			const opts = {};
 			let event_name = key.slice(2);
 			var delegated = DelegatedEvents.includes(event_name);
+			var event_key = `__${event_name}`;
+			// @ts-ignore
+			var existing = delegated && element[event_key];
 
 			if (
 				event_name.endsWith('capture') &&
@@ -134,8 +137,18 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 				opts.capture = true;
 			}
 
-			if (!delegated && prev?.[key]) {
-				element.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
+			if (prev?.[key]) {
+				if (!delegated) {
+					element.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
+				} else {
+					if (Array.isArray(existing)) {
+						// @ts-ignore
+						element[event_key] = existing.filter((fn) => fn !== prev[key]);
+					} else {
+						// @ts-ignore
+						element[event_key] = null;
+					}
+				}
 			}
 
 			if (value != null) {
@@ -146,8 +159,19 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 						element.addEventListener(event_name, value, opts);
 					}
 				} else {
+					var event_key = `__${event_name}`;
 					// @ts-ignore
-					element[`__${event_name}`] = value;
+					var existing = element[event_key];
+					if (existing != null) {
+						if (!Array.isArray(existing)) {
+							// @ts-ignore
+							element[event_key] = [existing];
+						}
+						existing.push(value);
+					} else {
+						// @ts-ignore
+						element[event_key] = value;
+					}
 					delegate([event_name]);
 				}
 			}