Add type definitions #166

bijela-gora · 2022-04-05T20:53:13Z

Hi all :-)

This MR is related to #128

I'm not the user of this library. I come on call of @ai here https://cultofmartians.com/tasks/culori-types.html

What has been done in the scope of this PR so far:

types have been added for some exported functions
it was checked with npm link that type defs were exported correctly and can be used in the user project.

The advantage of the approach when declaration files is in the same dir as javascript files is that the types are immediately available to other parts of the code base, for example in tests. Will this advantage be helpful for the maintainers?

May I get feedback at this point?

bijela-gora · 2022-04-11T21:06:35Z

@Enteleform may I ask you to review this PR?

bijela-gora · 2022-04-11T21:07:12Z

@akx hi! May I ask you to review this PR?

bijela-gora · 2022-04-11T21:07:26Z

@ai hi! May I ask you to review this PR?

src/interpolate/piecewise.d.ts

src/interpolate/interpolate.d.ts

bijela-gora · 2022-04-11T22:32:11Z

src/displayable.d.ts

@@ -0,0 +1,3 @@
+import type { Color } from './common';
+


I noticed that when in the file, for example in displayable.js, when there is an import which looks like import converter from './converter.js'; because of .js in the path, at least in WebStorm not showing the type hint and autocomplition is not working.

copy-types.js

src/_prepare.d.ts

akx · 2022-04-12T05:33:53Z

src/_prepare.d.ts

@@ -0,0 +1,16 @@
+import parse from './parse.js';


Suggested change

import parse from './parse.js';

import parse from './parse';

ESM requires a full path with extension

akx · 2022-04-12T05:34:26Z

src/_prepare.d.ts

