Что такое ViteStory?

ViteStory — это расширение для VitePress, предназначенное для документирования UI-компонентов в единой среде. Он объединяет возможности VitePress для создания и управления документацией с функциональностью, аналогичной Storybook, Histoire и Styleguidist, чтобы разработчики могли не только описывать компоненты, но и визуально тестировать их в изолированной среде.

Зачем?

Сегодня многие проекты используют VitePress для демонстрации UI Kit, такие как Codex, shadcn-vue, Radix Vue и другие. Тем не менее, разработчикам этих проектов приходится тратить много времени на ручную работу по документированию компонентов, что особенно усложняется при внесении последующих изменений.

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

Почему не StoryBook?

Storybook изначально разрабатывался с прицелом на React, поэтому полноценная поддержка Vue-компонентов, особенно однофайловых компонентов (SFC), долгое время оставалась ограниченной. Это заставляло Vue-разработчиков искать альтернативы или создавать собственные решения для документирования своих библиотек.

С появлением VitePress, который позволяет использовать Vue для создания и управления документацией, эти ограничения снимаются. Теперь Vue-разработчики могут строить документацию своих UI-компонентов в более нативной для них среде. С ViteStory разработчики получают гибкость в том, как организовать и представить свои компоненты, без необходимости подстраиваться под React-ориентированные решения.

Почему не Histoire?

Histoire стал прорывом в документировании Vue-компонентов, решая многие проблемы Storybook. Тем не менее, у него есть свои ограничения, которые сдерживают гибкость и эффективность при масштабировании.

Ограничения производительности и сборки

Histoire пытается собрать все компоненты сразу при запуске, что замедляет процесс в крупных коллекциях. ViteStory на основе VitePress, напротив, собирает страницы по мере их посещения, что ускоряет загрузку и улучшает производительность в режиме разработки.

Ограниченная кастомизация и расширяемость

Документация Histoire по созданию плагинов ограничена, что усложняет расширение и настройку под нестандартные потребности. Кроме того, будучи самостоятельным приложением, Histoire не так гибок, как VitePress, в плане интеграции и настройки. ViteStory наследует кастомизацию и функциональные возможности VitePress, что даёт пользователям доступ к обширной экосистеме плагинов и возможность легко адаптировать документацию под свои задачи.

Завиcимость от команды разработчиков

Будущее Histoire полностью зависит от его разработчиков, и любая значительная доработка требует их вовлечения. ViteStory, напротив, полагается на стабильную платформу VitePress, что снижает риск зависимости от одного инструмента и распределяет нагрузку между командами, работающими над Vite и VitePress, что делает развитие ViteStory более устойчивым и гибким.

Будущее и цели

Цель ViteStory — стать основным инструментом для документирования UI Kit в экосистеме Vite. Мы придерживаемся философии минимальной сложности и всегда будем основываться на возможностях VitePress, избегая создания избыточных решений.

В долгосрочной перспективе ViteStory будет развиваться как простой и гибкий инструмент, предоставляющий пользователям готовую структуру для описания и демонстрации компонентов, легко интегрирующуюся с экосистемой Vue и Vite.