helper function like classNames?
https://www.npmjs.com/package/classnames
I would like to see built-in classNames function like 'mergeProps'.
Is there anything already?.. classList is not enough to mix static class & conditional stuff..
npm
classnames
A simple utility for conditionally joining classNames together. Latest version: 2.3.2, last published: 3 months ago. Start using classnames in your project by running
npm i classnames. There are 36908 other projects in the npm registry using classnames.28 Replies
A built-in helper function for that is nonsensical IMO, because the framework has the privilege to be able to just support this out of the box with no extra APIs, you should just write
class={} and that's the helper
There isn't an official API for that as far as I'm aware
What classes are you having troubles with? Perhaps there's a different way to write the code to make it work 🤔TBF there has been proposal to make this built into the class attribute itself (one, by merging class and classList and two, by adding support for arrays)
what's the thinking about that? like does it seem like this might get implemented?
it's a bit unfriendly that we have two attributes (previously three) to manage classes
like what if we had:
class={[someClass, { classA: someCondition, classB: someOther }]}All three still works in practice, that's probably something that should get addressed eventually
I'm basically doing this in voby, I don't see a reason to do it any other way frankly
yeah I mean if we had this we can basically drop the motivation for people to use packages that manages classes
clsx I believe is the goal feature
6M+ downloads per week, that thing shouldn't exist
if we had it built into the class attribute it would be such a great win
definitely
React would look like a primitive tool by comparison, not only it gives you an API from the stone age (only string accepted), it's not even called right (className vs class)
Considering a PR? 😉
I think there was an existing PR for this? Not sure. If not then I'll probably work on it
@davedbase here's the one year old PR https://github.com/ryansolid/dom-expressions/pull/88
GitHub
Add full functionality of
classnames package to classList by kcir...This allows classList to accept an array of classNames, omitting falsey values (except for 0, reasoning described in comment).
This will allow users to put optional classNames in className, and not...
this should also support
class={[props.class, someClass, ...]} imo, otherwise this creates another event handler-like problem where we have to handle both the array and callback forms
and it's not backwards compatible for libraries which use JSX.IntrinsicElements and expect props.class to be undefined or a stringyeah, My vision is that we only have a single attribute to manage classes, with the functionality of the original classList or better, clsx
clsx already supports classList-like resolution
it should be backwards-compatible, the type it supports is just expanded
I see what you mean. Although it's about time to apply a fix 🤣
i just wanted to point it out
it's probably fine tbh
Hmmmm I wonder why it’s been open as a PR for so long
only person that can answer that is @ryansolid
but iirc on his defense it is about compilation quirks
on how Solid optimizes classes for templates and how classList is compiled
Could we not facilitate this as a separate plugin? Something for SolidJS community to maintain?
The JSX can't be extended in userland if not via directives, DX would need to be patched
There could be a use:class directive potentially 🤔 but imo directives the way they are implemented they are tedious to use, like imagine if you had to have something in scope each time you use the class attribute, it would drive people insane 😂 and ultimately each time you'd write "use:class" you'd just think "why can't I just write 'class'"
the types would be an "oof" factor
primitives could work but
the main benefit of actually going for the first-class support is so that Solid can generate optimized templates/class application
I'm fine using clsx package. But I don't like that there are 3 different ways to add classes now... and that I'm using all of them depending on a day..
yeah, and to think that there are 6M downloads per week
clsx 8 and classnames 10 which almost adds up to react. not surprising 😅
actually it's more then react lol
almost adds up to svelte then
how does Svelte and Vue approah class composition
Vue works similarly to solid now.
class for strings and :class for string templates and objects. (you can add them both to one el)
also since top-most element is inheriting all the attributes, you don't have to do this as muchhis point was if the proposed class feature is merged, template strings would fail since class can accept arrays/objects
the least we can do there is compile template strings back to array (which is easy in Babel)