hoq

hoquet

A tiny, minimal, platform-native, vanilla JavaScript web component library.

Showing:

Popularity

Downloads/wk

6

GitHub Stars

19

Maintenance

Last Commit

4d ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Hoquet

A tiny, minimal, platform-native, vanilla JavaScript web component library.

The goal of this project is not necessarily to suggest using this particular library (although I use it in my own projects). Instead, the goal is as much to demostrate patterns you can use in your own projects using Web Components without having to use any framework/library.

HTMLElement mixin

The Hoquet mixin is the core of the library. It is designed to wrap any class that extends HTMLElement. It provides a small number of interfaces for dealing with template rendering, stylesheet construction, Shadow DOM, and attribute observation/reflection. Nothing that is provided is required. The template and stylesheets for each component are constructed only once, when the class is declared.

The following is a traditional todo app implementation using platform-native web components and the Hoquet mixin. It consists of a TodoItem component that subclasses HTMLLIElement, and can have three states (todo, doing, and done), and a TodoApp component that can hold any number of TodoItems. See ./example for the entire source. To run this demo with npm, run npm run demo in a terminal at the top level of this repository.

// todo-item.js
import Hoquet from "../mixin.js";
import { template } from "../utils.js";


const states = ["todo", "doing", "done"];

export default class TodoItem extends Hoquet(HTMLLIElement, {
    attributes: ["state", "name"],
    template: template`
        <span class="name"></span>
        <span class="delete">x</span>
    `,
    /**
     * HTMLLIElement doesn't support `attachShadow`
     */
    shadowy: false
}) {
    
    constructor(name) {
        super();
        this.name = name;
        this.state = states[0];
    }

    static states = states;

    connectedCallback() {
        this.render();

        this.addEventListener("click", e => {
            if (e.target.classList.contains("delete")) {
                this.dispatch("item-deleted");
            } else {
                this.toggleState()
            }
        });
    }

    dispatch(name) {
        this.dispatchEvent(new CustomEvent(name, {
            composed: true, bubbles: true, detail: this
        }));
    }

    attributeChangedCallback(key, prev, curr) {
        if (!this.rendered)
            return;

        if (key === "state") {
            states.forEach(state => this.classList.remove(state));
            this.classList.add(curr);
            this.dispatch("item-state-changed");
        } else if (key === "name") {
            const $name = this.querySelector(".name");
            $name.innerText = curr;
        }
    }

    toggleState() {
        const currentStateIndex = states.indexOf(this.state);
        this.state = states[
            currentStateIndex >= states.length - 1
                ? 0 : currentStateIndex + 1
        ];
    }
}

window.customElements.define("todo-item", TodoItem, {extends: "li"});
// todo-app.js
import Hoquet from "../mixin.js";
import { stylesheet, template } from "../utils.js";

import TodoItem from "./todo-item.js";


const capitalize = (x) => `${x[0].toUpperCase()}${x.substr(1)}`;

const styles = "...";

class TodoApp extends Hoquet(HTMLElement, {
    template: template`
        <header>
            <div id="report">
            ${
                TodoItem.states.map(
                    state => (
                        `${capitalize(state)}: <span id="${state}-count">0</span>`
                    )
                ).join(", ")
            }
            </div>
            <button id="clear-done">Clear done</button>
        </header>
        <input id="new-todo-input" type="text">
        <ul id="list"></ul>
    `,
    stylesheets: [
        stylesheet`${styles}`
    ],
    attributes: ["placeholder"]
}) {

    connectedCallback() {
        this.render();
        this.bind();
        this.placeholder = this.placeholder || "Default placeholder...";
    }

    attributeChangedCallback(key, prev, curr) {
        if (!this.rendered)
            return;
            
        if (key === "placeholder") {
            this.$["new-todo-input"].placeholder = curr;
        }
    }

    bind() {
        this.addEventListener("keyup", e => {
            if (e.key === "Enter") {
                const name = this.$["new-todo-input"].value.trim();
                if (name) {
                    this.addItem(name);
                }
                this.$["new-todo-input"].value = null;
            }
        });

        this.addEventListener("item-state-changed", e => {
            this.updateReport();
        });

        this.addEventListener("item-deleted", e => {
            this.removeItem(e.detail);
            this.updateReport();
        });

        this.$["clear-done"].addEventListener("click", e => {
            this.clear("done");
        });
    }

    updateReport() {
        TodoItem.states.forEach(state => {
            this.$[`${state}-count`].innerText =
                [...this.$["list"].children].reduce(
                    (count, $item) => count + ($item.state === state), 0
                );
        });
    }

    removeItem(item, update = false) {
        this.$["list"].removeChild(item);
    }

    addItem(item) {
        this.$["list"].appendChild(new TodoItem(item));
    }

    clear(state) {
        [...this.$["list"].children].forEach($item => {
            if ($item.state === state) {
                this.removeItem($item);
            }
        });
        this.updateReport();
    }
}

window.customElements.define("todo-app", TodoApp);
<!doctype html>
<html>
<head><script type="module" src="/example/todo-list.js"></script></head>
<body>
        <todo-app placeholder="What do you want to do?"></todo-app>
</body>
</html>

You can see an example todo app using the web component mixin by running the "demo" script from the top level of the repo using npm/yarn.

$ npm install && npm run demo

Templating DSL basic usage (optional)

import { render } from "@pojagi/hoquet/hoquet";


const things = ["bread", "milk", "eggs"];
render(
  ["ul", {class: ["things", "list"]},
   things.map(x => ["li", x])]
);
// <ul class="things list"><li>bread</li><li>milk</li><li>eggs</li></ul>

render(
  ["link", {rel: "stylesheet", href: "styles.css"}]
)
// <link rel="stylesheet" href="styles.css" />

Within a class using Hoquet mixin:

class Foo extends Hoquet(HTMLElement) {
    connectedCallback() {
        this.things = ["bread", "milk", "eggs"];
        this.render();
    }

    get template() {
        return (
            ["div", {class: "container"},
             ["ul",
              this.things.map(thing => ["li", thing])]]
        );
    }
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100