internal: add typescript def for transitions (#5625)

Author: tanhauhau

src/runtime/internal/Component.ts

@@ -4,7 +4,10 @@ import { blank_object, is_empty, is_function, run, run_all, noop } from './utils
 import { children, detach, start_hydrating, end_hydrating } from './dom';
 import { transition_in } from './transitions';
 
-interface Fragment {
+/**
+ * INTERNAL, DO NOT USE. Code may change at any time.
+ */
+export interface Fragment {
 	key: string|null;
 	first: null;
 	/* create  */ c: () => void;

src/runtime/internal/transitions.ts

@@ -5,8 +5,25 @@ import { create_rule, delete_rule } from './style_manager';
 import { custom_event } from './dom';
 import { add_render_callback } from './scheduler';
 import { TransitionConfig } from '../transition';
+import { Fragment } from './Component';
 
 let promise: Promise<void>|null;
+type INTRO = 1;
+type OUTRO = 0;
+interface Outro {
+	/**
+	 * remaining outros
+	 */
+	r: number;
+	/**
+	 * callbacks
+	 */
+	c: Function[];
+	/**
+	 * parent outro
+	 */
+	p: Outro;
+}
 
 function wait() {
 	if (!promise) {
@@ -19,12 +36,12 @@ function wait() {
 	return promise;
 }
 
-function dispatch(node: Element, direction: boolean, kind: 'start' | 'end') {
+function dispatch(node: Element, direction: INTRO | OUTRO | boolean, kind: 'start' | 'end') {
 	node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
 }
 
 const outroing = new Set();
-let outros;
+let outros: Outro;
 
 export function group_outros() {
 	outros = {
@@ -41,14 +58,14 @@ export function check_outros() {
 	outros = outros.p;
 }
 
-export function transition_in(block, local?: 0 | 1) {
+export function transition_in(block: Fragment, local?: 0 | 1) {
 	if (block && block.i) {
 		outroing.delete(block);
 		block.i(local);
 	}
 }
 
-export function transition_out(block, local: 0 | 1, detach?: 0 | 1, callback?) {
+export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, callback?) {
 	if (block && block.o) {
 		if (outroing.has(block)) return;
 		outroing.add(block);
@@ -225,21 +242,39 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 	};
 }
 
+interface PendingProgram {
+	start: number;
+	b: INTRO | OUTRO;
+	group?: Outro;
+}
+interface Program {
+	a: number;
+	b: INTRO | OUTRO;
+	/**
+	 * direction
+	 */
+	d: 1 | -1;
+	duration: number;
+	start: number;
+	end: number;
+	group?: Outro;
+}
+
 export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) {
 	let config = fn(node, params);
 
 	let t = intro ? 0 : 1;
 
-	let running_program = null;
-	let pending_program = null;
+	let running_program: Program | null = null;
+	let pending_program: PendingProgram | null = null;
 	let animation_name = null;
 
 	function clear_animation() {
 		if (animation_name) delete_rule(node, animation_name);
 	}
 
-	function init(program, duration) {
-		const d = program.b - t;
+	function init(program: PendingProgram, duration: number): Program {
+		const d = (program.b - t) as Program['d'];
 		duration *= Math.abs(d);
 
 		return {
@@ -253,7 +288,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 		};
 	}
 
-	function go(b) {
+	function go(b: INTRO | OUTRO) {
 		const {
 			delay = 0,
 			duration = 300,
@@ -262,7 +297,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 			css
 		} = config || null_transition;
 
-		const program = {
+		const program: PendingProgram = {
 			start: now() + delay,
 			b
 		};
@@ -331,7 +366,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 	}
 
 	return {
-		run(b) {
+		run(b: INTRO | OUTRO) {
 			if (is_function(config)) {
 				wait().then(() => {
 					// @ts-ignore

src/runtime/internal/utils.ts

@@ -28,7 +28,7 @@ export function blank_object() {
 	return Object.create(null);
 }
 
-export function run_all(fns) {
+export function run_all(fns: Function[]) {
 	fns.forEach(run);
 }