start work on <slot>

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';

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';

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';

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

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') {

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;

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

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

src/utils/repeat.ts

@@ -0,0 +1,5 @@
+export default function repeat(str: string, i: number) {
+	let result = '';
+	while (i--) result += str;
+	return result;
+}

src/utils/spaces.ts

@@ -1,5 +0,0 @@
-export default function spaces(i: number) {
-	let result = '';
-	while (i--) result += ' ';
-	return result;
-}

test/runtime/samples/component-slot-default/Nested.html

@@ -0,0 +1,3 @@
+<p>
+	<slot/>
+</p>

test/runtime/samples/component-slot-default/_config.js

@@ -0,0 +1,4 @@
+export default {
+	solo: true,
+	html: '<p><slot>Hello</slot></p>'
+};

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>