From 5b3e8cd88f39e6e3ca23a2511f7fdbaf4f56b987 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Tue, 29 Aug 2017 08:02:47 -0400
Subject: [PATCH] support nested <slot> elements

---
 .../server-side-rendering/visitors/Slot.ts          |  4 ++--
 src/parse/state/tag.ts                              |  7 -------
 .../samples/component-slot-nested/Nested.html       |  5 +++++
 .../samples/component-slot-nested/_config.js        |  6 ++++++
 .../runtime/samples/component-slot-nested/main.html | 13 +++++++++++++
 test/server-side-rendering/index.js                 |  6 ++----
 .../samples/component-slot-nested/errors.json       |  8 --------
 .../samples/component-slot-nested/input.html        |  3 ---
 8 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 test/runtime/samples/component-slot-nested/Nested.html
 create mode 100644 test/runtime/samples/component-slot-nested/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested/main.html
 delete mode 100644 test/validator/samples/component-slot-nested/errors.json
 delete mode 100644 test/validator/samples/component-slot-nested/input.html

diff --git a/src/generators/server-side-rendering/visitors/Slot.ts b/src/generators/server-side-rendering/visitors/Slot.ts
index 3886f8a4d978..9d6530fea9e8 100644
--- a/src/generators/server-side-rendering/visitors/Slot.ts
+++ b/src/generators/server-side-rendering/visitors/Slot.ts
@@ -12,7 +12,7 @@ export default function visitSlot(
 	const name = node.attributes.find((attribute: Node) => attribute.name);
 	const slotName = name && name.value[0].data || 'default';
 
-	generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : '`);
+	generator.append(`\${options && options.slotted && options.slotted.${slotName} ? options.slotted.${slotName}() : \``);
 
 	generator.elementDepth += 1;
 
@@ -22,5 +22,5 @@ export default function visitSlot(
 
 	generator.elementDepth -= 1;
 
-	generator.append(`'}`);
+	generator.append(`\`}`);
 }
diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts
index 543822ebe135..ffe9a4021866 100644
--- a/src/parse/state/tag.ts
+++ b/src/parse/state/tag.ts
@@ -153,13 +153,6 @@ export default function tag(parser: Parser) {
 					start
 				);
 			}
-
-			if (item.type === 'Element' && item.name === 'slot') {
-				parser.error(
-					`<slot> elements cannot be nested`,
-					start
-				);
-			}
 		}
 	}
 
diff --git a/test/runtime/samples/component-slot-nested/Nested.html b/test/runtime/samples/component-slot-nested/Nested.html
new file mode 100644
index 000000000000..6aa4e89e57a0
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/Nested.html
@@ -0,0 +1,5 @@
+<div>
+	<slot name='foo'>
+		<slot name='bar'></slot>
+	</slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested/_config.js b/test/runtime/samples/component-slot-nested/_config.js
new file mode 100644
index 000000000000..23ea791e6380
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>
+			<p slot='bar'>bar</p>
+		</div>`
+};
diff --git a/test/runtime/samples/component-slot-nested/main.html b/test/runtime/samples/component-slot-nested/main.html
new file mode 100644
index 000000000000..226f9024eee7
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/main.html
@@ -0,0 +1,13 @@
+<Nested>
+	<p slot='bar'>bar</p>
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
index 1d2c801ae18a..008293427756 100644
--- a/test/server-side-rendering/index.js
+++ b/test/server-side-rendering/index.js
@@ -90,11 +90,9 @@ describe("ssr", () => {
 				delete require.cache[resolved];
 			});
 
-			const component = require(`../runtime/samples/${dir}/main.html`);
-			let html;
-
 			try {
-				html = component.render(config.data);
+				const component = require(`../runtime/samples/${dir}/main.html`);
+				const html = component.render(config.data);
 
 				if (config.html) {
 					assert.htmlEqual(html, config.html);
diff --git a/test/validator/samples/component-slot-nested/errors.json b/test/validator/samples/component-slot-nested/errors.json
deleted file mode 100644
index 9d19da7fd4c8..000000000000
--- a/test/validator/samples/component-slot-nested/errors.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[{
-	"message": "<slot> elements cannot be nested",
-	"loc": {
-		"line": 2,
-		"column": 1
-	},
-	"pos": 8
-}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-nested/input.html b/test/validator/samples/component-slot-nested/input.html
deleted file mode 100644
index 6365f729f420..000000000000
--- a/test/validator/samples/component-slot-nested/input.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<slot>
-	<slot name='foo'></slot>
-</slot>
\ No newline at end of file