HTML Partials (Component Pattern)

Break HTML into reusable handler-based components.

Example 058 of the basic Soma programs: a small, commented program that teaches one thing. Every output below was printed by soma 3.2.4 when this page was built.

How it is built

The cell Partials has no face and no memory. Handlers: product_card (line 15) and run (line 22).

Generated from soma describe on this file.

The source

058_partials.cell

// ============================================================================
// 058 — HTML Partials (Component Pattern)
// ============================================================================
// Break HTML into reusable handler-based components.
//
// Run:   soma run 058_partials.cell run
// Expect:
//   <div class='card'><h2>Widget</h2><p>Price: $9.99</p></div>
//   <div class='card'><h2>Gadget</h2><p>Price: $19.99</p></div>
//   <div class='card'><h2>Doohickey</h2><p>Price: $4.99</p></div>

cell Partials {

    // A reusable "component" — renders a product card
    on product_card(name: String, price: String) {
        return render(
            "<div class='card'><h2>{name}</h2><p>Price: ${price}</p></div>",
            "name", name, "price", price
        )
    }

    on run() {
        let products = list(
            map("name", "Widget", "price", "9.99"),
            map("name", "Gadget", "price", "19.99"),
            map("name", "Doohickey", "price", "4.99")
        )

        // Use the partial for each product
        for p in products {
            let card = product_card(p.name, p.price)
            print(card)
        }

        return "done"
    }
}

What the toolchain says

$ soma check 058_partials.cell
✓ All checks passed.

$ soma run 058_partials.cell run
<div class='card'><h2>Widget</h2><p>Price: $9.99</p></div>
<div class='card'><h2>Gadget</h2><p>Price: $19.99</p></div>
<div class='card'><h2>Doohickey</h2><p>Price: $4.99</p></div>
done