+): Color;
+declare function prepare<M extends Mode>(
+	color: Omit<Color, 'mode'> & { mode?: M },
+	mode: undefined


Maybe this parameter should just be elided?

I've updated the 'prepare' function type and the examples 5b0f7b3#diff-072ed26e63b74da148449088d6e78e3b145592e85a93e25d2aea3f7a682d804eR82

What do you think about them?

My goal here was to express in TS the behavior of the 'prepare' function as closer as possible.

src/a98/types.d.ts

src/average.d.ts

src/clamp.d.ts

src/common.d.ts

tsconfig.json

bijela-gora · 2022-04-14T18:57:38Z

@akx thank you for review!

bijela-gora · 2022-04-14T19:02:27Z

src/filter.d.ts

@@ -0,0 +1,11 @@
+import type { ColorToColor, Mode } from './common';
+
+type Filter = (amt?: number, mode?: Mode) => ColorToColor;


According to the documentation

The filters were designed for RGB colors, so the mode parameter is expected to be rgb or lrgb.

Should a type of the mode parameter looks like 'rgb' | 'lrgb' ?

I think the question above should be asked to the creator of the library? @danburzo what do you think?

bijela-gora · 2022-04-15T23:30:07Z

test/map.test.js

@@ -29,3 +29,23 @@ tape('gamma transfer function', t => {
 	t.equal(formatHex(brighten('#cc0033')), '#ff0070');
 	t.end();
 });
+
+tape(


@danburzo hi!

Before this commit: 7c0ff5a the following code throws an error:

mapper(mapTransferGamma(2.2), null)( 'color(--okhsv 29.2 0.9 0.9)' )

What do you think about this bugfix?

bijela-gora · 2022-04-15T23:31:33Z

check-dts/map.errors.ts

+});
+
+// THROWS Type 'Rgb' is missing the following properties from type 'Hsl': h, s, l
+const case_3_expect_error: Hsl = doubler({


@ai I added tests for .d.ts files.

I use this typing test system in all my open source.

For instance, in PostCSS https://github.com/postcss/postcss/blob/main/test/errors.ts

ai · 2022-04-24T22:08:55Z

@danburzo what else do we need here?

I really need TS support to use your awesome culori in my project.

danburzo · 2022-04-28T12:53:12Z

@ai @bijela-gora Sorry for the delay, I hope to be able to review this PR soon.

bijela-gora · 2022-04-28T22:54:00Z

I really need TS support to use your awesome culori in my project.

@ai @danburzo I'm here in case you found some inconsistency between documentation and type definitions, or in case some types is not convenient enough.

bijela-gora · 2022-05-07T19:08:12Z

@ai in the side branch, I removed the prepare npm script from the list, and now you can install the culori package from GitHub as follows:

pnpm install github:bijela-gora/culori#7fa2b01940ee6c0793455c34872d5cef5d837b9e

bijela-gora · 2022-05-07T19:10:20Z

@akx FYI ☝️

ai · 2022-05-09T21:53:17Z

@bijela-gora we need to add types for 'culori/fn' import (after it, I will be able to continue testing types)

bijela-gora · 2022-05-10T18:39:44Z

@ai do you know how it can be done?

The support of package.json Exports will be added in TS 4.7

I also found that it is possible to import tree shakeable function using
import { parse } from 'culori/src/index-fn.js';

ai · 2022-05-10T19:03:02Z

The support of package.json Exports will be added in TS 4.7

I can install TS 4.7 beta. But it doesn’t work too.

You can try on your own:

Repo https://github.com/evilmartians/oklch-picker
File which use culori https://github.com/evilmartians/oklch-picker/blob/main/lib/colors.ts

bijela-gora · 2022-05-10T19:49:08Z

@ai thank you

I will add fn.d.ts in the project root folder with export * from './src/index-fn'; content and this should solve the issue with 'culori/fn'.

Also I have found that I configure tsconfig in the wrong way, and I need to fix many type definitions. It will take 1 or 2 days.

ai · 2022-05-10T20:03:08Z

@bijela-gora ping me when you will be able to run it locally (with new pnpm add command) and I will test and check types too

bijela-gora · 2022-05-13T12:29:01Z

@ai ping :-)

Use pnpm remove culori && pnpm add github:bijela-gora/culori#16bcbc35 to update the package in project.

Here is the patch to the oklch-picker with updated types.

updated-types.zip

ai · 2022-05-13T12:31:46Z

@bijela-gora can you send this patch (with package.json and pnpm-lock.yml changes) as a PR to save your name in the OKLCH picker history?

bijela-gora · 2022-05-13T12:46:41Z

Here it is: evilmartians/oklch-picker#35

ai · 2022-05-17T10:51:52Z

@danburzo I can prove that types works.

We tested and polished types in evilmartians/oklch-picker#35

ai · 2022-06-25T11:43:20Z

@danburzo can we merge it please? TS support is very critical for modern big applications.

TimJentzsch · 2022-07-21T09:49:33Z

I'd also very much like to have this merged :)

danburzo · 2023-02-17T21:23:29Z

Dear @bijela-gora & others in this thread, I have failed to answer when pinged, but I think the situation deserves a status update despite my reluctance before we hit the 1-year mark.

First of all, thank you for what looks to me like an immense amount of work for this PR, and what looks like a successful integration in the excellent evilmartians/oklch-picker ❤️

However, this is a massive PR that turned out to include a lot of files and duplicated code, which I fear is too much of a maintenance burden to take on all at once. (Please bear in mind that, while I am open to the idea of better supporting Typescript users of the library, I am not a TypeScript user myself.)

Therefore, as much as it pains me to say, I will not be able to merge it in this form, at least for the time being. I need to get at least a bit familiar with the technology before I can commit to maintaining it going forward.

I am currently exploring how to generate Declaration files from JavaScript via JSDoc, which I think is the only feasible way forward for types in Culori. I will be posting ideas/progress in #128.

I'm sorry, I know this is a disappointing answer... Once I have a workable solution for generating types, I hope to find a way to integrate the work you've already done here.

ai · 2023-02-20T11:21:37Z

@danburzo don’t worry. OKLCH color picker temporary moved to local types evilmartians/oklch-picker@3dd6cbf

lordofthelake · 2023-03-05T22:04:21Z

@ai @bijela-gora Given the incredible amount of work already done here, could it make sense to contribute these type definitions to DefinitelyTyped, as @types/culori?

It would be a nice stopgap solution for the TS users out there until @danburzo can find a long-term solution for maintainable first-party typings.

bijela-gora · 2023-03-09T13:37:57Z

@danburzo @lordofthelake

I'm going to create a PR to DefinitelyTyped.

bijela-gora · 2023-03-14T23:00:23Z

@lordofthelake

https://www.npmjs.com/package/@types/culori

swernerx · 2024-03-05T14:28:04Z

@lordofthelake

https://www.npmjs.com/package/@types/culori

Can this please be updated to include newer API methods like toGamut()?

bijela-gora marked this pull request as ready for review April 11, 2022 21:05

bijela-gora commented Apr 11, 2022

View reviewed changes

src/interpolate/piecewise.d.ts Show resolved Hide resolved

bijela-gora commented Apr 11, 2022

View reviewed changes

src/interpolate/interpolate.d.ts Outdated Show resolved Hide resolved

bijela-gora changed the title ~~Add some types~~ Add type definitions Apr 11, 2022

bijela-gora commented Apr 11, 2022

View reviewed changes

akx reviewed Apr 12, 2022

View reviewed changes

bijela-gora commented Apr 14, 2022

View reviewed changes

bijela-gora commented Apr 15, 2022

View reviewed changes

bijela-gora mentioned this pull request May 13, 2022

Use the types provided by the culori library evilmartians/oklch-picker#35

Merged

bijela-gora added 18 commits January 8, 2023 21:39

Add test for convertLrgbToRgb function type

cb675e9

Add one more definition.d.ts

1bd15ee

Add one more definition.d.ts

6e4e6e8

Add one more definition.d.ts

3ee48da

Remove '.js' in imports in .d.ts files

0d96334

Replace 'import type' with import in .d.ts files

adc89c6

Add types for modes.js

dbcd0bd

More accurate type def for converter factory

53804f1

Increasing the accuracy of formatter types

c9a4fda

Increase the accuracy of formatters types

b76810c

Add types for named colors

49417eb

Fix formatters types

3714acf

Small update

3370d4c

Change an order of types

86bc62f

Make the ConvertFn type a little more convenient

86319c2

Add .idea/ to gitignore

e1303d8

All 'h' channels can be not assigned

5f8fa2d

Add OKLCH & LCH Color Picker to the list of products using Culori

d810061

Fix copy&paste typo

5cfb5f9

bijela-gora added 3 commits March 9, 2023 16:15

Fix type tests

effad4b

Remove unused import statements

d44cd8b

Add two tests

7c13fef

bijela-gora closed this Mar 11, 2023

bijela-gora mentioned this pull request Mar 11, 2023

Types for culori DefinitelyTyped/DefinitelyTyped#64686

Merged

12 tasks

		@@ -0,0 +1,11 @@
		import type { ColorToColor, Mode } from './common';

		type Filter = (amt?: number, mode?: Mode) => ColorToColor;

Add type definitions #166

Add type definitions #166

Conversation

bijela-gora commented Apr 5, 2022 • edited Loading

bijela-gora commented Apr 11, 2022

bijela-gora commented Apr 11, 2022

bijela-gora commented Apr 11, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bijela-gora commented Apr 14, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ai commented Apr 24, 2022

danburzo commented Apr 28, 2022

bijela-gora commented Apr 28, 2022 • edited Loading

bijela-gora commented May 7, 2022 • edited Loading

bijela-gora commented May 7, 2022

ai commented May 9, 2022

bijela-gora commented May 10, 2022

ai commented May 10, 2022

bijela-gora commented May 10, 2022 • edited Loading

ai commented May 10, 2022

bijela-gora commented May 13, 2022

ai commented May 13, 2022

bijela-gora commented May 13, 2022

ai commented May 17, 2022

ai commented Jun 25, 2022

TimJentzsch commented Jul 21, 2022

danburzo commented Feb 17, 2023

ai commented Feb 20, 2023

lordofthelake commented Mar 5, 2023

bijela-gora commented Mar 9, 2023

bijela-gora commented Mar 14, 2023

swernerx commented Mar 5, 2024 • edited Loading

bijela-gora commented Apr 5, 2022 •

edited

Loading

bijela-gora commented Apr 28, 2022 •

edited

Loading

bijela-gora commented May 7, 2022 •

edited

Loading

bijela-gora commented May 10, 2022 •

edited

Loading

swernerx commented Mar 5, 2024 •

edited

Loading