Merge pull request #15425 from DefinitelyTyped/move-web-animations-js-to-types

Move web animations js to types

types/web-animations-js/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for web-animations-js v2.2.2
+// Type definitions for web-animations-js 2.2
 // Project: https://github.com/web-animations/web-animations-js
 // Definitions by: Kristian Moerch <https://github.com/kritollm/>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -24,7 +24,7 @@ declare class AnimationPlaybackEvent {
 interface AnimationKeyFrame {
     easing?: string;
     offset?: number;
-    [key: string]: string | string[] | number | number[];
+    [key: string]: string | string[] | number | number[] | undefined;
 }
 
 interface AnimationTimeline {
@@ -89,4 +89,4 @@ interface Element {
 }
 interface Document {
     timeline: AnimationTimeline;
-}
+}

types/web-animations-js/tsconfig.json

@@ -8,7 +8,7 @@
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
-        "strictNullChecks": false,
+        "strictNullChecks": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"
@@ -18,7 +18,7 @@
         "forceConsistentCasingInFileNames": true
     },
     "files": [
-        "web-animations-js.d.ts",
+        "index.d.ts",
         "web-animations-js-tests.ts"
     ]
-}
+}

types/web-animations-js/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }

types/web-animations-js/web-animations-js-tests.ts

@@ -46,7 +46,9 @@ function test_AnimationsApiNext() {
     effectNode.style.left = bounds.left + bounds.width / 2 + 'px';
     effectNode.style.top = bounds.top + bounds.height / 2 + 'px';
     const header = document.querySelector('header');
-    header.appendChild(effectNode);
+    if (header) {
+        header.appendChild(effectNode);
+    }
     const newColor = 'hsl(' + Math.round(Math.random() * 255) + ', 46%, 42%)';
     effectNode.style.background = newColor;
     const scaleSteps = [{ transform: 'scale(0)' }, { transform: 'scale(1)' }];
@@ -63,31 +65,32 @@ function test_AnimationsApiNext() {
 // http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
 function test_whiteRabbit() {
     var whiteRabbit = document.getElementById("rabbit");
+    if (whiteRabbit) {
+        var rabbitDownKeyframes = new KeyframeEffect(
+            whiteRabbit,
+            [
+                { transform: 'translateY(0%)' },
+                { transform: 'translateY(100%)' }
+            ],
+            { duration: 3000, fill: 'forwards' }
+        );
+        var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+        // On tap or click,
+        whiteRabbit.addEventListener("mousedown", downHeGoes, false);
+        whiteRabbit.addEventListener("touchstart", downHeGoes, false);
 
-    var rabbitDownKeyframes = new KeyframeEffect(
-        whiteRabbit,
-        [
-            { transform: 'translateY(0%)' },
-            { transform: 'translateY(100%)' }
-        ],
-        { duration: 3000, fill: 'forwards' }
-    );
+        // Trigger a single-fire animation
+        function downHeGoes(event: Event) {
 
-    var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+            // Remove those event listeners
+            whiteRabbit!.removeEventListener("mousedown", downHeGoes, false);
+            whiteRabbit!.removeEventListener("touchstart", downHeGoes, false);
 
-    // On tap or click,
-    whiteRabbit.addEventListener("mousedown", downHeGoes, false);
-    whiteRabbit.addEventListener("touchstart", downHeGoes, false);
-
-    // Trigger a single-fire animation
-    function downHeGoes(event: Event) {
-
-        // Remove those event listeners
-        whiteRabbit.removeEventListener("mousedown", downHeGoes, false);
-        whiteRabbit.removeEventListener("touchstart", downHeGoes, false);
-
-        // Play rabbit animation
-        rabbitDownAnimation.play();
+            // Play rabbit animation
+            rabbitDownAnimation.play();
 
+        }
     }
+
+
 }