feat(@mapbox/spritezero): new type definition (#43998)

- definition file for @mapbox/spritezero module
- tests

http://mapbox.github.io/spritezero/
https://github.com/mapbox/spritezero#readme

Thanks!

types/mapbox__spritezero/index.d.ts

@@ -0,0 +1,125 @@
+// Type definitions for @mapbox/spritezero 6.3
+// Project: https://github.com/mapbox/spritezero#readme
+// Definitions by: Piotr Błażejewicz <https://github.com/peterblazejewicz>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/**
+ * Small opinionated sprites.
+ */
+
+/**
+ * Decrease accuracy of floating-point numbers
+ * in path data keeping a specified number of decimals.
+ * Smart rounds values like 2.3491 to 2.35 instead of 2.349.
+ * Doesn't apply "smartness" if the number precision fits already.
+ *
+ * Taken from svgo at {@link https://github.com/svg/svgo/blob/72db8eb/plugins/convertPathData.js#L773}
+ */
+export function strongRound(value: number, precision?: number): number;
+
+/**
+ * Parses a SVG document and extracts metadata from its shapes and paths.
+ */
+export function extractMetadata(img: ImageObject, callback: ExtractCallback): Metadata;
+
+/**
+ * Pack a list of images with width and height into a sprite layout.
+ */
+export function generateLayout(
+    options: GenerateLayoutOptions,
+    callback: GenerateLayoutCallback,
+): DataLayout | ImgLayout;
+
+/**
+ * Validates metadata that is parsed from an SVG metadata
+ */
+export function validateMetadata(img: ImageSize, metadata: Metadata): null | Error;
+
+/**
+ * Generate a PNG image with positioned icons on a sprite.
+ */
+export function generateImage(layout: ImgLayout, callback: GenerateImageCallback): void;
+
+export interface ImageObject {
+    /** A string of the SVG. */
+    svg?: Buffer | string;
+    /** Ratio of a 72dpi screen pixel to the destination pixel density */
+    pixelRatio?: number;
+}
+
+export interface ExtractCallback {
+    (err: Error | null, metadata: Metadata): void;
+}
+
+/**
+ * A Metadata objects stores information about how an image can be stretched in a non-linear.
+ * The keys of the Object are the icon ids. The values of the Object are the structured data about each icon
+ */
+export interface Metadata {
+    [id: string]: Array<number | number[]>;
+}
+
+export interface GenerateLayoutOptions {
+    imgs: Array<{
+        svg: Buffer;
+        id: string;
+    }>;
+    /** Ratio of a 72dpi screen pixel to the destination pixel density */
+    pixelRatio: number;
+    /** If true, generate DataLayout ; if false, generate ImgLayout */
+    format: boolean;
+    /** overrides the max_size in mapnik */
+    maxIconSize?: number;
+    /** filters out icons that mapnik says are too big */
+    removeOversizedIcons?: boolean;
+}
+
+export interface GenerateLayoutCallback {
+    (err: Error | null, layout: DataLayout | ImgLayout): void;
+}
+
+/**
+ * A DataLayout Object contains all the metadata about the contents of the sprite.
+ * This data can be exported to a JSON sprite manifest file.
+ * The keys of the Object are the icon ids.
+ * The values of the Object are the structured data about each icon.
+ */
+export interface DataLayout {
+    [id: string]: StructuredData;
+}
+
+export interface StructuredData {
+    width: number;
+    height: number;
+    pixelRatio: number;
+    x: number;
+    y: number;
+}
+
+/**
+ * A ImgLayout Object contains the array of image items along with dimensions
+ * and a buffer of image data that can be used for generating the output image
+ */
+export interface ImgLayout {
+    width: number;
+    height: number;
+    items: ImageItem[];
+}
+
+export interface ImageItem extends ImageSize {
+    x: number;
+    y: number;
+    buffer: string;
+}
+
+/**
+ *  An image object with width and height .
+ */
+export interface ImageSize {
+    width: number;
+    height: number;
+}
+
+export interface GenerateImageCallback {
+    (err: Error | null, img: Buffer): void;
+}

types/mapbox__spritezero/mapbox__spritezero-tests.ts

@@ -0,0 +1,92 @@
+/// <reference types="node" />
+
+import spritezero = require('@mapbox/spritezero');
+import fs = require('fs');
+import glob = require('glob');
+import path = require('path');
+
+spritezero.strongRound(2.3491, 2); // $ExpectType number
+spritezero.strongRound(2.3491); // $ExpectType number
+
+const metadata: spritezero.Metadata = {
+    content: [2, 5, 18, 11],
+    stretchX: [
+        [3, 7],
+        [14, 18],
+    ],
+    stretchY: [[5, 11]],
+};
+
+const dataLayout: spritezero.DataLayout = {
+    'aerialway-12': {
+        width: 12,
+        height: 12,
+        pixelRatio: 1,
+        x: 133,
+        y: 282,
+    },
+};
+
+const imgLayout: spritezero.ImgLayout = {
+    width: 512,
+    height: 512,
+    items: [
+        {
+            height: 12,
+            width: 12,
+            x: 133,
+            y: 282,
+            buffer: '...',
+        },
+        {
+            height: 12,
+            width: 12,
+            x: 133,
+            y: 282,
+            buffer: '...',
+        },
+    ],
+};
+
+// $ExpectType Error | null
+spritezero.validateMetadata(
+    {
+        width: 512,
+        height: 512,
+    },
+    { content: [2, 2, 22, 16] },
+);
+
+spritezero.extractMetadata(
+    {
+        svg: fs.readFileSync(`${__dirname}/fixture/svg-metadata/cn-nths-expy-2-affinity.svg`, 'utf-8'),
+    },
+    (err, metadata) => {
+        if (err) {
+            console.log(err);
+        } else {
+            metadata; // $ExpectType Metadata
+        }
+    },
+);
+
+[1, 2, 4].forEach(pxRatio => {
+    const svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg'))).map(f => {
+        return {
+            svg: fs.readFileSync(f),
+            id: path.basename(f).replace('.svg', ''),
+        };
+    });
+    const pngPath = path.resolve(path.join(__dirname, `output/sprite@${pxRatio}.png`));
+    const jsonPath = path.resolve(path.join(__dirname, `output/sprite@${pxRatio}.json`));
+    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, (err, dataLayout) => {
+        if (err) return;
+        fs.writeFileSync(jsonPath, JSON.stringify(dataLayout));
+    });
+    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, (err, imageLayout) => {
+        spritezero.generateImage(imageLayout as spritezero.ImgLayout, (err, image) => {
+            if (err) return;
+            fs.writeFileSync(pngPath, image);
+        });
+    });
+});

types/mapbox__spritezero/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "paths": {
+            "@mapbox/spritezero": [
+                "mapbox__spritezero"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "mapbox__spritezero-tests.ts"
+    ]
+}

types/mapbox__spritezero/tslint.json

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