From 95d4ec8b819b92298b6c3f1ced6afc49919846e9 Mon Sep 17 00:00:00 2001 From: 7nik Date: Wed, 30 Apr 2025 21:23:43 +0300 Subject: [PATCH 1/5] add support of handleEvent object listener --- .changeset/rare-feet-hang.md | 5 ++ packages/svelte/elements.d.ts | 8 ++- .../client/visitors/shared/events.js | 7 ++- .../client/dom/elements/attributes.js | 4 +- .../internal/client/dom/elements/events.js | 55 ++++++++++++++----- packages/svelte/src/internal/client/index.js | 8 ++- .../event-handler-object-dev/_config.js | 19 +++++++ .../event-handler-object-dev/main.svelte | 13 +++++ .../event-handler-object-invalid/_config.js | 31 +++++++++++ .../event-handler-object-invalid/main.svelte | 7 +++ .../samples/event-handler-object/_config.js | 22 ++++++++ .../samples/event-handler-object/main.svelte | 39 +++++++++++++ 12 files changed, 195 insertions(+), 23 deletions(-) create mode 100644 .changeset/rare-feet-hang.md create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte diff --git a/.changeset/rare-feet-hang.md b/.changeset/rare-feet-hang.md new file mode 100644 index 000000000000..8cbd906eee78 --- /dev/null +++ b/.changeset/rare-feet-hang.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: add support of handleEvent object as event listener diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index 99d87b4c09a4..7201fb788b4e 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -39,9 +39,11 @@ type Booleanish = boolean | 'true' | 'false'; // Event Handler Types // ---------------------------------------------------------------------- -type EventHandler = ( - event: E & { currentTarget: EventTarget & T } -) => any; +type EventHandler = + | ((event: E & { currentTarget: EventTarget & T }) => any) + | { + handleEvent: (event: E & { currentTarget: EventTarget & T }) => any; + }; export type ClipboardEventHandler = EventHandler; export type CompositionEventHandler = EventHandler; diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js index d252bd5474dc..9cdc8fd8120f 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js @@ -151,7 +151,7 @@ export function build_event_handler(node, metadata, context) { } // wrap the handler in a function, so the expression is re-evaluated for each event - let call = b.call(b.member(handler, 'apply', false, true), b.this, b.id('$$args')); + let call = b.call('$.call_event_handler', handler, b.this, b.id('$$evt'), b.id('$$data')); if (dev) { const loc = locator(/** @type {number} */ (node.start)); @@ -165,7 +165,8 @@ export function build_event_handler(node, metadata, context) { '$.apply', b.thunk(handler), b.this, - b.id('$$args'), + b.id('$$evt'), + b.id('$$data'), b.id(context.state.analysis.name), loc && b.array([b.literal(loc.line), b.literal(loc.column)]), has_side_effects(node) && b.true, @@ -173,7 +174,7 @@ export function build_event_handler(node, metadata, context) { ); } - return b.function(null, [b.rest(b.id('$$args'))], b.block([b.stmt(call)])); + return b.function(null, [b.id('$$evt'), b.rest(b.id('$$data'))], b.block([b.stmt(call)])); } /** diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index f63f55cc6ee6..2ac0bba691f5 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -1,7 +1,7 @@ import { DEV } from 'esm-env'; import { hydrating, set_hydrating } from '../hydration.js'; import { get_descriptors, get_prototype_of } from '../../../shared/utils.js'; -import { create_event, delegate } from './events.js'; +import { call_event_handler, create_event, delegate } from './events.js'; import { add_form_reset_listener, autofocus } from './misc.js'; import * as w from '../../warnings.js'; import { LOADING_ATTR_SYMBOL } from '#client/constants'; @@ -376,7 +376,7 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal * @param {Event} evt */ function handle(evt) { - current[key].call(this, evt); + call_event_handler(current[key], this, evt); } current[event_handle_key] = create_event(event_name, element, handle, opts); diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js index 3374fe713ff8..b3ddbbe68a71 100644 --- a/packages/svelte/src/internal/client/dom/elements/events.js +++ b/packages/svelte/src/internal/client/dom/elements/events.js @@ -12,6 +12,8 @@ import { } from '../../runtime.js'; import { without_reactive_context } from './bindings/shared.js'; +/** @typedef {((ev: Event, ...args: any) => void) | { handleEvent: (ev: Event, ...args: any) => void }} EventListenerWrapper */ + /** @type {Set} */ export const all_registered_events = new Set(); @@ -45,10 +47,29 @@ export function replay_events(dom) { } } +/** + * @param {EventListenerWrapper | undefined} handler + * @param {EventTarget} current_target + * @param {Event} event + * @param {any[]} [data] + */ +export function call_event_handler(handler, current_target, event, data = []) { + if (typeof handler === 'function') { + handler.call(current_target, event, ...data); + } else { + if (handler && handler.handleEvent == null) { + // @ts-expect-error - do so to get a nicer "handler.handleEvent is not a function" error instead of "Cannot read properties of null (reading 'call')" + handler.handleEvent(); + } else { + handler?.handleEvent.call(current_target, event); + } + } +} + /** * @param {string} event_name * @param {EventTarget} dom - * @param {EventListener} [handler] + * @param {EventListenerOrEventListenerObject} [handler] * @param {AddEventListenerOptions} [options] */ export function create_event(event_name, dom, handler, options = {}) { @@ -61,8 +82,8 @@ export function create_event(event_name, dom, handler, options = {}) { handle_event_propagation.call(dom, event); } if (!event.cancelBubble) { - return without_reactive_context(() => { - return handler?.call(this, event); + without_reactive_context(() => { + call_event_handler(handler, this, event); }); } } @@ -93,7 +114,7 @@ export function create_event(event_name, dom, handler, options = {}) { * * @param {EventTarget} element * @param {string} type - * @param {EventListener} handler + * @param {EventListenerOrEventListenerObject} handler * @param {AddEventListenerOptions} [options] */ export function on(element, type, handler, options = {}) { @@ -107,7 +128,7 @@ export function on(element, type, handler, options = {}) { /** * @param {string} event_name * @param {Element} dom - * @param {EventListener} [handler] + * @param {EventListenerOrEventListenerObject} [handler] * @param {boolean} [capture] * @param {boolean} [passive] * @returns {void} @@ -245,9 +266,9 @@ export function handle_event_propagation(event) { ) { if (is_array(delegated)) { var [fn, ...data] = delegated; - fn.apply(current_target, [event, ...data]); + call_event_handler(fn, current_target, event, data); } else { - delegated.call(current_target, event); + call_event_handler(delegated, current_target, event); } } } catch (error) { @@ -285,9 +306,10 @@ export function handle_event_propagation(event) { /** * In dev, warn if an event handler is not a function, as it means the * user probably called the handler or forgot to add a `() =>` - * @param {() => (event: Event, ...args: any) => void} thunk + * @param {() => EventListenerWrapper} thunk * @param {EventTarget} element - * @param {[Event, ...any]} args + * @param {Event} evt + * @param {any[]} data * @param {any} component * @param {[number, number]} [loc] * @param {boolean} [remove_parens] @@ -295,7 +317,8 @@ export function handle_event_propagation(event) { export function apply( thunk, element, - args, + evt, + data, component, loc, has_side_effects = false, @@ -310,11 +333,15 @@ export function apply( error = e; } - if (typeof handler !== 'function' && (has_side_effects || handler != null || error)) { + if ( + typeof handler !== 'function' && + typeof handler?.handleEvent !== 'function' && + (has_side_effects || handler != null || error) + ) { const filename = component?.[FILENAME]; const location = loc ? ` at ${filename}:${loc[0]}:${loc[1]}` : ` in ${filename}`; - const phase = args[0]?.eventPhase < Event.BUBBLING_PHASE ? 'capture' : ''; - const event_name = args[0]?.type + phase; + const phase = evt?.eventPhase < Event.BUBBLING_PHASE ? 'capture' : ''; + const event_name = evt?.type + phase; const description = `\`${event_name}\` handler${location}`; const suggestion = remove_parens ? 'remove the trailing `()`' : 'add a leading `() =>`'; @@ -324,5 +351,5 @@ export function apply( throw error; } } - handler?.apply(element, args); + call_event_handler(handler, element, evt, data); } diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 14d6e29f5bb4..575832ebdf84 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -37,7 +37,13 @@ export { STYLE } from './dom/elements/attributes.js'; export { set_class } from './dom/elements/class.js'; -export { apply, event, delegate, replay_events } from './dom/elements/events.js'; +export { + apply, + call_event_handler, + event, + delegate, + replay_events +} from './dom/elements/events.js'; export { autofocus, remove_textarea_child } from './dom/elements/misc.js'; export { set_style } from './dom/elements/style.js'; export { animation, transition } from './dom/elements/transitions.js'; diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/_config.js new file mode 100644 index 000000000000..ff4916c27704 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/_config.js @@ -0,0 +1,19 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + compileOptions: { + dev: true + }, + + test({ assert, target, logs }) { + const [b1] = target.querySelectorAll('button'); + + b1.click(); + flushSync(); + assert.htmlEqual(target.innerHTML, ''); + assert.deepEqual(logs, []); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte new file mode 100644 index 000000000000..c66fdeea5afc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte @@ -0,0 +1,13 @@ + + + diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js new file mode 100644 index 000000000000..81b1b0e39892 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js @@ -0,0 +1,31 @@ +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + compileOptions: { + dev: true + }, + + test({ assert, target, warnings, logs, errors }) { + const handler = (/** @type {any} */ e) => { + e.stopImmediatePropagation(); + }; + + window.addEventListener('error', handler, true); + + const [b1, b2] = target.querySelectorAll('button'); + + b1.click(); + b2.click(); + assert.deepEqual(logs, []); + assert.deepEqual(warnings, [ + '`click` handler at main.svelte:6:17 should be a function. Did you mean to add a leading `() =>`?', + '`click` handler at main.svelte:7:17 should be a function. Did you mean to add a leading `() =>`?' + ]); + assert.include(errors[0], 'is not a function'); + assert.include(errors[2], 'is not a function'); + + window.removeEventListener('error', handler, true); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte new file mode 100644 index 000000000000..a0987bdb74dd --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte @@ -0,0 +1,7 @@ + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js new file mode 100644 index 000000000000..938a0a311bfb --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js @@ -0,0 +1,22 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + test({ assert, target, logs }) { + const buttons = target.querySelectorAll('button'); + + buttons.forEach((b) => b.click()); + flushSync(); + buttons.forEach((b) => b.click()); + flushSync(); + buttons.forEach((b) => b.click()); + flushSync(); + assert.deepEqual(logs, [2, 5, 6, 7, 9, 11]); + assert.htmlEqual( + target.innerHTML, + '' + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte new file mode 100644 index 000000000000..88ec8fde2eec --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte @@ -0,0 +1,39 @@ + + + + + From 32ee6efa6c976facb5f8b15ec86c90cb88d8a462 Mon Sep 17 00:00:00 2001 From: 7nik Date: Wed, 30 Apr 2025 22:58:28 +0300 Subject: [PATCH 2/5] fix handler SSRed into attribute --- packages/svelte/src/internal/server/index.js | 1 + .../samples/event-handler-object-ssr/_config.js | 10 ++++++++++ .../samples/event-handler-object-ssr/child.svelte | 6 ++++++ .../samples/event-handler-object-ssr/main.svelte | 12 ++++++++++++ 4 files changed, 29 insertions(+) create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/child.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/main.svelte diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js index b58a1d4372a6..c5d92876aa4b 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -184,6 +184,7 @@ export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) { for (name in attrs) { // omit functions, internal svelte properties and invalid attribute names if (typeof attrs[name] === 'function') continue; + if (name[0] === 'o' && name[1] === 'n' && typeof attrs[name] === 'object') continue; if (name[0] === '$' && name[1] === '$') continue; // faster than name.startsWith('$$') if (INVALID_ATTR_NAME_CHAR_REGEX.test(name)) continue; diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/_config.js new file mode 100644 index 000000000000..39d1cdf0eafd --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/_config.js @@ -0,0 +1,10 @@ +import { test } from '../../test'; + +export default test({ + test({ assert, target }) { + assert.htmlEqual( + target.innerHTML, + `` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/child.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/child.svelte new file mode 100644 index 000000000000..ab1f6d3f4e79 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/child.svelte @@ -0,0 +1,6 @@ + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/main.svelte new file mode 100644 index 000000000000..672c0691b494 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-ssr/main.svelte @@ -0,0 +1,12 @@ + + + + + + From 9c3ad710813431097ad903390abebdb0b9464d95 Mon Sep 17 00:00:00 2001 From: 7nik Date: Fri, 2 May 2025 18:52:37 +0300 Subject: [PATCH 3/5] improve tests --- .../event-handler-object-invalid/_config.js | 9 +++-- .../event-handler-object-invalid/main.svelte | 2 ++ .../samples/event-handler-object/_config.js | 4 +-- .../samples/event-handler-object/main.svelte | 33 +++++++++---------- 4 files changed, 26 insertions(+), 22 deletions(-) diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js index 81b1b0e39892..63a380c80fe8 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/_config.js @@ -14,17 +14,20 @@ export default test({ window.addEventListener('error', handler, true); - const [b1, b2] = target.querySelectorAll('button'); + const [b1, b2, b3] = target.querySelectorAll('button'); b1.click(); b2.click(); + b3.click(); assert.deepEqual(logs, []); assert.deepEqual(warnings, [ - '`click` handler at main.svelte:6:17 should be a function. Did you mean to add a leading `() =>`?', - '`click` handler at main.svelte:7:17 should be a function. Did you mean to add a leading `() =>`?' + '`click` handler at main.svelte:7:17 should be a function. Did you mean to add a leading `() =>`?', + '`click` handler at main.svelte:8:17 should be a function. Did you mean to add a leading `() =>`?', + '`click` handler at main.svelte:9:17 should be a function. Did you mean to add a leading `() =>`?' ]); assert.include(errors[0], 'is not a function'); assert.include(errors[2], 'is not a function'); + assert.include(errors[4], 'is not a function'); window.removeEventListener('error', handler, true); } diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte index a0987bdb74dd..881cfc317738 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-invalid/main.svelte @@ -1,7 +1,9 @@ + diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js index 938a0a311bfb..84d836fd409b 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js @@ -13,10 +13,10 @@ export default test({ flushSync(); buttons.forEach((b) => b.click()); flushSync(); - assert.deepEqual(logs, [2, 5, 6, 7, 9, 11]); + assert.deepEqual(logs, [true, true, "mutated", "mutated", "assigned", "assigned"]); assert.htmlEqual( target.innerHTML, - '' + '' ); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte index 88ec8fde2eec..3cc1832f9641 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte @@ -1,39 +1,38 @@ - - + + From 502a772cf9d6189f36e0b81ced5b8788cfdfeb90 Mon Sep 17 00:00:00 2001 From: 7nik Date: Fri, 2 May 2025 19:09:00 +0300 Subject: [PATCH 4/5] fix lint --- .../runtime-runes/samples/event-handler-object/_config.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js index 84d836fd409b..6bed6665967f 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js @@ -13,10 +13,7 @@ export default test({ flushSync(); buttons.forEach((b) => b.click()); flushSync(); - assert.deepEqual(logs, [true, true, "mutated", "mutated", "assigned", "assigned"]); - assert.htmlEqual( - target.innerHTML, - '' - ); + assert.deepEqual(logs, [true, true, 'mutated', 'mutated', 'assigned', 'assigned']); + assert.htmlEqual(target.innerHTML, ''); } }); From c5b92b1a211c3456a2cb77e809a2402c0d554864 Mon Sep 17 00:00:00 2001 From: 7nik Date: Mon, 12 May 2025 00:38:14 +0300 Subject: [PATCH 5/5] fix handleEvent this --- .../src/internal/client/dom/elements/events.js | 7 +------ .../samples/event-handler-object-dev/main.svelte | 4 ++-- .../samples/event-handler-object/_config.js | 15 ++++++++++++++- .../samples/event-handler-object/main.svelte | 6 +++--- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js index b3ddbbe68a71..a26705f421d4 100644 --- a/packages/svelte/src/internal/client/dom/elements/events.js +++ b/packages/svelte/src/internal/client/dom/elements/events.js @@ -57,12 +57,7 @@ export function call_event_handler(handler, current_target, event, data = []) { if (typeof handler === 'function') { handler.call(current_target, event, ...data); } else { - if (handler && handler.handleEvent == null) { - // @ts-expect-error - do so to get a nicer "handler.handleEvent is not a function" error instead of "Cannot read properties of null (reading 'call')" - handler.handleEvent(); - } else { - handler?.handleEvent.call(current_target, event); - } + handler?.handleEvent(event); } } diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte index c66fdeea5afc..d9d0213a9119 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object-dev/main.svelte @@ -2,8 +2,8 @@ let count = $state(0); let onclick = $state({ - handleEvent() { - count += +this.dataset.step; + handleEvent(ev) { + count += +ev.currentTarget.dataset.step; } }); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js index 6bed6665967f..8b8586a480a3 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/_config.js @@ -13,7 +13,20 @@ export default test({ flushSync(); buttons.forEach((b) => b.click()); flushSync(); - assert.deepEqual(logs, [true, true, 'mutated', 'mutated', 'assigned', 'assigned']); + assert.deepEqual(logs, [ + 'click', + true, + 'click', + true, + 'mutated', + true, + 'mutated', + true, + 'assigned', + true, + 'assigned', + true + ]); assert.htmlEqual(target.innerHTML, ''); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte index 3cc1832f9641..c270b989c122 100644 --- a/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/event-handler-object/main.svelte @@ -3,16 +3,16 @@ let onclick = $state.raw({ handleEvent(ev) { - console.log(this === ev.currentTarget); + console.log(ev.type, this === onclick); } }); function click2() { - console.log("mutated"); + console.log("mutated", this === onclick); } function click3() { - console.log("assigned"); + console.log("assigned", this === onclick); } let btn;