From dc29b2d4667d912fab313685a8e3e0f6b8ab469b Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 17 Jun 2017 17:06:51 -0400
Subject: [PATCH] fix component hydration

---
 .../dom/visitors/Component/Component.ts       |  7 +++++--
 src/shared/dom.js                             |  1 -
 .../samples/component-in-element/Nested.html  |  1 +
 .../samples/component-in-element/_after.html  |  3 +++
 .../samples/component-in-element/_before.html |  3 +++
 .../samples/component-in-element/_config.js   | 21 +++++++++++++++++++
 .../samples/component-in-element/main.html    | 13 ++++++++++++
 7 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 test/hydration/samples/component-in-element/Nested.html
 create mode 100644 test/hydration/samples/component-in-element/_after.html
 create mode 100644 test/hydration/samples/component-in-element/_before.html
 create mode 100644 test/hydration/samples/component-in-element/_config.js
 create mode 100644 test/hydration/samples/component-in-element/main.html

diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts
index 8bcd52e6ca..a0616bc587 100644
--- a/src/generators/dom/visitors/Component/Component.ts
+++ b/src/generators/dom/visitors/Component/Component.ts
@@ -113,7 +113,6 @@ export default function visitComponent(
 	}
 
 	const componentInitProperties = [
-		`target: ${!isTopLevel ? state.parentNode : 'null'}`,
 		`_root: ${block.component}._root`,
 	];
 
@@ -123,7 +122,7 @@ export default function visitComponent(
 
 		const childBlock = node._block;
 
-		node.children.forEach(child => {
+		node.children.forEach((child: Node) => {
 			visit(generator, childBlock, childState, child);
 		});
 
@@ -224,8 +223,12 @@ export default function visitComponent(
 
 	block.builders.init.addBlock(local.create);
 
+	const targetNode = state.parentNode || block.target;
+	const anchorNode = state.parentNode ? 'null' : 'anchor';
+
 	block.builders.create.addLine(`${name}._fragment.create();`);
 	block.builders.claim.addLine(`${name}._fragment.claim( ${state.parentNodes} );`);
+	block.builders.mount.addLine(`${name}._fragment.mount( ${targetNode}, ${anchorNode} );` );
 
 	if (!local.update.isEmpty()) block.builders.update.addBlock(local.update);
 }
diff --git a/src/shared/dom.js b/src/shared/dom.js
index f87bdd8bdd..ffdecf5730 100644
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -83,7 +83,6 @@ export function claimElement (nodes, name, attributes) {
 		}
 	}
 
-	console.trace('creating', name);
 	return createElement(name);
 }
 
diff --git a/test/hydration/samples/component-in-element/Nested.html b/test/hydration/samples/component-in-element/Nested.html
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/test/hydration/samples/component-in-element/Nested.html
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_after.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_before.html b/test/hydration/samples/component-in-element/_before.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_before.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_config.js b/test/hydration/samples/component-in-element/_config.js
new file mode 100644
index 0000000000..790b026400
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_config.js
@@ -0,0 +1,21 @@
+export default {
+	snapshot(target) {
+		const div = target.querySelector('div');
+		const p = target.querySelector('p');
+
+		return {
+			div,
+			p,
+			text: p.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+		const p = target.querySelector('p');
+
+		assert.equal(div, snapshot.div);
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+	}
+};
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/main.html b/test/hydration/samples/component-in-element/main.html
new file mode 100644
index 0000000000..d639570c56
--- /dev/null
+++ b/test/hydration/samples/component-in-element/main.html
@@ -0,0 +1,13 @@
+<div>
+	<Nested/>
+</div>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>
\ No newline at end of file