onpage for TanStack Start

Описание

Пакет связывает фронтенд на TanStack Start с плагином payload-onpage, который работает в Payload. В корневом роуте сайта монтируется компонент <OnPage />. Посетители его не видят. Редакторы, вошедшие в Payload, и люди, открывшие ссылку предпросмотра, получают поверх страницы оверлей редактирования или панель предпросмотра. Серверная часть находится в точке входа /session, которую нужно импортировать только на сервере. Функция tanstackSession({ secret, maxAge }) передаётся в опцию session плагина. Режим редактирования хранится в httpOnly cookie onpage, привязанной к хешу auth cookie редактора Payload, поэтому выход из аккаунта или смена пользователя завершают сессию. По умолчанию сессия живёт 12 часов. Ссылки предпросмотра устроены иначе: браузер получает запечатанный cookie onpage_preview, который действует только на один путь и до истечения срока. Распаковывается он секретом плагина, поэтому опция secret должна совпадать с секретом плагина. Без secret общие ссылки предпросмотра показывают только опубликованный контент. В loaders функция isDraftEnabled() возвращает true для сессии редактирования или действующего гранта предпросмотра, и по её значению решается, передавать ли draft: true в запросы к Payload. Функция onpageContext() в режиме редактирования добавляет флаг контекста, по которому отрисованные поля сопоставляются с исходными документами. Вне запроса, например при сборке, обе функции возвращают безопасные значения по умолчанию. Клиентская точка входа экспортирует OnPageMount и useTanstackRefresh. Обновления данных идут через router.invalidate() из TanStack Router. Через проп mount можно передать собственный компонент монтирования, например с редакторами для пользовательских JSON-полей. Требуются React 19, @tanstack/react-start ^1.168.60, @tanstack/react-router ^1.120.0 и Node.js 20.9 или новее.

О пакете

Имя пакета

@payload-onpage/tanstack-start

Последняя версия

0.6.0

Размер

61 кБ

Лицензия

MIT

Загрузок в неделю

335

Последняя публикация

13 окт. 2026 г.