Counter

The lesson from the tutorial, as a complete, buildable file.

# include <stdlib.ARKlight>

site = Site()

@site.page("/")
def home():
    return Page(
        State("count", 0),
        Computed("squared", deps=("count",), derive=Derive.multiply("count", "count")),
        Heading("Counter"),
        Text(Bind("count")),
        Text("Squared: ", Bind("squared")),
        Button("Increment", on_click=Action.increment("count")),
        Button("Decrement", on_click=Action.decrement("count")),
        Button("Reset", on_click=Action.set("count", value=0)),
        title="Counter",
    )

What to notice

• State("count", 0) is a child of Page(...), which is what makes it declared on the page.
• Computed takes deps= (the state names it reads) and derive= (a closed-vocabulary Derive.* call) -- never a parsed or executed expression string.
• Action.increment/Action.decrement default to a delta of 1; Action.set(..., value=0) is the reset.
• Nothing here is hand-written JavaScript -- every behavior is validated against a fixed vocabulary at build time.