name

tutuca

description

Use when authoring or reviewing tutuca components in the MoonBit port — `@component.component(...)` definitions with a typed state struct, `#|` raw-string HTML views, `@`-directives, the `update` dispatch match plus `mutate` / `compute` and the typed render buckets, macros, `ModuleDef` modules — or when testing with `moon test` + the `@harness` package, or running the embedded `tutuca` CLI (`lint` / `render` / `show`). Covers the post-edit `tutuca lint` → `moon test` → `tutuca render --title "<example>"` verification recipe.

Tutuca (MoonBit port)

Tutuca is an immutable-state SPA framework. This skill covers the MoonBit port (marianoguerra/tutuca): components are built with @component.component(...) from a plain state struct (derive(ToJson, FromJson)) over the @tutuca.Value value layer, modules are ModuleDef values, and tests run under moon test. Read core.md first for the framework primer.

Verifying changes

After editing a tutuca module, run these before declaring the edit done:

tutuca lint                          # undefined fields/handlers (exit 2 on errors)
moon test                            # @harness interaction tests (non-zero on failures)
tutuca render --title "<example>"    # mount the example covering the change (exit 3 on crash)

tutuca here is the project's embedded CLI binary — a native main that hands its own ModuleDef to @cli.plan_with_module(argv, Some(module)) (see cli.md); there is no path-based module loading. Full recipe — when to skip moon test, adding a covering example — in core.md.

Companion skills

When authoring tutuca code, also load this if available:

margaui — the Tailwind v4 / daisyUI-compatible class library. Reach for it when the project uses MargaUI / Tailwind class lists in class= / :class=. See margaui.md for how the MoonBit port collects class names and hands them to margaui's compiler.

(The JS skill's immutable-js companion does not apply here: state is the @tutuca.Value enum — Null / Bool / Num / Str / List / Map / Fn / Obj — not immutable.js collections.)

Routing

Task	File
Authoring `@component.component(...)`, views, fields, events, conditional display	core.md
Iterating lists — `@each` / `render-each`, `@when` filtering, `@enrich-with`, `@loop-with` pagination	iteration.md
Macros — `@anode.Macro` definitions, `<x:name>` calls, slots, registration	macros.md
Component CSS — `style` / `common_style` / `global_style` scoping and pitfalls	styles.md
Designing components — responsibilities, state ownership, channel choice, do's & don'ts	component-design.md
Embedded CLI commands, flags, exit codes, linter rules	cli.md
`Bubble` / `send`-`Receive` / async `request`-`Response` channels, catch-all arms, `RequestFn` registration	request-response.md
Drag & drop, dynamic bindings (`*x`), pseudo-`x`, custom collections via the `Obj` trait	advanced.md
Setting up MargaUI styling — `collect_classes()`, the MoonBit compile step, `inject_style`	margaui.md
Runtime semantics — path steps, transaction lifecycle, dyn-var teleporting, async key pinning (`live_path`)	semantics.md
Authoring tests — `moon test` blocks, the `@harness` mount/drive/read API, designing handlers for testability	testing.md
Task-oriented recipes — iteration, filtering, conditional content, conditional attributes, dynamic vars, composition, events	patterns/README.md

Read core.md first. Reach for the others only when the task touches them — each is referenced inline from core.md so you'll be pointed there when relevant.

Tutuca (MoonBit port)

Verifying changes

After editing a tutuca module, run these before declaring the edit done:

tutuca lint # undefined fields/handlers (exit 2 on errors) moon test # @harness interaction tests (non-zero on failures) tutuca render --title "<example>" # mount the example covering the change (exit 3 on crash)

Companion skills

When authoring tutuca code, also load this if available:

margaui — the Tailwind v4 / daisyUI-compatible class library. Reach for it when the project uses MargaUI / Tailwind class lists in class= / :class=. See margaui.md for how the MoonBit port collects class names and hands them to margaui's compiler.

(The JS skill's immutable-js companion does not apply here: state is the @tutuca.Value enum — Null / Bool / Num / Str / List / Map / Fn / Obj — not immutable.js collections.)

Routing

Task

File

Authoring @component.component(...), views, fields, events, conditional display

core.md

Iterating lists — @each / render-each, @when filtering, @enrich-with, @loop-with pagination

iteration.md

Macros — @anode.Macro definitions, <x:name> calls, slots, registration

macros.md

Component CSS — style / common_style / global_style scoping and pitfalls

styles.md

Designing components — responsibilities, state ownership, channel choice, do's & don'ts

component-design.md

Embedded CLI commands, flags, exit codes, linter rules

cli.md

Bubble / send-Receive / async request-Response channels, catch-all arms, RequestFn registration

request-response.md

Drag & drop, dynamic bindings (*x), pseudo-x, custom collections via the Obj trait

advanced.md

Setting up MargaUI styling — collect_classes(), the MoonBit compile step, inject_style

margaui.md

Runtime semantics — path steps, transaction lifecycle, dyn-var teleporting, async key pinning (live_path)

semantics.md

Authoring tests — moon test blocks, the @harness mount/drive/read API, designing handlers for testability

testing.md

Task-oriented recipes — iteration, filtering, conditional content, conditional attributes, dynamic vars, composition, events

patterns/README.md

Read core.md first. Reach for the others only when the task touches them — each is referenced inline from core.md so you'll be pointed there when relevant.