start refactoring transitions

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

@@ -341,7 +341,7 @@ export default class EachBlockWrapper extends Wrapper {
 		block.builders.update.addBlock(deindent`
 			const ${this.vars.each_block_value} = ${snippet};
 
-			${this.block.hasOutros && `@groupOutros();`}
+			${this.block.hasOutros && `@group_outros();`}
 			${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].r();`}
 			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.vars.get_each_context});
 			${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].a();`}
@@ -466,7 +466,7 @@ export default class EachBlockWrapper extends Wrapper {
 
 			if (this.block.hasOutros) {
 				destroy = deindent`
-					@groupOutros();
+					@group_outros();
 					for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1);
 				`;
 			} else {

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

@@ -322,7 +322,7 @@ export default class IfBlockWrapper extends Wrapper {
 		const updateMountNode = this.getUpdateMountNode(anchor);
 
 		const destroyOldBlock = deindent`
-			@groupOutros();
+			@group_outros();
 			${name}.o(function() {
 				${if_blocks}[${previous_block_index}].d(1);
 				${if_blocks}[${previous_block_index}] = null;
@@ -445,7 +445,7 @@ export default class IfBlockWrapper extends Wrapper {
 		// as that will typically result in glitching
 		const exit = branch.block.hasOutroMethod
 			? deindent`
-				@groupOutros();
+				@group_outros();
 				${name}.o(function() {
 					${name}.d(1);
 					${name} = null;

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

@@ -368,7 +368,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			block.builders.update.addBlock(deindent`
 				if (${switch_value} !== (${switch_value} = ${snippet})) {
 					if (${name}) {
-						@groupOutros();
+						@group_outros();
 						const old_component = ${name};
 						old_component.$$.fragment.o(() => {
 							old_component.$destroy();

src/internal/await-block.js

@@ -1,5 +1,5 @@
 import { assign, run_all, isPromise } from './utils.js';
-import { groupOutros } from './transitions.js';
+import { group_outros } from './transitions.js';
 import { flush } from '../internal/scheduler.js';
 
 export function handlePromise(promise, info) {
@@ -17,7 +17,7 @@ export function handlePromise(promise, info) {
 			if (info.blocks) {
 				info.blocks.forEach((block, i) => {
 					if (i !== index && block) {
-						groupOutros();
+						group_outros();
 						block.o(() => {
 							block.d(1);
 							info.blocks[i] = null;

src/internal/transitions.js

@@ -2,94 +2,53 @@ import { identity as linear, noop, run } from './utils.js';
 import { loop } from './loop.js';
 import { create_rule, delete_rule } from './style_manager.js';
 
-export function wrapTransition(component, node, fn, params, intro) {
+let promise;
-	let obj = fn.call(component, node, params);
-	let duration;
-	let ease;
-	let cssText;
-
-	let initialised = false;
 
-	return {
+function wait() {
-		t: intro ? 0 : 1,
+	if (!promise) {
-		running: false,
+		promise = Promise.resolve();
-		program: null,
+		promise.then(() => {
-		pending: null,
+			promise = null;
-
-		run(b, callback) {
-			if (typeof obj === 'function') {
-				transitionManager.wait().then(() => {
-					obj = obj();
-					this._run(b, callback);
 		});
-			} else {
-				this._run(b, callback);
-			}
-		},
-
-		_run(b, callback) {
-			duration = obj.duration || 300;
-			ease = obj.easing || linear;
-
-			const program = {
-				start: window.performance.now() + (obj.delay || 0),
-				b,
-				callback: callback || noop
-			};
-
-			if (intro && !initialised) {
-				if (obj.css && obj.delay) {
-					cssText = node.style.cssText;
-					node.style.cssText += obj.css(0, 1);
 	}
 
-				if (obj.tick) obj.tick(0, 1);
+	return promise;
-				initialised = true;
 }
 
-			if (!b) {
+let outros;
-				program.group = outros.current;
-				outros.current.remaining += 1;
-			}
 
-			if (obj.delay) {
+export function group_outros() {
-				this.pending = program;
+	outros = {
-			} else {
+		remaining: 0,
-				this.start(program);
+		callbacks: []
+	};
 }
 
-			if (!this.running) {
+export function wrapTransition(component, node, fn, params, intro) {
-				this.running = true;
+	let config = fn.call(component, node, params);
-
+	let duration;
-				const { abort, promise } = loop(now => {
+	let ease;
-					if (this.program && now >= this.program.end) {
+	let cssText;
-						this.done();
-					}
 
-					if (this.pending && now >= this.pending.start) {
+	let initialised = false;
-						this.start(this.pending);
-					}
 
-					if (this.running) {
+	let t = intro ? 0 : 1;
-						this.update(now);
+	let running = false;
-						return true;
+	let running_program = null;
-					}
+	let pending_program = null;
-				});
-			}
-		},
 
-		start(program) {
+	function start(program) {
 		node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}start`));
 
-			program.a = this.t;
+		program.a = t;
 		program.delta = program.b - program.a;
 		program.duration = duration * Math.abs(program.b - program.a);
 		program.end = program.start + program.duration;
 
-			if (obj.css) {
+		if (config.css) {
-				if (obj.delay) node.style.cssText = cssText;
+			if (config.delay) node.style.cssText = cssText;
 
-				program.name = create_rule(program, ease, obj.css);
+			program.name = create_rule(program, ease, config.css);
 
 			node.style.animation = (node.style.animation || '')
 				.split(', ')
@@ -98,83 +57,122 @@ export function wrapTransition(component, node, fn, params, intro) {
 				.join(', ');
 		}
 
-			this.program = program;
+		running_program = program;
-			this.pending = null;
+		pending_program = null;
-		},
+	}
 
-		update(now) {
+	function update(now) {
-			const program = this.program;
+		const program = running_program;
 		if (!program) return;
 
 		const p = now - program.start;
-			this.t = program.a + program.delta * ease(p / program.duration);
+		t = program.a + program.delta * ease(p / program.duration);
-			if (obj.tick) obj.tick(this.t, 1 - this.t);
+		if (config.tick) config.tick(t, 1 - t);
-		},
+	}
 
-		done() {
+	function done() {
-			const program = this.program;
+		const program = running_program;
-			this.program = null;
+		running_program = null;
 
-			this.t = program.b;
+		t = program.b;
 
-			if (obj.tick) obj.tick(this.t, 1 - this.t);
+		if (config.tick) config.tick(t, 1 - t);
 
 		node.dispatchEvent(new window.CustomEvent(`${program.b ? 'intro' : 'outro'}end`));
 
 		if (!program.b && !program.invalidated) {
 			program.group.callbacks.push(() => {
 				program.callback();
-					if (obj.css) delete_rule(node, program.name);
+				if (config.css) delete_rule(node, program.name);
 			});
 
 			if (--program.group.remaining === 0) {
 				program.group.callbacks.forEach(run);
 			}
 		} else {
-				if (obj.css) delete_rule(node, program.name);
+			if (config.css) delete_rule(node, program.name);
 		}
 
-			this.running = !!this.pending;
+		running = !!pending_program;
-		},
+	}
 
-		abort(reset) {
+	function go(b, callback) {
-			if (reset && obj.tick) obj.tick(1, 0);
+		duration = config.duration || 300;
+		ease = config.easing || linear;
 
-			if (this.program) {
+		const program = {
-				if (obj.css) delete_rule(node, this.program.name);
+			start: window.performance.now() + (config.delay || 0),
-				this.program = this.pending = null;
+			b,
-				this.running = false;
+			callback: callback || noop
+		};
+
+		if (intro && !initialised) {
+			if (config.css && config.delay) {
+				cssText = node.style.cssText;
+				node.style.cssText += config.css(0, 1);
 			}
-		},
 
-		invalidate() {
+			if (config.tick) config.tick(0, 1);
-			if (this.program) {
+			initialised = true;
-				this.program.invalidated = true;
 		}
+
+		if (!b) {
+			program.group = outros;
+			outros.remaining += 1;
 		}
-	};
+
+		if (config.delay) {
+			pending_program = program;
+		} else {
+			start(program);
 		}
 
-export let outros = {};
+		if (!running) {
+			running = true;
 
-export function groupOutros() {
+			const { abort, promise } = loop(now => {
-	outros.current = {
+				if (running_program && now >= running_program.end) {
-		remaining: 0,
+					done();
-		callbacks: []
-	};
 				}
 
-export var transitionManager = {
+				if (pending_program && now >= pending_program.start) {
-	promise: null,
+					start(pending_program);
+				}
 
-	wait() {
+				if (running) {
-		if (!transitionManager.promise) {
+					update(now);
-			transitionManager.promise = Promise.resolve();
+					return true;
-			transitionManager.promise.then(() => {
+				}
-				transitionManager.promise = null;
 			});
 		}
+	}
 
-		return transitionManager.promise;
+	return {
+		run(b, callback) {
+			if (typeof config === 'function') {
+				wait().then(() => {
+					config = config();
+					go(b, callback);
+				});
+			} else {
+				go(b, callback);
+			}
+		},
+
+		abort(reset) {
+			if (reset && config.tick) config.tick(1, 0);
+
+			if (running_program) {
+				if (config.css) delete_rule(node, running_program.name);
+				running_program = pending_program = null;
+				running = false;
+			}
+		},
+
+		invalidate() {
+			if (running_program) {
+				running_program.invalidated = true;
+			}
 		}
 	};
+}

test/runtime/index.js

@@ -3,7 +3,7 @@ import * as path from "path";
 import * as fs from "fs";
 import { rollup } from 'rollup';
 import * as virtual from 'rollup-plugin-virtual';
-import { transitionManager, clear_loops } from "../../internal.js";
+import { clear_loops } from "../../internal.js";
 
 import {
 	showOutput,
@@ -93,9 +93,7 @@ describe("runtime", () => {
 
 			return Promise.resolve()
 				.then(() => {
-					// set of hacks to support transition tests
+					// hack to support transition tests
-					transitionManager.running = false;
-					transitionManager.transitions = [];
 					clear_loops();
 
 					const raf = {