feat: improved types for TypeScript

Author: aleclarson

.npmignore

@@ -0,0 +1 @@
+dist/__tests__

package.json

@@ -18,7 +18,7 @@
     "test": "jest",
     "test:dev": "jest --watch --no-coverage",
     "test:coverage:watch": "jest --watch",
-    "test:ts": "tsc --noEmit",
+    "test:ts": "tsc -p types/__tests__/tsconfig.json",
     "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mEnjoy react-spring? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/react-spring/donate\\u001b[0m')\""
   },
   "husky": {
@@ -97,6 +97,7 @@
     "rollup-plugin-node-resolve": "4.0.0",
     "rollup-plugin-size-snapshot": "0.8.0",
     "rollup-plugin-uglify": "6.0.2",
+    "spec.ts": "^1.1.0",
     "typescript": "3.3.3"
   },
   "peerDependencies": {

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "include": ["src", "types"],
   "compilerOptions": {
     "target": "es2017",
     "moduleResolution": "node",
@@ -15,6 +16,5 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "strict": true
-  },
-  "include": ["src/**/*", "types/**/*.ts"]
+  }
 }

types/__tests__/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "printWidth": 80
+}

types/__tests__/Spring.tsx

@@ -0,0 +1,25 @@
+import { assert, test, _ } from 'spec.ts';
+import { Spring, animated, AnimatedValue } from '../web';
+import React from 'react';
+
+const View = animated('div');
+
+test('basic usage', () => {
+  <Spring
+    from={{ opacity: 0 }}
+    to={{ opacity: 1, color: 'blue' }}
+    onRest={values => {
+      assert(values, _ as {
+        [key: string]: unknown;
+        // FIXME: should include "opacity" and "color"
+      });
+    }}>
+    {props => {
+      assert(props, _ as {
+        [key: string]: AnimatedValue<any>;
+        // FIXME: should include "opacity" and "color"
+      });
+      return <View style={props} />;
+    }}
+  </Spring>;
+});

types/__tests__/Trail.tsx

@@ -0,0 +1,21 @@
+import { assert, test, _ } from 'spec.ts';
+import { Trail, animated, AnimatedValue } from '../web';
+import React from 'react';
+
+const View = animated('div');
+
+const items = [1, 2] as [1, 2];
+
+test('basic usage', () => {
+  <Trail items={items} from={{ opacity: 0 }} to={{ opacity: 1, color: 'blue' }}>
+    {item => props => {
+      assert(item, _ as 1 | 2);
+      assert(props, _ as {
+        [key: string]: AnimatedValue<any>;
+        opacity: AnimatedValue<number>;
+        color: AnimatedValue<string>;
+      });
+      return <View style={props}>{item}</View>;
+    }}
+  </Trail>;
+});

types/__tests__/Transition.tsx

@@ -0,0 +1,26 @@
+import { assert, test, _ } from 'spec.ts';
+import { Transition, animated, AnimatedValue, TransitionPhase } from '../web';
+import React from 'react';
+
+const View = animated('div');
+
+const items = [1, 2] as [1, 2];
+
+test('basic usage', () => {
+  <Transition
+    items={items}
+    enter={{ opacity: 1, color: 'blue' }}
+    leave={{ opacity: 0 }}>
+    {(item, phase, i) => props => {
+      assert(props, _ as {
+        [key: string]: AnimatedValue<any>;
+        opacity: AnimatedValue<number>;
+        color: AnimatedValue<string>;
+      });
+      assert(item, _ as 1 | 2);
+      assert(phase, _ as TransitionPhase);
+      assert(i, _ as number);
+      return <View style={props}>{item}</View>;
+    }}
+  </Transition>;
+});

types/__tests__/common.ts

