#marianoguerra/tutuca

#What's in it

#Views (views~ + gen-views)

moon run --target native cmd/main -- gen-views demo/counterlib/counter.html --name Counter
# -> demo/counterlib/counter_view_gen.mbt      (the view vocabulary as types)
# -> demo/counterlib/counter_view_ir_gen.mbt   (the compiled views + the wrapper)
# both checked in; regenerate, never edit

<script type="tutuca/state">
  state Counter { label: String, count: Int, history: Array[Int] }
  receive Counter { ResetTo(Int) }
</script>

update=(s : CounterState, msg, _ctx) => match CounterMsg::from_dispatch(msg) {
  Some(Add(d)) => ...          // `d` is a Double: `@on.click="add 1"`
  Some(SetLabel(l)) => ...     // `l` is a String: `@on.input="setLabel value"`
  Some(ResetCount) => Unhandled
  Some(Unknown(_, _)) | None => Unhandled
}

#Several components, and macros

<template id="macro:icon" data-size="'24'" data-color="'currentColor'">
  <svg :width="^size" :height="^size" :stroke="^color"><path :d="^path"></path></svg>
</template>
<template id="Gallery">
  <x:icon :size=".size" :path=".heart"></x:icon>
</template>

#The compiled tree

counter_component(
  init=CounterState::fresh(),
  update=(s, msg, _ctx) => ...,
)

@anode.View::from_ir(
  "main",
  @anode.h("div", [@anode.attr("class", "stat")], [
    @anode.h("button", [@anode.attr("class", "btn"), @anode.eid(0)], [
      @anode.text("+"),
    ]),
    @anode.dyn_text(Field("count")),
  ]),
  [[@anode.on("click", Method("inc"))]],
)

moon run --target native cmd/dev -- gen-views    # generate + fmt
git diff --exit-code                             # drift check

tutuca watch demo/counterlib      # or a file, or bare for the whole project

#In the playground

#vdom

• vdom/ — core types and algorithms (h, to_dom, diff_props, morph_node, morph_children, render, unmount), backend-agnostic.
• vdom/memdom/ — in-memory DOM. Runs on every backend; the primary test substrate (unit suites ported from the JS tests plus quickcheck properties: morph ≡ fresh render, keyed-reorder identity preservation, diff_props roundtrip).
• vdom/browser/ — js-backend adapter over the real DOM via mizchi/js (supported_targets = "js").

///|
test "render a tree into memdom" {
  let doc = @memdom.document()
  let container = @vdom.DomNode::create_element(doc, "DIV", None, None)
  let opts = @vdom.RenderOpts::new(doc)
  let prev = @vdom.render(
    @vdom.h("ul", attrs={ "className": Str("list") }, childs=[
      @vdom.h("li", key="a", childs=[@vdom.text("one")]),
      @vdom.h("li", key="b", childs=[@vdom.text("two")]),
    ]),
    container,
    opts,
  )
  // incremental re-render: morphs in place, preserves keyed nodes
  let _ = @vdom.render(
    @vdom.h("ul", attrs={ "className": Str("list") }, childs=[
      @vdom.h("li", key="b", childs=[@vdom.text("two")]),
      @vdom.h("li", key="a", childs=[@vdom.text("one!")]),
    ]),
    container,
    opts,
    prev~,
  )
  inspect(
    container.to_html(),
    content=(
      #|<div><ul class="list"><li>two</li><li>one!</li></ul></div>
    ),
  )
}

///|
let opts = @browser.window_opts()

///|
let container = @browser.BrowserNode::from_element(
  @dom.window().document().getElementById("app").unwrap(),
)

///|
let prev = @vdom.render(view(state), container, opts)

#Differences from the JS vdom

• Attribute values are a closed enum (Str/Num/Bool/Html); dangerouslySetInnerHTML: { __html } is spelled Html("...").
• Namespaces are an enum (Svg/MathMl/Other(uri), None = HTML), only converted to URI strings at the DOM boundary.
• h() takes childs : Array[Vdom] — the JS iterable-flattening and primitive→text coercion don't apply; text() is explicit. Fragment children are still spliced.
• key/namespace are labeled arguments (key="a", ns=Svg), though "key"/"namespace" entries in the attrs map are also honored.
• Object/array-valued custom-element properties are spelled Data(json) (the JS h(tag, { items: [1, 2, 3] }) case); they always take the property path and diff by VALUE, so an equal-content new object does not re-invoke the element's setter (JS compares by reference).
• Out of scope: event handlers (tutuca delegates events at the root; vdom never routed them).
• Double::to_string matches JS String(n) for attribute-realistic values; extremes like 1e21 format differently.

#Building, testing, running

moon run --target native cmd/dev -- setup   # npm install (happy-dom) + enable git hooks
moon run --target native cmd/dev -- check    # moon check across wasm-gc, js, native
moon run --target native cmd/dev -- test     # moon test across the three targets
moon run --target native cmd/dev -- build    # moon build wasm-gc + native CLI + js
moon run --target native cmd/dev -- dist     # assemble a self-contained dist/

#Targets

#License