Merge pull request #571 from sveltejs/gh-569

Fix insertion order of if blocks and their anchors
pull/572/head
Rich Harris 8 years ago committed by GitHub
commit 86e05aaf74

@ -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 anchor = node.needsAnchor ? block.getUniqueName( `${name}_anchor` ) : ( node.next && node.next._state.name ) || 'null';
const params = block.params.join( ', ' ); 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 hasElse = isElseBranch( branches[ branches.length - 1 ] );
const if_name = hasElse ? '' : `if ( ${name} ) `; 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 ); 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( block.builders.destroy.addLine(
`${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );` `${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} ); var ${name} = (${branch.condition}) && ${branch.block}( ${params}, ${block.component} );
` ); ` );
const isToplevel = !state.parentNode; const isTopLevel = !state.parentNode;
const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount'; 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 { } else {
block.builders.create.addLine( `if ( ${name} ) ${name}.${mountOrIntro}( ${state.parentNode}, null );` ); 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} ); 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'; 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 { } else {
block.builders.create.addLine( `${if_name}${name}.${mountOrIntro}( ${state.parentNode}, null );` ); 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 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`; const parentNode = state.parentNode || `${anchor}.parentNode`;

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

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

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

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

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

@ -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>
Loading…
Cancel
Save