meodai / fettepalette Goto Github PK

For example:

type HSX = [number, number, number];

/**
 * function hsv2hsl
 * @param h {Number} hue value 0...360
 * @param s {Number} saturation 0...1
 * @param v {Number} value 0...1
 * @returns {Array} h:0...360 s:0...1 l:0...1
 */
export const hsv2hsl = (
  h: number,
  s: number,
  v: number,
  l: number = v - (v * s) / 2,
  m = Math.min(l, 1 - l)
): HSX => {
  if (h < 0 || h > 360) {
    throw new Error(
      `hsv2hsl() hue parameter is expected to be a number between 0 and 360, \`${h}\` given.`
    );
  }
  // ...
  return [h, m ? (v - l) / m : 0, l];
};

C.f. https://basarat.gitbook.io/typescript/main-1/defaultisbad

I installed it via npm and wether i import or require the module I always get errors.
I tried it via the „Try on runkit“ button on npm. It fails there aswell. Is there something I‘m missing?

You do not export the MainFunctionArguments type.

While it is possible to retrieve the type of a function argument (c.f. https://stackoverflow.com/questions/51299555/is-there-argumentstypet-like-returntypet-in-typescript) it is cumbersome.

Incidentally, I would use a different naming for the types, something like GenerateRandomColorRampArgument.

Add the following to the .gitignore file and remove the files from the repository:

dist

Could you provide a pre-built, minifed version, for folks who do not use npm in their projects? this would make everything more easily accessible.

in parcel 1.x I have to

import {
  generateRandomColorRamp
} from 'fettepalette/dist/index';

to make it work.

in vanilla node it works fine:

import {
  generateRandomColorRamp
} from 'fettepalette'

canvas-sketch uses browserify
const {generateRandomColorRamp} = require('fettepalette');

only returns an empty object

In typescript, it is common to capitalize types, e.g. Vector2 v.s. vector2.

Ideally, you would have a eslint rule for this.

I would recommend setting the following in your tsconfig:

  noUncheckedIndexedAccess: true
  strict: true

As of now, these are the contents of the package:

fettepalette
├── .eslintrc
├── .github
│   └── workflows
│       └── main.yml
├── LICENSE
├── README.md
├── dist
│   ├── index.d.ts
│   ├── index.esm.js
│   ├── index.html
│   ├── index.iife.js
│   ├── index.js
│   └── index.js.map
├── fp.png
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Most of these files are not needed. Could you reduce them to the minimum?

To see what files will be included when publishing to npm, you can run npx npm-packlist.

In terms of code, all you need in the package is one js file and one d.ts file. You should leave the minifying, browser, esm and other builds to the users of your package. This being said, I might be wrong here.

As of now, generateRandomColorRamp has many default values:

export default function generateRandomColorRamp  (
  total:number,
  centerHue:number           = 0,
  hueCycle:number            = 0.3,
  offsetTint:number          = 0.1,
  offsetShade:number         = 0.1,
  curveAccent:number         = 0,
  tintShadeHueShift:number   = 0.1,
  curveMethod:curveMethod    = 'arc', 
  offsetCurveModTint:number  = 0.03,
  offsetCurveModShade:number = 0.03,
  minSaturationLight:vector2 = [0, 0],
  maxSaturationLight:vector2 = [1, 1]
):{
  light: hsx[],
  dark: hsx[],
  base: hsx[],
  all: hsx[]
} {}

If I want to modify just one of the default arguments, I need to list all the arguments prior to it, e.g. if I want a different value for offsetShade, I will have to call the function as follows:

generateRandomColorRamp(2, 0, .3, .1, .2)

Also, it is not obvious, what these values stand for, when reading the code.

The following API would be much more intuitive:

generateRandomColorRamp(2, {
  offsetShade: .2
})

When contributing to a project, having both eslint and prettier reduces a lot of friction.

Edit: Do not forget to fix the prettier version, c.f. https://prettier.io/docs/en/install.html

Note: If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.