Merge pull request #2009 from sveltejs/gh-2000

set current = true on mount as well as intro

src/compile/render-dom/Block.ts

@@ -223,6 +223,7 @@ export default class Block {
 
 			if (!this.builders.intro.isEmpty()) {
 				this.builders.intro.addLine(`#current = true;`);
+				this.builders.mount.addLine(`#current = true;`);
 			}
 
 			if (!this.builders.outro.isEmpty()) {

src/compile/render-dom/wrappers/EachBlock.ts

@@ -429,18 +429,19 @@ export default class EachBlockWrapper extends Wrapper {
 				? deindent`
 					if (${iterations}[#i]) {
 						${iterations}[#i].p(changed, child_ctx);
+						${has_transitions && `${iterations}[#i].i(1);`}
 					} else {
 						${iterations}[#i] = ${create_each_block}(child_ctx);
 						${iterations}[#i].c();
+						${has_transitions && `${iterations}[#i].i(1);`}
 						${iterations}[#i].m(${updateMountNode}, ${anchor});
 					}
-					${has_transitions && `${iterations}[#i].i(1);`}
 				`
 				: deindent`
 					${iterations}[#i] = ${create_each_block}(child_ctx);
 					${iterations}[#i].c();
-					${iterations}[#i].m(${updateMountNode}, ${anchor});
 					${has_transitions && `${iterations}[#i].i(1);`}
+					${iterations}[#i].m(${updateMountNode}, ${anchor});
 				`;
 
 			const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;

src/compile/render-dom/wrappers/Element/index.ts

@@ -671,12 +671,13 @@ export default class ElementWrapper extends Wrapper {
 				if (outro) {
 					intro_block = deindent`
 						@add_render_callback(() => {
+							if (${outroName}) ${outroName}.end(1);
 							if (!${introName}) ${introName} = @create_in_transition(${this.var}, ${fn}, ${snippet});
 							${introName}.start();
 						});
 					`;
 
-					block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate()`);
+					block.builders.outro.addLine(`if (${introName}) ${introName}.invalidate();`);
 				} else {
 					intro_block = deindent`
 						if (!${introName}) {
@@ -707,9 +708,11 @@ export default class ElementWrapper extends Wrapper {
 
 				const fn = component.qualify(outro.name);
 
-				block.builders.intro.addBlock(deindent`
-					if (${outroName}) ${outroName}.end(1);
-				`);
+				if (!intro) {
+					block.builders.intro.addBlock(deindent`
+						if (${outroName}) ${outroName}.end(1);
+					`);
+				}
 
 				// TODO hide elements that have outro'd (unless they belong to a still-outroing
 				// group) prior to their removal from the DOM

src/compile/render-dom/wrappers/IfBlock.ts

@@ -235,8 +235,8 @@ export default class IfBlockWrapper extends Wrapper {
 			${name} = ${current_block_type_and}${current_block_type}(ctx);
 			if (${name}) {
 				${name}.c();
-				${name}.m(${updateMountNode}, ${anchor});
 				${has_transitions && `${name}.i(1);`}
+				${name}.m(${updateMountNode}, ${anchor});
 			}
 		`;
 
@@ -334,8 +334,8 @@ export default class IfBlockWrapper extends Wrapper {
 				${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](ctx);
 				${name}.c();
 			}
-			${name}.m(${updateMountNode}, ${anchor});
 			${has_transitions && `${name}.i(1);`}
+			${name}.m(${updateMountNode}, ${anchor});
 		`;
 
 		const changeBlock = hasElse
@@ -407,20 +407,23 @@ export default class IfBlockWrapper extends Wrapper {
 			? deindent`
 				if (${name}) {
 					${name}.p(changed, ctx);
+					${has_transitions && `${name}.i(1);`}
 				} else {
 					${name} = ${branch.block.name}(ctx);
 					${name}.c();
+					${has_transitions && `${name}.i(1);`}
 					${name}.m(${updateMountNode}, ${anchor});
 				}
-				${has_transitions && `${name}.i(1);`}
 			`
 			: deindent`
 				if (!${name}) {
 					${name} = ${branch.block.name}(ctx);
 					${name}.c();
+					${has_transitions && `${name}.i(1);`}
 					${name}.m(${updateMountNode}, ${anchor});
+				${has_transitions && `} else {
+					${name}.i(1);`}
 				}
-				${has_transitions && `${name}.i(1);`}
 			`;
 
 		// no `p()` here — we don't want to update outroing nodes,

src/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -408,8 +408,8 @@ export default class InlineComponentWrapper extends Wrapper {
 						${munged_handlers}
 
 						${name}.$$.fragment.c();
-						@mount_component(${name}, ${updateMountNode}, ${anchor});
 						${name}.$$.fragment.i(1);
+						@mount_component(${name}, ${updateMountNode}, ${anchor});
 					} else {
 						${name} = null;
 					}

src/internal/Component.js

@@ -110,8 +110,8 @@ export function init(component, options, instance, create_fragment, not_equal) {
 			$$.fragment.c();
 		}
 
-		mount_component(component, options.target, options.anchor);
 		if (options.intro && component.$$.fragment.i) component.$$.fragment.i();
+		mount_component(component, options.target, options.anchor);
 		flush();
 	}
 

src/internal/await-block.js

@@ -31,8 +31,8 @@ export function handlePromise(promise, info) {
 			}
 
 			block.c();
-			block.m(info.mount(), info.anchor);
 			if (block.i) block.i(1);
+			block.m(info.mount(), info.anchor);
 
 			flush();
 		}

src/internal/keyed-each.js

@@ -52,8 +52,8 @@ export function updateKeyedEach(old_blocks, changed, get_key, dynamic, ctx, list
 	var did_move = {};
 
 	function insert(block) {
-		block.m(node, next);
 		if (block.i) block.i(1);
+		block.m(node, next);
 		lookup[block.key] = block;
 		next = block.first;
 		n--;

test/js/samples/component-static-array/expected.js

@@ -13,6 +13,7 @@ function create_fragment(ctx) {
 
 		m(target, anchor) {
 			mount_component(nested, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/component-static-immutable/expected.js

@@ -13,6 +13,7 @@ function create_fragment(ctx) {
 
 		m(target, anchor) {
 			mount_component(nested, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/component-static-immutable2/expected.js

@@ -13,6 +13,7 @@ function create_fragment(ctx) {
 
 		m(target, anchor) {
 			mount_component(nested, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/component-static/expected.js

@@ -13,6 +13,7 @@ function create_fragment(ctx) {
 
 		m(target, anchor) {
 			mount_component(nested, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/dynamic-import/expected.js

@@ -14,6 +14,7 @@ function create_fragment(ctx) {
 
 		m(target, anchor) {
 			mount_component(lazyload, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/non-imported-component/expected.js

@@ -20,6 +20,7 @@ function create_fragment(ctx) {
 			mount_component(imported, target, anchor);
 			insert(target, text, anchor);
 			mount_component(nonimported, target, anchor);
+			current = true;
 		},
 
 		p: noop,

test/js/samples/transition-local/expected.js

@@ -23,9 +23,11 @@ function create_if_block(ctx) {
 				if (!if_block) {
 					if_block = create_if_block_1(ctx);
 					if_block.c();
+					if_block.i(1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				} else {
+									if_block.i(1);
 				}
-				if_block.i(1);
 			} else if (if_block) {
 				if_block.d(1);
 				if_block = null;

test/runtime/samples/transition-js-each-keyed-unchanged/_config.js

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		numbers: [1, 2, 3, 4, 5]
+	},
+
+	test({ assert, component, target, raf }) {
+		const divs1 = target.querySelectorAll('div');
+		assert.equal(divs1[0].foo, undefined);
+
+		component.numbers = [1, 2, 5, 4, 3];
+		const divs2 = target.querySelectorAll('div');
+
+		assert.equal(divs1[0], divs2[0]);
+		assert.equal(divs1[1], divs2[1]);
+		assert.equal(divs1[2], divs2[4]);
+		assert.equal(divs1[3], divs2[3]);
+		assert.equal(divs1[4], divs2[2]);
+
+		assert.equal(divs1[0].foo, undefined);
+		assert.equal(divs1[1].foo, undefined);
+		assert.equal(divs1[2].foo, undefined);
+		assert.equal(divs1[3].foo, undefined);
+		assert.equal(divs1[4].foo, undefined);
+	}
+};

test/runtime/samples/transition-js-each-keyed-unchanged/main.html

@@ -0,0 +1,16 @@
+<script>
+	export let numbers;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each numbers as num, i (num)}
+	<div transition:foo>{num}</div>
+{/each}

test/runtime/samples/transition-js-each-unchanged/_config.js

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		numbers: [1, 2, 3, 4, 5]
+	},
+
+	test({ assert, component, target, raf }) {
+		const divs1 = target.querySelectorAll('div');
+		assert.equal(divs1[0].foo, undefined);
+
+		component.numbers = [1, 2, 5, 4, 3];
+		const divs2 = target.querySelectorAll('div');
+
+		assert.equal(divs1[0], divs2[0]);
+		assert.equal(divs1[1], divs2[1]);
+		assert.equal(divs1[2], divs2[2]);
+		assert.equal(divs1[3], divs2[3]);
+		assert.equal(divs1[4], divs2[4]);
+
+		assert.equal(divs1[0].foo, undefined);
+		assert.equal(divs1[1].foo, undefined);
+		assert.equal(divs1[2].foo, undefined);
+		assert.equal(divs1[3].foo, undefined);
+		assert.equal(divs1[4].foo, undefined);
+	}
+};

test/runtime/samples/transition-js-each-unchanged/main.html

@@ -0,0 +1,16 @@
+<script>
+	export let numbers;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each numbers as num, i}
+	<div transition:foo>{num}</div>
+{/each}