🤖 Merge PR DefinitelyTyped#73118 Add TypeScript definitions and tests for Color Thief by @sillyangel

Author: sillyangel

types/colorthief/.npmignore

@@ -0,0 +1,5 @@
+*
+!**/*.d.ts
+!**/*.d.cts
+!**/*.d.mts
+!**/*.d.*.ts

types/colorthief/colorthief-tests.ts

@@ -0,0 +1,80 @@
+// Test file for Color Thief type definitions
+// This file should compile without errors when the types are correct
+
+// Import the ColorThief class for testing
+import ColorThief from "colorthief";
+
+// Browser version tests
+const colorThief = new ColorThief();
+const img = document.createElement("img");
+
+// Test getColor method
+const dominantColor: ColorThief.RGBColor = colorThief.getColor(img);
+const dominantColorWithQuality: ColorThief.RGBColor = colorThief.getColor(img, 5);
+
+// Test getPalette method
+const palette: ColorThief.RGBColor[] = colorThief.getPalette(img);
+const paletteWithOptions: ColorThief.RGBColor[] = colorThief.getPalette(img, 8, 5);
+
+// Test callback-based methods with proper typing
+colorThief.getColorFromUrl(
+    "https://example.com/image.jpg",
+    (color: ColorThief.RGBColor, source: HTMLImageElement | string) => {
+        console.log("Color:", color);
+        console.log("Source:", source);
+    },
+);
+
+colorThief.getImageData("https://example.com/image.jpg", (dataUrl: string) => {
+    console.log("Data URL:", dataUrl);
+});
+
+colorThief.getColorAsync(
+    "https://example.com/image.jpg",
+    (color: ColorThief.RGBColor, source: HTMLImageElement | string) => {
+        console.log("Async Color:", color);
+        console.log("Source:", source);
+    },
+);
+
+// Type checking - these should be valid types
+const rgbColor: ColorThief.RGBColor = [255, 128, 0];
+const options: ColorThief.Options = {
+    colorCount: 5,
+    quality: 8,
+};
+
+// Callback type checking
+const colorCallback: ColorThief.ColorCallback = (color: ColorThief.RGBColor, source: HTMLImageElement | string) => {
+    const [r, g, b] = color;
+    console.log(`RGB: ${r}, ${g}, ${b}`);
+};
+
+const imageDataCallback: ColorThief.ImageDataCallback = (dataUrl: string) => {
+    console.log("Received data URL:", dataUrl);
+};
+
+// Test array destructuring
+const [red, green, blue] = dominantColor;
+console.log(`Red: ${red}, Green: ${green}, Blue: ${blue}`);
+
+// Test palette iteration
+palette.forEach((color: ColorThief.RGBColor) => {
+    const [r, g, b] = color;
+    console.log(`Color: rgb(${r}, ${g}, ${b})`);
+});
+
+// Test type constraints
+const validColorCount: number = 10; // should be between 2-20
+const validQuality: number = 5; // should be >= 1
+
+// Test optional parameters
+const colorNoQuality = colorThief.getColor(img);
+const paletteNoOptions = colorThief.getPalette(img);
+const paletteWithColorCount = colorThief.getPalette(img, 5);
+
+// Test that RGB values are numbers
+const testColor: ColorThief.RGBColor = [255, 128, 0];
+const rValue: number = testColor[0];
+const gValue: number = testColor[1];
+const bValue: number = testColor[2];

types/colorthief/index.d.ts

@@ -0,0 +1,83 @@
+/// <reference lib="dom" />
+
+export = ColorThief;
+export as namespace ColorThief;
+
+declare namespace ColorThief {
+    /**
+     * RGB color tuple representing a color with red, green, and blue values (0-255)
+     */
+    type RGBColor = [number, number, number];
+
+    /**
+     * Options for color extraction methods
+     */
+    interface Options {
+        /**
+         * Number of colors to extract for palette (2-20, default: 10)
+         * For getColor(), this is internally set to 5
+         */
+        colorCount?: number;
+
+        /**
+         * Quality/speed trade-off (1 = highest quality, 10 = default)
+         * Higher numbers are faster but may miss colors
+         */
+        quality?: number;
+    }
+
+    /**
+     * Callback function for asynchronous color extraction
+     */
+    type ColorCallback = (color: RGBColor, source: HTMLImageElement | string) => void;
+
+    /**
+     * Callback function for image data retrieval
+     */
+    type ImageDataCallback = (dataUrl: string) => void;
+}
+
+/**
+ * Color Thief - Extract dominant colors from images
+ */
+declare class ColorThief {
+    /**
+     * Extract the dominant color from an image
+     * @param sourceImage - HTML image element
+     * @param quality - Quality/speed trade-off (1 = highest quality, 10 = default)
+     * @returns RGB color array [r, g, b] where values are 0-255
+     */
+    getColor(sourceImage: HTMLImageElement, quality?: number): ColorThief.RGBColor;
+
+    /**
+     * Extract a palette of colors from an image
+     * @param sourceImage - HTML image element
+     * @param colorCount - Number of colors to extract (2-20, default: 10)
+     * @param quality - Quality/speed trade-off (1 = highest quality, 10 = default)
+     * @returns Array of RGB color arrays [[r, g, b], ...] where values are 0-255
+     */
+    getPalette(sourceImage: HTMLImageElement, colorCount?: number, quality?: number): ColorThief.RGBColor[];
+
+    /**
+     * Extract the dominant color from an image URL (asynchronous)
+     * @param imageUrl - URL of the image
+     * @param callback - Callback function to receive the color
+     * @param quality - Quality/speed trade-off (1 = highest quality, 10 = default)
+     */
+    getColorFromUrl(imageUrl: string, callback: ColorThief.ColorCallback, quality?: number): void;
+
+    /**
+     * Get image data as base64 data URL from a URL
+     * @param imageUrl - URL of the image
+     * @param callback - Callback function to receive the data URL
+     */
+    getImageData(imageUrl: string, callback: ColorThief.ImageDataCallback): void;
+
+    /**
+     * Extract the dominant color from an image URL asynchronously with base64 conversion
+     * @param imageUrl - URL of the image
+     * @param callback - Callback function to receive the color
+     * @param quality - Quality/speed trade-off (1 = highest quality, 10 = default)
+     */
+    getColorAsync(imageUrl: string, callback: ColorThief.ColorCallback, quality?: number): void;
+}

types/colorthief/package.json

@@ -0,0 +1,17 @@
+{
+    "private": true,
+    "name": "@types/colorthief",
+    "version": "2.6.9999",
+    "projects": [
+        "https://github.com/lokesh/color-thief"
+    ],
+    "devDependencies": {
+        "@types/colorthief": "workspace:."
+    },
+    "owners": [
+        {
+            "name": "sillyangel",
+            "githubUsername": "sillyangel"
+        }
+    ]
+}

types/colorthief/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "module": "node16",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "colorthief-tests.ts"
+    ]
+}