Merge pull request sveltejs#2891 from zxbodya/ts

improve typings
43081j · May 28, 2019 · 9ac8c66 · 9ac8c66
2 parents baa5fc2 + a9d1a1f
commit 9ac8c66
Show file tree

Hide file tree

Showing 14 changed files with 209 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "main": "index",
   "files": [
     "types",
-    "compiler.js",
+    "compiler.*",
     "register.js",
     "index.*",
     "internal.*",

diff --git a/src/animate.ts b/src/animate.ts
@@ -1,7 +1,22 @@
 import { cubicOut } from 'svelte/easing';
 import { is_function } from 'svelte/internal';
 
-export function flip(node, animation, params) {
+// todo: same as Transition, should it be shared?
+export interface AnimationConfig {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+
+interface FlipParams {
+	delay: number;
+	duration: number | ((len: number) => number);
+	easing: (t: number) => number,
+}
+
+export function flip(node: Element, animation: { from: DOMRect, to: DOMRect }, params: FlipParams): AnimationConfig {
 	const style = getComputedStyle(node);
 	const transform = style.transform === 'none' ? '' : style.transform;
 

diff --git a/src/easing.ts b/src/easing.ts
@@ -5,23 +5,23 @@ Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICE
 
 export { identity as linear } from 'svelte/internal';
 
-export function backInOut(t) {
+export function backInOut(t: number) {
 	const s = 1.70158 * 1.525;
 	if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
 	return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
 }
 
-export function backIn(t) {
+export function backIn(t: number) {
 	const s = 1.70158;
 	return t * t * ((s + 1) * t - s);
 }
 
-export function backOut(t) {
+export function backOut(t: number) {
 	const s = 1.70158;
 	return --t * t * ((s + 1) * t + s) + 1;
 }
 
-export function bounceOut(t) {
+export function bounceOut(t: number) {
 	const a = 4.0 / 11.0;
 	const b = 8.0 / 11.0;
 	const c = 9.0 / 10.0;
@@ -41,43 +41,43 @@ export function bounceOut(t) {
 				: 10.8 * t * t - 20.52 * t + 10.72;
 }
 
-export function bounceInOut(t) {
+export function bounceInOut(t: number) {
 	return t < 0.5
 		? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
 		: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
 }
 
-export function bounceIn(t) {
+export function bounceIn(t: number) {
 	return 1.0 - bounceOut(1.0 - t);
 }
 
-export function circInOut(t) {
+export function circInOut(t: number) {
 	if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
 	return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
 }
 
-export function circIn(t) {
+export function circIn(t: number) {
 	return 1.0 - Math.sqrt(1.0 - t * t);
 }
 
-export function circOut(t) {
+export function circOut(t: number) {
 	return Math.sqrt(1 - --t * t);
 }
 
-export function cubicInOut(t) {
+export function cubicInOut(t: number) {
 	return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
 }
 
-export function cubicIn(t) {
+export function cubicIn(t: number) {
 	return t * t * t;
 }
 
-export function cubicOut(t) {
+export function cubicOut(t: number) {
 	const f = t - 1.0;
 	return f * f * f + 1.0;
 }
 
-export function elasticInOut(t) {
+export function elasticInOut(t: number) {
 	return t < 0.5
 		? 0.5 *
 				Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) *
@@ -88,84 +88,84 @@ export function elasticInOut(t) {
 				1.0;
 }
 
-export function elasticIn(t) {
+export function elasticIn(t: number) {
 	return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
 }
 
-export function elasticOut(t) {
+export function elasticOut(t: number) {
 	return (
 		Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0
 	);
 }
 
-export function expoInOut(t) {
+export function expoInOut(t: number) {
 	return t === 0.0 || t === 1.0
 		? t
 		: t < 0.5
 			? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
 			: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
 }
 
-export function expoIn(t) {
+export function expoIn(t: number) {
 	return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
 }
 
-export function expoOut(t) {
+export function expoOut(t: number) {
 	return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
 }
 
-export function quadInOut(t) {
+export function quadInOut(t: number) {
 	t /= 0.5;
 	if (t < 1) return 0.5 * t * t;
 	t--;
 	return -0.5 * (t * (t - 2) - 1);
 }
 
-export function quadIn(t) {
+export function quadIn(t: number) {
 	return t * t;
 }
 
-export function quadOut(t) {
+export function quadOut(t: number) {
 	return -t * (t - 2.0);
 }
 
-export function quartInOut(t) {
+export function quartInOut(t: number) {
 	return t < 0.5
 		? +8.0 * Math.pow(t, 4.0)
 		: -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
 }
 
-export function quartIn(t) {
+export function quartIn(t: number) {
 	return Math.pow(t, 4.0);
 }
 
-export function quartOut(t) {
+export function quartOut(t: number) {
 	return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
 }
 
-export function quintInOut(t) {
+export function quintInOut(t: number) {
 	if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
 	return 0.5 * ((t -= 2) * t * t * t * t + 2);
 }
 
-export function quintIn(t) {
+export function quintIn(t: number) {
 	return t * t * t * t * t;
 }
 
-export function quintOut(t) {
+export function quintOut(t: number) {
 	return --t * t * t * t * t + 1;
 }
 
-export function sineInOut(t) {
+export function sineInOut(t: number) {
 	return -0.5 * (Math.cos(Math.PI * t) - 1);
 }
 
-export function sineIn(t) {
+export function sineIn(t: number) {
 	const v = Math.cos(t * Math.PI * 0.5);
 	if (Math.abs(v) < 1e-14) return 1;
 	else return 1 - v;
 }
 
-export function sineOut(t) {
+export function sineOut(t: number) {
 	return Math.sin((t * Math.PI) / 2);
 }
diff --git a/src/internal/animations.ts b/src/internal/animations.ts
@@ -1,18 +1,28 @@
 import { identity as linear, noop, now } from './utils';
 import { loop } from './loop';
 import { create_rule, delete_rule } from './style_manager';
+import { AnimationConfig } from '../animate';
 
-export function create_animation(node, from, fn, params) {
+
+//todo: documentation says it is DOMRect, but in IE it would be ClientRect
+type PositionRect = DOMRect|ClientRect;
+
+type AnimationFn = (node: Element, { from, to }: { from: PositionRect, to: PositionRect }, params: any) => AnimationConfig;
+
+export function create_animation(node: Element & ElementCSSInlineStyle, from: PositionRect, fn: AnimationFn, params) {
 	if (!from) return noop;
 
 	const to = node.getBoundingClientRect();
 	if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) return noop;
 
+
 	const {
 		delay = 0,
 		duration = 300,
 		easing = linear,
+		// @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?
 		start: start_time = now() + delay,
+		// @ts-ignore todo:
 		end = start_time + duration,
 		tick = noop,
 		css
@@ -67,7 +77,7 @@ export function create_animation(node, from, fn, params) {
 	return stop;
 }
 
-export function fix_position(node) {
+export function fix_position(node: Element & ElementCSSInlineStyle) {
 	const style = getComputedStyle(node);
 
 	if (style.position !== 'absolute' && style.position !== 'fixed') {

diff --git a/src/internal/dom.ts b/src/internal/dom.ts
@@ -53,8 +53,8 @@ export function object_without_properties<T,K extends keyof T>(obj:T, exclude: K
 	return target;
 }
 
-export function svg_element(name:string):SVGElement {
-	return document.createElementNS('http://www.w3.org/2000/svg', name);
+export function svg_element<K extends keyof SVGElementTagNameMap>(name:K):SVGElement {
+	return document.createElementNS<K>('http://www.w3.org/2000/svg', name);
 }
 
 export function text(data:string) {
@@ -95,7 +95,7 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else node.setAttribute(attribute, value);
 }
 
-export function set_attributes(node: HTMLElement, attributes: { [x: string]: string; }) {
+export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string; }) {
 	for (const key in attributes) {
 		if (key === 'style') {
 			node.style.cssText = attributes[key];

diff --git a/src/internal/loop.ts b/src/internal/loop.ts
@@ -1,6 +1,6 @@
 import { now, raf } from './utils';
 
-export interface Task { abort(): void; promise: Promise<undefined> }
+export interface Task { abort(): void; promise: Promise<void> }
 
 const tasks = new Set();
 let running = false;
@@ -32,7 +32,7 @@ export function loop(fn: (number)=>void): Task {
 	}
 
 	return {
-		promise: new Promise<undefined>(fulfil => {
+		promise: new Promise<void>(fulfil => {
 			tasks.add(task = [fn, fulfil]);
 		}),
 		abort() {

diff --git a/src/internal/ssr.ts b/src/internal/ssr.ts
@@ -1,5 +1,6 @@
 import { set_current_component, current_component } from './lifecycle';
 import { run_all, blank_object } from './utils';
+import { Readable } from 'svelte/store';
 
 export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
@@ -113,7 +114,7 @@ export function create_ssr_component(fn) {
 	};
 }
 
-export function get_store_value(store) {
+export function get_store_value<T>(store: Readable<T>): T | undefined {
 	let value;
 	store.subscribe(_ => value = _)();
 	return value;

diff --git a/src/internal/style_manager.ts b/src/internal/style_manager.ts
@@ -6,15 +6,15 @@ let active = 0;
 let current_rules = {};
 
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
-function hash(str) {
+function hash(str: string) {
 	let hash = 5381;
 	let i = str.length;
 
 	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
 	return hash >>> 0;
 }
 
-export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
+export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b: number, duration: number, delay: number, ease: (t: number) => number, fn: (t: number, u: number) => string, uid: number = 0) {
 	const step = 16.666 / duration;
 	let keyframes = '{\n';
 
@@ -44,7 +44,7 @@ export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
 	return name;
 }
 
-export function delete_rule(node, name?) {
+export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string) {
 	node.style.animation = (node.style.animation || '')
 		.split(', ')
 		.filter(name