Try the real stack interactively
easy-stack works with bundlers and without a bundler. Bundlers resolve the bare package import normally; this Playground is the native browser ESM path, using an explicit import map with no build or transpilation step before showing pending work newest-first beside the execution trace.
No simulated state.
Load cooperative, manual, or stopped scenarios and inspect size, running, autoRun, and stop after every synchronous transition.
Manual batch
Disable auto-run to load a complete batch before selecting the newest item.
const stack = new Stack();
stack.autoRun = false;
stack.add(saveDraft, recalculate, renderPreview);
console.log(stack.size); // 3
stack.next(); // renderPreview begins firstClear stale lower work
An active task may decide that everything below it is obsolete. clear() replaces pending contents without interrupting that active task.
stack.add(
function staleRequest() {
sendOldState();
this.next();
},
function authoritativeRefresh() {
this.clear();
replaceEverything();
this.next();
}
);Pause until an event
Leave the runner active while a browser event is outstanding, then hand off from the event callback.
stack.add(function waitForAnimation() {
element.addEventListener('transitionend', () => {
this.next();
}, { once: true });
element.classList.add('visible');
});