@@ -0,0 +1,168 @@
+import {
+  PickAnimated,
+  ForwardProps,
+  AnimatedProps,
+  AnimatedValue,
+  AnimationFrame,
+  UnknownProps,
+  Remap,
+} from '../lib/common';
+import { assert, _, test } from 'spec.ts';
+
+const $1: 1 = 1;
+
+const reservedProps = {
+  config: $1,
+  from: {},
+  to: {},
+  ref: $1,
+  reset: $1,
+  reverse: $1,
+  immediate: $1,
+  delay: $1,
+  lazy: $1,
+  onStart: $1,
+  onRest: $1,
+  onFrame: $1,
+};
+
+const forwardProps = {
+  foo: $1,
+  bar: $1,
+};
+
+type R = typeof reservedProps;
+type F = typeof forwardProps;
+
+test('ForwardProps', () => {
+  // With reserved props, no forward props
+  type P1 = ForwardProps<R>;
+  assert(_ as P1, _ as {});
+
+  // With reserved and forward props
+  type P2 = ForwardProps<R & F>;
+  assert(_ as P2, _ as F);
+
+  // With forward props, no reserved props
+  type P3 = ForwardProps<F>;
+  assert(_ as P3, _ as F);
+
+  // No reserved or forward props
+  type P4 = ForwardProps<{}>;
+  assert(_ as P4, _ as {});
+});
+
+test('PickAnimated', () => {
+  // No props
+  type A1 = PickAnimated<{}>;
+  assert(_ as A1, _ as {});
+
+  // Forward props only
+  type A3 = PickAnimated<F>;
+  assert(_ as A3, _ as F);
+
+  // Forward props and "from" prop
+  type A4 = PickAnimated<{
+    foo: 1;
+    width: 1;
+    from: { bar: 1; width: 2 };
+  }>;
+  assert(_ as A4, _ as Remap<F & { width: 1 | 2 }>);
+
+  // "to" and "from" props
+  type A5 = PickAnimated<{
+    to: { foo: 1; width: 1 };
+    from: { bar: 1; width: 2 };
+  }>;
+  assert(_ as A5, _ as Remap<F & { width: 1 | 2 }>);
+
+  // "useTransition" props
+  type A6 = PickAnimated<{
+    from: { a: 1 };
+    initial: { b: 1 };
+    enter: { c: 1 };
+    update: { d: 1 };
+    leave: { e: 1 };
+  }>;
+  assert(
+    _ as A6,
+    _ as {
+      a: 1;
+      b: 1;
+      c: 1;
+      d: 1;
+      e: 1;
+    }
+  );
+
+  // Same keys in each phase
+  type A7 = PickAnimated<{
+    from: { a: 1 };
+    enter: { a: 2 };
+    leave: { a: 3 };
+    update: { a: 4 };
+    initial: { a: 5 };
+  }>;
+  assert(
+    _ as A7,
+    _ as {
+      a: 1 | 2 | 3 | 4 | 5;
+    }
+  );
+});
+
+test('AnimatedProps', () => {
+  // Primitive props
+  type P2 = AnimatedProps<{ foo?: number }>;
+  assert(
+    _ as P2,
+    _ as {
+      foo?: number | AnimatedValue<number>;
+    }
+  );
+
+  // Object props
+  type P3 = AnimatedProps<{ foo?: { bar?: number } }>;
+  assert(
+    _ as P3,
+    _ as {
+      foo?: AnimatedProps<{ bar?: number }>;
+    }
+  );
+
+  // Array props
+  type P4 = AnimatedProps<{ foo: [number, number] }>;
+  assert(
+    _ as P4,
+    _ as {
+      foo: [number, number] | AnimatedValue<[number, number]>;
+    }
+  );
+
+  // Atomic object props
+  type P5 = AnimatedProps<{
+    set: Set<any>;
+    map: Map<any, any>;
+    date: Date;
+    func: Function;
+    prom: Promise<any>;
+  }>;
+  assert(
+    _ as P5,
+    _ as {
+      set: Set<any> | AnimatedValue<Set<any>>;
+      map: Map<any, any> | AnimatedValue<Map<any, any>>;
+      date: Date | AnimatedValue<Date>;
+      func: Function | AnimatedValue<Function>;
+      prom: Promise<any> | AnimatedValue<Promise<any>>;
+    }
+  );
+});
+
+test('SpringFrame', () => {
+  type T1 = AnimationFrame<{}>;
+  assert(_ as T1, _ as UnknownProps);
+
+  type T2 = AnimationFrame<{ to: { a: number }; from: { b: number } }>;
+  assert(_ as T2, _ as { [key: string]: unknown; a: number; b: number });
+});

types/__tests__/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "include": ["*.ts", "useChain.tsx"],
+  "compilerOptions": {
+    "target": "es2017",
+    "moduleResolution": "node",
+    "lib": ["dom", "es2017"],
+    "noEmit": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true
+  }
+}

types/__tests__/useChain.tsx

@@ -0,0 +1,16 @@
+import { test } from 'spec.ts';
+import { useChain, SpringHandle } from '../web';
+import { RefObject } from 'react';
+
+const refs: RefObject<SpringHandle>[] = [];
+
+test('basic usage', () => {
+  // No timesteps
+  useChain(refs);
+
+  // With timesteps
+  useChain(refs, [0, 1]);
+
+  // Cut timesteps in half
+  useChain(refs, [0, 1], 1000 / 2);
+});