From d734a6b8238ce4b3fcbf132bd25d69d5ea229895 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 25 Aug 2017 17:31:18 -0400
Subject: [PATCH] start work on <slot>

---
 .../dom/visitors/Element/Attribute.ts         |  2 +-
 .../dom/visitors/Element/Binding.ts           |  2 +-
 .../dom/visitors/Element/Element.ts           |  1 +
 src/generators/dom/visitors/Slot.ts           | 35 ++++++++++++++++
 .../getStaticAttributeValue.ts                |  0
 src/parse/read/directives.ts                  |  6 +--
 src/parse/read/script.ts                      |  4 +-
 src/utils/CodeBuilder.ts                      | 40 ++++++++++++++-----
 src/utils/getCodeFrame.ts                     |  4 +-
 src/utils/repeat.ts                           |  5 +++
 src/utils/spaces.ts                           |  5 ---
 .../component-slot-default/Nested.html        |  3 ++
 .../samples/component-slot-default/_config.js |  4 ++
 .../samples/component-slot-default/main.html  | 13 ++++++
 14 files changed, 99 insertions(+), 25 deletions(-)
 create mode 100644 src/generators/dom/visitors/Slot.ts
 rename src/generators/dom/visitors/{Element => shared}/getStaticAttributeValue.ts (100%)
 create mode 100644 src/utils/repeat.ts
 delete mode 100644 src/utils/spaces.ts
 create mode 100644 test/runtime/samples/component-slot-default/Nested.html
 create mode 100644 test/runtime/samples/component-slot-default/_config.js
 create mode 100644 test/runtime/samples/component-slot-default/main.html

diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
index b743971220..49bfb71908 100644
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ b/src/generators/dom/visitors/Element/Attribute.ts
@@ -1,7 +1,7 @@
 import attributeLookup from './lookup';
 import deindent from '../../../../utils/deindent';
 import { stringify } from '../../../../utils/stringify';
-import getStaticAttributeValue from './getStaticAttributeValue';
+import getStaticAttributeValue from '../shared/getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 77801c7876..5562d84083 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -1,6 +1,6 @@
 import deindent from '../../../../utils/deindent';
 import flattenReference from '../../../../utils/flattenReference';
-import getStaticAttributeValue from './getStaticAttributeValue';
+import getStaticAttributeValue from '../shared/getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts
index 263cfbf2b3..0579ee9422 100644
--- a/src/generators/dom/visitors/Element/Element.ts
+++ b/src/generators/dom/visitors/Element/Element.ts
@@ -1,5 +1,6 @@
 import deindent from '../../../../utils/deindent';
 import visit from '../../visit';
+import visitSlot from '../Slot';
 import visitComponent from '../Component';
 import visitWindow from './meta/Window';
 import visitAttribute from './Attribute';
diff --git a/src/generators/dom/visitors/Slot.ts b/src/generators/dom/visitors/Slot.ts
new file mode 100644
index 0000000000..bf2229cfba
--- /dev/null
+++ b/src/generators/dom/visitors/Slot.ts
@@ -0,0 +1,35 @@
+import { DomGenerator } from '../index';
+import Block from '../Block';
+import getStaticAttributeValue from './shared/getStaticAttributeValue';
+import { Node } from '../../../interfaces';
+import { State } from '../interfaces';
+
+export default function visitSlot(
+	generator: DomGenerator,
+	block: Block,
+	state: State,
+	node: Node
+) {
+	const slotName = getStaticAttributeValue(node, 'name');
+	const name = block.getUniqueName(`slot_${slotName || 'default'}`);
+
+	const parentNode = state.parentNode || '#target';
+
+	block.addVariable(name);
+	block.addElement(
+		name,
+		`@createElement('slot')`,
+		`@claimElement(${state.parentNodes}, 'slot', {${slotName ? ` name: '${slotName}' ` : ''}})`,
+		parentNode
+	);
+
+
+
+	// block.builders.mount.addLine(
+	// 	`if ( #component._yield ) #component._yield.mount( ${parentNode}, null );`
+	// );
+
+	// block.builders.unmount.addLine(
+	// 	`if ( #component._yield ) #component._yield.unmount();`
+	// );
+}
diff --git a/src/generators/dom/visitors/Element/getStaticAttributeValue.ts b/src/generators/dom/visitors/shared/getStaticAttributeValue.ts
similarity index 100%
rename from src/generators/dom/visitors/Element/getStaticAttributeValue.ts
rename to src/generators/dom/visitors/shared/getStaticAttributeValue.ts
diff --git a/src/parse/read/directives.ts b/src/parse/read/directives.ts
index c0c46d6af9..2a27f37812 100644
--- a/src/parse/read/directives.ts
+++ b/src/parse/read/directives.ts
@@ -1,5 +1,5 @@
 import { parseExpressionAt } from 'acorn';
