From a9fb043a2ca5f1ab46411fc90297b5ed64e14bb6 Mon Sep 17 00:00:00 2001 From: Adam Thompson-Sharpe Date: Tue, 8 Aug 2023 16:13:03 -0400 Subject: [PATCH 1/2] [types] Fix signature of `steps` function --- types/src/interpolation.d.ts | 4 ++-- types/test/interpolation.ts | 15 ++++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/types/src/interpolation.d.ts b/types/src/interpolation.d.ts index d1648cd7a..a8b47fbc7 100644 --- a/types/src/interpolation.d.ts +++ b/types/src/interpolation.d.ts @@ -48,7 +48,7 @@ export interface StepsOptions extends RangeOptions { maxSteps?: number | undefined; } -export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): PlainColorObject[]; -export function steps(range: Range, options?: StepsOptions): PlainColorObject[]; +export function steps(range: Range, options?: StepsOptions): Color[]; +export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): Color[]; export function register(color: typeof Color): void; diff --git a/types/test/interpolation.ts b/types/test/interpolation.ts index 321237399..e85af8672 100644 --- a/types/test/interpolation.ts +++ b/types/test/interpolation.ts @@ -47,16 +47,16 @@ mix("red", "blue", { premultiplied: true, }); -steps("red", "blue"); // $ExpectType PlainColorObject[] -// $ExpectType PlainColorObject[] +steps("red", "blue"); // $ExpectType Color[] +// $ExpectType Color[] steps("red", "blue", { maxDeltaE: 1, deltaEMethod: "2000", steps: 10, maxSteps: 100, }); -steps(r); // $ExpectType PlainColorObject[] -// $ExpectType PlainColorObject[] +steps(r); // $ExpectType Color[] +// $ExpectType Color[] steps(r, { maxDeltaE: 1, deltaEMethod: "2000", @@ -65,7 +65,12 @@ steps(r, { }); // @ts-expect-error -steps(r, "blue"); // $ExpectType PlainColorObject[] +steps(r, "blue"); + +// Test steps on Color class +Color.steps(Color.range("red", "blue")); // $ExpectType Color[] +Color.steps("red", "blue"); // $ExpectType Color[] +new Color("red").steps("blue"); // $ExpectType Color[] // @ts-expect-error register(); From 452d7cbe656a9834e8dfcd087737da1380655877 Mon Sep 17 00:00:00 2001 From: Adam Thompson-Sharpe Date: Mon, 14 Aug 2023 17:40:54 -0400 Subject: [PATCH 2/2] [types] Fix `steps` and `mix` signatures to properly reflect code --- types/src/index.d.ts | 29 ++++++++++++++++++++++++----- types/src/interpolation.d.ts | 4 ++-- types/test/interpolation.ts | 26 ++++++++++++++++++-------- 3 files changed, 44 insertions(+), 15 deletions(-) diff --git a/types/src/index.d.ts b/types/src/index.d.ts index 665838cbc..c6ce9d232 100644 --- a/types/src/index.d.ts +++ b/types/src/index.d.ts @@ -18,7 +18,7 @@ import deltaEMethods, { deltaEITP, deltaEOK, } from "./deltaE/index"; -import { mix, range, steps } from "./interpolation"; +import { range, Range, MixOptions, StepsOptions } from "./interpolation"; import { getLuminance } from "./luminance"; import { lighten, darken } from "./variations"; @@ -67,12 +67,31 @@ declare module "./color" { static deltaEMethods: typeof deltaEMethods; // interpolation - mix: ToColorPrototype; + // These signatures should always match those in interpolation.d.ts, + // including the static versions + mix(color2: ColorTypes, options?: MixOptions): Color; + mix(color2: ColorTypes, p: number, options?: MixOptions): Color; range: ToColorPrototype; - steps: ToColorPrototype; - static mix: typeof mix; + steps(color2: ColorTypes, options?: StepsOptions): Color[]; + + static mix( + color1: ColorTypes, + color2: ColorTypes, + options?: MixOptions + ): Color; + static mix( + color1: ColorTypes, + color2: ColorTypes, + p: number, + options?: MixOptions + ): Color; static range: typeof range; - static steps: typeof steps; + static steps( + color1: ColorTypes, + color2: ColorTypes, + options?: StepsOptions + ): Color[]; + static steps(range: Range, options?: StepsOptions): Color[]; // luminance get luminance(): ReturnType; diff --git a/types/src/interpolation.d.ts b/types/src/interpolation.d.ts index a8b47fbc7..d1648cd7a 100644 --- a/types/src/interpolation.d.ts +++ b/types/src/interpolation.d.ts @@ -48,7 +48,7 @@ export interface StepsOptions extends RangeOptions { maxSteps?: number | undefined; } -export function steps(range: Range, options?: StepsOptions): Color[]; -export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): Color[]; +export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): PlainColorObject[]; +export function steps(range: Range, options?: StepsOptions): PlainColorObject[]; export function register(color: typeof Color): void; diff --git a/types/test/interpolation.ts b/types/test/interpolation.ts index e85af8672..c7f6554e1 100644 --- a/types/test/interpolation.ts +++ b/types/test/interpolation.ts @@ -1,4 +1,4 @@ -import Color from "colorjs.io/src/color"; +import Color from "colorjs.io/src"; import { sRGB, sRGB_Linear } from "colorjs.io/src/index-fn"; import { isRange, @@ -47,16 +47,26 @@ mix("red", "blue", { premultiplied: true, }); -steps("red", "blue"); // $ExpectType Color[] -// $ExpectType Color[] +// Test mix on Color class +Color.mix("red", "blue"); // $ExpectType Color +Color.mix("red", "blue", 123); // $ExpectType Color +Color.mix("red", "blue", { space: "srgb" }); // $ExpectType Color +Color.mix("red", "blue", 123, { space: "srgb" }); // $ExpectType Color +new Color("red").mix("blue"); // $ExpectType Color +new Color("red").mix("blue", 123); // $ExpectType Color +new Color("red").mix("blue", { space: "srgb" }); // $ExpectType Color +new Color("red").mix("blue", 123, { space: "srgb" }); // $ExpectType Color + +steps("red", "blue"); // $ExpectType PlainColorObject[] +// $ExpectType PlainColorObject[] steps("red", "blue", { maxDeltaE: 1, deltaEMethod: "2000", steps: 10, maxSteps: 100, }); -steps(r); // $ExpectType Color[] -// $ExpectType Color[] +steps(r); // $ExpectType PlainColorObject[] +// $ExpectType PlainColorObject[] steps(r, { maxDeltaE: 1, deltaEMethod: "2000", @@ -64,14 +74,14 @@ steps(r, { maxSteps: 100, }); -// @ts-expect-error -steps(r, "blue"); - // Test steps on Color class Color.steps(Color.range("red", "blue")); // $ExpectType Color[] Color.steps("red", "blue"); // $ExpectType Color[] new Color("red").steps("blue"); // $ExpectType Color[] +// @ts-expect-error +steps(r, "blue"); // $ExpectType PlainColorObject[] + // @ts-expect-error register(); // @ts-expect-error