# saveStatusSync

> Why JS: an autosave's progress and the age of the last edit change after the page has rendered, so script moves a save status through Saving…, Saved and the edit time.

```ts
import { saveStatusSync } from "@sdxc/ui/app";
```

Applied to a save status (`[data-slot="save-status"]`): "Saving…" holds for `holdMs`
however fast the save, "Saved" shows for `savedMs`, then the edit time shows and keeps
its age current. It writes `data-state` and the texts of its `save-status-*` parts.

## Signature

```ts
saveStatusSync(options: SaveStatusSync.Options): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `SaveStatusSync.Options` |  |

## Examples

```tsx
<span data-slot="save-status" mix={[saveStatusSync({ state: "idle", labels, holdMs: 1000, savedMs: 3000, decayMs: 86_400_000 })]}>…</span>
```

## Used with it

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

### SaveStatusEvent

Reports a save to a save status: dispatched on it by setSaveStatus.

#### Signature

```ts
new SaveStatusEvent(state: SaveStatusSync.State, at?: Date)
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `state` | `readonly SaveStatusSync.State` |  |
| `at` | `readonly Date \| undefined` | When the content was saved; the moment the event arrives when omitted. |

### SaveStatusRetryEvent

Dispatched, bubbling, from a save status when its Retry is pressed, for an autosave to try again.

#### Signature

```ts
new SaveStatusRetryEvent()
```

### setSaveStatus

Reports a save to a save status, which is how an autosave drives it.

#### Signature

```ts
setSaveStatus(target: Element | string, state: SaveStatusSync.State, at?: Date): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `target` | `Element \| string` | The status element or its `id`. |
| `state` | `SaveStatusSync.State` | Where the save stands. |
| `at?` | `Date` | When the content was saved. |

#### Examples

```tsx
setSaveStatus("post-status", "saving");
let response = await fetch(url, { method: "POST", body });
setSaveStatus("post-status", response.ok ? "saved" : "failed");
```

### SaveStatusSync.Options

Configuration for saveStatusSync.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `state` | `State` | The state the server rendered. |
| `editedAt?` | `string` | When the content was last edited, as an ISO string. |
| `labels` | `{ saving: string; saved: string; failed: string; edited: string }` |  |
| `locale?` | `string` |  |
| `holdMs` | `number` |  |
| `savedMs` | `number` |  |
| `decayMs` | `number` |  |

### SaveStatusSync.State

Where a save stands; `"idle"` shows the last edit time, or nothing without one.

#### Signature

```ts
type SaveStatusSync.State = "idle" | "saving" | "saved" | "failed"
```

One of `"idle"`, `"saving"`, `"saved"`, `"failed"`.