msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: cleanup event changes (#11821)

Browse Source 
Takes some changes from #11810 that are only cleanup/renaming.
pull/11825/head
Dominic Gannaway 1 year ago committed by GitHub
parent 5620882d6e
commit 5f7bfac59a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File

14
packages/svelte/src/internal/client/dom/elements/bindings/input.js
Unescape View File

@ -4,7 +4,7 @@ import { stringify } from '../../../render.js';
import { listen_to_event_and_reset_event } from './shared.js'; import { listen_to_event_and_reset_event } from './shared.js';
import * as e from '../../../errors.js'; import * as e from '../../../errors.js';
import { get_proxied_value, is } from '../../../proxy.js'; import { get_proxied_value, is } from '../../../proxy.js';
import { yield_updates } from '../../../runtime.js'; import { yield_event_updates } from '../../../runtime.js';
/** /**
* @param {HTMLInputElement} input * @param {HTMLInputElement} input
@ -19,7 +19,9 @@ export function bind_value(input, get_value, update) {
e.bind_invalid_checkbox_value(); e.bind_invalid_checkbox_value();
} }
yield_updates(() => update(is_numberlike_input(input) ? to_number(input.value) : input.value)); yield_event_updates(() =>
update(is_numberlike_input(input) ? to_number(input.value) : input.value)
);
}); });
render_effect(() => { render_effect(() => {
@ -85,10 +87,10 @@ export function bind_group(inputs, group_index, input, get_value, update) {
value = get_binding_group_value(binding_group, value, input.checked); value = get_binding_group_value(binding_group, value, input.checked);
} }
yield_updates(() => update(value)); yield_event_updates(() => update(value));
}, },
// TODO better default value handling // TODO better default value handling
() => yield_updates(() => update(is_checkbox ? [] : null)) () => yield_event_updates(() => update(is_checkbox ? [] : null))
); );
render_effect(() => { render_effect(() => {
@ -129,7 +131,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
export function bind_checked(input, get_value, update) { export function bind_checked(input, get_value, update) {
listen_to_event_and_reset_event(input, 'change', () => { listen_to_event_and_reset_event(input, 'change', () => {
var value = input.checked; var value = input.checked;
yield_updates(() => update(value)); yield_event_updates(() => update(value));
}); });
if (get_value() == undefined) { if (get_value() == undefined) {
@ -188,7 +190,7 @@ function to_number(value) {
*/ */
export function bind_files(input, get_value, update) { export function bind_files(input, get_value, update) {
listen_to_event_and_reset_event(input, 'change', () => { listen_to_event_and_reset_event(input, 'change', () => {
yield_updates(() => update(input.files)); yield_event_updates(() => update(input.files));
}); });
render_effect(() => { render_effect(() => {
input.files = get_value(); input.files = get_value();

22
packages/svelte/src/internal/client/dom/elements/bindings/media.js
Unescape View File

@ -1,7 +1,7 @@
import { hydrating } from '../../hydration.js'; import { hydrating } from '../../hydration.js';
import { render_effect, effect } from '../../../reactivity/effects.js'; import { render_effect, effect } from '../../../reactivity/effects.js';
import { listen } from './shared.js'; import { listen } from './shared.js';
import { yield_updates } from '../../../runtime.js'; import { yield_event_updates } from '../../../runtime.js';
/** @param {TimeRanges} ranges */ /** @param {TimeRanges} ranges */
function time_ranges_to_array(ranges) { function time_ranges_to_array(ranges) {
@ -36,7 +36,7 @@ export function bind_current_time(media, get_value, update) {
} }
updating = true; updating = true;
yield_updates(() => update(media.currentTime)); yield_event_updates(() => update(media.currentTime));
}; };
raf_id = requestAnimationFrame(callback); raf_id = requestAnimationFrame(callback);
@ -62,7 +62,7 @@ export function bind_current_time(media, get_value, update) {
*/ */
export function bind_buffered(media, update) { export function bind_buffered(media, update) {
listen(media, ['loadedmetadata', 'progress'], () => listen(media, ['loadedmetadata', 'progress'], () =>
yield_updates(() => update(time_ranges_to_array(media.buffered))) yield_event_updates(() => update(time_ranges_to_array(media.buffered)))
); );
} }
@ -80,7 +80,7 @@ export function bind_seekable(media, update) {
*/ */
export function bind_played(media, update) { export function bind_played(media, update) {
listen(media, ['timeupdate'], () => listen(media, ['timeupdate'], () =>
yield_updates(() => update(time_ranges_to_array(media.played))) yield_event_updates(() => update(time_ranges_to_array(media.played)))
); );
} }
@ -89,7 +89,7 @@ export function bind_played(media, update) {
* @param {(seeking: boolean) => void} update * @param {(seeking: boolean) => void} update
*/ */
export function bind_seeking(media, update) { export function bind_seeking(media, update) {
listen(media, ['seeking', 'seeked'], () => yield_updates(() => update(media.seeking))); listen(media, ['seeking', 'seeked'], () => yield_event_updates(() => update(media.seeking)));
} }
/** /**
@ -97,7 +97,7 @@ export function bind_seeking(media, update) {
* @param {(seeking: boolean) => void} update * @param {(seeking: boolean) => void} update
*/ */
export function bind_ended(media, update) { export function bind_ended(media, update) {
listen(media, ['timeupdate', 'ended'], () => yield_updates(() => update(media.ended))); listen(media, ['timeupdate', 'ended'], () => yield_event_updates(() => update(media.ended)));
} }
/** /**
@ -108,7 +108,7 @@ export function bind_ready_state(media, update) {
listen( listen(
media, media,
['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'], ['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],
() => yield_updates(() => update(media.readyState)) () => yield_event_updates(() => update(media.readyState))
); );
} }
@ -132,7 +132,7 @@ export function bind_playback_rate(media, get_value, update) {
} }
listen(media, ['ratechange'], () => { listen(media, ['ratechange'], () => {
if (!updating) yield_updates(() => update(media.playbackRate)); if (!updating) yield_event_updates(() => update(media.playbackRate));
updating = false; updating = false;
}); });
}); });
@ -150,7 +150,7 @@ export function bind_paused(media, get_value, update) {
var callback = () => { var callback = () => {
if (paused !== media.paused) { if (paused !== media.paused) {
paused = media.paused; paused = media.paused;
yield_updates(() => update((paused = media.paused))); yield_event_updates(() => update((paused = media.paused)));
} }
}; };
@ -175,7 +175,7 @@ export function bind_paused(media, get_value, update) {
media.pause(); media.pause();
} else { } else {
media.play().catch(() => { media.play().catch(() => {
yield_updates(() => update((paused = true))); yield_event_updates(() => update((paused = true)));
}); });
} }
}; };
@ -239,7 +239,7 @@ export function bind_muted(media, get_value, update) {
var callback = () => { var callback = () => {
updating = true; updating = true;
yield_updates(() => update(media.muted)); yield_event_updates(() => update(media.muted));
}; };
if (get_value() == null) { if (get_value() == null) {

4
packages/svelte/src/internal/client/dom/elements/bindings/navigator.js
Unescape View File

@ -1,4 +1,4 @@
import { yield_updates } from '../../../runtime.js'; import { yield_event_updates } from '../../../runtime.js';
import { listen } from './shared.js'; import { listen } from './shared.js';
/** /**
@ -7,6 +7,6 @@ import { listen } from './shared.js';
*/ */
export function bind_online(update) { export function bind_online(update) {
listen(window, ['online', 'offline'], () => { listen(window, ['online', 'offline'], () => {
yield_updates(() => update(navigator.onLine)); yield_event_updates(() => update(navigator.onLine));
}); });
} }

4
packages/svelte/src/internal/client/dom/elements/bindings/select.js
Unescape View File

@ -1,6 +1,6 @@
import { effect } from '../../../reactivity/effects.js'; import { effect } from '../../../reactivity/effects.js';
import { listen_to_event_and_reset_event } from './shared.js'; import { listen_to_event_and_reset_event } from './shared.js';
import { untrack, yield_updates } from '../../../runtime.js'; import { untrack, yield_event_updates } from '../../../runtime.js';
import { is } from '../../../proxy.js'; import { is } from '../../../proxy.js';
/** /**
@ -90,7 +90,7 @@ export function bind_select_value(select, get_value, update) {
value = selected_option && get_option_value(selected_option); value = selected_option && get_option_value(selected_option);
} }
yield_updates(() => update(value)); yield_event_updates(() => 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 // 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

6
packages/svelte/src/internal/client/dom/elements/bindings/size.js
Unescape View File

@ -1,5 +1,5 @@
import { effect, render_effect } from '../../../reactivity/effects.js'; import { effect, render_effect } from '../../../reactivity/effects.js';
import { untrack, yield_updates } from '../../../runtime.js'; import { untrack, yield_event_updates } from '../../../runtime.js';
/** /**
* Resize observer singleton. * Resize observer singleton.
@ -90,7 +90,7 @@ export function bind_resize_observer(element, type, update) {
var unsub = observer.observe( var unsub = observer.observe(
element, element,
/** @param {any} entry */ (entry) => yield_updates(() => update(entry[type])) /** @param {any} entry */ (entry) => yield_event_updates(() => update(entry[type]))
); );
render_effect(() => unsub); render_effect(() => unsub);
} }
@ -104,7 +104,7 @@ export function bind_element_size(element, type, update) {
var unsub = resize_observer_border_box.observe(element, () => update(element[type])); var unsub = resize_observer_border_box.observe(element, () => update(element[type]));
effect(() => { effect(() => {
yield_updates(() => untrack(() => update(element[type]))); yield_event_updates(() => untrack(() => update(element[type])));
return unsub; return unsub;
}); });
} }

4
packages/svelte/src/internal/client/dom/elements/bindings/this.js
Unescape View File

@ -1,6 +1,6 @@
import { STATE_SYMBOL } from '../../../constants.js'; import { STATE_SYMBOL } from '../../../constants.js';
import { effect, render_effect } from '../../../reactivity/effects.js'; import { effect, render_effect } from '../../../reactivity/effects.js';
import { untrack, yield_updates } from '../../../runtime.js'; import { untrack, yield_event_updates } from '../../../runtime.js';
import { queue_micro_task } from '../../task.js'; import { queue_micro_task } from '../../task.js';
/** /**
@ -37,7 +37,7 @@ export function bind_this(element_or_component, update, get_value, get_parts) {
untrack(() => { untrack(() => {
if (element_or_component !== get_value(...parts)) { if (element_or_component !== get_value(...parts)) {
yield_updates(() => { yield_event_updates(() => {
update(element_or_component, ...parts); update(element_or_component, ...parts);
// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at // 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. // the previous position if it isn't already taken over by a different effect.

6
packages/svelte/src/internal/client/dom/elements/bindings/window.js
Unescape View File

@ -1,5 +1,5 @@
import { effect, render_effect } from '../../../reactivity/effects.js'; import { effect, render_effect } from '../../../reactivity/effects.js';
import { yield_updates } from '../../../runtime.js'; import { yield_event_updates } from '../../../runtime.js';
import { listen } from './shared.js'; import { listen } from './shared.js';
/** /**
@ -16,7 +16,7 @@ export function bind_window_scroll(type, get_value, update) {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?) timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
yield_updates(() => update(window[is_scrolling_x ? 'scrollX' : 'scrollY'])); yield_event_updates(() => update(window[is_scrolling_x ? 'scrollX' : 'scrollY']));
}; };
addEventListener('scroll', target_handler, { addEventListener('scroll', target_handler, {
@ -64,5 +64,5 @@ export function bind_window_scroll(type, get_value, update) {
* @param {(size: number) => void} update * @param {(size: number) => void} update
*/ */
export function bind_window_size(type, update) { export function bind_window_size(type, update) {
listen(window, ['resize'], () => yield_updates(() => update(window[type]))); listen(window, ['resize'], () => yield_event_updates(() => update(window[type])));
} }

6
packages/svelte/src/internal/client/dom/elements/events.js
Unescape View File

@ -1,6 +1,6 @@
import { render_effect } from '../../reactivity/effects.js'; import { render_effect } from '../../reactivity/effects.js';
import { all_registered_events, root_event_handles } from '../../render.js'; import { all_registered_events, root_event_handles } from '../../render.js';
import { yield_updates } from '../../runtime.js'; import { yield_event_updates } from '../../runtime.js';
import { define_property, is_array } from '../../utils.js'; import { define_property, is_array } from '../../utils.js';
import { hydrating } from '../hydration.js'; import { hydrating } from '../hydration.js';
import { queue_micro_task } from '../task.js'; import { queue_micro_task } from '../task.js';
@ -48,7 +48,7 @@ export function create_event(event_name, dom, handler, options) {
handle_event_propagation(dom, event); handle_event_propagation(dom, event);
} }
if (!event.cancelBubble) { if (!event.cancelBubble) {
return yield_updates(() => handler.call(this, event)); return yield_event_updates(() => handler.call(this, event));
} }
} }
@ -204,7 +204,7 @@ export function handle_event_propagation(handler_element, event) {
} }
try { try {
yield_updates(() => next(/** @type {Element} */ (current_target))); yield_event_updates(() => next(/** @type {Element} */ (current_target)));
} finally { } finally {
// @ts-expect-error is used above // @ts-expect-error is used above
event.__root = handler_element; event.__root = handler_element;

4
packages/svelte/src/internal/client/runtime.js
Unescape View File

@ -738,7 +738,7 @@ function process_effects(effect, collected_effects) {
/** /**
* @param {{ (): void; (): any; }} fn * @param {{ (): void; (): any; }} fn
*/ */
export function yield_updates(fn) { export function yield_event_updates(fn) {
const previous_scheduler_mode = current_scheduler_mode; const previous_scheduler_mode = current_scheduler_mode;
try { try {
current_scheduler_mode = FLUSH_YIELD; current_scheduler_mode = FLUSH_YIELD;
@ -767,6 +767,8 @@ export function flush_sync(fn, flush_previous = true) {
current_scheduler_mode = FLUSH_SYNC; current_scheduler_mode = FLUSH_SYNC;
current_queued_root_effects = root_effects; current_queued_root_effects = root_effects;
is_yield_task_queued = false;
is_micro_task_queued = false;
if (flush_previous) { if (flush_previous) {
flush_queued_root_effects(previous_queued_root_effects); flush_queued_root_effects(previous_queued_root_effects);

16
packages/svelte/tests/runtime-legacy/samples/binding-input-group-each-7/_config.js
Unescape View File

@ -1,3 +1,4 @@
import { flushSync } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -22,15 +23,15 @@ export default test({
<input type="checkbox" value="c" data-index="z-2"> <input type="checkbox" value="c" data-index="z-2">
`, `,
async test({ assert, target, window }) { test({ assert, target, window }) {
const inputs = target.querySelectorAll('input'); const inputs = target.querySelectorAll('input');
const checked = new Set(); const checked = new Set();
/** @param {number} i */ /** @param {number} i */
const checkInbox = async (i) => { const checkInbox = (i) => {
checked.add(i); checked.add(i);
inputs[i].checked = true; inputs[i].checked = true;
await inputs[i].dispatchEvent(event); inputs[i].dispatchEvent(event);
}; };
for (let i = 0; i < 18; i++) { for (let i = 0; i < 18; i++) {
@ -39,17 +40,20 @@ export default test({
const event = new window.Event('change'); const event = new window.Event('change');
await checkInbox(2); checkInbox(2);
flushSync();
for (let i = 0; i < 18; i++) { for (let i = 0; i < 18; i++) {
assert.equal(inputs[i].checked, checked.has(i)); assert.equal(inputs[i].checked, checked.has(i));
} }
await checkInbox(12); checkInbox(12);
flushSync();
for (let i = 0; i < 18; i++) { for (let i = 0; i < 18; i++) {
assert.equal(inputs[i].checked, checked.has(i)); assert.equal(inputs[i].checked, checked.has(i));
} }
await checkInbox(8); checkInbox(8);
flushSync();
for (let i = 0; i < 18; i++) { for (let i = 0; i < 18; i++) {
assert.equal(inputs[i].checked, checked.has(i)); assert.equal(inputs[i].checked, checked.has(i));
} }

4
packages/svelte/tests/runtime-legacy/samples/binding-input-number-2/_config.js
Unescape View File

@ -1,3 +1,4 @@
import { flushSync } from 'svelte';
import { ok, test } from '../../test'; import { ok, test } from '../../test';
export default test({ export default test({
@ -16,6 +17,7 @@ export default test({
input.value = '5.'; input.value = '5.';
input.dispatchEvent(inputEvent); input.dispatchEvent(inputEvent);
flushSync();
// input type number has value === "" if ends with dot/comma // input type number has value === "" if ends with dot/comma
assert.equal(component.value, undefined); assert.equal(component.value, undefined);
@ -23,12 +25,14 @@ export default test({
input.value = '5.5'; input.value = '5.5';
input.dispatchEvent(inputEvent); input.dispatchEvent(inputEvent);
flushSync();
assert.equal(component.value, 5.5); assert.equal(component.value, 5.5);
assert.equal(input.value, '5.5'); assert.equal(input.value, '5.5');
input.value = '5.50'; input.value = '5.50';
input.dispatchEvent(inputEvent); input.dispatchEvent(inputEvent);
flushSync();
assert.equal(component.value, 5.5); assert.equal(component.value, 5.5);
assert.equal(input.value, '5.50'); assert.equal(input.value, '5.50');

Write Preview
Loading…
Cancel
Save