From e79e03c5580bf33add4822d7fd5a904ed4cd5111 Mon Sep 17 00:00:00 2001 From: Lloyd Kupchanko Date: Wed, 1 Mar 2023 01:30:25 -0700 Subject: [PATCH] Add a PlainColorObject type for functions that return color objects The ColorObject type has optional properties and doesn't accurately reflect the color object type returned by functions such as getColor() which ensures that the object returned has space, coords and alpha properties that are not undefined. A new interface called PlainColorObject has been introduced to represent fully formed color objects. The Color class implements the PlainColorObject interface so the Color class was removed from list of types in the ColorTypes type. --- types/src/clone.d.ts | 4 ++-- types/src/color.d.ts | 10 ++++++++-- types/src/getColor.d.ts | 4 ++-- types/src/interpolation.d.ts | 10 +++++----- types/src/to.d.ts | 4 ++-- types/src/toGamut.d.ts | 8 ++++---- types/src/variations.d.ts | 6 +++--- types/test/clone.ts | 9 ++++++++- types/test/interpolation.ts | 20 ++++++++++---------- types/test/to.ts | 5 +++-- types/test/toGamut.ts | 10 +++++----- types/test/variations.ts | 12 ++++++------ 12 files changed, 58 insertions(+), 44 deletions(-) diff --git a/types/src/clone.d.ts b/types/src/clone.d.ts index ddbb0f476..e526c1d80 100644 --- a/types/src/clone.d.ts +++ b/types/src/clone.d.ts @@ -1,3 +1,3 @@ -import Color from "./color"; +import { PlainColorObject } from "./color"; -export default function clone(color: Color): Color; +export default function clone(color: PlainColorObject): PlainColorObject; diff --git a/types/src/color.d.ts b/types/src/color.d.ts index 12339d6c7..e5cc049c5 100644 --- a/types/src/color.d.ts +++ b/types/src/color.d.ts @@ -28,13 +28,19 @@ export interface ColorObject { alpha?: number | undefined; } +export interface PlainColorObject { + space: ColorSpace; + coords: Coords; + alpha: number; +} + export interface ColorConstructor { spaceId: string; coords: Coords; alpha: number | undefined; } -export type ColorTypes = Color | ColorObject | ColorConstructor | string; +export type ColorTypes = ColorObject | ColorConstructor | string | PlainColorObject; export type DefineFunctionCode = (...args: any[]) => any; @@ -79,7 +85,7 @@ declare namespace Color { export const spaces: typeof ColorSpace["registry"]; } -declare class Color { +declare class Color implements PlainColorObject { constructor(color: ColorTypes); constructor(space: string | ColorSpace, coords: Coords, alpha?: number); diff --git a/types/src/getColor.d.ts b/types/src/getColor.d.ts index 39c8dd9c7..703c698e7 100644 --- a/types/src/getColor.d.ts +++ b/types/src/getColor.d.ts @@ -1,3 +1,3 @@ -import { ColorObject, ColorTypes } from "./color"; +import { PlainColorObject, ColorTypes } from "./color"; -export default function getColor(color: ColorTypes): ColorObject; +export default function getColor(color: ColorTypes): PlainColorObject; diff --git a/types/src/interpolation.d.ts b/types/src/interpolation.d.ts index e50b35762..c1e951ffb 100644 --- a/types/src/interpolation.d.ts +++ b/types/src/interpolation.d.ts @@ -1,4 +1,4 @@ -import Color, { ColorTypes } from "./color"; +import Color, { ColorTypes, PlainColorObject } from "./color"; import ColorSpace from "./space"; import { Methods } from "./deltaE/index"; @@ -33,13 +33,13 @@ export function mix( color1: ColorTypes, color2: ColorTypes, options?: MixOptions -): number; +): PlainColorObject; export function mix( color1: ColorTypes, color2: ColorTypes, p: number, options?: MixOptions -): number; +): PlainColorObject; export interface StepsOptions extends RangeOptions { maxDeltaE?: number | undefined; @@ -48,7 +48,7 @@ export interface StepsOptions extends RangeOptions { maxSteps?: number | undefined; } -export function steps(color1: ColorTypes, color2: ColorTypes, options?: StepsOptions): Color[]; -export function steps(range: Range, 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/src/to.d.ts b/types/src/to.d.ts index 640a53832..29b4b624b 100644 --- a/types/src/to.d.ts +++ b/types/src/to.d.ts @@ -1,4 +1,4 @@ -import { ColorObject, ColorTypes } from "./color"; +import { PlainColorObject, ColorTypes } from "./color"; import ColorSpace from "./space"; declare namespace to { @@ -9,6 +9,6 @@ declare function to( color: ColorTypes, space: string | ColorSpace, options?: { inGamut?: boolean | undefined } -): ColorObject; +): PlainColorObject; export default to; diff --git a/types/src/toGamut.d.ts b/types/src/toGamut.d.ts index b619488ae..fc6f94dfe 100644 --- a/types/src/toGamut.d.ts +++ b/types/src/toGamut.d.ts @@ -1,16 +1,16 @@ -import Color, { ColorObject } from "./color"; +import { ColorTypes, PlainColorObject } from "./color"; import ColorSpace from "./space"; declare namespace toGamut { let returns: "color"; } -declare function toGamut( - color: T, +declare function toGamut( + color: ColorTypes, options?: { method?: string | undefined; space?: string | ColorSpace | undefined; } -): T; +): PlainColorObject; export default toGamut; diff --git a/types/src/variations.d.ts b/types/src/variations.d.ts index b558ab1e5..68200b067 100644 --- a/types/src/variations.d.ts +++ b/types/src/variations.d.ts @@ -1,5 +1,5 @@ -import Color, { ColorTypes } from "./color"; +import { PlainColorObject, ColorTypes } from "./color"; -export function lighten(color: ColorTypes, amount?: number): Color; +export function lighten(color: ColorTypes, amount?: number): PlainColorObject; -export function darken(color: ColorTypes, amount?: number): Color; +export function darken(color: ColorTypes, amount?: number): PlainColorObject; diff --git a/types/test/clone.ts b/types/test/clone.ts index 28dfd3e66..1efc4bcc6 100644 --- a/types/test/clone.ts +++ b/types/test/clone.ts @@ -1,7 +1,14 @@ import Color from "colorjs.io/src/color"; import clone from "colorjs.io/src/clone"; +import { sRGB } from "colorjs.io/src/spaces/index-fn"; // @ts-expect-error clone(); -clone(new Color("red")); // $ExpectType Color +clone(new Color("red")); // $ExpectType PlainColorObject +// $ExpectType PlainColorObject +clone({ + space: sRGB, + coords: [0, 0, 0], + alpha: 1, +}); diff --git a/types/test/interpolation.ts b/types/test/interpolation.ts index c0b4340f3..321237399 100644 --- a/types/test/interpolation.ts +++ b/types/test/interpolation.ts @@ -36,27 +36,27 @@ mix(); // @ts-expect-error mix("red"); -mix("red", "blue"); // $ExpectType number -mix("red", "blue", 0.5); // $ExpectType number -mix("red", "blue", {}); // $ExpectType number -mix("red", "blue", 0.5, {}); // $ExpectType number -// $ExpectType number +mix("red", "blue"); // $ExpectType PlainColorObject +mix("red", "blue", 0.5); // $ExpectType PlainColorObject +mix("red", "blue", {}); // $ExpectType PlainColorObject +mix("red", "blue", 0.5, {}); // $ExpectType PlainColorObject +// $ExpectType PlainColorObject mix("red", "blue", { space: "srgb", outputSpace: "srgb_linear", premultiplied: true, }); -steps("red", "blue"); // $ExpectType Color[] -// $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", @@ -65,7 +65,7 @@ steps(r, { }); // @ts-expect-error -steps(r, "blue"); // $ExpectType Color[] +steps(r, "blue"); // $ExpectType PlainColorObject[] // @ts-expect-error register(); diff --git a/types/test/to.ts b/types/test/to.ts index 933a2b74c..286d6996b 100644 --- a/types/test/to.ts +++ b/types/test/to.ts @@ -2,8 +2,9 @@ import to from "colorjs.io/src/to"; // @ts-expect-error to(); + // @ts-expect-error to("red"); -to("red", "srgb"); // $ExpectType ColorObject -to("red", "srgb", { inGamut: false }); // $ExpectType ColorObject +to("red", "srgb"); // $ExpectType PlainColorObject +to("red", "srgb", { inGamut: false }); // $ExpectType PlainColorObject diff --git a/types/test/toGamut.ts b/types/test/toGamut.ts index 6f95ec989..4a77921e7 100644 --- a/types/test/toGamut.ts +++ b/types/test/toGamut.ts @@ -4,9 +4,9 @@ import sRGB from "colorjs.io/src/spaces/srgb"; // @ts-expect-error toGamut(); -// @ts-expect-error -toGamut("red"); -toGamut(new Color("red")); // $ExpectType Color -toGamut(new Color("red"), { method: "clip", space: "srgb" }); // $ExpectType Color -toGamut(new Color("red"), { method: "clip", space: sRGB }); // $ExpectType Color +toGamut("red"); // $ExpectType PlainColorObject + +toGamut(new Color("red")); // $ExpectType PlainColorObject +toGamut(new Color("red"), { method: "clip", space: "srgb" }); // $ExpectType PlainColorObject +toGamut(new Color("red"), { method: "clip", space: sRGB }); // $ExpectType PlainColorObject diff --git a/types/test/variations.ts b/types/test/variations.ts index a720cd725..f947db2ba 100644 --- a/types/test/variations.ts +++ b/types/test/variations.ts @@ -4,13 +4,13 @@ import { lighten, darken } from "colorjs.io/src/variations"; // @ts-expect-error lighten(); -lighten("red"); // $ExpectType Color -lighten(new Color("red")); // $ExpectType Color -lighten("red", 25); // $ExpectType Color +lighten("red"); // $ExpectType PlainColorObject +lighten(new Color("red")); // $ExpectType PlainColorObject +lighten("red", 25); // $ExpectType PlainColorObject // @ts-expect-error darken(); -darken("red"); // $ExpectType Color -darken(new Color("red")); // $ExpectType Color -darken("red", 25); // $ExpectType Color +darken("red"); // $ExpectType PlainColorObject +darken(new Color("red")); // $ExpectType PlainColorObject +darken("red", 25); // $ExpectType PlainColorObject