🧱 @manyducks.co/brix

Brix is a small frontend framework built around custom elements. Its structure and approach to state management are inspired by choo, yeet and classic React.

Basically, Brix is an extension of HTMLElement that adds just enough to make custom elements fun:

• A render function with HTML templates courtesy of lit-html.
• Inherited state; each BrixElement's state object has the parent BrixElement's state as its prototype. This lets you read parent state from child elements as long as you haven't defined any local state with the same property names.
• Emit render event to re-render. No other state tracking mechanics or reactivity. Nice and simple.
• Built-in router with support for nested routes.
• A beautiful structure completely impossible to nail down with TypeScript. Enjoy vanilla JS to the fullest.

Brix provides a BrixElement class that can be extended to create your own custom elements.

import { BrixElement, element, html } from "@manyducks.co/brix";

@element("counter-view")
export class CounterView extends BrixElement {
  // setup hook: runs after element is connected, just before first render.
  setup() {
    this.state.count = 0;
  }

  // cleanup hook: runs after element is disconnected.
  cleanup() {}

  decrement() {
    this.state.count--;

    // Emit render to update the DOM to match the state.
    this.emit("render");
  }

  increment() {
    this.state.count++;
    this.emit("render");
  }

  // The render function returns markup that will be displayed inside this element.
  render() {
    return html`
      <button @click=${this.decrement}>-1</button>
      <span>${this.state.count}</span>
      <button @click=${this.increment}>+1</button>
    `;
  }
}

Documentation To Do

• Stores
• Router
• State inheritance example
• attachShadow additions