API reference

Capsule

The runtime surface that every capsule instance receives, with matching helpers on the functional capsule API.

capsule surface

import { Capsule } from "tiny-engine-core";

class Example extends Capsule {
  // instance state
  this.el       // HTMLElement root
  this.options  // merged defaults, attributes, and explicit options
  this.props    // reactive proxy over options
  this.refs     // Record<string, HTMLElement>
  this.uid      // stable uid, also written to ui-id/app-id

  this.on(el, event, listener, options?)       // auto-cleaned listener
  this.offAll()                                // remove tracked listeners
  this.emit(name, detail?, { cancelable? })    // bubbling CustomEvent
  this.refresh(root?)                          // recollect refs/directives
  this.syncOptions(nextOptions)                // update options + notify
  this.onPropChange(prop, listener)            // observe prop changes
  this.connectStore(store, listener)           // auto-unsubscribe on destroy
  this.inspect()                               // devtools snapshot data
  this.destroy()                               // cleanup
}

Events and cleanup

this.on() stores every listener handle and destroy() removes them through offAll(). Component events use emit(), which returns the dispatched CustomEvent so callers can inspect event.defaultPrevented.

Functional capsule API

Functional capsules receive an api object with el, uid, options, props, refs, on(), emit(), refresh(), syncOptions(), onPropChange(), and connectStore(). Returned methods are exposed on the instance for directives and data API actions.

functional-capsule.ts

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

  return {
    toggle() {
      api.refs.trigger.click();
    },
    syncOptions(nextOptions, previousOptions) {
      console.log("options changed", previousOptions, nextOptions);
    },
    destroy() {
      console.log("dropdown destroyed");
    }
  };
});