$mol_db todo demo

datademo.view.tree

$redraw_datademo $mol_view
	style *
		flexDirection \column
	sub /
		<= Header $mol_view
			sub /
				<= NewText $mol_string
					value? <=> new_text? \New Item
				<= AddNew $mol_button_major
					title \Add
					click? <=> add_new? null
		<= List $mol_list
			rows <= items /
				<= Row*0 $mol_view
					sub /
						<= Text* $mol_view
							sub / <= item_text* \
						<= Remove* $mol_button_minor
							title \Remove
							click? <=> remove_item*? null

datademo.view.ts

namespace $.$$ {
    type Item = {
        id?: number
        text: string
        done: boolean
    }

    class $redraw_datademo_store extends $mol_object2 {
        @$mol_mem
        db() {
            return $mol_wire_sync(this).db_init()
        }

        async db_init() {
            type Scheme = {
                Items: {
                    Key: number
                    Doc: Item
                    Indexes: {}
                }
            }

            return this.$.$mol_db<Scheme>(
                '$redraw_datademo_v2',
                //prettier-ignore
                mig => mig.native.db.createObjectStore('Items', {
                    autoIncrement: true,
                    keyPath: 'id',
                })
            )
        }

        async add_new_item(item: Item) {
            const db = this.db()
            const { Items } = db.change('Items').stores

            const id = await Items.put(item)

            return { ...item, id: id as number }
        }

        async remove_item_by_id(id: number) {
            const db = this.db()
            const { Items } = db.change('Items').stores
            await Items.drop(id)
        }

        async list_all_items() {
            const db = this.db()
            const { Items } = db.read('Items')
            return Items.select()
        }
    }

    export class $redraw_datademo extends $.$redraw_datademo {
        @$mol_mem
        store() {
            return new $redraw_datademo_store()
        }

        @$mol_mem
        data(next?: Item[]) {
            if (next === undefined) {
                return $mol_wire_sync(this.store()).list_all_items()
            }

            return next || []
        }

        override add_new() {
            const new_item = $mol_wire_sync(this.store()).add_new_item({
                text: this.new_text().trim(),
                done: false,
            })

            this.data([new_item, ...this.data()])
        }

        override remove_item(id: any) {
            this.data(this.data().filter(item => item.id !== id))
            $mol_wire_sync(this.store()).remove_item_by_id(id)
        }

        item_row(id: any): Item {
            const row = this.data().find(item => item.id === id)
            if (!row) {
                throw new Error(`Item with id ${id} not found`)
            }

            return row
        }

        override item_text(id: any): string {
            return this.item_row(id).text
        }

        @$mol_mem
        override items() {
            return this.data().map(item => this.Row(item.id))
        }
    }
}