import { contenteditable_truthy_values, has_prop } from './utils.js'; import { ResizeObserverSingleton } from './ResizeObserverSingleton.js'; // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM // at the end of hydration without touching the remaining nodes. let is_hydrating = false; /** * @returns {void} */ export function start_hydrating() { is_hydrating = true; } /** * @returns {void} */ export function end_hydrating() { is_hydrating = false; } /** * @param {number} low * @param {number} high * @param {(index: number) => number} key * @param {number} value * @returns {number} */ function upper_bound(low, high, key, value) { // Return first index of value larger than input value in the range [low, high) while (low < high) { const mid = low + ((high - low) >> 1); if (key(mid) <= value) { low = mid + 1; } else { high = mid; } } return low; } /** * @param {NodeEx} target * @returns {void} */ function init_hydrate(target) { if (target.hydrate_init) return; target.hydrate_init = true; // We know that all children have claim_order values since the unclaimed have been detached if target is not let children = /** @type {ArrayLike} */ (target.childNodes); // If target is , there may be children without claim_order if (target.nodeName === 'HEAD') { const my_children = []; for (let i = 0; i < children.length; i++) { const node = children[i]; if (node.claim_order !== undefined) { my_children.push(node); } } children = my_children; } /* * Reorder claimed children optimally. * We can reorder claimed children optimally by finding the longest subsequence of * nodes that are already claimed in order and only moving the rest. The longest * subsequence of nodes that are claimed in order can be found by * computing the longest increasing subsequence of .claim_order values. * * This algorithm is optimal in generating the least amount of reorder operations * possible. * * Proof: * We know that, given a set of reordering operations, the nodes that do not move * always form an increasing subsequence, since they do not move among each other * meaning that they must be already ordered among each other. Thus, the maximal * set of nodes that do not move form a longest increasing subsequence. */ // Compute longest increasing subsequence // m: subsequence length j => index k of smallest value that ends an increasing subsequence of length j const m = new Int32Array(children.length + 1); // Predecessor indices + 1 const p = new Int32Array(children.length); m[0] = -1; let longest = 0; for (let i = 0; i < children.length; i++) { const current = children[i].claim_order; // Find the largest subsequence length such that it ends in a value less than our current value // upper_bound returns first greater value, so we subtract one // with fast path for when we are on the current longest subsequence const seq_len = (longest > 0 && children[m[longest]].claim_order <= current ? longest + 1 : upper_bound(1, longest, (idx) => children[m[idx]].claim_order, current)) - 1; p[i] = m[seq_len] + 1; const new_len = seq_len + 1; // We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence. m[new_len] = i; longest = Math.max(new_len, longest); } // The longest increasing subsequence of nodes (initially reversed) /** * @type {NodeEx2[]} */ const lis = []; // The rest of the nodes, nodes that will be moved /** * @type {NodeEx2[]} */ const to_move = []; let last = children.length - 1; for (let cur = m[longest] + 1; cur != 0; cur = p[cur - 1]) { lis.push(children[cur - 1]); for (; last >= cur; last--) { to_move.push(children[last]); } last--; } for (; last >= 0; last--) { to_move.push(children[last]); } lis.reverse(); // We sort the nodes being moved to guarantee that their insertion order matches the claim order to_move.sort((a, b) => a.claim_order - b.claim_order); // Finally, we move the nodes for (let i = 0, j = 0; i < to_move.length; i++) { while (j < lis.length && to_move[i].claim_order >= lis[j].claim_order) { j++; } const anchor = j < lis.length ? lis[j] : null; target.insertBefore(to_move[i], anchor); } } /** * @param {Node} target * @param {Node} node * @returns {void} */ export function append(target, node) { target.appendChild(node); } /** * @param {Node} target * @param {string} style_sheet_id * @param {string} styles * @returns {void} */ export function append_styles(target, style_sheet_id, styles) { const append_styles_to = get_root_for_style(target); if (!append_styles_to.getElementById(style_sheet_id)) { const style = element('style'); style.id = style_sheet_id; style.textContent = styles; append_stylesheet(append_styles_to, style); } } /** * @param {Node} node * @returns {ShadowRoot | Document} */ export function get_root_for_style(node) { if (!node) return document; const root = node.getRootNode ? node.getRootNode() : node.ownerDocument; if (root && /** @type {ShadowRoot} */ (root).host) { return /** @type {ShadowRoot} */ (root); } return node.ownerDocument; } /** * @param {Node} node * @returns {CSSStyleSheet} */ export function append_empty_stylesheet(node) { const style_element = element('style'); // For transitions to work without 'style-src: unsafe-inline' Content Security Policy, // these empty tags need to be allowed with a hash as a workaround until we move to the Web Animations API. // Using the hash for the empty string (for an empty tag) works in all browsers except Safari. // So as a workaround for the workaround, when we append empty style tags we set their content to /* empty */. // The hash 'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc=' will then work even in Safari. style_element.textContent = '/* empty */'; append_stylesheet(get_root_for_style(node), style_element); return style_element.sheet; } /** * @param {ShadowRoot | Document} node * @param {HTMLStyleElement} style * @returns {CSSStyleSheet} */ function append_stylesheet(node, style) { append(/** @type {Document} */ (node).head || node, style); return style.sheet; } /** * @param {NodeEx} target * @param {NodeEx} node * @returns {void} */ export function append_hydration(target, node) { if (is_hydrating) { init_hydrate(target); if ( target.actual_end_child === undefined || (target.actual_end_child !== null && target.actual_end_child.parentNode !== target) ) { target.actual_end_child = target.firstChild; } // Skip nodes of undefined ordering while (target.actual_end_child !== null && target.actual_end_child.claim_order === undefined) { target.actual_end_child = target.actual_end_child.nextSibling; } if (node !== target.actual_end_child) { // We only insert if the ordering of this node should be modified or the parent node is not target if (node.claim_order !== undefined || node.parentNode !== target) { target.insertBefore(node, target.actual_end_child); } } else { target.actual_end_child = node.nextSibling; } } else if (node.parentNode !== target || node.nextSibling !== null) { target.appendChild(node); } } /** * @param {Node} target * @param {Node} node * @param {Node} [anchor] * @returns {void} */ export function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } /** * @param {NodeEx} target * @param {NodeEx} node * @param {NodeEx} [anchor] * @returns {void} */ export function insert_hydration(target, node, anchor) { if (is_hydrating && !anchor) { append_hydration(target, node); } else if (node.parentNode !== target || node.nextSibling != anchor) { target.insertBefore(node, anchor || null); } } /** * @param {Node} node * @returns {void} */ export function detach(node) { if (node.parentNode) { node.parentNode.removeChild(node); } } /** * @returns {void} */ export function destroy_each(iterations, detaching) { for (let i = 0; i < iterations.length; i += 1) { if (iterations[i]) iterations[i].d(detaching); } } /** * @template {keyof HTMLElementTagNameMap} K * @param {K} name * @returns {HTMLElementTagNameMap[K]} */ export function element(name) { return document.createElement(name); } /** * @template {keyof HTMLElementTagNameMap} K * @param {K} name * @param {string} is * @returns {HTMLElementTagNameMap[K]} */ export function element_is(name, is) { return document.createElement(name, { is }); } /** * @template T * @template {keyof T} K * @param {T} obj * @param {K[]} exclude * @returns {Pick>} */ export function object_without_properties(obj, exclude) { const target = /** @type {Pick>} */ ({}); for (const k in obj) { if ( has_prop(obj, k) && // @ts-ignore exclude.indexOf(k) === -1 ) { // @ts-ignore target[k] = obj[k]; } } return target; } /** * @template {keyof SVGElementTagNameMap} K * @param {K} name * @returns {SVGElement} */ export function svg_element(name) { return document.createElementNS('http://www.w3.org/2000/svg', name); } /** * @param {string} data * @returns {Text} */ export function text(data) { return document.createTextNode(data); } /** * @returns {Text} */ export function space() { return text(' '); } /** * @returns {Text} */ export function empty() { return text(''); } /** * @param {string} content * @returns {Comment} */ export function comment(content) { return document.createComment(content); } /** * @param {EventTarget} node * @param {string} event * @param {EventListenerOrEventListenerObject} handler * @param {boolean | AddEventListenerOptions | EventListenerOptions} [options] * @returns {() => void} */ export function listen(node, event, handler, options) { node.addEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options); } /** * @returns {(event: any) => any} */ export function prevent_default(fn) { return function (event) { event.preventDefault(); // @ts-ignore return fn.call(this, event); }; } /** * @returns {(event: any) => any} */ export function stop_propagation(fn) { return function (event) { event.stopPropagation(); // @ts-ignore return fn.call(this, event); }; } /** * @returns {(event: any) => any} */ export function stop_immediate_propagation(fn) { return function (event) { event.stopImmediatePropagation(); // @ts-ignore return fn.call(this, event); }; } /** * @returns {(event: any) => void} */ export function self(fn) { return function (event) { // @ts-ignore if (event.target === this) fn.call(this, event); }; } /** * @returns {(event: any) => void} */ export function trusted(fn) { return function (event) { // @ts-ignore if (event.isTrusted) fn.call(this, event); }; } /** * @param {Element} node * @param {string} attribute * @param {string} [value] * @returns {void} */ export function attr(node, attribute, value) { if (value == null) node.removeAttribute(attribute); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } /** * List of attributes that should always be set through the attr method, * because updating them through the property setter doesn't work reliably. * In the example of `width`/`height`, the problem is that the setter only * accepts numeric values, but the attribute can also be set to a string like `50%`. * If this list becomes too big, rethink this approach. */ const always_set_through_set_attribute = ['width', 'height']; /** * @param {Element & ElementCSSInlineStyle} node * @param {{ [x: string]: string }} attributes * @returns {void} */ export function set_attributes(node, attributes) { // @ts-ignore const descriptors = Object.getOwnPropertyDescriptors(node.__proto__); for (const key in attributes) { if (attributes[key] == null) { node.removeAttribute(key); } else if (key === 'style') { node.style.cssText = attributes[key]; } else if (key === '__value') { /** @type {any} */ (node).value = node[key] = attributes[key]; } else if ( descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1 ) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]); } } } /** * @param {Element & ElementCSSInlineStyle} node * @param {{ [x: string]: string }} attributes * @returns {void} */ export function set_svg_attributes(node, attributes) { for (const key in attributes) { attr(node, key, attributes[key]); } } /** * @param {Record} data_map * @returns {void} */ export function set_custom_element_data_map(node, data_map) { Object.keys(data_map).forEach((key) => { set_custom_element_data(node, key, data_map[key]); }); } /** * @returns {void} */ export function set_custom_element_data(node, prop, value) { const lower = prop.toLowerCase(); // for backwards compatibility with existing behavior we do lowercase first if (lower in node) { node[lower] = typeof node[lower] === 'boolean' && value === '' ? true : value; } else if (prop in node) { node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value; } else { attr(node, prop, value); } } /** * @param {string} tag */ export function set_dynamic_element_data(tag) { return /-/.test(tag) ? set_custom_element_data_map : set_attributes; } /** * @returns {void} */ export function xlink_attr(node, attribute, value) { node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); } /** * @param {HTMLElement} node * @returns {string} */ export function get_svelte_dataset(node) { return node.dataset.svelteH; } /** * @returns {unknown[]} */ export function get_binding_group_value(group, __value, checked) { const value = new Set(); for (let i = 0; i < group.length; i += 1) { if (group[i].checked) value.add(group[i].__value); } if (!checked) { value.delete(__value); } return Array.from(value); } /** * @param {HTMLInputElement[]} group * @returns {{ p(...inputs: HTMLInputElement[]): void; r(): void; }} */ export function init_binding_group(group) { /** * @type {HTMLInputElement[]} */ let _inputs; return { /* push */ p(...inputs) { _inputs = inputs; _inputs.forEach((input) => group.push(input)); }, /* remove */ r() { _inputs.forEach((input) => group.splice(group.indexOf(input), 1)); } }; } /** * @param {number[]} indexes * @returns {{ u(new_indexes: number[]): void; p(...inputs: HTMLInputElement[]): void; r: () => void; }} */ export function init_binding_group_dynamic(group, indexes) { /** * @type {HTMLInputElement[]} */ let _group = get_binding_group(group); /** * @type {HTMLInputElement[]} */ let _inputs; function get_binding_group(group) { for (let i = 0; i < indexes.length; i++) { group = group[indexes[i]] = group[indexes[i]] || []; } return group; } /** * @returns {void} */ function push() { _inputs.forEach((input) => _group.push(input)); } /** * @returns {void} */ function remove() { _inputs.forEach((input) => _group.splice(_group.indexOf(input), 1)); } return { /* update */ u(new_indexes) { indexes = new_indexes; const new_group = get_binding_group(group); if (new_group !== _group) { remove(); _group = new_group; push(); } }, /* push */ p(...inputs) { _inputs = inputs; push(); }, /* remove */ r: remove }; } /** @returns {number} */ export function to_number(value) { return value === '' ? null : +value; } /** @returns {any[]} */ export function time_ranges_to_array(ranges) { const array = []; for (let i = 0; i < ranges.length; i += 1) { array.push({ start: ranges.start(i), end: ranges.end(i) }); } return array; } /** * @param {Element} element * @returns {ChildNode[]} */ export function children(element) { return Array.from(element.childNodes); } /** * @param {ChildNodeArray} nodes * @returns {void} */ function init_claim_info(nodes) { if (nodes.claim_info === undefined) { nodes.claim_info = { last_index: 0, total_claimed: 0 }; } } /** * @template {ChildNodeEx} R * @param {ChildNodeArray} nodes * @param {(node: ChildNodeEx) => node is R} predicate * @param {(node: ChildNodeEx) => ChildNodeEx | undefined} process_node * @param {() => R} create_node * @param {boolean} dont_update_last_index * @returns {R} */ function claim_node(nodes, predicate, process_node, create_node, dont_update_last_index = false) { // Try to find nodes in an order such that we lengthen the longest increasing subsequence init_claim_info(nodes); const result_node = (() => { // We first try to find an element after the previous one for (let i = nodes.claim_info.last_index; i < nodes.length; i++) { const node = nodes[i]; if (predicate(node)) { const replacement = process_node(node); if (replacement === undefined) { nodes.splice(i, 1); } else { nodes[i] = replacement; } if (!dont_update_last_index) { nodes.claim_info.last_index = i; } return node; } } // Otherwise, we try to find one before // We iterate in reverse so that we don't go too far back for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) { const node = nodes[i]; if (predicate(node)) { const replacement = process_node(node); if (replacement === undefined) { nodes.splice(i, 1); } else { nodes[i] = replacement; } if (!dont_update_last_index) { nodes.claim_info.last_index = i; } else if (replacement === undefined) { // Since we spliced before the last_index, we decrease it nodes.claim_info.last_index--; } return node; } } // If we can't find any matching node, we create a new one return create_node(); })(); result_node.claim_order = nodes.claim_info.total_claimed; nodes.claim_info.total_claimed += 1; return result_node; } /** * @param {ChildNodeArray} nodes * @param {string} name * @param {{ [key: string]: boolean }} attributes * @param {(name: string) => Element | SVGElement} create_element * @returns {Element | SVGElement} */ function claim_element_base(nodes, name, attributes, create_element) { return claim_node( nodes, /** @returns {node is Element | SVGElement} */ (node) => node.nodeName === name, /** @param {Element} node */ (node) => { const remove = []; for (let j = 0; j < node.attributes.length; j++) { const attribute = node.attributes[j]; if (!attributes[attribute.name]) { remove.push(attribute.name); } } remove.forEach((v) => node.removeAttribute(v)); return undefined; }, () => create_element(name) ); } /** * @param {ChildNodeArray} nodes * @param {string} name * @param {{ [key: string]: boolean }} attributes * @returns {Element | SVGElement} */ export function claim_element(nodes, name, attributes) { return claim_element_base(nodes, name, attributes, element); } /** * @param {ChildNodeArray} nodes * @param {string} name * @param {{ [key: string]: boolean }} attributes * @returns {Element | SVGElement} */ export function claim_svg_element(nodes, name, attributes) { return claim_element_base(nodes, name, attributes, svg_element); } /** * @param {ChildNodeArray} nodes * @returns {Text} */ export function claim_text(nodes, data) { return claim_node( nodes, /** @returns {node is Text} */ (node) => node.nodeType === 3, /** @param {Text} node */ (node) => { const data_str = '' + data; if (node.data.startsWith(data_str)) { if (node.data.length !== data_str.length) { return node.splitText(data_str.length); } } else { node.data = data_str; } }, () => text(data), true // Text nodes should not update last index since it is likely not worth it to eliminate an increasing subsequence of actual elements ); } /** * @returns {Text} */ export function claim_space(nodes) { return claim_text(nodes, ' '); } /** * @param {ChildNodeArray} nodes * @returns {Comment} */ export function claim_comment(nodes, data) { return claim_node( nodes, /** @returns {node is Comment} */ (node) => node.nodeType === 8, /** @param {Comment} node */ (node) => { node.data = '' + data; return undefined; }, () => comment(data), true ); } function get_comment_idx(nodes, text, start) { for (let i = start; i < nodes.length; i += 1) { const node = nodes[i]; if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) { return i; } } return -1; } /** * @param {boolean} is_svg * @returns {HtmlTagHydration} */ export function claim_html_tag(nodes, is_svg) { // find html opening tag const start_index = get_comment_idx(nodes, 'HTML_TAG_START', 0); const end_index = get_comment_idx(nodes, 'HTML_TAG_END', start_index + 1); if (start_index === -1 || end_index === -1) { return new HtmlTagHydration(is_svg); } init_claim_info(nodes); const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1); detach(html_tag_nodes[0]); detach(html_tag_nodes[html_tag_nodes.length - 1]); const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1); if (claimed_nodes.length === 0) { return new HtmlTagHydration(is_svg); } for (const n of claimed_nodes) { n.claim_order = nodes.claim_info.total_claimed; nodes.claim_info.total_claimed += 1; } return new HtmlTagHydration(is_svg, claimed_nodes); } /** * @param {Text} text * @param {unknown} data * @returns {void} */ export function set_data(text, data) { data = '' + data; if (text.data === data) return; text.data = /** @type {string} */ (data); } /** * @param {Text} text * @param {unknown} data * @returns {void} */ export function set_data_contenteditable(text, data) { data = '' + data; if (text.wholeText === data) return; text.data = /** @type {string} */ (data); } /** * @param {Text} text * @param {unknown} data * @param {string} attr_value * @returns {void} */ export function set_data_maybe_contenteditable(text, data, attr_value) { if (~contenteditable_truthy_values.indexOf(attr_value)) { set_data_contenteditable(text, data); } else { set_data(text, data); } } /** * @returns {void} */ export function set_input_value(input, value) { input.value = value == null ? '' : value; } /** * @returns {void} */ export function set_input_type(input, type) { try { input.type = type; } catch (e) { // do nothing } } /** * @returns {void} */ export function set_style(node, key, value, important) { if (value == null) { node.style.removeProperty(key); } else { node.style.setProperty(key, value, important ? 'important' : ''); } } /** * @returns {void} */ export function select_option(select, value, mounting) { for (let i = 0; i < select.options.length; i += 1) { const option = select.options[i]; if (option.__value === value) { option.selected = true; return; } } if (!mounting || value !== undefined) { select.selectedIndex = -1; // no option should be selected } } /** * @returns {void} */ export function select_options(select, value) { for (let i = 0; i < select.options.length; i += 1) { const option = select.options[i]; option.selected = ~value.indexOf(option.__value); } } export function select_value(select) { const selected_option = select.querySelector(':checked'); return selected_option && selected_option.__value; } export function select_multiple_value(select) { return [].map.call(select.querySelectorAll(':checked'), (option) => option.__value); } // unfortunately this can't be a constant as that wouldn't be tree-shakeable // so we cache the result instead /** * @type {boolean} */ let crossorigin; /** * @returns {boolean} */ export function is_crossorigin() { if (crossorigin === undefined) { crossorigin = false; try { if (typeof window !== 'undefined' && window.parent) { void window.parent.document; } } catch (error) { crossorigin = true; } } return crossorigin; } /** * @param {HTMLElement} node * @param {() => void} fn * @returns {() => void} */ export function add_iframe_resize_listener(node, fn) { const computed_style = getComputedStyle(node); if (computed_style.position === 'static') { node.style.position = 'relative'; } const iframe = element('iframe'); iframe.setAttribute( 'style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' + 'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;' ); iframe.setAttribute('aria-hidden', 'true'); iframe.tabIndex = -1; const crossorigin = is_crossorigin(); /** * @type {() => void} */ let unsubscribe; if (crossorigin) { iframe.src = "data:text/html,"; unsubscribe = listen( window, 'message', /** @param {MessageEvent} event */ (event) => { if (event.source === iframe.contentWindow) fn(); } ); } else { iframe.src = 'about:blank'; iframe.onload = () => { unsubscribe = listen(iframe.contentWindow, 'resize', fn); // make sure an initial resize event is fired _after_ the iframe is loaded (which is asynchronous) // see https://github.com/sveltejs/svelte/issues/4233 fn(); }; } append(node, iframe); return () => { if (crossorigin) { unsubscribe(); } else if (unsubscribe && iframe.contentWindow) { unsubscribe(); } detach(iframe); }; } export const resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' }); export const resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' }); export const resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton( { box: 'device-pixel-content-box' } ); export { ResizeObserverSingleton }; /** * @returns {void} */ export function toggle_class(element, name, toggle) { // The `!!` is required because an `undefined` flag means flipping the current state. element.classList.toggle(name, !!toggle); } /** * @template T * @param {string} type * @param {T} [detail] * @param {{ bubbles?: boolean, cancelable?: boolean }} [options] * @returns {CustomEvent} */ export function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) { return new CustomEvent(type, { detail, bubbles, cancelable }); } /** * @param {string} selector * @param {HTMLElement} parent * @returns {ChildNodeArray} */ export function query_selector_all(selector, parent = document.body) { return Array.from(parent.querySelectorAll(selector)); } /** * @param {string} nodeId * @param {HTMLElement} head * @returns {any[]} */ export function head_selector(nodeId, head) { const result = []; let started = 0; for (const node of head.childNodes) { if (node.nodeType === 8 /* comment node */) { const comment = node.textContent.trim(); if (comment === `HEAD_${nodeId}_END`) { started -= 1; result.push(node); } else if (comment === `HEAD_${nodeId}_START`) { started += 1; result.push(node); } } else if (started > 0) { result.push(node); } } return result; } /** */ export class HtmlTag { /** * @private * @default false */ is_svg = false; /** parent for creating node */ e = undefined; /** html tag nodes */ n = undefined; /** target */ t = undefined; /** anchor */ a = undefined; constructor(is_svg = false) { this.is_svg = is_svg; this.e = this.n = null; } /** * @param {string} html * @returns {void} */ c(html) { this.h(html); } /** * @param {string} html * @param {HTMLElement | SVGElement} target * @param {HTMLElement | SVGElement} anchor * @returns {void} */ m(html, target, anchor = null) { if (!this.e) { if (this.is_svg) this.e = svg_element(/** @type {keyof SVGElementTagNameMap} */ (target.nodeName)); /** #7364 target for