Merge pull request #663 from sveltejs/gh-662

fix each-else blocks that are empty on initial render

src/generators/dom/visitors/EachBlock.ts

@@ -66,6 +66,7 @@ export default function visitEachBlock(
 		block.builders.init.addBlock(deindent`
 			if ( !${each_block_value}.length ) {
 				${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} );
+				${each_block_else}.create();
 			}
 		`);
 

src/generators/server-side-rendering/visitors/EachBlock.ts

@@ -10,7 +10,7 @@ export default function visitEachBlock(
 ) {
 	const { dependencies, snippet } = block.contextualise(node.expression);
 
-	const open = `\${ ${snippet}.map( ${node.index
+	const open = `\${ ${node.else ? `${snippet}.length ? ` : ''}${snippet}.map( ${node.index
 		? `( ${node.context}, ${node.index} )`
 		: node.context} => \``;
 	generator.append(open);
@@ -36,6 +36,16 @@ export default function visitEachBlock(
 		visit(generator, childBlock, child);
 	});
 
-	const close = `\` ).join( '' )}`;
+	const close = `\` ).join( '' )`;
 	generator.append(close);
+
+	if (node.else) {
+		generator.append(` : \``);
+		node.else.children.forEach((child: Node) => {
+			visit(generator, block, child);
+		});
+		generator.append(`\``);
+	}
+
+	generator.append('}');
 }

test/runtime/samples/each-block-else-starts-empty/_config.js

@@ -0,0 +1,21 @@
+export default {
+	data: {
+		animals: [],
+		foo: 'something else'
+	},
+
+	html: `
+		before
+		<p>no animals, but rather something else</p>
+		after
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ animals: ['wombat'] });
+		assert.htmlEqual( target.innerHTML, `
+			before
+			<p>wombat</p>
+			after
+		` );
+	}
+};

test/runtime/samples/each-block-else-starts-empty/main.html

@@ -0,0 +1,7 @@
+before
+{{#each animals as animal}}
+	<p>{{animal}}</p>
+{{else}}
+	<p>no animals, but rather {{foo}}</p>
+{{/each}}
+after