Merge pull request #1017 from sveltejs/gh-1007

allow components without slots to have whitespace as only child

Author: Rich-Harris

src/generators/nodes/Element.ts

@@ -29,7 +29,7 @@ export default class Element extends Node {
 			this.cannotUseInnerHTML();
 		}
 
-		const parentElement = this.parent && this.parent.findNearest('Element');
+		const parentElement = this.parent && this.parent.findNearest(/^Element/);
 		this.namespace = this.name === 'svg' ?
 			namespaces.svg :
 			parentElement ? parentElement.namespace : this.generator.namespace;
@@ -133,7 +133,7 @@ export default class Element extends Node {
 			this.cannotUseInnerHTML();
 			this.slotted = true;
 			// TODO validate slots — no nesting, no dynamic names...
-			const component = this.findNearest('Component');
+			const component = this.findNearest(/^Component/);
 			component._slots.add(slot);
 		}
 
@@ -171,7 +171,7 @@ export default class Element extends Node {
 
 		const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
 		const initialMountNode = this.slotted ?
-			`${this.findNearest('Component').var}._slotted.${slot.value[0].data}` : // TODO this looks bonkers
+			`${this.findNearest(/^Component/).var}._slotted.${slot.value[0].data}` : // TODO this looks bonkers
 			parentNode;
 
 		block.addVariable(name);

src/generators/nodes/Text.ts

@@ -17,15 +17,26 @@ const elementsWithoutText = new Set([
 	'video',
 ]);
 
+function shouldSkip(node: Text) {
+	if (/\S/.test(node.data)) return false;
+
+	const parentElement = node.findNearest(/(?:Element|Component)/);
+	if (!parentElement) return false;
+
+	if (parentElement.type === 'Component') return parentElement.children.length === 1 && node === parentElement.children[0];
+
+	return parentElement.namespace || elementsWithoutText.has(parentElement.name);
+}
+
 export default class Text extends Node {
 	type: 'Text';
 	data: string;
 	shouldSkip: boolean;
 
 	init(block: Block) {
-		const parentElement = this.findNearest('Element');
+		const parentElement = this.findNearest(/(?:Element|Component)/);
 
-		if (!/\S/.test(this.data) && parentElement && (parentElement.namespace || elementsWithoutText.has(parentElement.name))) {
+		if (shouldSkip(this)) {
 			this.shouldSkip = true;
 			return;
 		}

src/generators/nodes/shared/Node.ts

@@ -133,9 +133,9 @@ export default class Node {
 			false;
 	}
 
-	findNearest(type: string) {
-		if (this.type === type) return this;
-		if (this.parent) return this.parent.findNearest(type);
+	findNearest(selector: RegExp) {
+		if (selector.test(this.type)) return this;
+		if (this.parent) return this.parent.findNearest(selector);
 	}
 
 	getOrCreateAnchor(block: Block, parentNode: string) {

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

@@ -0,0 +1 @@
+<p>no slot here</p>

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

@@ -0,0 +1,3 @@
+export default {
+	html: '<p>no slot here</p>'
+};

test/runtime/samples/component-slot-empty/main.html

@@ -0,0 +1,12 @@
+<Nested>
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>