Examples
Todo app
About
A small server-rendered todo app with a JSON API next to it. quillo run todo.qwe, then open http://localhost:8080
Run it
$ quillo run todo.qwe --watchSource
todo.qwe
let todos = []let next_id = 1fn add_todo(text: str) -> map { let todo = { id: next_id, text: trim(text), done: false } todos = todos | push(todo) next_id += 1 todo}fn find_todo(id: int) = todos | find((t) => t.id == id)fn update_todo(id: int, changes: map) { todos = todos | map((t) => t.id == id ? t + changes : t) find_todo(id)}add_todo("Write a language")add_todo("Serve it over HTTP")// ---- views ---------------------------------------------------------------view Layout(title: str, children) = <html> <head> <meta charset="utf-8"/> <title>{title}</title> <link rel="stylesheet" href="/static/style.css"/> </head> <body>{children}</body> </html>view TodoItem(todo: map) = <li.todo #todo-{todo.id} class={todo.done && "done"}> <form method="post" action={`/todos/${todo.id}/toggle`}> <button title="toggle">{todo.done ? "☑" : "☐"}</button> </form> <span.text>{todo.text}</span> </li>route GET / { let left = todos | filter((t) => !t.done) | len <Layout title="Quillo todos"> <h1>Todos</h1> <p.muted>{left} of {len(todos)} left</p> <ul.todos>{for t in todos => <TodoItem todo={t}/>}</ul> <form.add method="post" action="/todos"> <input name="text" placeholder="What needs doing?" required/> <button>Add</button> </form> </Layout>}route GET /static/*path = file("public/" + path)// ---- HTML form posts: form fields are matched like any payload --------------route POST /todos { form: { text: str } } { if trim(text) != "" { add_todo(text) } redirect("/")}route POST /todos/:id(int)/toggle { let todo = find_todo(id) ?? reply 404 "no such todo" update_todo(id, { done: !todo.done }) redirect("/")}// ---- JSON API -----------------------------------------------------------route GET /api/todos = todosroute POST /api/todos { json: { text: str } } = reply 201 add_todo(text)route POST /api/todos = reply 400 { error: 'expected JSON like {"text": "..."}' }route PATCH /api/todos/:id(int) { json: { done: bool } } { find_todo(id) ?? reply 404 { error: `no todo ${id}` } update_todo(id, { done })}route DELETE /api/todos/:id(int) { find_todo(id) ?? reply 404 { error: `no todo ${id}` } todos = todos | filter((t) => t.id != id) reply 204}Thread
Thread 0 posts
On Todo app: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.