DX, Devtools & Plugins

Debug and warnings

UI.config() now accepts debug and warnings alongside prefix. In v1.8.0, use hydration for SSR or pre-rendered markup. Older setups using hydrate are still supported and can migrate gradually. Debug logs are opt in; warnings are enabled by default and are also collected in devtools.

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

UI.config({
  prefix: "app",
  debug: true,
  warnings: true,
  hydration: true,
});

Runtime snapshots

UI.devtools() returns the live bridge exposed as window.__TINY_ENGINE__. It tracks runtime config, registered capsule definitions, installed plugins, live capsule instances, stores, warnings, emitted events, and performance metrics including creates, destroys, scans, syncs, emits, flushes, and timing.

const bridge = UI.devtools();

console.log(bridge.inspect());
console.table(bridge.registry);
console.table(bridge.instances);
console.table(bridge.plugins);

window.__TINY_ENGINE__.clearEvents();

Plugins

Plugins install with UI.use(plugin). A plugin can configure the engine, register capsules, listen on the global bus, subscribe to hooks, expose helpers, and write warning/debug messages.

const analyticsPlugin = {
  name: "analytics",
  version: "1.0.0",
  install(ui) {
    const offEmit = ui.hook("emit", ({ eventName, detail }) => {
      console.log("event", eventName, detail);
    });

    ui.hook("create", ({ name, instance }) => {
      ui.debug("capsule created", { name, uid: instance.inspect().uid });
    });

    // Framework adapters can also call ui.scan(root) and ui.destroy(root).
    return () => offEmit();
  },
};

UI.use(analyticsPlugin);

Plugin hooks

The current hook names are config, register,create, destroy, init, and emit. Plugin context also exposes scan() and destroy() for framework adapters.ui.hook() returns an unsubscribe function.