メニュー
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
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).
SOC 職業分類に基づく
| 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 })