Mithril.js: Classhelper into core

[StephanHoyer]

I'm heavily using a small helper to generate classnames.

const classy = def => Object.keys(def).filter(class => def[class]).join(' ')

I think it would be great to have that built in.

snabdom has support for this too.

Expected Behavior

m('div', { class: {
  isActive,
  someRandomClassname: someRandomCheck(),
  [someStringVar]: true
}, 'Hello world'})

should be equivalent to

m('div', { class: compact([
  isActive ? 'isActive' : null,
  someRandomCheck() ? 'someRandomClassname' : null,
  someStringVar
]).join(' ')}, 'Hello world'})

Current Behavior

Does not work.

Possible Solution

add this to class handling hyperscript.js#L54-60. Would love to create a PR if wanted.

[isiahmeadows]

-1 from me. Try https://github.com/JedWatson/classnames, if you don't want
to roll your own.

On Wed, Sep 13, 2017, 05:09 Stephan Hoyer [e-mail] wrote:

I heavily using a small helper to generate classnames.

const classy = def => Object.keys(def).filter(class => def[class]).join(' ')

I think it would be great to have that built in.

snabdom https://github.com/snabbdom/snabbdom#the-class-module has
support for this too.
Expected Behavior

m('div', { class: {
isActive,
someRandomClassname: someRandomCheck(),
[someStringVar]: true
}, 'Hello world'})

should be equivalent to

m('div', { class: compact([
isActive ? 'isActive' : null,
someRandomCheck() ? 'someRandomClassname' : null,
someStringVar
]).join(' ')}, 'Hello world'})

Current Behavior

Does not work.
Possible Solution

add this to class handling hyperscript.js#L54-60

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/MithrilJS/mithril.js/issues/1967, or mute the thread
https://github.com/notifications/unsubscribe-auth/AERrBC8wsMddw2ELBzMr_JjLsKDAtDu0ks5sh5vfgaJpZM4PVzUN
.

[cavemansspa]

this seems like a practical addition to me considering that generating conditional class name lists are commonplace in a mithril app.

maybe just add as m.classy as a convenience function?

there was further discussion related to this on gitter regarding @porsager bss lib. was that also a consideration for moving under mithril community?

[tivac]

Utilities like these shouldn't be in mithril.

classnames is a perfect example of a small, targeted, optimized lib that handles this use-case excellently.

[tivac]

I just saw classwrap which seems promising as well.

[StephanHoyer]

I know all those libs and I still find all of them way to much. The proposed one is much simpler and a allows everything that those libs allow but in a uniform simple way. No flattening, no mix and match of arrays and objects. Just one object. And sure, I can roll my own, thats what I already do.

But since this is a pretty obvious use case and has only a small performance impact (one string/object check) I thought it would be worth adding.

[StephanHoyer]

maybe one could use a property classes for this.

m('div', {
  classes: { ... }
}, 'hello')

[maranomynet]

Adding a magic classes prop would bring a fourth way to declare classNames on elements.

m('div.class1', {
        'class': 'class2',
        className: 'class3',
        classes: { class4: true },
    },
    'Class War!'
);

Regardless of that, IMO this feature should be handled outside of mithril core.

[StephanHoyer]

just created https://github.com/StephanHoyer/classies