Optimistic
pura-optimistic immediately swaps the original content for the optimistic result when activated, emits commit, and enters the "pending" state; the caller confirms success with confirm()/the success event or reverts with rollback()/the fail event, announcing the reversion in an aria-live region. Use it when you want instant feedback on an action that may fail (like, save, send) without freezing the interface. Being agent-native, it reflects the lifecycle in stable data-* attributes (data-state, data-pending) and keeps a global Map window.__puraOptimistic with query(state) and activate/confirm/rollback/reset handles, letting an agent discover and drive every optimistic action on the page.
Preview
<!-- Demo mode: confirms on its own (auto) -->
<pura-optimistic id="curtir" label="Like" auto>
<span slot="optimistic">❤️ Liked!</span>
<span>🤍 Like this photo</span>
</pura-optimistic>
<!-- Real mode: the caller decides the outcome -->
<pura-optimistic id="salvar" label="Save" rollback-message="Couldn't save.">
<span slot="optimistic">Saving…</span>
<span>Unsaved draft</span>
</pura-optimistic>
<script type="module">
import "/pura/lib/optimistic.js";
const el = document.getElementById("salvar");
el.addEventListener("commit", async (e) => {
try {
await fetch("/api/salvar", { method: "POST" });
el.confirm(); // settle as committed
} catch (err) {
el.rollback("Network failure."); // revert + announce
}
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | Confirmar | Text of the built-in trigger button, used when no trigger is provided via slot. |
state | string | idle | Lifecycle state: idle | pending | committed | failed. The author can set the initial state, but the component then controls it. |
disabled | boolean | false | When present, blocks activation. |
rollback-message | string | Ação revertida. | Text announced in the aria-live region on rollback, when no explicit reason is passed to rollback(). |
auto | boolean | false | Demo/no-backend mode: on activation, it auto-confirms on the next frame without needing the caller. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/optimistic.js"></script>import "./pura/lib/optimistic.js";