Reusable components

A render function the compiler itself understands, not just one ARKlight is oblivious to.

From function to component

Any Python function that returns a page-tree node is already reusable: call it from more than one route.

@component(...)

goes further -- it promotes that function into a real, named node type, checked against a props contract and included in

arklight search

's own suggestions.

# include <stdlib.ARKlight>

@component(props={"active": Prop(default=None)})
def NavBar(active=None):
    return Container(
        Link("Home", href="/", class_name="active" if active == "home" else None),
        Link("About", href="/about", class_name="active" if active == "about" else None),
        class_name="nav",
    )

NavBar(active="home")

Keyword props only

A registered component is called with keyword props, unlike built-ins, whose positional arguments are children.

Stat(label="Signups", value=42)   # ok
Stat("Signups", 42)               # build error, not a TypeError

Prop()

with no

default=

is required -- a missing one fails the build. An unknown prop at a call site fails too; the contract is closed, not silently passed through.

Default styling

default_style={...}

is validated with the same rules

site.style(...)

uses, then folded into the stylesheet under a class named after the component, applied to its rendered root automatically. It's only emitted for components a given build actually calls.

Instance-scoped state

state={...}

gives a component its own local reactive state. Two calls to the same component on one page never share one value. Reference a declared name exactly like a page-level

State(...)

Bind(...)

on_click=Action.*(...)

, and the rest all work unchanged.

@component(state={"open": False})
def Accordion(open=False, **_):
    return Container(
        Button("Toggle", on_click=Action.toggle_bool("open")),
        Show(Predicate.truthy("open"), Text("...")),
    )

Scope boundaries

No children slot -- pass child content through a declared prop instead.
A component can't declare its own Computed(...) or Watch(...), only State(...)-equivalent local state.
arklight search NavBar doesn't print a schema summary for a user component the way it does for a built-in -- only the typo-suggestion path knows about registered components.

Try it

Register a Stat component that takes label and value props and renders Text(f"{label}: {value}").
Give Accordion a second instance on the same page and confirm the two open independently.

lists and conditionals

covers the two components that are reactive rather than static,

Show

and

Repeat

Previous: 3. Styling and layout Next: 5. Lists and conditionals