2024-05-05 00:34:27 +00:00
|
|
|
|
|
|
|
|
<!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>
|
2024-05-05 19:05:08 +00:00
|
|
|
<div id="app"></div>
|
|
|
|
|
|
2024-05-05 00:34:27 +00:00
|
|
|
<script type="module">
|
|
|
|
|
import {app, h} from "../src/index.js";
|
|
|
|
|
|
2024-05-05 19:05:08 +00:00
|
|
|
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) => {
|
2024-05-05 00:34:27 +00:00
|
|
|
return h("main", [
|
2024-05-05 19:05:08 +00:00
|
|
|
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"),
|
2024-05-05 00:34:27 +00:00
|
|
|
]);
|
2024-05-05 19:05:08 +00:00
|
|
|
},
|
|
|
|
|
mount: "#app"
|
|
|
|
|
});
|
2024-05-05 00:34:27 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
