Как работает PageFlow

PageFlow сочетает поиск маршрутов, специфичный для фреймворка, с независимым визуальным клиентом.

1. Обнаружение маршрутов

Выбранный адаптер читает источник маршрутов фреймворка. Vue Router и Nuxt предоставляют записи роутера; файловые фреймворки передают маршруты через интеграции сборки; React Router принимает объекты маршрутов; Next.js использует sidecar для разработки.

2. Запуск среды разработки

Плагин добавляет небольшую среду выполнения только при запущенном сервере разработки. Она сообщает конечной точке PageFlow сведения о маршрутах, видимые цели, заголовки страниц и готовность.

3. Отображение настоящих страниц

PageFlow открывает страницы приложения того же источника в контролируемых iframe. Выбранная страница остаётся активной, а фоновые сохраняются в ограниченном кэше миниатюр.

4. Обнаружение навигации

Адаптеры распознают поддерживаемые ссылки фреймворка, якоря того же источника, изменения истории, литеральные программные цели и явные подсказки навигации. Клиент превращает цели в направленные рёбра графа и активные области превью.

5. Размещение графа

LeaferJS отображает холст. Колоды маршрутов упрощают большие иерархии, пространственный индекс ограничивает работу в viewport, а крупные раскладки могут выполняться в Worker.

Производственные сборки

PageFlow предназначен только для разработки. Его конечные точки и визуальный клиент не добавляются в производственный вывод. Проверка производственного вывода в репозитории контролирует эту границу.

Граница безопасности

Режим превью блокирует переходы по якорям и отправку форм в контролируемом frame, но не подавляет побочные эффекты инициализации приложения. Используйте локальные или тестовые данные.