Examples#

import { component } from 'sigx';

const Counter = component(({ signal }) => {
    const state = signal({ count: 0 });
    
    return () => (
        <button onClick={() => state.count++}>
            Count: {state.count}
        </button>
    );
});

import { component } from 'sigx';

type Todo = { id: number; text: string; done: boolean };

const TodoList = component(({ signal }) => {
    const state = signal({
        todos: [] as Todo[],
        input: '',
        nextId: 1
    });
    
    const addTodo = () => {
        if (!state.input.trim()) return;
        state.todos.push({ 
            id: state.nextId++, 
            text: state.input, 
            done: false 
        });
        state.input = '';
    };
    
    const toggle = (id: number) => {
        const todo = state.todos.find(t => t.id === id);
        if (todo) todo.done = !todo.done;
    };
    
    return () => (
        <div>
            <input 
                sync={[state, 'input']}
                placeholder="Add todo..."
            />
            <button onClick={addTodo}>Add</button>
            
            <ul>
                {state.todos.map(todo => (
                    <li 
                        key={todo.id}
                        style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
                        onClick={() => toggle(todo.id)}
                    >
                        {todo.text}
                    </li>
                ))}
            </ul>
        </div>
    );
});