@depup/svelte 5.53.3-depup.0

package/src/internal/client/dom/elements/bindings/select.js

@@ -0,0 +1,159 @@
+import { effect, teardown } from '../../../reactivity/effects.js';
+import { listen_to_event_and_reset_event } from './shared.js';
+import { is } from '../../../proxy.js';
+import { is_array } from '../../../../shared/utils.js';
+import * as w from '../../../warnings.js';
+import { Batch, current_batch, previous_batch } from '../../../reactivity/batch.js';
+
+/**
+ * Selects the correct option(s) (depending on whether this is a multiple select)
+ * @template V
+ * @param {HTMLSelectElement} select
+ * @param {V} value
+ * @param {boolean} mounting
+ */
+export function select_option(select, value, mounting = false) {
+	if (select.multiple) {
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			return w.select_multiple_invalid_value();
+		}
+
+		// Otherwise, update the selection
+		for (var option of select.options) {
+			option.selected = value.includes(get_option_value(option));
+		}
+
+		return;
+	}
+
+	for (option of select.options) {
+		var option_value = get_option_value(option);
+		if (is(option_value, value)) {
+			option.selected = true;
+			return;
+		}
+	}
+
+	if (!mounting || value !== undefined) {
+		select.selectedIndex = -1; // no option should be selected
+	}
+}
+
+/**
+ * Selects the correct option(s) if `value` is given,
+ * and then sets up a mutation observer to sync the
+ * current selection to the dom when it changes. Such
+ * changes could for example occur when options are
+ * inside an `#each` block.
+ * @param {HTMLSelectElement} select
+ */
+export function init_select(select) {
+	var observer = new MutationObserver(() => {
+		// @ts-ignore
+		select_option(select, select.__value);
+		// Deliberately don't update the potential binding value,
+		// the model should be preserved unless explicitly changed
+	});
+
+	observer.observe(select, {
+		// Listen to option element changes
+		childList: true,
+		subtree: true, // because of <optgroup>
+		// Listen to option element value attribute changes
+		// (doesn't get notified of select value changes,
+		// because that property is not reflected as an attribute)
+		attributes: true,
+		attributeFilter: ['value']
+	});
+
+	teardown(() => {
+		observer.disconnect();
+	});
+}
+
+/**
+ * @param {HTMLSelectElement} select
+ * @param {() => unknown} get
+ * @param {(value: unknown) => void} set
+ * @returns {void}
+ */
+export function bind_select_value(select, get, set = get) {
+	var batches = new WeakSet();
+	var mounting = true;
+
+	listen_to_event_and_reset_event(select, 'change', (is_reset) => {
+		var query = is_reset ? '[selected]' : ':checked';
+		/** @type {unknown} */
+		var value;
+
+		if (select.multiple) {
+			value = [].map.call(select.querySelectorAll(query), get_option_value);
+		} else {
+			/** @type {HTMLOptionElement | null} */
+			var selected_option =
+				select.querySelector(query) ??
+				// will fall back to first non-disabled option if no option is selected
+				select.querySelector('option:not([disabled])');
+			value = selected_option && get_option_value(selected_option);
+		}
+
+		set(value);
+
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
+	});
+
+	// 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
+	effect(() => {
+		var value = get();
+
+		if (select === document.activeElement) {
+			// we need both, because in non-async mode, render effects run before previous_batch is set
+			var batch = /** @type {Batch} */ (previous_batch ?? current_batch);
+
+			// Don't update the <select> if it is focused. We can get here if, for example,
+			// an update is deferred because of async work depending on the select:
+			//
+			// <select bind:value={selected}>...</select>
+			// <p>{await find(selected)}</p>
+			if (batches.has(batch)) {
+				return;
+			}
+		}
+
+		select_option(select, value, mounting);
+
+		// Mounting and value undefined -> take selection from dom
+		if (mounting && value === undefined) {
+			/** @type {HTMLOptionElement | null} */
+			var selected_option = select.querySelector(':checked');
+			if (selected_option !== null) {
+				value = get_option_value(selected_option);
+				set(value);
+			}
+		}
+
+		// @ts-ignore
+		select.__value = value;
+		mounting = false;
+	});
+
+	init_select(select);
+}
+
+/** @param {HTMLOptionElement} option */
+function get_option_value(option) {
+	// __value only exists if the <option> has a value attribute
+	if ('__value' in option) {
+		return option.__value;
+	} else {
+		return option.value;
+	}
+}

