import ColorSpace from "https://colorjs.io/src/space.js" doesn't populate registry

[sidewayss]

This might well be by design, but I want to verify that my approach to resolving it is correct. This pair of lines does not work because ColorSpace.registry is not populated:

import ColorSpace from "https://colorjs.io/src/space.js";
const space = ColorSpace.get("srgb");

To remedy this I have done the following (which ESLint disapproves of because I never use the ignore namespace):

import * as ignore from "https://colorjs.io/src/spaces/index.js";
import ColorSpace from "https://colorjs.io/src/space.js";
const space = ColorSpace.get("srgb");

This loads the spaces/index.js module, which populates the registry. I could import just one space by name, which might be slightly more efficient, but * requires less knowledge of the individual spaces.

So is this by design, or is it something that should be "fixed" or maybe noted in docs somewhere? Is my approach to making it work the right way to go, at least for the moment? Of course I'm not just getting the srgb space, I'm iterating over a list of space ids and building some stuff for a test/demo UI, so this is not specific to any one color space.

[sidewayss]

If spaces/index.js re-exported ColorSpace that would allow users to import ColorSpace with the registry populated.

[sidewayss]

During the lunch break a better approach occurred to me:

import {spaces} from "https://colorjs.io/src/spaces/index.js";
for (space of Object.values(spaces)
    ...

That way I don't need to maintain my own list of spaces, something I had been hoping to avoid. I hadn't examined spaces/index.js until now, so I didn't realize that it was the module that exported the full catalog of color spaces.

I'm answering this question with this comment. Please feel free to comment regardless. I'm curious about why the registry is initialized separately from ColorSpace.

[LeaVerou]

ColorSpace is just the class for describing color spaces, it's not meant to register anything. If you want to register all color spaces, importing spaces/index.js is indeed the correct approach. You don't need the dummy import * as ignore from "...", you can just do import "...", aka import-for-side-effects.

That said, this is a good idea, I think:

If spaces/index.js re-exported ColorSpace that would allow users to import ColorSpace with the registry populated.

[sidewayss]

this is a good idea, I think:

If spaces/index.js re-exported ColorSpace that would allow users to import ColorSpace with the registry populated.

Easy enough to create a PR and insert that line in the module. Let me know and I can submit that. IMO it's a good idea, but how will anyone know to use it unless there is documentation somewhere that explains it? Certainly it does no harm, and this Q&A is in the historical record.

Thanks for the tip on "import for side effects".

[MysteryBlokHed]

A note could be added in the JSDoc for the class maybe? Something that mentions the differences when importing the class from different locations.

[sidewayss]

Right now that JSDoc comment says merely this:

/**
 * Class to represent a color space
 */

If this is the docs source, then it should probably also include some version of @LeaVerou's comment above regarding ColorSpace and registration, for context.

I don't know if JSDoc works at the module level, but there should at least be a comment in spaces/index.js about this too. Easy enough to comment the new line that re-exports ColorSpace.

[LeaVerou]

The new API docs should pick this up automatically if it's properly documented. 🙂

@MysteryBlokHed @jgerigmeyer What do you think? Is it a good idea to re-export ColorSpace there? Can't think of any harm (e.g. wrt tree-shaking), since it has to be imported for the color space definitions to work, so it's just adding convenience, but I could be missing something.

We could even make it the default export.

Though now I wonder if a better file structure would have been

src/space/all/*.js
src/space/ColorSpace.js
src/space/index.js
src/space/index-fn.js

with colorjs.io/space and colorjs.io/space-fn named exports in package.json.

[jgerigmeyer]

@LeaVerou I like the idea of making ColorSpace the default export from 'src/spaces/index.js` 👍

The file renaming you're proposing also makes sense to me.

[MysteryBlokHed]

Sounds good to me too