iazel

import { cloneRW } from '@crui/reactive/rx/box/clone'

const input = (store: TodoStore) => 
    h('input', sc2(
        props({ className: 'add-todo-input' }),
        bindValue(cloneRW(store.getInput()))
    ))

iazel

const AddTodo = (store: TodoStore) => hc('div', [
    input(store),
    submit(store)
])

iazel

import { StreamBox } from '@crui/reactive/rx/box';
import { RW$B, R$L, DRW$L } from '@crui/reactive/rx/box/types';
import { StreamList } from '@crui/reactive/rx/list';
export type Todo = {
    text: string,
}
export type TodoList = R$L<Todo>
export class TodoStore {
    private readonly input: StreamBox<string>

iazel

import { c$map } from '@crui/reactive/setups/map'

const TodoList = (store: TodoStore) => 
    h('ul', c$map( 
       store.todos,
       TodoElement,
    ))

const TodoElement = ({ text }: Todo) =>
    ht('li', text)

iazel

addTodo(todo: string): void {
    this.todos.push({
        text: todo,
        done: new StreamBox(false)
    })
}

iazel

import { h, ht, sc2, children } from '@crui/core'
import { bindChecked } from '@crui/reactive/setups/bind'

const hcc = (tag: Tag, className: string, cs: Component[]) =>
    h(tag, sc2(
        props({ className }),
        children(cs)
    ))

export const TodoElement = (todo: Todo) => (

iazel

import { h, ctext, onClick } from '@crui/core'
import { map, RW$B } from '@crui/reactive/rx/box'
import { $props } from '@crui/reactive/setups/props'

const Filter = (
    $vis: RW$B<Visibility>,
    filterVis: Visibility,
    label: string
) => {
    const className = map($vis, (v) => (

iazel

class TodoStore {
    private readonly visibility: StreamBox<Visibility>
    
    constructor() {
        this.visibility = new StreamBox(Visibility.ALL)
    }
    
    getVisibility(): RW$B<Visibility> {
        return this.visibility
    }

iazel

class TodoStore {
    private readonly visibilityFilter: $Predicate$<Todo> & Destroyable
    
    constructor() {
        this.visibilityFilter = map(this.visibility, vis2pred)
    }
    
    getVisibilityFilter(): $Preidcate$<Todo> {
        return this.visibilityFilter
    }

iazel

import { c$filter$$ } from '@crui/reactive/setups/filter'

const TodoList = (store: TodoStore) =>
    h('ul', sc2(
        props({ className: 'tood-list' }),
        c$filter$$(
            store.getTodos(),
            TodoElement,
            store.getVisibilityFilter(),
        )