Comments (6)
@diondiondion my apologies for closing. I actually stumbled upon this somewhat new video by google chrome developers about "transitioning to modern javascript". They mention that there's a new type of entry point field call exports
that your bundler may be able to utilize better than the modules
entry point I use today.
I may switch to entirely if it makes sense. Here's the video with a timestamp. Very informational.
I think I'll open an issue to try it out. Maybe this weekend.
from color2k.
Thanks for brining this to my attention!
I was un-aware that this didn't work for IE. Color2K ships with an ESM bundle and a UMD bundle and my current understanding it that your bundler is supposed to handle transpiling the ESM bundle down to IE 11 compatible JS.
Can you provide more info on what bundler you're using and your babel settings? If you're using webpack, can you paste your webpack config?
from color2k.
Hi, thanks for the quick response!
The repo that directly depends on color2k is 5app/base5-ui, which doesn't use a bundler. The link will take you right to the .babelrc
file.
In the (private) repository consuming base5-ui, we're working around the issue now by explicitly compiling color2k
using the approach shown below, but it's a bit hacky since that repository doesn't directly depend on color2k
.
module: {
rules: [
{
test: /.jsx?$/,
exclude: [
/node_modules\/(?!color2k)/,
],
use: {
loader: 'babel-loader'
}
}
]
},
I'm not that well-versed in bundling & build-tooling, so I wasn't able to use this approach directly in base5-ui, which uses Babel directly without a bundler.
my current understanding it that your bundler is supposed to handle transpiling the ESM bundle down to IE 11 compatible JS.
Babel is usually, or at least by default, set up to ignore anything inside of node_modules
, so this wouldn't happen by default. But it seems to be a contentious topic and I can understand not being happy about compiling packages down to the lowest common target. 😅
However in this case it seems like the offending part of the code is small enough to be compiled by default without penalty.
Feel free to let me know if you need any other info from me to assist with this.
from color2k.
/node_modules\/(?!color2k)/,
Ooof that one-off hurts me lol.
Babel is usually, or at least by default, set up to ignore anything inside of node_modules, so this wouldn't happen by default. But it seems to be a contentious topic and I can understand not being happy about compiling packages down to the lowest common target. 😅
I do compile it down to the lowest common target for the UMD build (beeeg ugly bundle, compatible with your toaster and beyond) but for the ESM build I try to keep it relatively simple and modern.
As a quick test, I booted up create-react-app and imported color2k to see how they handle it and from what what I'm seeing, they do compile this down. I don't know if that's the result of the bundler piping it through babel differently or the minifier removing the class though.
However in this case it seems like the offending part of the code is small enough to be compiled by default without penalty.
I tried this out in #247 and i'm not too sure if I like the result for other reasons besides bundle size.
I'll have some time later this week to investigate but if you can find some articles/sources on best practices for ESM builds + how other pre-configured bundlers (e.g. create-react-app, next.js) work that would greatly help!
from color2k.
@diondiondion any update on this?
from color2k.
@ricokahler Sorry for not giving an update on this, I simply don't know enough about builds & bundlers to give you any qualified input on this. I asked some coworkers for input on this weeks ago, but they seemed to be happy to live with our color2k-specific workaround, so it seems like there really is not much you're doing wrong on your side.
from color2k.
Related Issues (20)
- Try switching to the `exports` entry point instead of `modules` HOT 1
- Action Required: Fix Renovate Configuration
- Package maintenance: semantic-release and microbundle HOT 1
- The main field in the package.json of `[email protected]` points to non-existent TypeScript file HOT 4
- Doesn't work on node 6 HOT 9
- Node 6 Compatibility Suite / Migrate to `tape` HOT 1
- Bundled outputs HOT 1
- IsDark and isLight support? I can not find HOT 1
- Dependency Dashboard
- `mix` returns `NaN` values at extremes with fully transparent colors HOT 1
- node 4 compatibility HOT 1
- Color conversion problem HOT 1
- [Feature] Invert color HOT 1
- [Feature] add support for hex8 HOT 2
- Support space separated rgb values HOT 3
- Using `toHex` with `hsla` where `a = 0` leads to a result with alpha=1 HOT 3
- Does not work with next.js SSR HOT 1
- parseToRgba can't handle percentage alpha values
- Breaks in the latest webkit version HOT 3
- How to verify if a string is a valid color value?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from color2k.