Menu
Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Gate Angular UI on Persist hydration with useHydrated (readonly Signal). Call inside an injection context; use when avoiding flash of default state on async backends.
Persist with React Native AsyncStorage via @stainless-code/persist/backends/async-storage. Use for RN string-wire JSON state; always gate with useHydrated.
Compress a string-wire StateStorage with @stainless-code/persist/backends/compressed (gzip/deflate). Backend wrapper — compose with createStorage; stack compress-then-encrypt.
Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown.
AES-GCM encrypt a string-wire StateStorage with @stainless-code/persist/backends/encrypted (createEncryptedStorage). Backend wrapper — compose with createStorage + codec; wrong key rejects hydrate (not clearCorrupt).
| name | lit-persist |
| description | Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook. |
| license | MIT |
| metadata | {"type":"framework","library":"@stainless-code/persist","library_version":"0.4.1","framework":"lit"} |
| requires | ["persist"] |
| sources | ["stainless-code/persist:src/adapters/frameworks/lit.ts"] |
@stainless-code/persist/frameworks/lit exports HydrationController — a ReactiveController, not a hook. Constructor calls host.addController(this); subscribes on hostConnected, tears down on hostDisconnected.
bun add @stainless-code/persist lit
Peer: lit >=3.0.0.
import { LitElement, html } from "lit";
import { HydrationController } from "@stainless-code/persist/frameworks/lit";
class PrefsEl extends LitElement {
#hydration = new HydrationController(this, prefsHydration);
render() {
return this.#hydration.hydrated
? html`<prefs-panel></prefs-panel>`
: html`<skeleton-el></skeleton-el>`;
}
}
useHydrated for Lit. Use the controller.hydrated outside render — the controller already requestUpdates on connect/change; read the getter in render().hydrated true, no subscribe.new HydrationController(host, signal) — getter hydrated: boolean