adequate

customElements.define('x-counter', element(() => {
  const [value, setValue] = useState(0);

  return html`
    <div>Counter: ${value}</div>
    <button onclick="${() => setValue(value + 1)}">Increment</button>
    <button onclick="${() => setValue(value - 1)}">Decrement</button>
  `;
}));
document.body.innerHTML = '<x-counter></x-counter>';

Head to the REPL for interactive examples

Features

• Instant loading: adequate has a standalone size of 0.99kb (minzipped). This is 43x smaller than React (17.0) and 5x smaller than Preact (10.5).
• Declarative views: HTML Template Literals are rendered as Template Elements and only the changed DOM parts are updated.
• Custom Elements: Custom Elements are used as component model and enable to control state boundaries and render performance.
• Hooks API: Elements can make use of a React-like Hooks API for state management and side effects.
• Event handling: Inline functions can be used as native DOM event handlers and as custom callbacks.
• Zero tooling: The library requires no compilation or tooling. HTML syntax highlighting can be enabled via a plugin.

Non-goals

• Maximum Performance: The library is not optimized for render performance or memory usage.
• Semantic markup: HTML attributes are used in a way that may deteriorate semantic markup quality.
• Complete Hooks API: The offered Hooks API is only a subset of what React/Preact offers.
• Shadow DOM: The library does not support Shadow DOM for individual elements.

Size comparison

adequate is a perfect fit when size is important, such as when dealing with limited bandwidth or storage capacity restrictions. The following compares the sizes of adequate, React and Preact on their own and together with a simplified todo list. This comparison is exclusively concerned with size, not with functionalities or render performance. The numbers demonstrate the key advantage of adequate. Even when bundled with a basic todo list, the size is still multiple times smaller than Preact itself.

• React + ReactDOM @ 17.0.1
  • library: 42.52kb
  • library + todo list: 42.84kb
• Preact + Hooks @ 10.5.12
  • library: 4.87kb
  • library + todo list: 5.19kb
• adequate @ latest
  • library: 0.99kb
  • library + todo list: 1.37kb

Browser support

adequate works in most of the latest major browsers, both on desktop and mobile. For browsers without support for the :scope pseudo query selector, a polyfill can be used.

Resources

The following list is a collection of concepts and technologies that are related to adequate. Some of them served as inspiration for the library, others merely share similar ideas.

• dom-tagged-template
• htm
• hyperHTML
• lighterhtml
• lit-html
• LitElement
• nanohtml
• Preact
• pureact
• React
  • Hooks
  • JSX
  • Virtual DOM

Showcases

As the library is relatively new, there are currently no known showcase projects. If you use adequate in one of your projects, please let me know and I'll add it to this page.