<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tagged UI Creation Lib</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import {app, h} from "../src/index.js";
const $ = document.querySelector.bind(document);
const todo = app({
state: {todos: ["one", "two", "three"], value: ""},
actions: {
add: (state, event) => {
return {...state, todos: [...state.todos, $("#todo").value]};
}
},
view: (state, actions) => {
return h("main", [
h("h1", "Todo App"),
h("hr"),
h("div", [
h("label", "Todo"),
h("input", {id: "todo", value: state.value}),
h("button", {onclick: actions.add}, "Add")
]),
h("hr"),
h("ul", state.todos.map((i) => {
return h("li", {}, i)
})
),
h("hr"),
h("strong", `Count: ${state.todos.length}`),
h("hr"),
]);
},
mount: "#app"
});
</script>
</body>
</html>