Deja Vu: A small JS framework for doodads

Deja Vu is a set of small libraries (each minfies and compresses to under a kilobyte, the whole bundle, uncompressed in any form is less than 6kb) under a meant to make it pleasant to make small JS doodads. There are currently 3 libraries:

deja

deja makes patching changes into the DOM concise: 

    deja.patch(deja.q1("#app"), {
        "#my-app-title": "Deja Example",
        "#my-app-button": { on: { click: () => { console.log("clicked!"); } } },
    }
It also makes it easy to interact with DOM elements: 

    const el = deja.grab({
        title: "#my-app-title",
        color: ["#my-app-title", "style.background-color"]
    })
    el.title = "new title";
    el.color = "blue";
Finally, deja makes it easy to use html template tags to build out more dynamic pages. 

    <div id="todos"> </div>

    <template id="todo">
    <div class="todo">
    <input type="check" name="completed" />
    <input type="text" name="description"/>
    </div>
    </template>
            

    const todos = deja.q1("#todos");
    const addTodo = (description) => { 
        const newTodo = deja.from("#todo");
        const todoEl = deja.q1(newTodo, ".todo");
        deja.patch(newTodo, {
            "[name=description]": {t: description},
            "[name=completed]": { on: { click() { todoEl.remove() } } }
        });
        todos.append(newTodo);
    }

doptics

Doptics (or dom-optics) is a utility focused on answering the question of what the "default" value to get and set on a given DOM node should be. For the most part, this is mapped to `innerText`, but for form inputs and `output`, it's mapped to `value`. Doptics also lets you define your own lens types. 


    doptics.add("number", (x) => x.toString(), (x) => parseNumber(x));
    doptics.add("date", (x) => x.toString(), (x) => x && new Date(...x.split("-")));

chalk

Chalk is a small message bus library, that facilitates communication between parts of a larger program. 


    const board = chalk();
    board.msg("sending", "a", "message");
    board.when("sending a *", (m) => {
        console.log("Got: " + m);
    });

    board.msg("only", "sent", "once");
    board.once("only sent once", () => {
        console.log("Got the message, now this handler will be removed");
    });

    board.when("messages *", (m, unsub) => {
        if (m === "done") {
            unsub();
        }
        console.log("Got: " + m);
    });

    board.msg("messages", "foo");
    board.msg("messages", "done");

TODO:

The remaining gaps in the deja-vu libraries are:

Examples