Revert hydration optimisation (#6290)

Co-authored-by: haveyaseen <haveyaread@gmail.com>
pull/6294/head
Conduitry 4 years ago committed by GitHub
parent 341160f782
commit 6d16e92606
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,5 +1,9 @@
# Svelte changelog # Svelte changelog
## Unreleased
* Revert hydration optimisation for the time being
## 3.38.1 ## 3.38.1
* Fix hydration regression ([#6274](https://github.com/sveltejs/svelte/issues/6274)) * Fix hydration regression ([#6274](https://github.com/sveltejs/svelte/issues/6274))

@ -1,7 +1,7 @@
import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler'; import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
import { current_component, set_current_component } from './lifecycle'; import { current_component, set_current_component } from './lifecycle';
import { blank_object, is_empty, is_function, run, run_all, noop } from './utils'; 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'; import { transition_in } from './transitions';
interface Fragment { interface Fragment {
@ -150,7 +150,6 @@ export function init(component, options, instance, create_fragment, not_equal, p
if (options.target) { if (options.target) {
if (options.hydrate) { if (options.hydrate) {
start_hydrating();
const nodes = children(options.target); const nodes = children(options.target);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
$$.fragment && $$.fragment!.l(nodes); $$.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); if (options.intro) transition_in(component.$$.fragment);
mount_component(component, options.target, options.anchor, options.customElement); mount_component(component, options.target, options.anchor, options.customElement);
end_hydrating();
flush(); flush();
} }

@ -1,47 +1,15 @@
import { has_prop } from './utils'; 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<Node>();
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) { export function append(target: Node, node: Node) {
if (is_hydrating) { target.appendChild(node);
nodes_to_detach.delete(node);
}
if (node.parentNode !== target) {
target.appendChild(node);
}
} }
export function insert(target: Node, node: Node, anchor?: Node) { export function insert(target: Node, node: Node, anchor?: Node) {
if (is_hydrating) { target.insertBefore(node, anchor || null);
nodes_to_detach.delete(node);
}
if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) {
target.insertBefore(node, anchor || null);
}
} }
export function detach(node: Node) { export function detach(node: Node) {
if (is_hydrating) { node.parentNode.removeChild(node);
nodes_to_detach.add(node);
} else if (node.parentNode) {
node.parentNode.removeChild(node);
}
} }
export function destroy_each(iterations, detaching) { export function destroy_each(iterations, detaching) {
@ -186,9 +154,8 @@ export function children(element) {
} }
export function claim_element(nodes, name, attributes, svg) { export function claim_element(nodes, name, attributes, svg) {
while (nodes.length > 0) { for (let i = 0; i < nodes.length; i += 1) {
const node = nodes.shift(); const node = nodes[i];
if (node.nodeName === name) { if (node.nodeName === name) {
let j = 0; let j = 0;
const remove = []; const remove = [];
@ -201,10 +168,7 @@ export function claim_element(nodes, name, attributes, svg) {
for (let k = 0; k < remove.length; k++) { for (let k = 0; k < remove.length; k++) {
node.removeAttribute(remove[k]); node.removeAttribute(remove[k]);
} }
return nodes.splice(i, 1)[0];
return node;
} else {
detach(node);
} }
} }

@ -0,0 +1,4 @@
<p>
<span>1</span>
<code>2</code>
</p>

@ -0,0 +1,4 @@
<p>
<span>1</span>
<code>2</code>
</p>

@ -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);
}
};

@ -0,0 +1,6 @@
<p>
<span>1</span>
{#if true}
<code>2</code>
{/if}
</p>

@ -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);
}
};
Loading…
Cancel
Save