Primitives
Primitives¶
Wybthon uses a signals-first reactive model inspired by SolidJS. Components can be stateless (return a VNode directly) or stateful (create signals during a one-time setup phase and return a render function that re-runs automatically when signals change).
create_signal¶
Create a reactive signal. Returns (getter, setter).
from wybthon import component, create_signal, div, p
@component
def Counter(initial: int = 0):
count, set_count = create_signal(initial)
def render():
return div(
p(f"Count: {count()}"),
)
return render
The setter accepts a plain value:
set_count(42)
Signals created during setup persist for the lifetime of the component -- no cursor system, no "rules of hooks".
create_effect¶
Create an auto-tracking reactive effect. The effect runs immediately and re-runs whenever any signal it reads changes.
from wybthon import component, create_effect, create_signal
@component
def Logger():
count, set_count = create_signal(0)
create_effect(lambda: print("count is now", count()))
def render():
return ...
return render
Use on_cleanup inside a create_effect callback to register cleanup
that runs before each re-execution and on disposal:
def tracked():
val = count()
on_cleanup(lambda: print(f"cleaning up for {val}"))
create_effect(tracked)
create_memo¶
Create an auto-tracking computed value. Returns a getter function that re-computes only when its dependencies change.
doubled = create_memo(lambda: count() * 2)
print(doubled()) # reactive read
on_mount¶
Register a callback to run once after the component mounts.
from wybthon import component, on_mount
@component
def MyComponent():
on_mount(lambda: print("Component is in the DOM!"))
def render():
return ...
return render
on_cleanup¶
Register a cleanup callback.
- Inside a component's setup phase: runs when the component unmounts.
- Inside a
create_effectcallback: runs before each re-execution and on disposal.
from wybthon import component, on_cleanup, on_mount
@component
def Timer():
on_mount(lambda: start_timer())
on_cleanup(lambda: stop_timer())
def render():
return ...
return render
get_props¶
Return a reactive getter for the current component's props. Useful in stateful components that need to react when a parent changes props:
from wybthon import component, create_effect, get_props
@component
def Search(query: str = ""):
props = get_props()
create_effect(lambda: print("query changed:", props()["query"]))
def render():
return ...
return render
Primitives vs. class components¶
@component + primitives |
Class component | |
|---|---|---|
| State | create_signal |
self.count = signal(0) |
| Side effects | create_effect / on_mount |
on_mount / on_cleanup |
| Computed | create_memo |
computed(lambda: ...) |
Both styles are fully supported; choose whichever fits your situation.
For new code, @component with signals-first primitives is recommended.