fix hydration

src/compiler/compile/render_dom/Renderer.ts

@@ -59,6 +59,6 @@ export default class Renderer {
 
 		this.block.assign_variable_names();
 
-		this.fragment.render(this.block, null, x`nodes` as Identifier);
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
 	}
 }

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

@@ -234,7 +234,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 		`);
 
 		[this.pending, this.then, this.catch].forEach(branch => {
-			branch.fragment.render(branch.block, null, x`nodes` as Identifier);
+			branch.fragment.render(branch.block, null, x`#nodes` as Identifier);
 		});
 	}
 }

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

@@ -300,10 +300,10 @@ export default class EachBlockWrapper extends Wrapper {
 			`);
 		}
 
-		this.fragment.render(this.block, null, x`nodes` as Identifier);
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
 
 		if (this.else) {
-			this.else.fragment.render(this.else.block, null, x`nodes` as Identifier);
+			this.else.fragment.render(this.else.block, null, x`#nodes` as Identifier);
 		}
 	}
 

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

@@ -264,7 +264,7 @@ export default class ElementWrapper extends Wrapper {
 			if (parent_nodes) {
 				block.chunks.claim.push(b`
 					${node} = ${this.get_claim_statement(parent_nodes)};
-					var ${nodes} = @children(${this.node.name === 'template' ? `${node}.content` : node});
+					var ${nodes} = @children(${this.node.name === 'template' ? x`${node}.content` : node});
 				`);
 			} else {
 				block.chunks.claim.push(
@@ -321,7 +321,7 @@ export default class ElementWrapper extends Wrapper {
 			this.fragment.nodes.forEach((child: Wrapper) => {
 				child.render(
 					block,
-					this.node.name === 'template' ? `${node}.content` : node,
+					this.node.name === 'template' ? x`${node}.content` : node,
 					nodes
 				);
 			});
@@ -387,9 +387,9 @@ export default class ElementWrapper extends Wrapper {
 			? this.node.name
 			: this.node.name.toUpperCase();
 
-		return x`@claim_element(${nodes}, "${name}", ${attributes
+		const svg = this.node.namespace === namespaces.svg ? 1 : null;
-			? x`{ ${attributes} }`
+
-			: x`{}`}, ${this.node.namespace === namespaces.svg ? true : false})`;
+		return x`@claim_element(${nodes}, "${name}", { ${attributes} }, ${svg})`;
 	}
 
 	add_bindings(block: Block) {

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

@@ -32,6 +32,6 @@ export default class HeadWrapper extends Wrapper {
 	}
 
 	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
-		this.fragment.render(block, x`@_document.head` as unknown as Identifier, x`nodes` as unknown as Identifier);
+		this.fragment.render(block, x`@_document.head` as unknown as Identifier, x`#nodes` as unknown as Identifier);
 	}
 }

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

@@ -235,7 +235,7 @@ export default class IfBlockWrapper extends Wrapper {
 		}
 
 		this.branches.forEach(branch => {
-			branch.fragment.render(branch.block, null, x`nodes` as unknown as Identifier);
+			branch.fragment.render(branch.block, null, x`#nodes` as unknown as Identifier);
 		});
 	}
 

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

@@ -157,7 +157,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			const default_slot = this.slots.get('default');
 
 			this.fragment.nodes.forEach((child) => {
-				child.render(default_slot.block, null, x`nodes` as unknown as Identifier);
+				child.render(default_slot.block, null, x`#nodes` as unknown as Identifier);
 			});
 		}
 

test/runtime/index.js

@@ -216,7 +216,7 @@ describe.only("runtime", () => {
 
 	fs.readdirSync("test/runtime/samples").forEach(dir => {
 		runTest(dir, false);
-		// runTest(dir, true);
+		runTest(dir, true);
 	});
 
 	async function create_component(src = '<div></div>') {