fix component hydration

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

src/shared/dom.js

@@ -83,7 +83,6 @@ export function claimElement (nodes, name, attributes) {
 		}
 	}
 
-	console.trace('creating', name);
 	return createElement(name);
 }
 

test/hydration/samples/component-in-element/Nested.html

@@ -0,0 +1 @@
+<p>nested</p>

test/hydration/samples/component-in-element/_after.html

@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>

test/hydration/samples/component-in-element/_before.html

@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>

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

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>