diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index b0c87d6e58..58e6b5cfa8 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -9,7 +9,7 @@ import { HYDRATION_START } from '../../../../constants.js'; import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrating } from '../hydration.js'; -import { clear_text_content, empty } from '../operations.js'; +import { clear_text_content, empty, next_sibling } from '../operations.js'; import { remove } from '../reconciler.js'; import { untrack } from '../../runtime.js'; import { @@ -175,7 +175,7 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback var key = get_key(value, i); item = create_item(child_open, child_anchor, prev, null, value, key, i, render_fn, flags); state.items.set(key, item); - child_anchor = /** @type {Comment} */ (child_anchor.nextSibling); + child_anchor = /** @type {Comment} */ (next_sibling(child_anchor)); prev = item; } @@ -183,7 +183,7 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback // remove excess nodes if (length > 0) { while (child_anchor !== anchor) { - var next = /** @type {import('#client').TemplateNode} */ (child_anchor.nextSibling); + var next = /** @type {import('#client').TemplateNode} */ (next_sibling(child_anchor)); /** @type {import('#client').TemplateNode} */ (child_anchor).remove(); child_anchor = next; } @@ -501,7 +501,7 @@ function move(item, next, anchor) { var node = /** @type {import('#client').TemplateNode} */ (item.o); while (node !== end) { - var next_node = /** @type {import('#client').TemplateNode} */ (node.nextSibling); + var next_node = /** @type {import('#client').TemplateNode} */ (next_sibling(node)); dest.before(node); node = next_node; } diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js index b00a3a242b..64d941d83f 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js @@ -1,7 +1,7 @@ import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js'; -import { empty } from '../operations.js'; +import { empty, next_sibling } from '../operations.js'; import { block } from '../../reactivity/effects.js'; -import { HYDRATION_END, HYDRATION_START } from '../../../../constants.js'; +import { HYDRATION_START } from '../../../../constants.js'; /** * @type {Node | undefined} @@ -37,11 +37,11 @@ export function head(render_fn) { head_anchor.nodeType !== 8 || /** @type {Comment} */ (head_anchor).data !== HYDRATION_START ) { - head_anchor = /** @type {import('#client').TemplateNode} */ (head_anchor.nextSibling); + head_anchor = /** @type {import('#client').TemplateNode} */ (next_sibling(head_anchor)); } head_anchor = /** @type {import('#client').TemplateNode} */ (hydrate_anchor(head_anchor)); - head_anchor = /** @type {import('#client').TemplateNode} */ (head_anchor.nextSibling); + head_anchor = /** @type {import('#client').TemplateNode} */ (next_sibling(head_anchor)); } else { anchor = document.head.appendChild(empty()); } diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js index dee87b31dd..54c81e1096 100644 --- a/packages/svelte/src/internal/client/dom/hydration.js +++ b/packages/svelte/src/internal/client/dom/hydration.js @@ -1,6 +1,7 @@ import { DEV } from 'esm-env'; import { HYDRATION_END, HYDRATION_START, HYDRATION_ERROR } from '../../../constants.js'; import * as w from '../warnings.js'; +import { next_sibling } from './operations.js'; /** * Use this variable to guard everything related to hydration code so it can be treeshaken out @@ -49,7 +50,7 @@ export function hydrate_anchor(node) { var nodes = []; var depth = 0; - while ((current = /** @type {Node} */ (current).nextSibling) !== null) { + while ((current = next_sibling(/** @type {Node} */ (current))) !== null) { if (current.nodeType === 8) { var data = /** @type {Comment} */ (current).data; diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js index 2307c013b0..532f11777a 100644 --- a/packages/svelte/src/internal/client/dom/operations.js +++ b/packages/svelte/src/internal/client/dom/operations.js @@ -173,6 +173,16 @@ export function first_child(fragment, is_text) { return hydrate_anchor(first_node); } +/** + * @template {Node} N + * @param {N} node + * @returns {Node | null} + */ +/*#__NO_SIDE_EFFECTS__*/ +export function next_sibling(node) { + return next_sibling_get.call(node); +} + /** * @template {Node} N * @param {N} node diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 3e2edfbea4..ddc2bc6646 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -4,7 +4,8 @@ import { clear_text_content, create_element, empty, - init_operations + init_operations, + next_sibling } from './dom/operations.js'; import { HYDRATION_ERROR, HYDRATION_START, PassiveDelegatedEvents } from '../../constants.js'; import { flush_sync, push, pop, current_component_context } from './runtime.js'; @@ -106,6 +107,7 @@ export function mount(component, options) { if (DEV) { validate_component(component); } + init_operations(); const anchor = options.anchor ?? options.target.appendChild(empty()); // Don't flush previous effects to ensure order of outer effects stays consistent @@ -133,6 +135,7 @@ export function hydrate(component, options) { if (DEV) { validate_component(component); } + init_operations(); const target = options.target; const previous_hydrate_nodes = hydrate_nodes; @@ -144,12 +147,13 @@ export function hydrate(component, options) { return flush_sync(() => { set_hydrating(true); + /** @type {Node | null} */ var node = target.firstChild; while ( node && (node.nodeType !== 8 || /** @type {Comment} */ (node).data !== HYDRATION_START) ) { - node = node.nextSibling; + node = next_sibling(node); } if (!node) { @@ -172,8 +176,6 @@ export function hydrate(component, options) { e.hydration_failed(); } - // If an error occured above, the operations might not yet have been initialised. - init_operations(); clear_text_content(target); set_hydrating(false); @@ -202,8 +204,6 @@ export function hydrate(component, options) { * @returns {Exports} */ function _mount(Component, { target, anchor, props = {}, events, context, intro = false }) { - init_operations(); - const registered_events = new Set(); const bound_event_listener = handle_event_propagation.bind(null, target);