Refactor api to return a palette object.

This removes the `format` option when creating a palette in favour of calling `.format()` on a returned palette object.
The main benefit of this approach is that the return type from .format() is guaranteed and will vary based on the input argument.
It also allows the creation of a palette once before using it in several formats later.

.changeset/selfish-grapes-melt.md

@@ -0,0 +1,5 @@
+---
+"hue-map": minor
+---
+
+Refactor api to return a palette object which can be formatted later

README.md

@@ -18,21 +18,20 @@ yarn add hue-map
 ## Usage
 
 ```js
-import createPalette from 'hue-map'
+import { createPalette } from 'hue-map'
 
 const myPalette = createPalette({
   map: 'viridis',
   steps: 3,
-  format: 'cssHex',
 })
 
-console.log(myPalette)
-// ['#440154FF', '#21908DFF', '#FDE725FF']
+console.log(myPalette.format('cssHex'))
+// --> ['#440154FF', '#21908DFF', '#FDE725FF']
 ```
 
 ## API
 
-The default export is a function that takes an options object.
+The `createPalette` export is a function that takes an options object.
 
 ### Options
 
@@ -55,7 +54,7 @@ Visit the [demo page](https://giraugh.github.io/hue-map/) to see a list with exa
 You can also provide a custom colour map to the `map` option, with a type of `[number, number | RGBA][]`. This is an array of tuples, where each tuple has an index of where that colour appears in the gradient (from 0 to 1), and the colour at that point, as a HEX number or an RGBA tuple. Note that all HEX numbers need to include alpha.
 
 ```js
-import createPalette from 'hue-map'
+import { createPalette } from 'hue-map'
 
 // 3 colour points, using HEX values
 const myHexPalette = createPalette({

lib/index.ts

@@ -1,13 +1,28 @@
 import maps, { ColorMap, MapKey } from './maps'
 import { hexColorToRGBA, lerpRGBA, RGBA } from './util'
 
-export type Palette = string[] | RGBA[] | number[]
 export type ColorMapInput = MapKey | ColorMap
 export type PaletteFormat = 'float' | 'rgba' | 'cssHex' | 'cssRGBA' | 'number'
 type CreatePaletteOptions = {
   map?: ColorMapInput,
   steps?: number,
-  format?: PaletteFormat
+}
+
+class Palette {
+  private readonly colors: RGBA[]
+
+  constructor(colors: RGBA[]) {
+    this.colors = colors
+  }
+
+  format(_format: 'cssHex'): string[]
+  format(_format: 'cssRGBA'): string[]
+  format(_format: 'number'): number[]
+  format(_format: 'float'): number[]
+  format(_format: 'rgba'): RGBA[]
+  format(format: PaletteFormat) {
+    return this.colors.map(rgba => convertRGBA(rgba, format))
+  }
 }
 
 /**
@@ -17,7 +32,7 @@ type CreatePaletteOptions = {
  * @param {PaletteFormat} options.format The format of the palette colors.
  * @returns {Palette} The generated palette.
  */
-export const createPalette = ({ map = 'viridis', steps = 10, format = 'cssHex' }: CreatePaletteOptions = {}): Palette => {
+export const createPalette = ({ map = 'viridis', steps = 10 }: CreatePaletteOptions): Palette => {
   // If passed a map name, index from built-in color maps
   const colorMap: ColorMap = typeof map === 'string' ? maps[map] : map
 
@@ -57,9 +72,8 @@ export const createPalette = ({ map = 'viridis', steps = 10, format = 'cssHex' }
     return Array.from({ length: numSteps }, (_, j) => lerpRGBA(fromColor, toColor, j / numSteps))
   })
 
-  // Convert to desired format
-  const colors = colorsRGBA.map(rgba => convertRGBA(rgba, format)) as Palette
-  return colors
+  // Return palette object
+  return new Palette(colorsRGBA)
 }
 
 /**