Menu
Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown.
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.
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 | persist-crosstab |
| description | Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown. |
| license | MIT |
| metadata | {"type":"composition","library":"@stainless-code/persist","library_version":"0.4.1"} |
| requires | ["persist"] |
| sources | ["stainless-code/persist:src/adapters/transport/crosstab.ts"] |
For backends with no storage events (IndexedDB). Must wrap(storage) and pass crossTabEventTarget with crossTab: true. Posts storageArea: null (key-only match — each tab owns its backend instance). Returns undefined if BroadcastChannel missing. Call close() on teardown.
bun add @stainless-code/persist idb-keyval @tanstack/store
Example peers: idb-keyval (IDB backend) + @tanstack/store (source). Swap either for your stack.
import { Store } from "@tanstack/store";
import { createIdbStorage } from "@stainless-code/persist/backends/idb";
import { persistStore } from "@stainless-code/persist/sources/tanstack-store";
import { createBroadcastCrossTab } from "@stainless-code/persist/transport/crosstab";
const store = new Store({ theme: "light" });
const bridge = createBroadcastCrossTab({ channelName: "app:prefs" })!;
const persist = persistStore(store, {
name: "app:prefs:v1",
storage: bridge.wrap(createIdbStorage()!),
crossTab: true,
crossTabEventTarget: bridge.crossTabEventTarget,
});
// teardown: persist.destroy(); bridge.close();
localStorage can use crossTab: true alone — this bridge is for IDB-like backends.
crossTab: true alone on IDB — no native events.wrap or close.storageArea reference equality across tabs.createBroadcastCrossTab({ channelName }) → { crossTabEventTarget, wrap, close } | undefinedSee also: persist-idb.