Menú
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.
Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook.
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 | alpine-persist |
| description | Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components. |
| license | MIT |
| metadata | {"type":"framework","library":"@stainless-code/persist","library_version":"0.4.1","framework":"alpine"} |
| requires | ["persist"] |
| sources | ["stainless-code/persist:src/adapters/frameworks/alpine.ts"] |
@stainless-code/persist/frameworks/alpine is plugin-first: Alpine.plugin(persist) registers $hydrated and enables reactive useHydrated. Call destroy() from Alpine.data teardown.
bun add @stainless-code/persist alpinejs
Peer: alpinejs >=3.0.0 (types via @types/alpinejs — package ships none).
import Alpine from "alpinejs";
import persist, {
useHydrated,
} from "@stainless-code/persist/frameworks/alpine";
Alpine.plugin(persist);
Alpine.data("prefs", () => {
const hydration = useHydrated(prefsHydration);
return {
get hydrated() {
return hydration.hydrated;
},
destroy() {
hydration.destroy();
},
};
});
Template: x-show="$hydrated(prefsHydration).hydrated" — $hydrated(signal) returns a bag ({ hydrated, destroy }), not a boolean (a bare bag is always truthy in x-show). Magic caches per element.
Alpine.plugin(persist). useHydrated falls back to a plain object + one-time non-prod warn.x-show="$hydrated(...)" without .hydrated.destroy() from Alpine.data.persist(Alpine) — plugin; registers $hydrated(signal) → HydratedBaguseHydrated(signal) → { hydrated; destroy() } (null signal → { hydrated: true })