From b2ad972e5046c42d5cd7fc3998268b3414bfd66a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?=
 <peterblazejewicz@users.noreply.github.com>
Date: Tue, 15 Sep 2020 00:03:45 +0200
Subject: [PATCH] feat(puppeteer-lottie): new definition (#47464)

- definition file
- tests

https://github.com/transitive-bullshit/puppeteer-lottie

Thanks!
---
 types/puppeteer-lottie/index.d.ts             | 166 ++++++++++++++++++
 types/puppeteer-lottie/package.json           |   6 +
 .../puppeteer-lottie-tests.ts                 |  53 ++++++
 types/puppeteer-lottie/tsconfig.json          |  24 +++
 types/puppeteer-lottie/tslint.json            |   1 +
 5 files changed, 250 insertions(+)
 create mode 100644 types/puppeteer-lottie/index.d.ts
 create mode 100644 types/puppeteer-lottie/package.json
 create mode 100644 types/puppeteer-lottie/puppeteer-lottie-tests.ts
 create mode 100644 types/puppeteer-lottie/tsconfig.json
 create mode 100644 types/puppeteer-lottie/tslint.json

diff --git a/types/puppeteer-lottie/index.d.ts b/types/puppeteer-lottie/index.d.ts
new file mode 100644
index 0000000000..8283905f40
--- /dev/null
+++ b/types/puppeteer-lottie/index.d.ts
@@ -0,0 +1,166 @@
+// Type definitions for puppeteer-lottie 1.1
+// Project: https://github.com/transitive-bullshit/puppeteer-lottie
+// Definitions by: Piotr Błażejewicz <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+import { Browser, LaunchOptions } from 'puppeteer';
+import { SVGRendererConfig, CanvasRendererConfig, HTMLRendererConfig } from 'lottie-web';
+
+/**
+ * Renders the given Lottie animation via Puppeteer.
+ *
+ * You must pass either `path` or `animationData` to specify the Lottie animation.
+ * @async
+ */
+declare function renderLottie(opts?: renderLottie.Options): Promise<void>;
+
+declare namespace renderLottie {
+    /**
+     * Configuration options
+     */
+    interface Options {
+        /**
+         * Path or pattern to store result
+         */
+        output: string;
+
+        /**
+         * JSON exported animation data
+         */
+        animationData?: object;
+
+        /**
+         * Relative path to the JSON file containing animation data
+         */
+        path?: string;
+
+        /**
+         * Optional output width
+         */
+        width?: number;
+
+        /**
+         * Optional output height
+         */
+        height?: number;
+
+        /**
+         * JPEG quality for frames (does nothing if using png)
+         * @default 90
+         */
+        jpegQuality?: number;
+
+        /**
+         * Set to true to disable console output
+         */
+        quiet?: boolean;
+
+        /**
+         * Window device scale factor
+         * @default 1
+         */
+        deviceScaleFactor?: number;
+
+        /**
+         * Which lottie-web renderer to use
+         * @default 'svg'
+         */
+        renderer?: 'svg' | 'canvas' | 'html';
+
+        /**
+         * Optional lottie renderer settings
+         */
+        rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
+
+        /**
+         * Optional puppeteer launch settings
+         */
+        puppeteerOptions?: LaunchOptions;
+
+        /**
+         * Optional ffmpeg settings for crf, profileVideo and preset values
+         */
+        ffmpegOptions?: FFmpegOptions;
+
+        /**
+         * Optional gifski settings (only for GIF outputs)
+         */
+        gifskiOptions?: object;
+
+        /**
+         * Optional JS
+         * [CSS styles](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to apply to the animation container
+         */
+        style?: object;
+
+        /**
+         * Optionally injects arbitrary string content into the head, style, or body elements.
+         */
+        inject?: Inject;
+
+        /**
+         * Optional puppeteer instance to reuse
+         */
+        browser?: Browser;
+    }
+
+    interface Inject {
+        /**
+         *  Optionally injected into the document <head>
+         */
+        head?: string;
+
+        /**
+         * Optionally injected into a <style> tag within the document <head>
+         */
+        style?: string;
+
+        /**
+         * Optionally injected into the document <body>
+         */
+        body?: string;
+    }
+
+    interface GifskiOptions {
+        /**
+         * Resize to max this width if set
+         */
+        width?: number;
+        /**
+         * Resize to max this height if width is set. Note that aspect ratio is not preserved.
+         */
+        height?: number;
+        /**
+         * 1-100, but useful range is 50-100. Recommended to set to 100.
+         */
+        quality?: number;
+        /**
+         * If true, looping is disabled
+         */
+        once?: boolean;
+        /**
+         * Lower quality, but faster encode
+         */
+        fast?: boolean;
+    }
+
+    /**
+     * Optional ffmpeg settings
+     */
+    interface FFmpegOptions {
+        crf?: number;
+        profileVideo?: 'baseline' | 'main' | 'high' | 'high10' | 'high422' | 'high444';
+        preset?:
+            | 'ultrafast'
+            | 'superfast'
+            | 'veryfast'
+            | 'faster'
+            | 'fast'
+            | 'medium'
+            | 'slow'
+            | 'slower'
+            | 'veryslow'
+            | 'placebo';
+    }
+}
+
+export = renderLottie;
diff --git a/types/puppeteer-lottie/package.json b/types/puppeteer-lottie/package.json
new file mode 100644
index 0000000000..c288088b5c
--- /dev/null
+++ b/types/puppeteer-lottie/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "lottie-web": "^5.7.3"
+    }
+}
diff --git a/types/puppeteer-lottie/puppeteer-lottie-tests.ts b/types/puppeteer-lottie/puppeteer-lottie-tests.ts
new file mode 100644
index 0000000000..1e79599cf2
--- /dev/null
+++ b/types/puppeteer-lottie/puppeteer-lottie-tests.ts
@@ -0,0 +1,53 @@
+import renderLottie = require('puppeteer-lottie');
+
+(async () => {
+    const bodymovin = 'some/bodymovin.json';
+    const output = 'output/some.png';
+
+    await renderLottie({
+        path: 'fixtures/bodymovin.json',
+        output: 'example.mp4',
+    });
+
+    await renderLottie({
+        path: 'fixtures/bodymovin.json',
+        output: 'example.gif',
+        width: 640,
+    });
+
+    await renderLottie({
+        path: 'fixtures/bodymovin.json',
+        output: 'frame-%d.png',
+        height: 128,
+    });
+
+    await renderLottie({
+        path: 'fixtures/bodymovin.json',
+        output: 'preview.jpg',
+    });
+
+    await renderLottie({
+        path: bodymovin,
+        quiet: true,
+        ffmpegOptions: {
+            crf: 22,
+            profileVideo: 'high',
+            preset: 'fast',
+        },
+        output,
+    });
+
+    await renderLottie({
+        path: bodymovin,
+        quiet: true,
+        width: 640,
+        output,
+    });
+
+    await renderLottie({
+        path: bodymovin,
+        quiet: true,
+        height: 100,
+        output,
+    });
+})();
diff --git a/types/puppeteer-lottie/tsconfig.json b/types/puppeteer-lottie/tsconfig.json
new file mode 100644
index 0000000000..09a0a9839f
--- /dev/null
+++ b/types/puppeteer-lottie/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "DOM"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "puppeteer-lottie-tests.ts"
+    ]
+}
diff --git a/types/puppeteer-lottie/tslint.json b/types/puppeteer-lottie/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/puppeteer-lottie/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }