NAME

Chandra::Component - Reactive UI components for Chandra

SYNOPSIS

package MyCounter;
use Object::Proto;

BEGIN {
    object 'MyCounter',
        extends => 'Chandra::Component',
        'count:Int:default(0)',
        'label:Str:default(Counter)',
    ;
    Object::Proto::import_accessors('MyCounter');
}

sub render {
    my ($self) = @_;
    my $count = $self->count;
    my $label = $self->label;
    return qq{
        <div class="counter">
            <h2>$label: $count</h2>
            <button data-action="increment">+</button>
            <button data-action="decrement">-</button>
        </div>
    };
}

sub on_increment { $_[0]->count($_[0]->count + 1); $_[0]->update }
sub on_decrement { $_[0]->count($_[0]->count - 1); $_[0]->update }

# Usage:
my $counter = MyCounter->new(label => 'Clicks');
$counter->mount($app, '#main');

DESCRIPTION

Chandra::Component is an Object::Proto-based reactive component system. Components encapsulate state, rendering, and event handling.

Lifecycle

mount($app, $selector) - render + inject into DOM, bind events

unmount() - remove from DOM, unbind events

update() - re-render the component's DOM subtree

Lifecycle Hooks (override in subclass)

on_mount() - called after first render

on_unmount() - called before removal

on_update() - called after re-render

Event Binding

Use data-action="method_name" in your HTML. Clicking the element calls on_method_name() on the component. Parameters can be passed with data-action="method:arg1:arg2".

Children

$parent->child($child_component);

Children are rendered inside the parent and automatically mounted/unmounted with it.

SEE ALSO

Chandra::App, Chandra::Element