From 6d16e9260642b1fcc70fa4a24be9fd49985112d1 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 3 May 2021 16:37:19 -0400 Subject: [PATCH] Revert hydration optimisation (#6290) Co-authored-by: haveyaseen --- CHANGELOG.md | 4 ++ src/runtime/internal/Component.ts | 4 +- src/runtime/internal/dom.ts | 48 +++---------------- .../element-nested-sibling/_after.html | 4 ++ .../element-nested-sibling/_before.html | 4 ++ .../samples/element-nested-sibling/_config.js | 19 ++++++++ .../element-nested-sibling/main.svelte | 6 +++ .../samples/expression-sibling/_after.html | 1 + .../samples/expression-sibling/_before.html | 1 + .../samples/expression-sibling/_config.js | 19 ++++++++ .../samples/expression-sibling/main.svelte | 1 + 11 files changed, 66 insertions(+), 45 deletions(-) create mode 100644 test/hydration/samples/element-nested-sibling/_after.html create mode 100644 test/hydration/samples/element-nested-sibling/_before.html create mode 100644 test/hydration/samples/element-nested-sibling/_config.js create mode 100644 test/hydration/samples/element-nested-sibling/main.svelte create mode 100644 test/hydration/samples/expression-sibling/_after.html create mode 100644 test/hydration/samples/expression-sibling/_before.html create mode 100644 test/hydration/samples/expression-sibling/_config.js create mode 100644 test/hydration/samples/expression-sibling/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 12502063cb..4120fe787e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Revert hydration optimisation for the time being + ## 3.38.1 * Fix hydration regression ([#6274](https://github.com/sveltejs/svelte/issues/6274)) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index a191e5d83b..32de46506a 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -1,7 +1,7 @@ import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler'; import { current_component, set_current_component } from './lifecycle'; import { blank_object, is_empty, is_function, run, run_all, noop } from './utils'; -import { children, detach, start_hydrating, end_hydrating } from './dom'; +import { children, detach } from './dom'; import { transition_in } from './transitions'; interface Fragment { @@ -150,7 +150,6 @@ export function init(component, options, instance, create_fragment, not_equal, p if (options.target) { if (options.hydrate) { - start_hydrating(); const nodes = children(options.target); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment!.l(nodes); @@ -162,7 +161,6 @@ export function init(component, options, instance, create_fragment, not_equal, p if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor, options.customElement); - end_hydrating(); flush(); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index b0cc2c5841..40471c2980 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,47 +1,15 @@ import { has_prop } from './utils'; -// 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; -const nodes_to_detach = new Set(); - -export function start_hydrating() { - is_hydrating = true; -} -export function end_hydrating() { - is_hydrating = false; - - for (const node of nodes_to_detach) { - node.parentNode.removeChild(node); - } - - nodes_to_detach.clear(); -} - export function append(target: Node, node: Node) { - if (is_hydrating) { - nodes_to_detach.delete(node); - } - if (node.parentNode !== target) { - target.appendChild(node); - } + target.appendChild(node); } export function insert(target: Node, node: Node, anchor?: Node) { - if (is_hydrating) { - nodes_to_detach.delete(node); - } - if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) { - target.insertBefore(node, anchor || null); - } + target.insertBefore(node, anchor || null); } export function detach(node: Node) { - if (is_hydrating) { - nodes_to_detach.add(node); - } else if (node.parentNode) { - node.parentNode.removeChild(node); - } + node.parentNode.removeChild(node); } export function destroy_each(iterations, detaching) { @@ -186,9 +154,8 @@ export function children(element) { } export function claim_element(nodes, name, attributes, svg) { - while (nodes.length > 0) { - const node = nodes.shift(); - + for (let i = 0; i < nodes.length; i += 1) { + const node = nodes[i]; if (node.nodeName === name) { let j = 0; const remove = []; @@ -201,10 +168,7 @@ export function claim_element(nodes, name, attributes, svg) { for (let k = 0; k < remove.length; k++) { node.removeAttribute(remove[k]); } - - return node; - } else { - detach(node); + return nodes.splice(i, 1)[0]; } } diff --git a/test/hydration/samples/element-nested-sibling/_after.html b/test/hydration/samples/element-nested-sibling/_after.html new file mode 100644 index 0000000000..d011cf6e38 --- /dev/null +++ b/test/hydration/samples/element-nested-sibling/_after.html @@ -0,0 +1,4 @@ +

+ 1 + 2 +

diff --git a/test/hydration/samples/element-nested-sibling/_before.html b/test/hydration/samples/element-nested-sibling/_before.html new file mode 100644 index 0000000000..d011cf6e38 --- /dev/null +++ b/test/hydration/samples/element-nested-sibling/_before.html @@ -0,0 +1,4 @@ +

+ 1 + 2 +

diff --git a/test/hydration/samples/element-nested-sibling/_config.js b/test/hydration/samples/element-nested-sibling/_config.js new file mode 100644 index 0000000000..8410fc189d --- /dev/null +++ b/test/hydration/samples/element-nested-sibling/_config.js @@ -0,0 +1,19 @@ +export default { + snapshot(target) { + const p = target.querySelector('p'); + + return { + p, + span: p.querySelector('span'), + code: p.querySelector('code') + }; + }, + + test(assert, target, snapshot) { + const p = target.querySelector('p'); + + assert.equal(p, snapshot.p); + assert.equal(p.querySelector('span'), snapshot.span); + assert.equal(p.querySelector('code'), snapshot.code); + } +}; diff --git a/test/hydration/samples/element-nested-sibling/main.svelte b/test/hydration/samples/element-nested-sibling/main.svelte new file mode 100644 index 0000000000..d6e02107e2 --- /dev/null +++ b/test/hydration/samples/element-nested-sibling/main.svelte @@ -0,0 +1,6 @@ +

+ 1 + {#if true} + 2 + {/if} +

diff --git a/test/hydration/samples/expression-sibling/_after.html b/test/hydration/samples/expression-sibling/_after.html new file mode 100644 index 0000000000..9c0a0b5778 --- /dev/null +++ b/test/hydration/samples/expression-sibling/_after.html @@ -0,0 +1 @@ +

1 2 3

diff --git a/test/hydration/samples/expression-sibling/_before.html b/test/hydration/samples/expression-sibling/_before.html new file mode 100644 index 0000000000..9c0a0b5778 --- /dev/null +++ b/test/hydration/samples/expression-sibling/_before.html @@ -0,0 +1 @@ +

1 2 3

diff --git a/test/hydration/samples/expression-sibling/_config.js b/test/hydration/samples/expression-sibling/_config.js new file mode 100644 index 0000000000..c6d3ef3f2f --- /dev/null +++ b/test/hydration/samples/expression-sibling/_config.js @@ -0,0 +1,19 @@ +export default { + snapshot(target) { + const p = target.querySelector('p'); + + return { + p, + text: p.childNodes[0], + span: p.querySelector('span') + }; + }, + + test(assert, target, snapshot) { + const p = target.querySelector('p'); + + assert.equal(p, snapshot.p); + assert.equal(p.childNodes[0], snapshot.text); + assert.equal(p.querySelector('span'), snapshot.span); + } +}; diff --git a/test/hydration/samples/expression-sibling/main.svelte b/test/hydration/samples/expression-sibling/main.svelte new file mode 100644 index 0000000000..65aa541e9c --- /dev/null +++ b/test/hydration/samples/expression-sibling/main.svelte @@ -0,0 +1 @@ +

{1} 2 3