#moon-element

#Quick start

curl -fsSL https://cli.moonbitlang.com/install/unix.sh | bash   # MoonBit toolchain
moon add chen333w/moon-element                                  # this package

///|
fn badge_view(props : @core.Props) -> @core.View {
  let label = props.get_string("label").unwrap_or("?")
  // VText is escaped: <b>hi</b> renders as literal text
  @core.View::element("span", [("class", "pill")], [@core.View::text(label)])
}

///|
pub fn register() -> Unit {
  @dom.define_component(
    "x-badge",
    [
      @core.AttrSpec::string("label", "?"),
      @core.AttrSpec::string("tone", "info"),
    ],
    badge_view,
    events=[@core.EventSpec::crossing("badge-changed")],
    on_change=fn(id, _name) { @dom.dispatch(id, "badge-changed", "", false) },
  )
}

<x-badge label="styled by the component" tone="info"></x-badge>
<script type="module" src="./your-bundle.js"></script>

moon build --target js --release
python3 -m http.server 8000          # from the repository root
open http://localhost:8000/examples/demo/

node examples/demo/verify.mjs

#Layout without a browser

let view = @core.View::element("div", [("class", "card")], [
  @core.View::element("h2", [], [@core.View::text("Total")]),
  @core.View::element("span", [("class", "num")], [@core.View::text("42")]),
])
let css = #|.card { display: flex; padding: 12px; gap: 8px; width: 100%; }
let (style_root, box) = @pipeline.run(view, css, 640.0, @pipeline.measure_monospace)
println(@svg.to_json(style_root, box))   // deterministic geometry, one line per box
println(@svg.to_svg(style_root, box))    // a standalone SVG document

#API

#Commands

moon check --deny-warn --target all          # warnings are errors
moon test --target all --deny-warn           # wasm, wasm-gc, native, js
moon test --target js --enable-coverage && moon coverage report -f summary
moon run cmd/main -- x-counter               # generate a component skeleton (shadow DOM)
moon run cmd/main -- x-panel --mode light    # generate a light DOM skeleton
moon build --target js --release             # browser-loadable JS
moon run cmd/main -- layout --width 640      # lay the dashboard out headlessly (JSON)
moon run cmd/main -- layout --format svg     # ... or emit an SVG document
python3 examples/dashboard/verify_layout.py  # 18 checks over the CLI output

#Layout

core/    attribute parsing, lifecycle, props, rendering, CSS scoping, events, tag validation
dom/     js-only adapter: DOM callbacks, shadow/light rendering, CustomEvent dispatch
style/   CSS parsing, selector matching, cascade and computed values
layout/  box tree and flexbox geometry, with an injected text measurer
svg/     deterministic layout JSON and SVG output
pipeline/ view tree -> styled nodes -> geometry
examples/demo/                 four components, an interactive page and verify.mjs
examples/generated-*/          CLI output committed so CI compiles and drift-checks it
cmd/main/                      the CLI

#Limitations

• Rendering replaces the content as a whole, with no diff. Keep state in attributes and handle DOM events with on_action: a listener attached to a rendered element is dropped by the next render.
• Tag name validation accepts an ASCII subset (the spec allows some non-ASCII).
• ::slotted() and :host-context() are shadow DOM semantics and are not rewritten.
• No threads or async (MoonBit has no OS threads, and async is complete on native only).

• no adjacent-margin collapsing, no float, no absolute or relative positioning, no grid;
• text does not wrap: a run wider than its container overflows it;
• selectors cover type, class, id, compounds, descendant and child combinators, and lists; pseudo classes, attribute selectors, sibling combinators and @media blocks are skipped with a warning;
• percentages resolve against the containing block for box properties only, so percentage padding, margin and gap are treated as zero, and gap uses the row value.

#License