Repository: sveltejs/svelte (JavaScript)
Date: 2017-09-16 15:21:46+00:00
Task type: Bug Fix

Issue:
Default slot conditional error
This is possibly related to #849.

When using a default slot, you have to either wrap conditionals with other tags or have them be the only content inside the component.

This fails:
https://svelte.technology/repl?version=1.39.2&gist=f30b005debb0daa771e7c612622c1344

But this works:
https://svelte.technology/repl?version=1.39.2&gist=91607f88a95c234ba4bd9cde6947531a

And so does this:
https://svelte.technology/repl?version=1.39.2&gist=0dd35c3da30ef0687d6e553b47537e2e


Issue discussion:

Solution patch:
diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts
--- a/src/generators/dom/visitors/IfBlock.ts
+++ b/src/generators/dom/visitors/IfBlock.ts
@@ -152,7 +152,7 @@ function simple(
 		`if (${name}) ${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
 	);
 
-	const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;
+	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
 
 	const enter = dynamic
 		? branch.hasIntroMethod
@@ -255,7 +255,7 @@ function compound(
 		`${if_name}${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
 	);
 
-	const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;
+	const parentNode = isDomNode(node.parent, generator) ? node.parent.var : `${anchor}.parentNode`;
 
 	const changeBlock = deindent`
 		${hasElse


Test patch:
diff --git a/test/runtime/samples/component-slot-if-block-before-node/Nested.html b/test/runtime/samples/component-slot-if-block-before-node/Nested.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/Nested.html
@@ -0,0 +1,3 @@
+<div>
+	<slot/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-block-before-node/_config.js b/test/runtime/samples/component-slot-if-block-before-node/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<p>unconditional</p>
+		</div>`,
+
+	test(assert, component, target) {
+		component.set({ foo: true });
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>conditional</p>
+				<p>unconditional</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-if-block-before-node/main.html b/test/runtime/samples/component-slot-if-block-before-node/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/main.html
@@ -0,0 +1,17 @@
+<Nested>
+	{{#if foo}}
+		<p>conditional</p>
+	{{/if}}
+
+	<p>unconditional</p>
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/Nested.html b/test/runtime/samples/component-slot-if-else-block-before-node/Nested.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/Nested.html
@@ -0,0 +1 @@
+<slot/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/_config.js b/test/runtime/samples/component-slot-if-else-block-before-node/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p>disabled</p>
+		<p>unconditional</p>`,
+
+	test(assert, component, target) {
+		component.set({ enabled: true });
+		assert.htmlEqual(target.innerHTML, `
+			<p>enabled</p>
+			<p>unconditional</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/main.html b/test/runtime/samples/component-slot-if-else-block-before-node/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/main.html
@@ -0,0 +1,19 @@
+<Nested>
+	{{#if !enabled}}
+		<p>disabled</p>
+	{{else}}
+		<p>enabled</p>
+	{{/if}}
+
+	<p>unconditional</p>
+</Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>
\ No newline at end of file