search

BuilderIO / mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
https://mitosis.builder.io
MIT License
12.37k stars 549 forks source link

Request for better conditional class syntax #427

Open kylecordes opened 2 years ago

kylecordes commented 2 years ago

Feature request...

Angular has [class:foo]="bar"

Svelte has class:foo={bar}

Solid isn't too far behind, with: classList={{ active: state.active, editing: state.currentId === row.id }}

Mitosis has a CSS-in-JS construct, but conditional classes are currently just the basic JSX roughness, for example this bit from the TODO example. This syntax scales poorly to a longer list with multiple conditional classes.

class={`${props.todo.completed ? 'completed' : ''}

How about a better conditional class syntax? Ideally minimalist like Angular or Svelte, but even a Solid-like mechanism is the box would be great.

PatrickJS commented 2 years ago

for JSX they usually want you to import classnames that does this https://www.npmjs.com/package/classnames

samijaber commented 2 years ago

Yeah, this suggestion effectively entails implementing what the classnames package does into Mitosis. I think, for now, folks who like those ergonomics can import classnames manually and use it, and we can explore baking it in the future once the fundamentals of the Mitosis core are more stable.