https://github.com/tjb1982/hoquet
A tiny, minimal, platform-native, vanilla JavaScript web component library.
https://github.com/tjb1982/hoquet
mixin platform-native vanilla-javascript vanilla-js web-components
Last synced: 4 months ago
JSON representation
A tiny, minimal, platform-native, vanilla JavaScript web component library.
- Host: GitHub
- URL: https://github.com/tjb1982/hoquet
- Owner: tjb1982
- License: gpl-3.0
- Created: 2013-08-02T15:34:59.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2023-04-15T13:47:05.000Z (about 3 years ago)
- Last Synced: 2026-01-23T08:48:31.738Z (5 months ago)
- Topics: mixin, platform-native, vanilla-javascript, vanilla-js, web-components
- Language: TypeScript
- Homepage:
- Size: 387 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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 `TodoItem`s. See [`./example`](https://github.com/tjb1982/hoquet/tree/master/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.
```javascript
// 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`
x
`,
/**
* 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"});
```
```javascript
// 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`
${
TodoItem.states.map(
state => (
`${capitalize(state)}: 0`
)
).join(", ")
}
Clear done
`,
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);
```
```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.
```bash
$ npm install && npm run demo
```
## Templating DSL basic usage (optional)
```javascript
import { render } from "@pojagi/hoquet/hoquet";
const things = ["bread", "milk", "eggs"];
render(
["ul", {class: ["things", "list"]},
things.map(x => ["li", x])]
);
//
- bread
- milk
- eggs
render(
["link", {rel: "stylesheet", href: "styles.css"}]
)
//
```
Within a class using `Hoquet` mixin:
```javascript
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])]]
);
}
}
```