helper function like classNames?

[uncut galleon]

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..

[cobalt mica]

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 🤔

[obsidian iris]

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)

[cobalt mica]

what's the thinking about that? like does it seem like this might get implemented?

[obsidian iris]

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 }]}

[cobalt mica]

All three still works in practice, that's probably something that should get addressed eventually

[cobalt mica]

I'm basically doing this in voby, I don't see a reason to do it any other way frankly

[obsidian iris]

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

[cobalt mica]

6M+ downloads per week, that thing shouldn't exist

[obsidian iris]

if we had it built into the class attribute it would be such a great win

[cobalt mica]

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)

[plush pelican]

Considering a PR? 😉

[obsidian iris]

I think there was an existing PR for this? Not sure. If not then I'll probably work on it

[obsidian iris]

@plush pelican here's the one year old PR https://github.com/ryansolid/dom-expressions/pull/88

[charred pecan]

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 string

[obsidian iris]

yeah, 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

[obsidian iris]

it should be backwards-compatible, the type it supports is just expanded

[charred pecan]

class={`${props.class} my-class`}

[obsidian iris]

I see what you mean. Although it's about time to apply a fix 🤣

[charred pecan]

i just wanted to point it out

it's probably fine tbh

[plush pelican]

Hmmmm I wonder why it’s been open as a PR for so long

[obsidian iris]

only person that can answer that is @raven compass

but iirc on his defense it is about compilation quirks

on how Solid optimizes classes for templates and how classList is compiled

[plush pelican]

Could we not facilitate this as a separate plugin? Something for SolidJS community to maintain?

[cobalt mica]

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'"

[obsidian iris]

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

[timid karma]

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..

[obsidian iris]

yeah, and to think that there are 6M downloads per week

[timid karma]

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

[obsidian iris]

how does Svelte and Vue approah class composition

[timid karma]

Vue works similarly to solid now.
class for strings and :class for string templates and objects. (you can add them both to one el)

[timid karma]

also since top-most element is inheriting all the attributes, you don't have to do this as much

[obsidian iris]

his point was if the proposed class feature is merged, template strings would fail since class can accept arrays/objects