interpolation classnames

classnames.md

(+) infix operator

Before:

Cn.("one" + "two" + "three")

After:

`one two three`

append

Before:

Cn.append("one", "two")

After:

`one two`

fromList

Before:

Cn.fromList(["one", "two", "three"])

After:

`one two three`

on

Before:

Cn.("one" + "two"->on(condition))

After:

`one ${condition ? "two" : ""}`

onSome

Before:

Cn.("one" + "two"->onSome(myOption))

After:

`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 => ""
  }
}`

take

Before:

Cn.("one" + Some("two")->take)
Cn.("one" + None->take)

After:

let take = Belt.Option.getWithDefault // or whatever

`one ${take(Some("two"), "")}`
`one ${take(None, "")])}`

onOk

Before:

Cn.("one" + "two"->onOk(Ok("ok")))
Cn.("one" + "two"->onOk(Error("err")))

After:

open Belt // this works too

`one ${Result.isOk(Ok("ok")) ? "two" : ""}`
`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(_) => ""
  }
}`

onErr

Before:

Cn.("one" + "two"->onErr(Ok("ok")))
Cn.("one" + "two"->onErr(Error("err")))

After:

open Belt
`one ${Result.isError(Ok("ok")) ? "two" : ""}`
`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