API reference

UI

UI is the engine registry, DOM walker, observer, global event bus, plugin host, and devtools bridge.

v1.6.0 surface

import { UI, getPrefix } from "tiny-engine-core";

UI.config({ prefix?: string, debug?: boolean, warnings?: boolean, hydrate?: boolean });
UI.register(name, definition);        // Capsule class or functional capsule

UI.init(root?: ParentNode);           // mount [ui-name] / [app-name] elements
UI.scan(root?: ParentNode);           // scoped/manual subtree scan and init
UI.destroy(root?: ParentNode);        // scoped destroy, or full cleanup with no root
UI.observe();                         // watch DOM with batched microtask + rAF flushes
UI.getOrCreate(el, name, options?);   // manually create or sync one instance

UI.on(eventName, listener, options?); // global event bus, returns off()
UI.off(eventName, listener, options?);
UI.emit(eventName, detail?, { cancelable?: boolean });

UI.use(plugin);                       // install a function or object plugin
UI.devtools();                        // runtime snapshot bridge
UI.getPrefix();                       // same value as getPrefix()
getPrefix();

UI.register(name, definition)

Register a capsule under a name. definition can be a class extending Capsule or a function with the signature (el, api) => hooks. The engine mounts matching elements such as ui-tabs or app-tabs.

UI.init(root?), UI.scan(root?), and UI.observe()

UI.init() walks the current DOM and calls getOrCreate() for registered capsules. UI.scan(root?) lets you manually initialize a specific subtree, while UI.observe() starts the document-level MutationObserver for added nodes, removed nodes, and live attribute option changes with batched processing.

UI.destroy(root?) and hydration-safe sync

UI.destroy(root?) tears down instances under a specific root. Calling UI.destroy() with no root performs global cleanup. During hydration paths, UI.config({ hydrate: true }) can skip no-op option sync work.

Data API triggers

A host mounts from ui-modal. A separate trigger can call a public method with data-ui-toggle, data-ui-action, and data-target.

data-api.html

<div id="settings" ui-modal ui-modal-open="false"></div>

<button
  type="button"
  data-ui-toggle="modal"
  data-ui-action="open"
  data-target="#settings"
>
  Open
</button>

Global bus, plugins, and devtools

UI.on() and UI.emit() provide cross-component communication. UI.use() installs plugins, and UI.devtools() returns the same runtime bridge exposed at window.__TINY_ENGINE__.