Examples

Counter

import {
     view,
     Bold,
     Button,
     FlexContent,
     Paragraph,
     store,
     Text
} from 'javascript-ui';

const counter = store(0);

view([
    FlexContent([
        Button('-').onClick(() => {
            counter.update((value) => --value);
        }),
        Paragraph([
            Text('Count is '),
            Bold().model(counter),
        ]),
        Button('+').onClick(() => {
            counter.update((value) => ++value);
        }),
    ]).gap('0 10px'),
]);

---

ToDo

import {
    view,
    Button,
    Div,
    FlexContent,
    ForEach,
    List,
    ListItem,
    Model,
    Paragraph,
    store,
    Text,
    TextInput,
} from 'javascript-ui';

const items = store([]);
const taskName = store();

view([
    FlexContent([
        TextInput()
            .placeholder('Enter a task...')
            .model(taskName).fitWidth(),
        Button('Add').onClick(() => {
            items.update((items) => {
                items.push(taskName.get());
                taskName.set('');
                return items;
            });
        }),
    ]).gap('10px'),
    Model(items, (tasks) => {
        return [
            List([
                ForEach(tasks, (value, key) => {
                    return [
                        ListItem([
                            FlexContent([
                                Div(value).fitWidth(),
                                Button('Remove').onClick(() => {
                                    items.update((items) => {
                                        items.splice(key, 1);
                                        return items;
                                    });
                                }),
                            ]).gap('10px').placeItems('center'),
                        ]),
                    ];
                }),
            ]),
        ];
    }),
]);