Merge pull request #571 from sveltejs/gh-569

Fix insertion order of if blocks and their anchors

src/generators/dom/visitors/IfBlock.js

@@ -52,13 +52,7 @@ export default function visitIfBlock ( generator, block, state, node ) {
 	const anchor = node.needsAnchor ? block.getUniqueName( `${name}_anchor` ) : ( node.next && node.next._state.name ) || 'null';
 	const params = block.params.join( ', ' );
 
-	if ( node.needsAnchor ) {
+	const branches = getBranches( generator, block, state, node );
-		block.addElement( anchor, `${generator.helper( 'createComment' )}()`, state.parentNode, true );
-	} else if ( node.next ) {
-		node.next.usedAsAnchor = true;
-	}
-
-	const branches = getBranches( generator, block, state, node, generator.getUniqueName( `create_if_block` ) );
 
 	const hasElse = isElseBranch( branches[ branches.length - 1 ] );
 	const if_name = hasElse ? '' : `if ( ${name} ) `;
@@ -78,6 +72,12 @@ export default function visitIfBlock ( generator, block, state, node ) {
 		simple( generator, block, state, node, branches[0], dynamic, vars );
 	}
 
+	if ( node.needsAnchor ) {
+		block.addElement( anchor, `${generator.helper( 'createComment' )}()`, state.parentNode, true );
+	} else if ( node.next ) {
+		node.next.usedAsAnchor = true;
+	}
+
 	block.builders.destroy.addLine(
 		`${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );`
 	);
@@ -88,11 +88,11 @@ function simple ( generator, block, state, node, branch, dynamic, { name, anchor
 		var ${name} = (${branch.condition}) && ${branch.block}( ${params}, ${block.component} );
 	` );
 
-	const isToplevel = !state.parentNode;
+	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount';
 
-	if ( isToplevel ) {
+	if ( isTopLevel ) {
-		block.builders.mount.addLine( `if ( ${name} ) ${name}.${mountOrIntro}( ${block.target}, null );` );
+		block.builders.mount.addLine( `if ( ${name} ) ${name}.${mountOrIntro}( ${block.target}, anchor );` );
 	} else {
 		block.builders.create.addLine( `if ( ${name} ) ${name}.${mountOrIntro}( ${state.parentNode}, null );` );
 	}
@@ -169,11 +169,11 @@ function compound ( generator, block, state, node, branches, dynamic, { name, an
 		var ${name} = ${current_block_and}${current_block}( ${params}, ${block.component} );
 	` );
 
-	const isToplevel = !state.parentNode;
+	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
 
-	if ( isToplevel ) {
+	if ( isTopLevel ) {
-		block.builders.mount.addLine( `${if_name}${name}.${mountOrIntro}( ${block.target}, null );` );
+		block.builders.mount.addLine( `${if_name}${name}.${mountOrIntro}( ${block.target}, anchor );` );
 	} else {
 		block.builders.create.addLine( `${if_name}${name}.${mountOrIntro}( ${state.parentNode}, null );` );
 	}
@@ -244,13 +244,14 @@ function compoundWithOutros ( generator, block, state, node, branches, dynamic,
 		` );
 	}
 
-	const isToplevel = !state.parentNode;
+	const isTopLevel = !state.parentNode;
 	const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
-	const initialTarget = isToplevel ? block.target : state.parentNode;
 
-	( isToplevel ? block.builders.mount : block.builders.create ).addBlock(
+	if ( isTopLevel ) {
-		`${if_current_block_index}${if_blocks}[ ${current_block_index} ].${mountOrIntro}( ${initialTarget}, null );`
+		block.builders.mount.addLine( `${if_current_block_index}${if_blocks}[ ${current_block_index} ].${mountOrIntro}( ${block.target}, anchor );` );
-	);
+	} else {
+		block.builders.create.addLine( `${if_current_block_index}${if_blocks}[ ${current_block_index} ].${mountOrIntro}( ${state.parentNode}, null );` );
+	}
 
 	const parentNode = state.parentNode || `${anchor}.parentNode`;
 

test/js/samples/if-block-no-update/expected.js

@@ -1,8 +1,6 @@
 import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js";
 
 function create_main_fragment ( state, component ) {
-	var if_block_anchor = createComment();
-
 	function get_block ( state ) {
 		if ( state.foo ) return create_if_block;
 		return create_if_block_1;
@@ -11,10 +9,12 @@ function create_main_fragment ( state, component ) {
 	var current_block = get_block( state );
 	var if_block = current_block( state, component );
 
+	var if_block_anchor = createComment();
+
 	return {
 		mount: function ( target, anchor ) {
+			if_block.mount( target, anchor );
 			insertNode( if_block_anchor, target, anchor );
-			if_block.mount( target, null );
 		},
 
 		update: function ( changed, state ) {

test/js/samples/if-block-simple/expected.js

@@ -1,14 +1,14 @@
 import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js";
 
 function create_main_fragment ( state, component ) {
-	var if_block_anchor = createComment();
-
 	var if_block = (state.foo) && create_if_block( state, component );
 
+	var if_block_anchor = createComment();
+
 	return {
 		mount: function ( target, anchor ) {
+			if ( if_block ) if_block.mount( target, anchor );
 			insertNode( if_block_anchor, target, anchor );
-			if ( if_block ) if_block.mount( target, null );
 		},
 
 		update: function ( changed, state ) {

test/js/samples/use-elements-as-anchors/expected.js

@@ -35,16 +35,17 @@ function create_main_fragment ( state, component ) {
 	var text_7 = createText( "\n\n\t" );
 	appendNode( text_7, div );
 	var text_8 = createText( "\n\n" );
-	var if_block_4_anchor = createComment();
 
 	var if_block_4 = (state.e) && create_if_block_4( state, component );
 
+	var if_block_4_anchor = createComment();
+
 	return {
 		mount: function ( target, anchor ) {
 			insertNode( div, target, anchor );
 			insertNode( text_8, target, anchor );
+			if ( if_block_4 ) if_block_4.mount( target, anchor );
 			insertNode( if_block_4_anchor, target, anchor );
-			if ( if_block_4 ) if_block_4.mount( target, null );
 		},
 
 		update: function ( changed, state ) {

test/runtime/samples/component-if-placement/Component.html

@@ -0,0 +1,3 @@
+{{#if true}}
+	<span>Component</span>
+{{/if}}

test/runtime/samples/component-if-placement/_config.js

@@ -0,0 +1,20 @@
+export default {
+	data: {
+		flag: true
+	},
+
+	html: `
+		<span>Before</span>
+		<span>Component</span>
+		<span>After</span>
+	`,
+
+	test ( assert, component, target ) {
+		component.set( { flag: false } );
+		assert.htmlEqual( target.innerHTML, `
+			<span>Before</span>
+			<span>Component</span>
+			<span>After</span>
+		`);
+	}
+};

test/runtime/samples/component-if-placement/main.html

@@ -0,0 +1,14 @@
+<span>Before</span>
+{{#if flag}}
+	<Component/>
+{{else}}
+	<Component/>
+{{/if}}
+<span>After</span>
+
+<script>
+	import Component from './Component.html';
+	export default {
+		components: { Component }
+	};
+</script>