Todos Example

first-render.ts

import { mount } from '@crui/core/dom/brower'
import { Title } from './Title'

mount(
   document.getElementById('root')!
   Title,
   {},
)

input-both.ts

import { h } from '@crui/core'

const input = h('input', {
    props: {
        className: 'add-todo-submit'
    },
    events: {
        input: (e) => doSomething(e)
    }
})

input-className.ts

import { hp } from '@crui/core'

const input = hp('input', { className: 'add-todo-submit' })

input-combinator.ts

import { hp } from '@crui/core'
import { we } from '@crui/core/combinators/events'

const input = we(
    hp('input', { className: 'add-todo-submit' }),
    { input: (e) => doSomething(e) }
)

input-event.ts

import { he } from '@crui/core'

const input = he('input', {
    input: (e) => doSomething(e)
})

input-reactive.ts

import { h$ } from '@crui/reactive/elems'
import { StreamBox } from '@crui/reactive/rx/box'

const $box = new StreamBox('')
const input = h$('input', {
    props: { className: 'add-todo-input' },
    $bind: { value: $box }
})

submit-store.ts

const submit = (store: TodoStore) =>
    h('button', {
        props: { className: 'add-todo-submit' },
        events: {
            click: (e) => {
                e.preventDefault()
                store.addTodo(store.input.get())
                store.input.set('')
            }
        },
        children: [
            text('Add')
        ]
    })

submit-wip.ts

const submit = h('button', {
    props: { className: 'add-todo-submit' },
    events: {
        click: (e) => {
            e.preventDefault()
            // what to do?
        }
    },
    children: [
        text('Add')
    ]
})

submit.ts

type AddTodo = (todo: string) => void

const submit = (todo: StreamBox<string>, addTodo: AddTodo) =>
    h('button', {
        props: { className: 'add-todo-submit' },
        events: {
            click: (e) => {
                e.preventDefault()
                addTodo(todo.get())
                todo.set('')
            }
        },
        children: [
            text('Add')
        ]
    })

Title-terse.ts

import { ht } from '@crui/core'

export const Title = ht('h1', 'TODO App')

Title.ts

import { hc, text } from '@crui/core'

const Title = hc('h1', [
    text('TODO App')
])

TodoStore.ts

import { StreamBox } from '@crui/reactive/rx/box'

export type Todo = {
    text: string,
}

export type TodoList = Todo[]

export class TodoStore {
    public readonly input: StreamBox<string>
    public readonly todos: TodoList
    constructor() {
        this.input = new StreamBox('')
        this.todos = []
    }
    addTodo(todo: string): void {
        this.todos.push({
            text: todo,
        })
    }
    dispose() {
        this.input.destroy()
    }
}