basics

📄️xnew

xnew is the core function of the library. It creates a unit — the component instance. When a unit is destroyed, everything inside it (timers, listeners, child elements) is cleaned up automatically, so you never have to write teardown code by hand.

📄️xnew.nest

xnew.nest creates a child element and shifts unit.element to point to it. Any elements created after the call are placed inside the new element automatically — no manual parent references needed.

📄️xnew.extend

xnew.extend mixes another component's behavior into the current unit. No new element is created. Write reusable behavior — dragging, logging, keyboard handling — once as a component, and drop it into any other component with one line.

📄️xnew.timeout

xnew.timeout is setTimeout extended for xnew. The timeout is automatically cancelled when the owning unit is destroyed, so you don't need to stash the ID and call clearTimeout. You can also chain timeouts and transitions to build multi-step sequences without nesting callbacks.

📄️xnew.interval

xnew.interval is setInterval with automatic cleanup. The interval stops on its own when the owning unit is finalized — no need to stash the ID and call clearInterval manually.

📄️xnew.transition

xnew.transition drives a value from 0 to 1 over a set duration, calling your callback every frame. Feed that value into any property — opacity, position, scale, color — and you get smooth animation with one function call.

📄️xnew.promise

xnew.promise ties a standard Promise to the current component so its .then() / .catch() handlers run in the component's scope. If the component is destroyed before the Promise resolves, the pending handlers are dropped — no stale DOM writes, no crashes.

📄️xnew.scope

xnew.scope captures the current component context and returns a wrapper that restores it when called. The xnew scope is normally lost inside a raw setTimeout or a native addEventListener, so this is the escape hatch for calling xnew APIs from those callbacks.