Moonbit の宣言的UIライブラリ Rabbit-TEA を試してみる

fnalias @html.(div, text, button)
enum Message {
  Increment
}

struct Model {
  count : Int
}

fn update(msg : Message, model : Model) -> (@tea.Command[Message], Model) {
  match msg {
    Increment => (@tea.none(), { count: model.count + 1 })
  }
}

fn view(model : Model) -> @html.Html[Message] {
  div(class="flex", [
    button(class="p-4 bg-pink-200 rounded-lg select-none text-center", click=Increment, [
      text("\{model.count}"),
    ]),
  ])
}

///| NOTE: This program is only available in the js backend,
fn main {
  let model = { count: 0 }
  @tea.startup(model~, update~, view~)
}

pub fn button[M](
  style~ : Array[String] = [],
  id? : String,
  class? : String,
  click? : M,
  childrens : Array[Html[M]]
) -> Html[M] {
  let attrs = []
  if click is Some(click) {
    attrs.push(on_click(fn(_) { click }))
  }
  common_node(style~, class?, id?, "button", attrs, childrens)
}

## Advanced Usage

The wrapper functions and properties provided here may not cover all possible use cases. If you encounter missing functionality, feel free to file an issue or use the `node()` function as a workaround. The `node()` function allows you to manually specify the tag name, attributes, and children for your HTML element, offering flexibility for advanced or uncommon scenarios.

```mbt
let html = node(
  "div",
  [style("key","value"), property("id","key")],
  [child1, child2],
)
```

pub(all) enum Variant {
  Boolean(Bool)
  Integer(Int)
  Floating(Double)
  String(String)
} derive(Show, Eq, Compare, Hash)

{
  "is-main": true,
  "import": [
    {
      "path": "Yoorkin/rabbit-tea",
      "alias": "tea"
    },
    {
      "path": "Yoorkin/rabbit-tea/variant",
      "alias": "variant"
    },
    "Yoorkin/rabbit-tea/html"
  ]
}

fn view(model : Model) -> @html.Html[Message] {
  div(class="flex", [
    button(
      class="p-4 bg-pink-200 rounded-lg select-none text-center",
      click=Increment,
      [text("\{model.count}")],
    ),
    @html.node(
      "button",
      [
        @html.property("disabled", @variant.Boolean(true)),
        @html.property("type", @variant.String("button")),
      ],
      [text("Disabled")],
    ),
  ])
}

fnalias @html.(div, text, button)


pub async fn suspend[T](f : ((T) -> Unit) -> Unit) -> T = "%async.suspend"


extern "js" fn set_timeout(f : () -> Unit, ms : Int) = "(f,ms) => setTimeout(f, ms)"


enum Message {
  Increment
  Display(String)
  LazyLog
}


struct Model {
  count : Int
  message : String
}


fn update(msg : Message, model : Model) -> (@tea.Command[Message], Model) {
  match msg {
    Increment =>
      (@tea.none(), { count: model.count + 1, message: model.message })
    Display(text) => (@tea.none(), { count: model.count, message: text })
    LazyLog => {
      let f = async fn() {
        suspend!(fn(resolve) { set_timeout(fn() { resolve(()) }, 200) })
        "Resolved"
      }
      println("LazyLog")
      (@tea.perform(Message::Display, f), model)
    }
  }
}


fn view(model : Model) -> @html.Html[Message] {
  div([
    button(class="p-4 bg-pink-200", click=Increment, [text("\{model.count}")]),
    @html.hr(),
    @html.div(class="p-4 bg-amber-50", [
      @html.p([text(model.message)]),
      button(class="p-4", click=LazyLog, [text("show text after 5s")]),
    ]),
    @html.hr(),
    @html.node(
      "button",
      [
        @html.property("disabled", @variant.Boolean(true)),
        @html.property("type", @variant.String("button")),
      ],
      [text("Disabled")],
    ),
  ])
}


fn main {
  let model = { count: 0, message: "" }
  @tea.startup(model~, update~, view~)
}

extern "js" fn set_timeout(f : () -> Unit, ms : Int) = "(f,ms) => setTimeout(f, ms)"

    LazyLog => {
      let f = async fn() {
        suspend!(fn(resolve) { set_timeout(fn() { resolve(()) }, 200) })
        "Resolved"
      }
      println("LazyLog")
      (@tea.perform(Message::Display, f), model)
    }

pub fn startup[Model, Message](
  model~ : Model,
  update~ : (Message, Model) -> (Cmd[Message], Model),
  view~ : (Model) -> @html.Html[Message],
  mount~ : String = "app"
) -> Unit {
  @dom.document()
  .get_element_by_id(mount)
  .get_exn()
  .set_inner_html("")
  let mut sandbox = None
  let mut curr_dom = @vdom.node("div", [], [])
  fn after_update(html : @html.Html[Message]) {
    guard sandbox is Some(sandbox)
    let new_dom = html.to_virtual_dom()
    new_dom.patch(curr_dom, sandbox, mount~)
    curr_dom = new_dom
  }

  sandbox = Some(@browser.Sandbox::new(model, update, view, after_update~))
  sandbox.unwrap().refersh()
}