Why not just do ["flex", "items-center"]->Js.Array2.joinWith(" ")
? If you really want to, you can shorten that: cx(["flex", "items-center"])
.
May I suggest the example README, converted:
(+) infix operator
Before:
Cn.("one" + "two" + "three")
After:
cx(["one", "two", "three"])
append
Before:
Cn.append("one", "two")
After:
cx(["one", "two"])
fromList
Before:
Cn.fromList(["one", "two", "three"])
After:
cx(["one", "two", "three"])
on
Before:
Cn.("one" + "two"->on(condition))
After:
cx(["one", condition ? "two" : ""])
onSome
Before:
Cn.("one" + "two"->onSome(myOption))
After:
cx(["one", myOption == None ? "" : "two"])
mapSome
Before:
type t =
| One
| Two
| Tree;
Cn.(
"one"
+ mapSome(
Some(Two),
fun
| One => "one"
| Two => "two"
| Tree => "three",
)
)
After:
type t =
| One
| Two
| Tree
[
"one",
switch Some(Two) {
| Some(One) => "one"
| Some(Two) => "two"
| Some(Tree) => "three"
| None => ""
}
]->cx
take
Before:
Cn.("one" + Some("two")->take)
Cn.("one" + None->take)
After:
let take = Belt.Option.getWithDefault // or whatever
cx(["one", take(Some("two"), "")])
cx(["one", take(None, "")])
onOk
Before:
Cn.("one" + "two"->onOk(Ok("ok")))
Cn.("one" + "two"->onOk(Error("err")))
After:
open Belt // this works too
cx(["one", Result.isOk(Ok("ok")) ? "two" : ""])
cx(["one", Result.isOk(Error("err")) ? "two" : ""])
mapOk
Before:
type t =
| One
| Two
| Tree;
Cn.(
"one"
+ mapOk(
Ok(Two),
fun
| One => "one"
| Two => "two"
| Tree => "three",
)
)
After:
type t =
| One
| Two
| Tree
[
"one",
switch Ok(Two) {
| Ok(One) => "one"
| Ok(Two) => "two"
| Ok(Tree) => "three"
| Error(_) => ""
}
]->cx
onErr
Before:
Cn.("one" + "two"->onErr(Ok("ok")))
Cn.("one" + "two"->onErr(Error("err")))
After:
open Belt
cx(["one", Result.isError(Ok("ok")) ? "two" : ""])
cx(["one", Result.isError(Error("err")) ? "two" : ""])
mapErr
Before:
// example has a bug
After:
//
none
Before:
Cn.(
switch (x) {
| Loading => Css.loading
| Loaded => ""
}
);
// vs
Cn.(
switch (x) {
| Loading => Css.loading
| Loaded => none
}
);
After:
// same
Benefits:
- No infix addendum, combinator, warning 44, local open, extension point, curry/uncurry.
- Only api/concepts needed: function, array, switch.
- Readability++.
- Juniors and seniors end up writing the same simple code.
- Check the amazing output difference!
- Free syntax upgrade =)
I understand the tidiness with the spacing and all, but you can just swap that generic joinWith
with another one that collapse spaces if you really want that.
Likewise, you can do:
`one ${condition ? "two" : ""} three`->cleanUp
Equivalent conversion here.
Another perspective is that generating css classnames is the simplest scenario of string concatenation. If we’re resorting to extension point, combinator, infix and others then maybe we need to reconsider.