Skip to content

Commit

Permalink
Unrevert hydration optimisation & fix claim_text
Browse files Browse the repository at this point in the history
Unreverts the hydration optimisation from sveltejs#6204 and fixes the `claim_text` issue as described in sveltejs#6279 (comment)
  • Loading branch information
hbirler committed Jun 9, 2021
1 parent e6c2c8e commit abec516
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 8 deletions.
4 changes: 3 additions & 1 deletion src/runtime/internal/Component.ts
Original file line number Diff line number Diff line change
@@ -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 } from './dom';
import { children, detach, start_hydrating, end_hydrating } from './dom';
import { transition_in } from './transitions';

interface Fragment {
Expand Down Expand Up @@ -150,6 +150,7 @@ 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);
Expand All @@ -161,6 +162,7 @@ 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();
}

Expand Down
55 changes: 48 additions & 7 deletions src/runtime/internal/dom.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
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) {
target.appendChild(node);
if (is_hydrating) {
nodes_to_detach.delete(node);
}
if (node.parentNode !== target) {
target.appendChild(node);
}
}

export function insert(target: Node, node: Node, anchor?: Node) {
target.insertBefore(node, anchor || null);
if (is_hydrating) {
nodes_to_detach.delete(node);
}
if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) {
target.insertBefore(node, anchor || null);
}
}

export function detach(node: Node) {
node.parentNode.removeChild(node);
if (is_hydrating) {
nodes_to_detach.add(node);
} else if (node.parentNode) {
node.parentNode.removeChild(node);
}
}

export function destroy_each(iterations, detaching) {
Expand Down Expand Up @@ -154,8 +186,9 @@ export function children(element) {
}

export function claim_element(nodes, name, attributes, svg) {
for (let i = 0; i < nodes.length; i += 1) {
const node = nodes[i];
while (nodes.length > 0) {
const node = nodes.shift();

if (node.nodeName === name) {
let j = 0;
const remove = [];
Expand All @@ -168,7 +201,10 @@ export function claim_element(nodes, name, attributes, svg) {
for (let k = 0; k < remove.length; k++) {
node.removeAttribute(remove[k]);
}
return nodes.splice(i, 1)[0];

return node;
} else {
detach(node);
}
}

Expand All @@ -179,7 +215,12 @@ export function claim_text(nodes, data) {
for (let i = 0; i < nodes.length; i += 1) {
const node = nodes[i];
if (node.nodeType === 3) {
node.data = '' + data;
data = '' + data;
if (data.length < node.data.length) {
let newNode = node.splitText(data.length);
nodes[i] = newNode;
return node;
}
return nodes.splice(i, 1)[0];
}
}
Expand Down

0 comments on commit abec516

Please sign in to comment.