-import spaces from '../../utils/spaces';
+import repeat from '../../utils/repeat';
 import { Parser } from '../index';
 
 function readExpression(parser: Parser, start: number, quoteMark: string|null) {
@@ -31,7 +31,7 @@ function readExpression(parser: Parser, start: number, quoteMark: string|null) {
 		}
 	}
 
-	const expression = parseExpressionAt(spaces(start) + str, start);
+	const expression = parseExpressionAt(repeat(' ', start) + str, start);
 	parser.index = expression.end;
 
 	parser.allowWhitespace();
@@ -101,7 +101,7 @@ export function readBindingDirective(
 			b = parser.index;
 		}
 
-		const source = spaces(a) + parser.template.slice(a, b);
+		const source = repeat(' ', a) + parser.template.slice(a, b);
 		value = parseExpressionAt(source, a);
 
 		if (value.type !== 'Identifier' && value.type !== 'MemberExpression') {
diff --git a/src/parse/read/script.ts b/src/parse/read/script.ts
index 42e8729e06..232c32319b 100644
--- a/src/parse/read/script.ts
+++ b/src/parse/read/script.ts
@@ -1,5 +1,5 @@
 import { parse } from 'acorn';
-import spaces from '../../utils/spaces';
+import repeat from '../../utils/repeat';
 import { Parser } from '../index';
 import { Node } from '../../interfaces';
 
@@ -12,7 +12,7 @@ export default function readScript(parser: Parser, start: number, attributes: No
 	if (scriptEnd === -1) parser.error(`<script> must have a closing tag`);
 
 	const source =
-		spaces(scriptStart) + parser.template.slice(scriptStart, scriptEnd);
+		repeat(' ', scriptStart) + parser.template.slice(scriptStart, scriptEnd);
 	parser.index = scriptEnd + scriptClosingTag.length;
 
 	let ast;
diff --git a/src/utils/CodeBuilder.ts b/src/utils/CodeBuilder.ts
index bdbcc3fcb6..16fe2c5bc9 100644
--- a/src/utils/CodeBuilder.ts
+++ b/src/utils/CodeBuilder.ts
@@ -1,3 +1,5 @@
+import repeat from './repeat';
+
 enum ChunkType {
 	Line,
 	Block
@@ -8,6 +10,8 @@ export default class CodeBuilder {
 	first: ChunkType;
 	last: ChunkType;
 	lastCondition: string;
+	conditionStack: string[];
+	indent: string;
 
 	constructor(str = '') {
 		this.result = str;
@@ -19,19 +23,21 @@ export default class CodeBuilder {
 		this.last = initial;
 
 		this.lastCondition = null;
+		this.conditionStack = [];
+		this.indent = '';
 	}
 
 	addConditional(condition: string, body: string) {
-		body = body.replace(/^/gm, '\t');
+		body = body.replace(/^/gm, `${this.indent}\t`);
 
 		if (condition === this.lastCondition) {
 			this.result += `\n${body}`;
 		} else {
 			if (this.lastCondition) {
-				this.result += `\n}`;
+				this.result += `\n${this.indent}}`;
 			}
 
-			this.result += `${this.last === ChunkType.Block ? '\n\n' : '\n'}if ( ${condition} ) {\n${body}`;
+			this.result += `${this.last === ChunkType.Block ? '\n\n' : '\n'}${this.indent}if ( ${condition} ) {\n${body}`;
 			this.lastCondition = condition;
 		}
 
@@ -40,14 +46,14 @@ export default class CodeBuilder {
 
 	addLine(line: string) {
 		if (this.lastCondition) {
-			this.result += `\n}`;
+			this.result += `\n${this.indent}}`;
 			this.lastCondition = null;
 		}
 
 		if (this.last === ChunkType.Block) {
-			this.result += `\n\n${line}`;
+			this.result += `\n\n${this.indent}${line}`;
 		} else if (this.last === ChunkType.Line) {
-			this.result += `\n${line}`;
+			this.result += `\n${this.indent}${line}`;
 		} else {
 			this.result += line;
 		}
@@ -58,9 +64,9 @@ export default class CodeBuilder {
 
 	addLineAtStart(line: string) {
 		if (this.first === ChunkType.Block) {
-			this.result = `${line}\n\n${this.result}`;
+			this.result = `${line}\n\n${this.indent}${this.result}`;
 		} else if (this.first === ChunkType.Line) {
-			this.result = `${line}\n${this.result}`;
+			this.result = `${line}\n${this.indent}${this.result}`;
 		} else {
 			this.result += line;
 		}
@@ -70,13 +76,15 @@ export default class CodeBuilder {
 	}
 
 	addBlock(block: string) {
+		if (this.indent) block = block.replace(/^/gm, `${this.indent}`);
+
 		if (this.lastCondition) {
-			this.result += `\n}`;
+			this.result += `\n${this.indent}}`;
 			this.lastCondition = null;
 		}
 
 		if (this.result) {
-			this.result += `\n\n${block}`;
+			this.result += `\n\n${this.indent}${block}`;
 		} else {
 			this.result += block;
 		}
@@ -87,7 +95,7 @@ export default class CodeBuilder {
 
 	addBlockAtStart(block: string) {
 		if (this.result) {
-			this.result = `${block}\n\n${this.result}`;
+			this.result = `${block}\n\n${this.indent}${this.result}`;
 		} else {
 			this.result += block;
 		}
@@ -100,6 +108,16 @@ export default class CodeBuilder {
 		return this.result === '';
 	}
 
+	pushCondition(condition: string) {
+		this.conditionStack.push(condition);
+		this.indent = repeat('\t', this.conditionStack.length);
+	}
+
+	popCondition() {
+		this.conditionStack.pop();
+		this.indent = repeat('\t', this.conditionStack.length);
+	}
+
 	toString() {
 		return this.result.trim() + (this.lastCondition ? `\n}` : ``);
 	}
diff --git a/src/utils/getCodeFrame.ts b/src/utils/getCodeFrame.ts
index 39c54c7d60..c14089ee4a 100644
--- a/src/utils/getCodeFrame.ts
+++ b/src/utils/getCodeFrame.ts
@@ -1,4 +1,4 @@
-import spaces from './spaces';
+import repeat from './repeat';
 
 function tabsToSpaces(str: string) {
 	return str.replace(/^\t+/, match => match.split('\t').join('  '));
@@ -26,7 +26,7 @@ export default function getCodeFrame(
 
 			if (isErrorLine) {
 				const indicator =
-					spaces(digits + 2 + tabsToSpaces(str.slice(0, column)).length) + '^';
+					repeat(' ', digits + 2 + tabsToSpaces(str.slice(0, column)).length) + '^';
 				return `${lineNum}: ${tabsToSpaces(str)}\n${indicator}`;
 			}
 
diff --git a/src/utils/repeat.ts b/src/utils/repeat.ts
new file mode 100644
index 0000000000..2fdba08dd1
--- /dev/null
+++ b/src/utils/repeat.ts
@@ -0,0 +1,5 @@
+export default function repeat(str: string, i: number) {
+	let result = '';
+	while (i--) result += str;
+	return result;
+}
diff --git a/src/utils/spaces.ts b/src/utils/spaces.ts
deleted file mode 100644
index 657c9c3884..0000000000
--- a/src/utils/spaces.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function spaces(i: number) {
-	let result = '';
-	while (i--) result += ' ';
-	return result;
-}
diff --git a/test/runtime/samples/component-slot-default/Nested.html b/test/runtime/samples/component-slot-default/Nested.html
new file mode 100644
index 0000000000..eab3583e4b
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/Nested.html
@@ -0,0 +1,3 @@
+<p>
+	<slot/>
+</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-default/_config.js b/test/runtime/samples/component-slot-default/_config.js
new file mode 100644
index 0000000000..ca40890dbc
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/_config.js
@@ -0,0 +1,4 @@
+export default {
+	solo: true,
+	html: '<p><slot>Hello</slot></p>'
+};
diff --git a/test/runtime/samples/component-slot-default/main.html b/test/runtime/samples/component-slot-default/main.html
new file mode 100644
index 0000000000..be4ab55771
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/main.html
@@ -0,0 +1,13 @@
+<Nested>
+	hello
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>