Tiny·Engine (Core)

Getting started

Quick start

Five minutes from npm install to a working dropdown. Let's go.

1 - Markup

Start with HTML. The ui-dropdown marker tells tiny-engine which capsule should hydrate this element. Option attributes such as ui-dropdown-open, refs, and directives are wired up automatically.

dropdown.html
<div ui-dropdown ui-dropdown-open="false" class="dropdown">
  <button ref="trigger" @click="toggle">Open menu</button>
  <ul ref="menu" hidden>
    <li>Profile</li>
    <li>Settings</li>
    <li>Sign out</li>
  </ul>
</div>

2 - Capsule (class form)

Extend Capsule and register it. You get this.el, this.refs, this.props, tracked this.on() listeners, and cancellable this.emit() events.

dropdown.ts
import { UI, Capsule } from "tiny-engine-core";

class Dropdown extends Capsule {
  static defaults = { open: false };

  constructor(el, options) {
    super(el, options);

    this.toggle = () => {
      this.props.open = !this.props.open;
      this.refs.menu.hidden = !this.props.open;
      this.emit("dropdown:change", { open: this.props.open });
    };

    this.on(document, "click", (event) => {
      if (!this.el.contains(event.target) && this.props.open) this.toggle();
    });
  }
}

UI.register("dropdown", Dropdown);
UI.init();
UI.observe();

3 - Capsule (functional form)

Prefer a functional API? Register a function that receives (el, api) and returns public methods. Returned methods can be called by directives and data API actions.

dropdown-fn.ts
import { UI } from "tiny-engine-core";

UI.register("dropdown", (el, api) => {
  function toggle() {
    api.props.open = !api.props.open;
    api.refs.menu.hidden = !api.props.open;
    api.emit("dropdown:change", { open: api.props.open });
  }

  api.on(document, "click", (event) => {
    if (!el.contains(event.target) && api.props.open) toggle();
  });

  return { toggle };
});

Where to next?