Конфігурація

Передайте параметри адаптеру PageFlow:

PageFlow.vite({
  enabled: true,
  previewPath: '/__unplugin-pageflow/',
  appUrl: '/',
  dynamicParams: {
    '/products/:id': { id: 'demo-product' },
  },
})

Параметри

Параметр	Типове значення	Опис
enabled	true	Вмикає PageFlow на сервері розробки.
previewPath	/__unplugin-pageflow/	URL-адреса візуальної карти.
appUrl	/	Маршрут для виявлення маршрутизатора застосунку.
dynamicParams	{}	Надає приклади значень параметрів динамічних маршрутів.
pageTests	{}	Явно пов’язує шаблони маршрутів із шаблонами тестових файлів.
testCommands	{}	Вмикає запуск тестів кожного типу через явні команди без shell.

Тести сторінок

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

PageFlow.vite({
  pageTests: {
    '/orders/**': ['tests/orders-*.spec.ts'],
  },
  testCommands: {
    unit: { command: 'pnpm', args: ['vitest', 'run', '{file}', '-t', '{name}'] },
    component: { command: 'pnpm', args: ['vitest', 'run', '{file}', '-t', '{name}'] },
    e2e: { command: 'pnpm', args: ['playwright', 'test', '{file}', '-g', '{name}'], timeoutMs: 180_000 },
  },
})

{file} і {name} замінюються індексованими тестовим файлом та назвою сценарію. Команди запускаються з кореня проєкту з shell: false; жодна тестова команда не вгадується й не вмикається за замовчуванням. Типово один тест може виконуватися 120 секунд, а timeoutMs задає ліміт від 1 секунди до 30 хвилин.

PageFlow зберігає останні 500 результатів у .unplugin-pageflow/cache/test-results.json. Зміна вмісту тестового файлу автоматично скасовує попередній результат. Збережений вивід обмежено останніми 20 КБ на тест; директорія кешу має залишатися проігнорованою Git.

Параметри динамічних маршрутів

Для відображення маршруту на кшталт /products/:id PageFlow потрібні конкретні значення:

PageFlow.vite({
  dynamicParams: {
    '/products/:id': {
      id: 'demo-product',
    },
    '/users/:userId/orders/:orderId': {
      userId: 'alice',
      orderId: 'order-100',
    },
  },
})

Використовуйте безпечні локальні або тестові ідентифікатори. Динамічні параметри не обходять автентифікацію застосунку.

Готовність перегляду

Перед створенням знімка PageFlow очікує шрифти, зображення та стабілізацію DOM. Сторінка з тривалою асинхронною роботою може явно повідомити про готовність:

window.__UNPLUGIN_PAGEFLOW_READY__?.()