optimisticToggleSync

Why JS.

tsx

import { optimisticToggleSync } from "@sdxc/ui/app";

Usage

Applied to the toggle's <form>: on submit it flips data-pressed, the button's aria-pressed, tone and name, and the hidden next-state field, then posts the form as it stood. A refused post flips it back, sets data-failed and writes the refused copy for its status, or failed, into the live region. The newest press wins over a slow answer to an older one, and only its answer is reported.

Signature

typescript

optimisticToggleSync(options: OptimisticToggleSync.Options): MixinDescriptor<HTMLFormElement>

Parameters

Parameter	Type	Required	Description
`options`	`OptimisticToggleSync.Options`	Yes

Examples

tsx

<form method="post" action={url} mix={[optimisticToggleSync({ failed: "Failed" })]}>…</form>

The events, constants and types its module publishes, each imported from @sdxc/ui/app too.

Event

OptimisticToggleEvent

Dispatched, bubbling, from a toggle's form at the press and again once the server answers, so a row can restyle at once and reload server-derived counts only when settled is true.

typescript

new OptimisticToggleEvent(pressed: boolean, outcome?: OptimisticToggleSync.Outcome)

Property	Type	Required	Description
`pressed`	`readonly boolean`	Yes
`failed`	`readonly boolean`	Yes	Whether the server refused the last change, which put the toggle back.
`settled`	`readonly boolean`	Yes	Whether the server has answered the press: false for the optimistic flip, true after.
`status`	`readonly number \| null`	Yes	The answer's HTTP status, for picking copy; `null` before the answer and for a network error.

Constant

OPTIMISTIC_TOGGLE_HEADER

Header a background post carries, so the server can answer with a status instead of a redirect.

typescript

const OPTIMISTIC_TOGGLE_HEADER = "x-optimistic-toggle"

Function

toneOf

Picks the button's tone: danger after a refusal, brand while on, neutral while off.

typescript

toneOf(pressed: boolean, failed: boolean): "danger" | "brand" | "neutral"

Parameter	Type	Required	Description
`pressed`	`boolean`	Yes	Whether the toggle is on.
`failed`	`boolean`	Yes	Whether the last change was refused.

Interface