Todo list

Every piece from the lists-and-conditionals lesson, assembled into one file.

# include <stdlib.ARKlight>

site = Site()

@site.page("/")
def home():
    return Page(
        State("draft", ""),
        State("tasks", []),
        Heading("Tasks"),
        Text("Add a task, then clear the list whenever you're done.", class_name="muted"),
        Container(
            Input(bind_value=Bind.model("draft")),
            Button("Add", on_click=Action.append("tasks", Bind("draft"))),
            Button("Clear all", on_click=Action.set("tasks", value=[])),
            class_name="cluster",
        ),
        Watch("tasks", then=Action.reset("draft")),
        Show(Predicate.is_empty("tasks"), Text("No tasks yet.", class_name="muted")),
        Container(
            Repeat("tasks", template=lambda: Text(RepeatItem.value())),
            class_name="stack card",
        ),
        title="Tasks",
    )

What to notice

• State("draft", "") and State("tasks", []) are both children of Page(...), which is what makes them declared on the page.
• Bind("draft") as Action.append's value argument reads whatever the input currently holds at the moment the button is clicked.
• Watch("tasks", then=Action.reset("draft")) fires whenever tasks changes, so the input empties itself right after a task is added.
• Show(Predicate.is_empty("tasks"), ...) and Repeat("tasks", ...) read the same list; nothing here is hand-written JavaScript -- every behavior is validated against a fixed vocabulary at build time.
• .cluster, .stack and .card are the built-in layout and style utility classes from styling and layout; nothing here needed a stylesheet of its own.