example/assets/js/app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import h3, { createRegion, createRouter, createApp } from "./h3.js"; import AddTodoForm from "./components/addTodoForm.js"; import EmptyTodoError from "./components/emptyTodoError.js"; import NavigationBar from "./components/navigationBar.js"; import TodoList from "./components/todoList.js"; import store from "./store.js"; const app = () => { return h3("div#todolist.todo-list-container", [ h3("h1", "To Do List"), h3("div#main-view"), ]); }; const main = () => { const { todos, filteredTodos, filter } = store.get(); const [error, updateError] = createRegion(EmptyTodoError); store.on("error/update", updateError); const [mainArea, updateMainArea] = createRegion(() => { store.dispatch("todos/filter", filter); localStorage.setItem("h3_todo_list", JSON.stringify(todos)); return h3("div#main-area", [NavigationBar(), TodoList()]); }); store.on("mainArea/update", () => { updateMainArea(); }); return h3("main", [ AddTodoForm, error, mainArea ]); } store.dispatch("todos/load"); createApp('app', app()); export const router = createRouter({ fallback: "/", id: "main-view", routes: { "/": main(), }, }); router.start(); if (router.route.params.log) { store.on("log", (state, data) => console.log(data, state)); } |