Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tree-shakable `parse()` doesn't seem to work

See original GitHub issue

Hiya 👋,

I tried to follow the documentation but I can’t make the tree-shakable API work.

The parse function returns the following error:

Uncaught TypeError: Could not parse red as a color. Missing a plugin?

Here’s a reproduction code (and it’s not ESM, the same code doesn’t work in a Vue app with Vite):

<!DOCTYPE html>
<html lang="en">
  <script type="module">
    import { parse } from 'https://esm.run/colorjs.io/fn'

    console.log(parse('red'))
  </script>
</html>

Issue Analytics

State:
Created 10 months ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

LeaVeroucommented, Nov 29, 2022

Ah, narrowed it down. The thing is, with the tree-shakable API you need to do everything manually, including registering color spaces you want Color.js to know about:

import { parse, ColorSpace, sRGB } from 'https://colorjs.io/src/index-fn.js';

ColorSpace.register(sRGB);

console.log(parse('red'));

Once you do that, parsing sRGB colors works. Obviously you’d need to do it separately for other color spaces as well.

You can still use an unregistered color space in many places by just passing around its object, but for parsing its formats (or serializing to them) it absolutely needs to be registered.

Perhaps we should include a way to register all color spaces automatically, though do note this would make them non tree-shakable (this was the original design of the tree-shakable API, see #163 ) since you’d have a reference to them whether they are used or not. Basically, once you register a color space, it’s not tree-shakable anymore. If you have any ideas about this, they are welcome!

Demo: https://codepen.io/leaverou/pen/MWXqgXX?editors=0010

0reactions

LeaVeroucommented, Dec 1, 2022

Absolutely.

Top Results From Across the Web

Tree shaking issue in 2.17 · Issue #2207 · date-fns ... - GitHub

So, long story short I created a vanilla project, and by importing like this, tree-shaking works correctly. import { parse, format } from...

Reduce JavaScript payloads with tree shaking - web.dev

In dev builds, this doesn't change anything, as the entire module gets imported regardless. In production builds, webpack can be configured to "shake"...

date-fns 2 - can't get tree-shaking to work - Stack Overflow

the test contains 2 files, one acting as the "library", the other acting as the code to run, and it is as simple...

Tree Shaking - webpack

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...

Tree Shaking - How to Clean up Your JavaScript - KeyCDN

Tree shaking is a strategy web developers use to create leaner JavaScript bundles by getting rid of unused code.