get a few transition tests passing

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

@@ -521,7 +521,7 @@ export default class ElementWrapper extends Wrapper {
 				renderer.hasComplexBindings = true;
 
 				block.builders.hydrate.addLine(
-					`if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});`
+					`if (!(${allInitialStateIsDefined})) #component.$$root._beforecreate.push(${handler});`
 				);
 			}
 
@@ -529,7 +529,7 @@ export default class ElementWrapper extends Wrapper {
 				renderer.hasComplexBindings = true;
 
 				block.builders.hydrate.addLine(
-					`#component.root._beforecreate.push(${handler});`
+					`#component.$$root._beforecreate.push(${handler});`
 				);
 			}
 		});
@@ -723,10 +723,10 @@ export default class ElementWrapper extends Wrapper {
 
 			const fn = `ctx.${intro.name}`;
 
-			block.builders.intro.addConditional(`#component.root._intro`, deindent`
+			block.builders.intro.addConditional(`#component.$$root.$$intro`, deindent`
 				if (${name}) ${name}.invalidate();
 
-				#component.root._aftercreate.push(() => {
+				@after_update(() => {
 					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
 					${name}.run(1);
 				});
@@ -760,8 +760,8 @@ export default class ElementWrapper extends Wrapper {
 					`);
 				}
 
-				block.builders.intro.addConditional(`#component.root._intro`, deindent`
-					#component.root._aftercreate.push(() => {
+				block.builders.intro.addConditional(`#component.$$root.$$intro`, deindent`
+					@after_update(() => {
 						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
 						${introName}.run(1);
 					});

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

@@ -84,7 +84,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		const name = this.var;
 
 		const componentInitProperties = [
-			`root: #component.root`
+			`root: #component.$$root`
 		];
 
 		if (this.fragment) {
@@ -289,7 +289,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			`);
 
 			beforecreate = deindent`
-				#component.root._beforecreate.push(() => {
+				#component.$$root._beforecreate.push(() => {
 					${name}._bind({ ${this.node.bindings.map(b => `${quoteNameIfNecessary(b.name)}: 1`).join(', ')} }, ${name}.get());
 				});
 			`;
@@ -377,7 +377,7 @@ export default class InlineComponentWrapper extends Wrapper {
 						${name} = new ${switch_value}(${switch_props}(ctx));
 
 						${this.node.bindings.length > 0 && deindent`
-						#component.root._beforecreate.push(() => {
+						#component.$$root._beforecreate.push(() => {
 							const changed = {};
 							${this.node.bindings.map(binding => deindent`
 							if (${binding.value.snippet} === void 0) changed.${binding.name} = 1;`)}

src/internal/SvelteComponent.js

@@ -10,8 +10,10 @@ export class SvelteComponent {
 		this.$$onupdate = [];
 		this.$$ondestroy = [];
 
+		// TODO can we get rid of references to $$root and put
+		// the relevant code in the scheduler instead?
+		this.$$root = options.root || this;
 		this.$$callbacks = blankObject();
-
 		this.$$slotted = options.slots;
 
 		set_current_component(this);
@@ -33,8 +35,10 @@ export class SvelteComponent {
 		this.$$fragment = this.$$create_fragment(this, this.$$.get_state());
 
 		if (options.target) {
+			this.$$intro = false; // TODO can we put this in the scheduler instead?
 			this.$$mount(options.target);
 			flush();
+			this.$$intro = true;
 		}
 	}
 

src/internal/scheduler.js

@@ -1,6 +1,7 @@
 let update_scheduled = false;
 
 const dirty_components = [];
+const after_update_callbacks = [];
 
 export function schedule_update(component) {
 	dirty_components.push(component);
@@ -10,11 +11,19 @@ export function schedule_update(component) {
 	}
 }
 
+export function after_update(fn) {
+	after_update_callbacks.push(fn);
+}
+
 export function flush() {
 	while (dirty_components.length) {
 		dirty_components.pop().$$update();
 	}
 
+	while (after_update_callbacks.length) {
+		after_update_callbacks.shift()();
+	}
+
 	update_scheduled = false;
 }
 

test/runtime/samples/transition-js-aborted-outro-in-each/_config.js

@@ -8,7 +8,7 @@ export default {
 	},
 
 	test(assert, component, target, window, raf) {
-		const { things } = component.get();
+		const { things } = component;
 
 		component.things = [];
 		const spans = target.querySelectorAll('span');

test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/_config.js

@@ -1,6 +1,6 @@
 export default {
 	props: {
-		foo: false,
+		visible: false,
 		threshold: 5
 	},
 

test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.html

@@ -1,5 +1,5 @@
 <script>
-	export let foo;
+	export let visible;
 	export let threshold;
 
 	function foo(node) {
@@ -13,7 +13,7 @@
 </script>
 
 {#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
-	{#if foo}
+	{#if visible}
 		{#if threshold >= number}
 			<div transition:foo>{number}</div>
 		{/if}

test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js

@@ -1,6 +1,6 @@
 export default {
 	props: {
-		foo: false,
+		visible: false,
 		threshold: 5
 	},
 

test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.html

@@ -1,5 +1,5 @@
 <script>
-	export let foo;
+	export let visible;
 	export let threshold;
 
 	function foo(node) {
@@ -13,7 +13,7 @@
 </script>
 
 {#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
-	{#if foo}
+	{#if visible}
 		{#if threshold >= number}
 			<div transition:foo>{number}</div>
 		{/if}

test/runtime/samples/transition-js-if-block-outro-timeout/_config.js

@@ -14,7 +14,7 @@ export default {
 		assert.equal(window.getComputedStyle(div).opacity, 0);
 
 		raf.tick(600);
-		assert.equal(component.refs.div, undefined);
+		assert.equal(component.div, undefined);
 		assert.equal(target.querySelector('div'), undefined);
 	}
 };

test/runtime/samples/transition-js-if-block-outro-timeout/main.html

@@ -1,6 +1,5 @@
 <script>
 	export let div;
-
 	export let visible;
 
 	function fade(node, params) {

test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js

@@ -4,17 +4,17 @@ export default {
 	},
 
 	test(assert, component, target, window, raf) {
-		assert.equal(target.querySelector('div'), component.refs.no);
+		assert.equal(target.querySelector('div'), component.no);
 
 		component.x = true;
 
 		raf.tick(25);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
 
 		raf.tick(75);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
 
 		raf.tick(100);
 	}

test/runtime/samples/transition-js-if-else-block-outro/_config.js

@@ -1,16 +1,16 @@
 export default {
 	test(assert, component, target, window, raf) {
-		assert.equal(target.querySelector('div'), component.refs.no);
+		assert.equal(target.querySelector('div'), component.no);
 
 		component.x = true;
 
 		raf.tick(25);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
 
 		raf.tick(75);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
 
 		raf.tick(100);
 	}

test/runtime/samples/transition-js-if-elseif-block-outro/_config.js

@@ -5,18 +5,18 @@ export default {
 	},
 
 	test(assert, component, target, window, raf) {
-		assert.equal(target.querySelector('div'), component.refs.no);
+		assert.equal(target.querySelector('div'), component.no);
 
 		component.x = true;
 		component.y = false;
 
 		raf.tick(25);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
 
 		raf.tick(75);
-		assert.equal(component.refs.yes.foo, undefined);
-		assert.equal(component.refs.no.foo, 0.25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
 
 		raf.tick(100);
 	}

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

@@ -6,5 +6,5 @@
 </script>
 
 {#if x}
-	<Widget :things/>
+	<Widget {things}/>
 {/if}