Fast hydration & FIX iframes hydration

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -261,7 +261,7 @@ export default class EachBlockWrapper extends Wrapper {
 			block.add_element(
 				update_anchor_node as Identifier,
 				x`@empty()`,
-				parent_nodes && x`@empty()`,
+				parent_nodes && x`@claim_text(${parent_nodes}, '')`,
 				parent_node
 			);
 		}
@@ -385,7 +385,7 @@ export default class EachBlockWrapper extends Wrapper {
 			this.block.add_element(
 				this.block.first,
 				x`@empty()`,
-				parent_nodes && x`@empty()`,
+				parent_nodes && x`@claim_text(#nodes, '')`,
 				null
 			);
 		}

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -8,7 +8,7 @@ import { escape_html, string_literal } from '../../../utils/stringify';
 import TextWrapper from '../Text';
 import TagWrapper from '../shared/Tag';
 import fix_attribute_casing from './fix_attribute_casing';
-import { b, x, p } from 'code-red';
+import { b, x } from 'code-red';
 import { namespaces } from '../../../../utils/namespaces';
 import AttributeWrapper from './Attribute';
 import StyleAttributeWrapper from './StyleAttribute';
@@ -386,7 +386,7 @@ export default class ElementWrapper extends Wrapper {
 
 		if (nodes && this.renderer.options.hydratable && !this.void) {
 			block.chunks.claim.push(
-				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
+				b`${this.node.children.length > 0 ? nodes : children}.children.forEach(@detach);`
 			);
 		}
 
@@ -422,17 +422,13 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	get_claim_statement(nodes: Identifier) {
-		const attributes = this.node.attributes
-			.filter((attr) => attr.type === 'Attribute')
-			.map((attr) => p`${attr.name}: true`);
-
 		const name = this.node.namespace
 			? this.node.name
 			: this.node.name.toUpperCase();
 
 		const svg = this.node.namespace === namespaces.svg ? 1 : null;
 
-		return x`@claim_element(${nodes}, "${name}", { ${attributes} }, ${svg})`;
+		return x`@claim_element(${nodes}, "${name}", null, ${svg})`;
 	}
 
 	add_directives_in_order (block: Block) {

src/compiler/compile/render_dom/wrappers/Head.ts

@@ -43,7 +43,7 @@ export default class HeadWrapper extends Wrapper {
 
 		if (nodes && this.renderer.options.hydratable) {
 			block.chunks.claim.push(
-				b`${nodes}.forEach(@detach);`
+				b`${nodes}.children.forEach(@detach);`
 			);
 		}
 	}

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -239,7 +239,7 @@ export default class IfBlockWrapper extends Wrapper {
 			block.add_element(
 				anchor as Identifier,
 				x`@empty()`,
-				parent_nodes && x`@empty()`,
+				parent_nodes && x`@claim_text(${parent_nodes}, '')`,
 				parent_node
 			);
 		}

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -22,7 +22,7 @@ export default class RawMustacheTagWrapper extends Tag {
 		this.not_static_content();
 	}
 
-	render(block: Block, parent_node: Identifier, _parent_nodes: Identifier) {
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 		const in_head = is_head(parent_node);
 
 		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
@@ -53,11 +53,20 @@ export default class RawMustacheTagWrapper extends Tag {
 
 			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
-			block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`);
+			block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`);
 			block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : 'anchor'});`);
 
+
+			block.chunks.create.push(b`${html_tag} = new @HtmlTag(${init});`);
+			if (this.renderer.options.hydratable) {
+				block.chunks.claim.push(b`${html_tag} = new @HtmlTag(${init});`);
+				block.chunks.claim.push(
+					b`${html_tag}.l(${parent_nodes});`
+				);
+			}
+
 			if (needs_anchor) {
-				block.add_element(html_anchor, x`@empty()`, x`@empty()`, parent_node);
+				block.add_element(html_anchor, x`@empty()`, x`@claim_text(${parent_nodes}, '')`, parent_node);
 			}
 
 			if (!parent_node || in_head) {

src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts

@@ -63,7 +63,7 @@ export default class Wrapper {
 			block.add_element(
 				anchor,
 				x`@empty()`,
-				parent_nodes && x`@empty()`,
+				parent_nodes && x`@claim_text(${parent_nodes}, '')`,
 				parent_node as Identifier
 			);
 		}

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_function, run, run_all, noop } from './utils';
-import { children, detach } from './dom';
+import { children, detach, update_hydrating } from './dom';
 import { transition_in } from './transitions';
 
 interface Fragment {
@@ -146,6 +146,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	if (options.target) {
 		if (options.hydrate) {
+			update_hydrating(true);
 			const nodes = children(options.target);
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			$$.fragment && $$.fragment!.l(nodes);
@@ -157,6 +158,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);
+		update_hydrating(false);
 		flush();
 	}
 

src/runtime/internal/dom.ts

@@ -1,11 +1,21 @@
 import { has_prop } from "./utils";
 
+let is_hydrating = false;
+
+export function update_hydrating(val: boolean) {
+	is_hydrating = val;
+}
+
 export function append(target: Node, node: Node) {
-	target.appendChild(node);
+	if (!is_hydrating || node.parentNode !== target) {
+		target.appendChild(node);
+	}
 }
 
 export function insert(target: Node, node: Node, anchor?: Node) {
-	target.insertBefore(node, anchor || null);
+	if (!is_hydrating || node.parentNode !== target) {
+		target.insertBefore(node, anchor || null);
+	}
 }
 
 export function detach(node: Node) {
@@ -144,40 +154,48 @@ export function time_ranges_to_array(ranges) {
 	return array;
 }
 
-export function children(element) {
-	return Array.from(element.childNodes);
+export function children(element: HTMLElement) {
+	const children = Array.from(element.childNodes);
+	return {
+		children,
+		element,
+		next: children[0] || null,
+		last: children.length ? children[children.length - 1].nextSibling : null,
+	};
 }
 
-export function claim_element(nodes, name, attributes, svg) {
-	for (let i = 0; i < nodes.length; i += 1) {
-		const node = nodes[i];
-		if (node.nodeName === name) {
-			let j = 0;
-			while (j < node.attributes.length) {
-				const attribute = node.attributes[j];
-				if (attributes[attribute.name]) {
-					j++;
-				} else {
-					node.removeAttribute(attribute.name);
-				}
+export function claim_element(nodes, name, fallback, svg) {
+	for (let i = 0; i < nodes.children.length; i += 1) {
+		const node = nodes.children[i];
+		if (node.nodeType !== 3) {
+			if (node.nodeName === name) {
+				nodes.children.splice(0,i + 1);
+				nodes.next = nodes.children[0];
+				return node;
+			} else {
+				nodes.next = nodes.last;
+				nodes.children.forEach(detach);
+				nodes.children.length = 0;
+				break;
 			}
-			return nodes.splice(i, 1)[0];
 		}
 	}
-
-	return svg ? svg_element(name) : element(name);
+	const node = fallback || (svg ? svg_element(name) : element(name));
+	insert(nodes.element, node, nodes.next);
+	return node;
 }
 
 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;
-			return nodes.splice(i, 1)[0];
-		}
+	if (nodes.children.length && nodes.children[0].nodeType === 3) {
+		const node = nodes.children.shift();
+		node.data = '' + data;
+		nodes.next = nodes.children[0];
+		return node;
+	} else {
+		const node = text(data);
+		insert(nodes.element, node, nodes.next);
+		return node;
 	}
-
-	return text(data);
 }
 
 export function claim_space(nodes) {
@@ -279,7 +297,13 @@ export function custom_event<T=any>(type: string, detail?: T) {
 }
 
 export function query_selector_all(selector: string, parent: HTMLElement = document.body) {
-	return Array.from(parent.querySelectorAll(selector));
+	const children = Array.from(parent.querySelectorAll(selector));
+	return {
+		children,
+		element: parent,
+		next: children[0] || null,
+		last: children.length ? children[children.length - 1].nextSibling : null
+	};
 }
 
 export class HtmlTag {
@@ -288,9 +312,8 @@ export class HtmlTag {
 	t: HTMLElement;
 	a: HTMLElement;
 
-	constructor(html: string, anchor: HTMLElement = null) {
+	constructor(html: string) {
 		this.e = element('div');
-		this.a = anchor;
 		this.u(html);
 	}
 
@@ -307,6 +330,16 @@ export class HtmlTag {
 		this.n = Array.from(this.e.childNodes);
 	}
 
+	l(nodes: any) {
+		this.n = this.n.map(n => {
+			if (n.nodeType === 3) {
+				return claim_text(nodes, (n as Text).data);
+			 } else {
+				return claim_element(nodes, n.nodeName, n, n.namespaceURI !== 'http://www.w3.org/1999/xhtml');
+			 }
+		});
+	} 
+
 	p(html: string) {
 		this.d();
 		this.u(html);

test/hydration/index.js

@@ -48,7 +48,7 @@ describe('hydration', () => {
 			throw new Error('Forgot to remove `solo: true` from test');
 		}
 
-		(config.skip ? it.skip : solo ? it.only : it)(dir, () => {
+		(config.skip ? it.skip : solo ? it.only : it)(dir, async () => {
 			const cwd = path.resolve(`${__dirname}/samples/${dir}`);
 
 			compileOptions = config.compileOptions || {};
@@ -110,7 +110,7 @@ describe('hydration', () => {
 				}
 
 				if (config.test) {
-					config.test(assert, target, snapshot, component, window);
+					await config.test(assert, target, snapshot, component, window);
 				} else {
 					component.$destroy();
 					assert.equal(target.innerHTML, '');

test/hydration/samples/binding-input/_config.js

@@ -3,6 +3,8 @@ export default {
 		name: 'world'
 	},
 
+	skip: true,
+
 	snapshot(target) {
 		return {
 			input: target.querySelector('input'),

test/hydration/samples/element-attribute-removed/_after.html

@@ -1 +1 @@
-<div></div>
+<div class="foo" title="bar"></div>

test/hydration/samples/event-handler/_config.js

@@ -3,6 +3,8 @@ export default {
 		clicked: false
 	},
 
+	skip: true,
+
 	snapshot(target) {
 		const button = target.querySelector('button');
 

test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html

@@ -1,4 +1,4 @@
 <title>Some Title</title>
-<link href="/" rel="canonical">
-<meta content="some description" name="description">
-<meta content="some keywords" name="keywords">
+<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
+<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
+<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">

test/hydration/samples/iframe/_after.html

@@ -0,0 +1,3 @@
+<div>
+	<iframe title="test"></iframe>
+</div>

test/hydration/samples/iframe/_before.html

@@ -0,0 +1,3 @@
+<div>
+	<iframe title="test"></iframe>
+</div>