package/src/internal/client/dom/elements/bindings/shared.js

@@ -0,0 +1,76 @@
+import { teardown } from '../../../reactivity/effects.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../../../runtime.js';
+import { add_form_reset_listener } from '../misc.js';
+
+/**
+ * Fires the handler once immediately (unless corresponding arg is set to `false`),
+ * then listens to the given events until the render effect context is destroyed
+ * @param {EventTarget} target
+ * @param {Array<string>} events
+ * @param {(event?: Event) => void} handler
+ * @param {any} call_handler_immediately
+ */
+export function listen(target, events, handler, call_handler_immediately = true) {
+	if (call_handler_immediately) {
+		handler();
+	}
+
+	for (var name of events) {
+		target.addEventListener(name, handler);
+	}
+
+	teardown(() => {
+		for (var name of events) {
+			target.removeEventListener(name, handler);
+		}
+	});
+}
+
+/**
+ * @template T
+ * @param {() => T} fn
+ */
+export function without_reactive_context(fn) {
+	var previous_reaction = active_reaction;
+	var previous_effect = active_effect;
+	set_active_reaction(null);
+	set_active_effect(null);
+	try {
+		return fn();
+	} finally {
+		set_active_reaction(previous_reaction);
+		set_active_effect(previous_effect);
+	}
+}
+
+/**
+ * Listen to the given event, and then instantiate a global form reset listener if not already done,
+ * to notify all bindings when the form is reset
+ * @param {HTMLElement} element
+ * @param {string} event
+ * @param {(is_reset?: true) => void} handler
+ * @param {(is_reset?: true) => void} [on_reset]
+ */
+export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
+	element.addEventListener(event, () => without_reactive_context(handler));
+	// @ts-expect-error
+	const prev = element.__on_r;
+	if (prev) {
+		// special case for checkbox that can have multiple binds (group & checked)
+		// @ts-expect-error
+		element.__on_r = () => {
+			prev();
+			on_reset(true);
+		};
+	} else {
+		// @ts-expect-error
+		element.__on_r = () => on_reset(true);
+	}
+
+	add_form_reset_listener();
+}

package/src/internal/client/dom/elements/bindings/size.js

