Як працює PageFlow

PageFlow поєднує виявлення маршрутів для конкретних фреймворків із незалежним від фреймворку візуальним клієнтом.

1. Виявлення маршрутів

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

2. Запуск середовища розробки

Плагін додає невелике середовище виконання лише під час роботи сервера розробки. Воно передає кінцевій точці PageFlow інформацію про маршрути, видимі цілі навігації, заголовки сторінок і готовність.

3. Відображення реальних сторінок

PageFlow відкриває сторінки застосунку того самого походження в контрольованих iframe. Вибрана сторінка залишається активною, а фонові сторінки зберігаються в обмежених кешах мініатюр.

4. Виявлення навігації

Адаптери розпізнають підтримувані посилання фреймворку, якорі того самого походження, зміни історії, літеральні програмні цілі та явні підказки навігації. Клієнт перетворює ці цілі на напрямлені ребра графа та активні області попереднього перегляду.

5. Компонування графа

Полотно відображає LeaferJS. Групи маршрутів спрощують великі ієрархії шляхів, просторовий індекс обмежує роботу в області перегляду, а компонування великих графів може виконуватися у Worker.

Продакшн-збірки

PageFlow призначений лише для розробки. Його кінцеві точки та візуальний клієнт не додаються до продакшн-збірки. Перевірка продакшн-виводу в репозиторії контролює цю межу.

Межі безпеки

Режим попереднього перегляду блокує переходи за посиланнями та надсилання форм у контрольованому фреймі, але не може пригнічувати побічні ефекти ініціалізації застосунку. Використовуйте локальні або тестові дані.