Страница, которая не моргает: SPA-роутинг для HTML и Web Components

[alexnozer]

Интересно, сохраню себе, потому что как-то раз искал роутер для веб-компонентов.

Несколько замечаний/предложений:

• Ссылки помечаются атрибутом aura-router-link, который с точки зрения стандарта HTML считается не валидным и приведёт к ошибке в валидаторе. Было бы неплохо поддерживать второй, валидный вариант — data-aura-router-link или data-router-link.

• Добавить возможность конфигурации opt-in и opt-out. Как я понимаю, сейчас все ссылки нужно пометить атрибутом, чтобы SPA-режим работал. Было бы полезно иметь возможность включить такое поведение по дефолту для всех ссылок и отключать там, где не нужно.

• Добавить View Transition для плавных переходов, которые хорошо ложатся на текущую модель.

[BELOYAR2025]

• aura-router-link - урезали сугубо для удобства DX, data-aura-router-link очень уж длинновато, оставив при этом возможность задавать селектор вручную как: <aura-router link-selector="ANY_SELECTOR" >. Вы правы, HTML валидатор сейчас ругается, будем пересматривать название этого атрибута, возможно data-router-link или data-aura-link будет наилучшим вариантом. Спасибо, замечание верное!

• Именно так, ссылка на данный момент должна быть помечена атрибутом, чтобы SPA-режим работал. Режим работы роутера по умолчанию для всех ссылок, либо ссылок в конкретном контейнере - однозначно будет полезен. Реализуем!

• Механизм View Transition уже заложен в движок, и может быть запущен при задании соответствующих атрибутов на роутере. В этом режиме для Enter и Leave страниц используются независимые слои отображения. Атрибут transition-order определяет порядок запуска этих слоев в документ: parallel, out-in, or in-out. Тип анимации задается атрибутами transition-in, transition-out

  Пока не сильно светили эту возможность, не достаточно проработан DX под нее.

  Живой пример работы с View Transition можно глянуть в самом проекте:

  `npm run dev`

  http://localhost:5174/features/animations

  

  Из нюансов - на данный момент пользователю самому надо прописывать как идет анимация (хуки и стили к ней). Наверно это не очень удобно, лучше бы набор официальных решений-плагинов под анимации? Тут важна обратная связь от разработчиков, полезен ли вообще такой подход, насколько удобно пользоваться, предложения по улучшению DX.

  Доп материалы по View Transition:

  Docs: https://github.com/aura-ui/router/blob/main/docs/guide/05-lifecycle-and-data.md#transitions

  Code pipeline: https://github.com/aura-ui/router/blob/7f90ccd9e6e448abac2f91f321c76241d068d618/src/modules/aura-routing-engine/core/navigation/navigation-transaction-pipeline.ts#L264

  Пример Transition Hooks :https://github.com/aura-ui/router/blob/main/src/examples/demo/hooks/view-transition.ts

  Спасибо большое за дельные замечания и предложения! Будем улучшать роутер!