@@ -0,0 +1,107 @@
+import { effect, teardown } from '../../../reactivity/effects.js';
+import { untrack } from '../../../runtime.js';
+
+/**
+ * We create one listener for all elements
+ * @see {@link https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ Explanation}
+ */
+class ResizeObserverSingleton {
+	/** */
+	#listeners = new WeakMap();
+
+	/** @type {ResizeObserver | undefined} */
+	#observer;
+
+	/** @type {ResizeObserverOptions} */
+	#options;
+
+	/** @static */
+	static entries = new WeakMap();
+
+	/** @param {ResizeObserverOptions} options */
+	constructor(options) {
+		this.#options = options;
+	}
+
+	/**
+	 * @param {Element} element
+	 * @param {(entry: ResizeObserverEntry) => any} listener
+	 */
+	observe(element, listener) {
+		var listeners = this.#listeners.get(element) || new Set();
+		listeners.add(listener);
+
+		this.#listeners.set(element, listeners);
+		this.#getObserver().observe(element, this.#options);
+
+		return () => {
+			var listeners = this.#listeners.get(element);
+			listeners.delete(listener);
+
+			if (listeners.size === 0) {
+				this.#listeners.delete(element);
+				/** @type {ResizeObserver} */ (this.#observer).unobserve(element);
+			}
+		};
+	}
+
+	#getObserver() {
+		return (
+			this.#observer ??
+			(this.#observer = new ResizeObserver(
+				/** @param {any} entries */ (entries) => {
+					for (var entry of entries) {
+						ResizeObserverSingleton.entries.set(entry.target, entry);
+						for (var listener of this.#listeners.get(entry.target) || []) {
+							listener(entry);
+						}
+					}
+				}
+			))
+		);
+	}
+}
+
+var resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'content-box'
+});
+
+var resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'border-box'
+});
+
+var resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({
+	box: 'device-pixel-content-box'
+});
+
+/**
+ * @param {Element} element
+ * @param {'contentRect' | 'contentBoxSize' | 'borderBoxSize' | 'devicePixelContentBoxSize'} type
+ * @param {(entry: keyof ResizeObserverEntry) => void} set
+ */
+export function bind_resize_observer(element, type, set) {
+	var observer =
+		type === 'contentRect' || type === 'contentBoxSize'
+			? resize_observer_content_box
+			: type === 'borderBoxSize'
+				? resize_observer_border_box
+				: resize_observer_device_pixel_content_box;
+
+	var unsub = observer.observe(element, /** @param {any} entry */ (entry) => set(entry[type]));
+	teardown(unsub);
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {'clientWidth' | 'clientHeight' | 'offsetWidth' | 'offsetHeight'} type
+ * @param {(size: number) => void} set
+ */
+export function bind_element_size(element, type, set) {
+	var unsub = resize_observer_border_box.observe(element, () => set(element[type]));
+
+	effect(() => {
+		// The update could contain reads which should be ignored
+		untrack(() => set(element[type]));
+		return unsub;
+	});
+}

package/src/internal/client/dom/elements/bindings/this.js

@@ -0,0 +1,61 @@
+import { STATE_SYMBOL } from '#client/constants';
+import { effect, render_effect } from '../../../reactivity/effects.js';
+import { untrack } from '../../../runtime.js';
+import { queue_micro_task } from '../../task.js';
+
+/**
+ * @param {any} bound_value
+ * @param {Element} element_or_component
+ * @returns {boolean}
+ */
+function is_bound_this(bound_value, element_or_component) {
+	return (
+		bound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component
+	);
+}
+
+/**
+ * @param {any} element_or_component
+ * @param {(value: unknown, ...parts: unknown[]) => void} update
+ * @param {(...parts: unknown[]) => unknown} get_value
+ * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,
+ * 										returns all the parts of the each block context that are used in the expression
+ * @returns {void}
+ */
+export function bind_this(element_or_component = {}, update, get_value, get_parts) {
+	effect(() => {
+		/** @type {unknown[]} */
+		var old_parts;
+
+		/** @type {unknown[]} */
+		var parts;
+
+		render_effect(() => {
+			old_parts = parts;
+			// We only track changes to the parts, not the value itself to avoid unnecessary reruns.
+			parts = get_parts?.() || [];
+
+			untrack(() => {
+				if (element_or_component !== get_value(...parts)) {
+					update(element_or_component, ...parts);
+					// If this is an effect rerun (cause: each block context changes), then nullify 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);
+					}
+				}
+			});
+		});
+
+		return () => {
+			// We cannot use effects in the teardown phase, we we use a microtask instead.
+			queue_micro_task(() => {
+				if (parts && is_bound_this(get_value(...parts), element_or_component)) {
+					update(null, ...parts);
+				}
+			});
+		};
+	});
+
+	return element_or_component;
+}

package/src/internal/client/dom/elements/bindings/universal.js

