all repos — h3 @ c8fe1b23eac3be7beb33b222731bf5e65214424c

A tiny, extremely minimalist JavaScript microframework.

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
 
import h3 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 modules from "./modules.js";

let initialized = false;

const MainView = () => {
  if (!initialized) {
    h3.dispatch("todos/load");
  }
  initialized = true;
  const { todos, filteredTodos, filter } = h3.state();
  h3.dispatch("todos/filter", filter);
  localStorage.setItem("h3_todo_list", JSON.stringify(todos));
  return h3("div.todo-list-container", [
    h3("h1", "To Do List"),
    h3("main", [AddTodoForm, EmptyTodoError, NavigationBar, TodoList]),
  ]);
};

const SettingsView = () => {
  return h3("div.settings", [
    h3("h1", "Settings"),
    h3(
      "a.nav-link",
      {
        onclick: () => h3.go("/"),
      },
      "← Go Back"
    ),
  ]);
};

h3.init({
  element: document.getElementById("app"),
  modules,
  routes: {
    "/settings": SettingsView,
    "/": MainView,
  },
});