From 5d824966a22e73b009b26f5cd1b3651f96a1a519 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 28 Jun 2021 01:08:19 +0800 Subject: [PATCH] internal: add typescript def for transitions (#5625) --- src/runtime/internal/Component.ts | 5 ++- src/runtime/internal/transitions.ts | 57 +++++++++++++++++++++++------ src/runtime/internal/utils.ts | 2 +- 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index a191e5d83b..0d1d65cbdc 100644 --- a/src/runtime/internal/Component.ts +++ b/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; diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 2fc81cc21f..f7b6b6d86a 100644 --- a/src/runtime/internal/transitions.ts +++ b/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|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 diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 084019fb59..9f3da8589a 100644 --- a/src/runtime/internal/utils.ts +++ b/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); }