@@ -0,0 +1,75 @@
+import { render_effect, teardown } from '../../../reactivity/effects.js';
+import { listen } from './shared.js';
+
+/**
+ * @param {'innerHTML' | 'textContent' | 'innerText'} property
+ * @param {HTMLElement} element
+ * @param {() => unknown} get
+ * @param {(value: unknown) => void} set
+ * @returns {void}
+ */
+export function bind_content_editable(property, element, get, set = get) {
+	element.addEventListener('input', () => {
+		// @ts-ignore
+		set(element[property]);
+	});
+
+	render_effect(() => {
+		var value = get();
+
+		if (element[property] !== value) {
+			if (value == null) {
+				// @ts-ignore
+				var non_null_value = element[property];
+				set(non_null_value);
+			} else {
+				// @ts-ignore
+				element[property] = value + '';
+			}
+		}
+	});
+}
+
+/**
+ * @param {string} property
+ * @param {string} event_name
+ * @param {Element} element
+ * @param {(value: unknown) => void} set
+ * @param {() => unknown} [get]
+ * @returns {void}
+ */
+export function bind_property(property, event_name, element, set, get) {
+	var handler = () => {
+		// @ts-ignore
+		set(element[property]);
+	};
+
+	element.addEventListener(event_name, handler);
+
+	if (get) {
+		render_effect(() => {
+			// @ts-ignore
+			element[property] = get();
+		});
+	} else {
+		handler();
+	}
+
+	// @ts-ignore
+	if (element === document.body || element === window || element === document) {
+		teardown(() => {
+			element.removeEventListener(event_name, handler);
+		});
+	}
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {(value: unknown) => void} set
+ * @returns {void}
+ */
+export function bind_focused(element, set) {
+	listen(element, ['focus', 'blur'], () => {
+		set(element === document.activeElement);
+	});
+}

package/src/internal/client/dom/elements/bindings/window.js

@@ -0,0 +1,66 @@
+import { effect, render_effect, teardown } from '../../../reactivity/effects.js';
+import { listen, without_reactive_context } from './shared.js';
+
+/**
+ * @param {'x' | 'y'} type
+ * @param {() => number} get
+ * @param {(value: number) => void} set
+ * @returns {void}
+ */
+export function bind_window_scroll(type, get, set = get) {
+	var is_scrolling_x = type === 'x';
+
+	var target_handler = () =>
+		without_reactive_context(() => {
+			scrolling = true;
+			clearTimeout(timeout);
+			timeout = setTimeout(clear, 100); // TODO use scrollend event if supported (or when supported everywhere?)
+
+			set(window[is_scrolling_x ? 'scrollX' : 'scrollY']);
+		});
+
+	addEventListener('scroll', target_handler, {
+		passive: true
+	});
+
+	var scrolling = false;
+
+	/** @type {ReturnType<typeof setTimeout>} */
+	var timeout;
+	var clear = () => {
+		scrolling = false;
+	};
+	var first = true;
+
+	render_effect(() => {
+		var latest_value = get();
+		// Don't scroll to the initial value for accessibility reasons
+		if (first) {
+			first = false;
+		} else if (!scrolling && latest_value != null) {
+			scrolling = true;
+			clearTimeout(timeout);
+			if (is_scrolling_x) {
+				scrollTo(latest_value, window.scrollY);
+			} else {
+				scrollTo(window.scrollX, latest_value);
+			}
+			timeout = setTimeout(clear, 100);
+		}
+	});
+
+	// Browsers don't fire the scroll event for the initial scroll position when scroll style isn't set to smooth
+	effect(target_handler);
+
+	teardown(() => {
+		removeEventListener('scroll', target_handler);
+	});
+}
+
+/**
+ * @param {'innerWidth' | 'innerHeight' | 'outerWidth' | 'outerHeight'} type
+ * @param {(size: number) => void} set
+ */
+export function bind_window_size(type, set) {
+	listen(window, ['resize'], () => without_reactive_context(() => set(window[type])));
+}

package/src/internal/client/dom/elements/class.js

@@ -0,0 +1,51 @@
+import { to_class } from '../../../shared/attributes.js';
+import { hydrating } from '../hydration.js';
+
+/**
+ * @param {Element} dom
+ * @param {boolean | number} is_html
+ * @param {string | null} value
+ * @param {string} [hash]
+ * @param {Record<string, any>} [prev_classes]
+ * @param {Record<string, any>} [next_classes]
+ * @returns {Record<string, boolean> | undefined}
+ */
+export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
+	// @ts-expect-error need to add __className to patched prototype
+	var prev = dom.__className;
+
+	if (
+		hydrating ||
+		prev !== value ||
+		prev === undefined // for edge case of `class={undefined}`
+	) {
+		var next_class_name = to_class(value, hash, next_classes);
+
+		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
+			// Removing the attribute when the value is only an empty string causes
+			// performance issues vs simply making the className an empty string. So
+			// we should only remove the class if the value is nullish
+			// and there no hash/directives :
+			if (next_class_name == null) {
+				dom.removeAttribute('class');
+			} else if (is_html) {
+				dom.className = next_class_name;
+			} else {
+				dom.setAttribute('class', next_class_name);
+			}
+		}
+
+		// @ts-expect-error need to add __className to patched prototype
+		dom.__className = value;
+	} else if (next_classes && prev_classes !== next_classes) {
+		for (var key in next_classes) {
+			var is_present = !!next_classes[key];
+
+			if (prev_classes == null || is_present !== !!prev_classes[key]) {
+				dom.classList.toggle(key, is_present);
+			}
+		}
+	}
+
+	return next_classes;
+}