xstate

von vercel

XState Store-Adapter für das StateStore-Interface von json-render. Verwenden Sie dies bei der Integration von json-render mit @xstate/store zur Zustandsverwaltung über @json-render/xstate.

npx skills add https://github.com/vercel-labs/json-render --skill xstate

@json-render/xstate

XState Store adapter for json-render's StateStore interface. Wire an @xstate/store atom as the state backend for json-render.

Installation

npm install @json-render/xstate @json-render/core @json-render/react @xstate/store

Requires @xstate/store v3+.

Usage

import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";

// 1. Create an atom
const uiAtom = createAtom({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through @xstate/store */}
</StateProvider>

API

xstateStoreStateStore(options)

Creates a StateStore backed by an @xstate/store atom.

OptionTypeRequiredDescription
atomAtom<StateModel>YesAn @xstate/store atom (from createAtom) holding the json-render state model

Mehr Skills von vercel

vercel
vercel
Emulierte Vercel-REST-API für lokale Entwicklung und Tests. Verwenden, wenn der Benutzer lokal mit Vercel-API-Endpunkten interagieren, Vercel-Integrationen testen,…
cron-jobs
vercel
Vercel Cron Jobs Konfiguration und Best Practices. Verwenden beim Hinzufügen, Bearbeiten oder Debuggen geplanter Aufgaben in vercel.json.
codegen
vercel
Codegenerierungs-Hilfsprogramme für json-render. Verwenden Sie diese beim Generieren von Code aus UI-Spezifikationen, beim Erstellen benutzerdefinierter Code-Exporteure, beim Durchlaufen von Spezifikationen oder beim Serialisieren von Eigenschaften für…
next-best-practice
vercel
Next.js Best Practices - Dateikonventionen, RSC-Grenzen, Datenmuster, asynchrone APIs, Metadaten, Fehlerbehandlung, Routen-Handler, Bild-/Schriftoptimierung,…
benchmark-sandbox
vercel
Führt vercel-plugin-eval-Szenarien in Vercel Sandboxes aus, anstatt in lokalen WezTerm-Panels. Stellt temporäre Mikro-VMs mit vorinstalliertem Claude Code + Plugin bereit,…
write-guide
vercel
Erstelle eine technische Anleitung, die einen realen Anwendungsfall durch progressive Beispiele vermittelt. Konzepte werden nur dann eingeführt, wenn der Leser sie benötigt.
benchmark-testing
vercel
Erstelle und starte Benchmark-Testprojekte, um die vercel-plugin-Skill-Injektion in realistischen Szenarien zu testen. Richtet isolierte Verzeichnisse ein, installiert die…
ai-gateway
vercel
Vercel AI Gateway Expertenanleitung. Verwenden Sie bei der Konfiguration von Modell-Routing, Anbieter-Failover, Kostenverfolgung oder der Verwaltung mehrerer KI-Anbieter über eine einheitliche…