Skip to content

breaking: removed deferred event updates #11855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 31, 2024
Merged

breaking: removed deferred event updates #11855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
335a49e
breaking: removed deferred event updates
trueadm May 31, 2024
6be30df
conflict
trueadm May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sixty-plants-cover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"svelte": patch
---

breaking: removed deferred event updates
13 changes: 5 additions & 8 deletions packages/svelte/src/internal/client/dom/elements/bindings/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { stringify } from '../../../render.js';
import { listen_to_event_and_reset_event } from './shared.js';
import * as e from '../../../errors.js';
import { get_proxied_value, is } from '../../../proxy.js';
import { yield_event_updates } from '../../../runtime.js';

/**
* @param {HTMLInputElement} input
Expand All @@ -19,9 +18,7 @@ export function bind_value(input, get_value, update) {
e.bind_invalid_checkbox_value();
}

yield_event_updates(() =>
update(is_numberlike_input(input) ? to_number(input.value) : input.value)
);
update(is_numberlike_input(input) ? to_number(input.value) : input.value);
});

render_effect(() => {
Expand Down Expand Up @@ -87,10 +84,10 @@ export function bind_group(inputs, group_index, input, get_value, update) {
value = get_binding_group_value(binding_group, value, input.checked);
}

yield_event_updates(() => update(value));
update(value);
},
// TODO better default value handling
() => yield_event_updates(() => update(is_checkbox ? [] : null))
() => update(is_checkbox ? [] : null)
);

render_effect(() => {
Expand Down Expand Up @@ -131,7 +128,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
export function bind_checked(input, get_value, update) {
listen_to_event_and_reset_event(input, 'change', () => {
var value = input.checked;
yield_event_updates(() => update(value));
update(value);
});

if (get_value() == undefined) {
Expand Down Expand Up @@ -190,7 +187,7 @@ function to_number(value) {
*/
export function bind_files(input, get_value, update) {
listen_to_event_and_reset_event(input, 'change', () => {
yield_event_updates(() => update(input.files));
update(input.files);
});
render_effect(() => {
input.files = get_value();
Expand Down
25 changes: 10 additions & 15 deletions packages/svelte/src/internal/client/dom/elements/bindings/media.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { hydrating } from '../../hydration.js';
import { render_effect, effect } from '../../../reactivity/effects.js';
import { listen } from './shared.js';
import { yield_event_updates } from '../../../runtime.js';

/** @param {TimeRanges} ranges */
function time_ranges_to_array(ranges) {
Expand Down Expand Up @@ -36,7 +35,7 @@ export function bind_current_time(media, get_value, update) {
}

updating = true;
yield_event_updates(() => update(media.currentTime));
update(media.currentTime);
};

raf_id = requestAnimationFrame(callback);
Expand All @@ -61,9 +60,7 @@ export function bind_current_time(media, get_value, update) {
* @param {(array: Array<{ start: number; end: number }>) => void} update
*/
export function bind_buffered(media, update) {
listen(media, ['loadedmetadata', 'progress'], () =>
yield_event_updates(() => update(time_ranges_to_array(media.buffered)))
);
listen(media, ['loadedmetadata', 'progress'], () => update(time_ranges_to_array(media.buffered)));
}

/**
Expand All @@ -79,25 +76,23 @@ export function bind_seekable(media, update) {
* @param {(array: Array<{ start: number; end: number }>) => void} update
*/
export function bind_played(media, update) {
listen(media, ['timeupdate'], () =>
yield_event_updates(() => update(time_ranges_to_array(media.played)))
);
listen(media, ['timeupdate'], () => update(time_ranges_to_array(media.played)));
}

/**
* @param {HTMLVideoElement | HTMLAudioElement} media
* @param {(seeking: boolean) => void} update
*/
export function bind_seeking(media, update) {
listen(media, ['seeking', 'seeked'], () => yield_event_updates(() => update(media.seeking)));
listen(media, ['seeking', 'seeked'], () => update(media.seeking));
}

/**
* @param {HTMLVideoElement | HTMLAudioElement} media
* @param {(seeking: boolean) => void} update
*/
export function bind_ended(media, update) {
listen(media, ['timeupdate', 'ended'], () => yield_event_updates(() => update(media.ended)));
listen(media, ['timeupdate', 'ended'], () => update(media.ended));
}

/**
Expand All @@ -108,7 +103,7 @@ export function bind_ready_state(media, update) {
listen(
media,
['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
() => yield_event_updates(() => update(media.readyState))
() => update(media.readyState)
);
}

Expand All @@ -132,7 +127,7 @@ export function bind_playback_rate(media, get_value, update) {
}

listen(media, ['ratechange'], () => {
if (!updating) yield_event_updates(() => update(media.playbackRate));
if (!updating) update(media.playbackRate);
updating = false;
});
});
Expand All @@ -150,7 +145,7 @@ export function bind_paused(media, get_value, update) {
var callback = () => {
if (paused !== media.paused) {
paused = media.paused;
yield_event_updates(() => update((paused = media.paused)));
update((paused = media.paused));
}
};

Expand All @@ -175,7 +170,7 @@ export function bind_paused(media, get_value, update) {
media.pause();
} else {
media.play().catch(() => {
yield_event_updates(() => update((paused = true)));
update((paused = true));
});
}
};
Expand Down Expand Up @@ -239,7 +234,7 @@ export function bind_muted(media, get_value, update) {

var callback = () => {
updating = true;
yield_event_updates(() => update(media.muted));
update(media.muted);
};

if (get_value() == null) {
Expand Down
3 changes: 1 addition & 2 deletions packages/svelte/src/internal/client/dom/elements/bindings/navigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { yield_event_updates } from '../../../runtime.js';
import { listen } from './shared.js';

/**
Expand All @@ -7,6 +6,6 @@ import { listen } from './shared.js';
*/
export function bind_online(update) {
listen(window, ['online', 'offline'], () => {
yield_event_updates(() => update(navigator.onLine));
update(navigator.onLine);
});
}
4 changes: 2 additions & 2 deletions packages/svelte/src/internal/client/dom/elements/bindings/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { effect } from '../../../reactivity/effects.js';
import { listen_to_event_and_reset_event } from './shared.js';
import { untrack, yield_event_updates } from '../../../runtime.js';
import { untrack } from '../../../runtime.js';
import { is } from '../../../proxy.js';

/**
Expand Down Expand Up @@ -90,7 +90,7 @@ export function bind_select_value(select, get_value, update) {
value = selected_option && get_option_value(selected_option);
}

yield_event_updates(() => update(value));
update(value);
});

// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated
Expand Down
9 changes: 3 additions & 6 deletions packages/svelte/src/internal/client/dom/elements/bindings/size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { effect, render_effect } from '../../../reactivity/effects.js';
import { untrack, yield_event_updates } from '../../../runtime.js';
import { untrack } from '../../../runtime.js';

/**
* Resize observer singleton.
Expand Down Expand Up @@ -88,10 +88,7 @@ export function bind_resize_observer(element, type, update) {
? resize_observer_border_box
: resize_observer_device_pixel_content_box;

var unsub = observer.observe(
element,
/** @param {any} entry */ (entry) => yield_event_updates(() => update(entry[type]))
);
var unsub = observer.observe(element, /** @param {any} entry */ (entry) => update(entry[type]));
render_effect(() => unsub);
}

Expand All @@ -104,7 +101,7 @@ export function bind_element_size(element, type, update) {
var unsub = resize_observer_border_box.observe(element, () => update(element[type]));

effect(() => {
yield_event_updates(() => untrack(() => update(element[type])));
update(element[type]);
return unsub;
});
}
16 changes: 7 additions & 9 deletions packages/svelte/src/internal/client/dom/elements/bindings/this.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { STATE_SYMBOL } from '../../../constants.js';
import { effect, render_effect } from '../../../reactivity/effects.js';
import { untrack, yield_event_updates } from '../../../runtime.js';
import { untrack } from '../../../runtime.js';
import { queue_micro_task } from '../../task.js';

/**
Expand Down Expand Up @@ -37,14 +37,12 @@ export function bind_this(element_or_component, update, get_value, get_parts) {

untrack(() => {
if (element_or_component !== get_value(...parts)) {
yield_event_updates(() => {
update(element_or_component, ...parts);
// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
// the previous position if it isn't already taken over by a different effect.
if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
update(null, ...old_parts);
}
});
update(element_or_component, ...parts);
// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
// the previous position if it isn't already taken over by a different effect.
if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
update(null, ...old_parts);
}
}
});
});
Expand Down
5 changes: 2 additions & 3 deletions packages/svelte/src/internal/client/dom/elements/bindings/window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { effect, render_effect } from '../../../reactivity/effects.js';
import { yield_event_updates } from '../../../runtime.js';
import { listen } from './shared.js';

/**
Expand All @@ -16,7 +15,7 @@ export function bind_window_scroll(type, get_value, update) {
clearTimeout(timeout);
timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)

yield_event_updates(() => update(window[is_scrolling_x ? 'scrollX' : 'scrollY']));
update(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
};

addEventListener('scroll', target_handler, {
Expand Down Expand Up @@ -64,5 +63,5 @@ export function bind_window_scroll(type, get_value, update) {
* @param {(size: number) => void} update
*/
export function bind_window_size(type, update) {
listen(window, ['resize'], () => yield_event_updates(() => update(window[type])));
listen(window, ['resize'], () => update(window[type]));
}
64 changes: 31 additions & 33 deletions packages/svelte/src/internal/client/dom/elements/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { render_effect } from '../../reactivity/effects.js';
import { all_registered_events, root_event_handles } from '../../render.js';
import { yield_event_updates } from '../../runtime.js';
import { define_property, is_array } from '../../utils.js';
import { hydrating } from '../hydration.js';
import { queue_micro_task } from '../task.js';
Expand Down Expand Up @@ -48,7 +47,7 @@ export function create_event(event_name, dom, handler, options) {
handle_event_propagation(dom, event);
}
if (!event.cancelBubble) {
return yield_event_updates(() => handler.call(this, event));
return handler.call(this, event);
}
}

Expand Down Expand Up @@ -182,42 +181,41 @@ export function handle_event_propagation(handler_element, event) {
* @type {unknown[]}
*/
var other_errors = [];
yield_event_updates(() => {
while (current_target !== null) {
/** @type {null | Element} */
var parent_element =
current_target.parentNode || /** @type {any} */ (current_target).host || null;

try {
// @ts-expect-error
var delegated = current_target['__' + event_name];

if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
if (is_array(delegated)) {
var [fn, ...data] = delegated;
fn.apply(current_target, [event, ...data]);
} else {
delegated.call(current_target, event);
}
}
} catch (error) {
if (throw_error) {
other_errors.push(error);
while (current_target !== null) {
/** @type {null | Element} */
var parent_element =
current_target.parentNode || /** @type {any} */ (current_target).host || null;

try {
// @ts-expect-error
var delegated = current_target['__' + event_name];

if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
if (is_array(delegated)) {
var [fn, ...data] = delegated;
fn.apply(current_target, [event, ...data]);
} else {
throw_error = error;
delegated.call(current_target, event);
}
}
if (
event.cancelBubble ||
parent_element === handler_element ||
parent_element === null ||
current_target === handler_element
) {
break;
} catch (error) {
if (throw_error) {
other_errors.push(error);
} else {
throw_error = error;
}
current_target = parent_element;
}
});
if (
event.cancelBubble ||
parent_element === handler_element ||
parent_element === null ||
current_target === handler_element
) {
break;
}
current_target = parent_element;
}

if (throw_error) {
for (let error of other_errors) {
// Throw the rest of the errors, one-by-one on a microtask
Expand Down
Loading
Loading