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 --watch

Source

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}

See todo.qwe on GitHub

Thread
11Useful? Like it, or add to its thread below.

Thread 0 posts

On Todo app: questions, tips, corrections, and code that uses it.

No posts yet. The first one opens the thread.