open-index/open-npm huggingface dataset:
npm package: @manyducks.co/brix
Description: Brix is a small frontend framework built around [custom elements](https://javascript.info/custom-elements). Its structure and approach to state management are inspired by [choo](https://github.com/choojs/choo), [yeet]() and classic React.
Latest version: 0.0.1

# 🧱 @manyducks.co/brix

Brix is a small frontend framework built around [custom elements](https://javascript.info/custom-elements). Its structure and approach to state management are inspired by [choo](https://github.com/choojs/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.

```js
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