Menu
Persist a MobX observable object with @stainless-code/persist (persistObservable). Use when wiring MobX state to localStorage/sessionStorage/IndexedDB under enforceActions.
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.
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.
| name | persist-mobx |
| description | Persist a MobX observable object with @stainless-code/persist (persistObservable). Use when wiring MobX state to localStorage/sessionStorage/IndexedDB under enforceActions. |
| license | MIT |
| metadata | {"type":"composition","library":"@stainless-code/persist","library_version":"0.4.1","framework":"mobx"} |
| sources | ["stainless-code/persist:src/adapters/sources/mobx.ts","stainless-code/persist:docs/architecture.md"] |
@stainless-code/persist/sources/mobx maps an observable object through toJS / runInAction+Object.assign / observe onto persistSource.
observable.object({…}) (or compatible object observable) and want reload survival.configure({ enforceActions: "always" }) — hydrate must run inside an action.bun add @stainless-code/persist mobx
mobx is an optional peer of /sources/mobx.
import { observable } from "mobx";
import { createJSONStorage } from "@stainless-code/persist";
import { persistObservable } from "@stainless-code/persist/sources/mobx";
const prefs = observable.object({ theme: "light" as const });
const persist = persistObservable(prefs, {
name: "app:prefs:v1",
storage: createJSONStorage(() => localStorage),
});
Hydrate uses runInAction(() => Object.assign(observable, next)). Bare assign would throw under enforceActions: "always". Keys absent from next are not deleted (same as valtio).
persistSource ports — this adapter already wraps runInAction.Object.assign alone.persistObservable(observable, options) → PersistApiPersistApi: same as persistSourceSee also: persist-valtio — same object + assign hydrate pattern without MobX actions.