dynaura

How it works

A look inside: the single island, the spring, the card outline, exact timers, and how adapters wrap the core.

Internals

  • One island. A single DOM element holds the current toast. A new toast morphs it instead of stacking, unless queue is on.
  • Size morph. The core measures the compact row and the expanded content, then transitions width, height and border-radius between them with a CSS linear() spring.
  • Card variant. The header tab and body are drawn as one clip-path. The core recomputes the outline every frame while the size transitions.
  • Timers. Remaining time is tracked, so hover, drag and pin pause and resume exactly. The timer bar is a CSS animation that pauses with them.
  • Adapters. Vue, Svelte and vanilla are thin wrappers over createToaster(). React adds portals so description, icon and trailing can be React nodes.

Adding an adapter

Call createToaster(options) on mount and .destroy() on unmount. Forward option changes with .set(). If the framework has its own node type, pass a render(el, node) option: the core calls it with node = null to unmount.

Development

sh
git clone https://github.com/ashutoshswamy/dynaura.git
cd dynaura
npm install
npm run dev     # local test playground: imports src/ directly
npm test        # vitest + jsdom
npm run build   # tsup, outputs dist/

The package playground runs at http://localhost:5173 and exercises every feature: themes with live color pickers, positions, queue, the timer bar and rich cards. The code it shows comes from the files that run, so it cannot drift.

Releasing

sh
npm version patch      # or minor / major
npm publish            # prepublishOnly runs typecheck, build and tests first