diff --git a/.changeset/eight-onions-melt.md b/.changeset/eight-onions-melt.md new file mode 100644 index 000000000000..ebcd737507a3 --- /dev/null +++ b/.changeset/eight-onions-melt.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: use moveBefore on supported browsers diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 3baa03a91753..a6531b78653f 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -20,7 +20,8 @@ import { clear_text_content, create_text, get_first_child, - get_next_sibling + get_next_sibling, + move_before } from '../operations.js'; import { block, @@ -584,7 +585,7 @@ function move(item, next, anchor) { while (node !== end) { var next_node = /** @type {TemplateNode} */ (get_next_sibling(node)); - dest.before(node); + move_before(dest, node); node = next_node; } } diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js index f6ac92456e78..fa677f71752c 100644 --- a/packages/svelte/src/internal/client/dom/operations.js +++ b/packages/svelte/src/internal/client/dom/operations.js @@ -18,6 +18,8 @@ export var is_firefox; var first_child_getter; /** @type {() => Node | null} */ var next_sibling_getter; +/** @type {(new_node: Node, reference_node: Node) => void} */ +var move_before_func; /** * Initialize these lazily to avoid issues when using the runtime in a server context @@ -39,6 +41,8 @@ export function init_operations() { first_child_getter = get_descriptor(node_prototype, 'firstChild').get; // @ts-ignore next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get; + // @ts-ignore + move_before_func = element_prototype.moveBefore ?? element_prototype.insertBefore; // the following assignments improve perf of lookups on DOM nodes // @ts-expect-error @@ -91,6 +95,15 @@ export function get_next_sibling(node) { return next_sibling_getter.call(node); } +/** + * @template {Node} N + * @param {N} node + * @param {N} new_node + */ +export function move_before(node, new_node) { + move_before_func.call(node.parentElement, new_node, node); +} + /** * Don't mark this as side-effect-free, hydration needs to walk all nodes * @template {Node} N