onpage for TanStack Start

Fügt TanStack-Start-Seiten, die Inhalte aus Payload lesen, Inline-Bearbeitung und Draft-Vorschauen hinzu.

Community 0 335/Wo. MIT v0.6.0

Installation

pnpm add @payload-onpage/tanstack-start

Über

Das Paket verbindet ein TanStack-Start-Frontend mit dem Plugin payload-onpage in Payload. Die Site bindet die Komponente `<OnPage />` in der Root-Route ein. Besucher sehen davon nichts. Angemeldete Editoren und Personen, die einen Vorschau-Link öffnen, erhalten auf der Seite ein Bearbeitungs-Overlay bzw. eine Vorschau-Toolbar. Die serverseitige Logik liegt im Entry `/session`, der nur auf dem Server importiert werden darf. `tanstackSession({ secret, maxAge })` wird an die Option `session` des Plugins übergeben. Der Bearbeitungsmodus wird in einem httpOnly-Cookie `onpage` gespeichert, das an einen Hash des Payload-Auth-Cookies des Editors gebunden ist. Meldet sich der Editor ab oder wechselt das Konto, endet die Bearbeitungssitzung. Die Lebensdauer beträgt standardmäßig 12 Stunden und lässt sich über `maxAge` ändern. Bei Vorschau-Links erhält der Browser nur ein verschlüsseltes Cookie `onpage_preview`, das auf einen Pfad und ein Ablaufdatum begrenzt ist. Es funktioniert auf keinem anderen Pfad und wird mit dem Plugin-Secret entschlüsselt. Ohne dieses Secret zeigen geteilte Vorschau-Links nur veröffentlichte Inhalte. In Loadern entscheidet `isDraftEnabled()`, ob Payload-Abfragen mit `draft: true` laufen. Es liefert `true` für Bearbeitungssitzungen und gültige Vorschau-Grants. `onpageContext()` setzt im Bearbeitungsmodus ein Kontext-Flag, damit sich gerenderte Felder ihren Quelldokumenten zuordnen lassen. Außerhalb eines Requests, etwa beim Build, liefern beide Funktionen sichere Standardwerte. Der Client-Entry exportiert `OnPageMount` und `useTanstackRefresh`. Aktualisierungen laufen über `router.invalidate()` aus dem TanStack Router. Über die Prop `mount` lassen sich eigene Mount-Komponenten übergeben, etwa für eigene Editoren für JSON-Felder. Das Paket setzt React 19, `@tanstack/react-start` ab 1.168.60 und `@tanstack/react-router` ab 1.120.0 voraus. Es benötigt Node.js 20.9 oder neuer. Die aktuelle Version ist 0.5.0, lizenziert unter MIT.

Paketinformationen

Paketname
@payload-onpage/tanstack-start
Neueste Version
0.6.0
Entpackte Größe
61 kB
Lizenz
MIT
Wöchentliche Downloads
335
Zuletzt veröffentlicht
13. Okt. 2026

Mehr von jellologic

Profil ansehen

Ähnliche Plugins

Mehr in Content