Об этом проекте

Zag — это JavaScript-библиотека конечных автоматов для создания доступных UI-компонентов. Ее заявленная цель — избежать повторной реализации общих паттернов компонентов (вкладок, меню, модальных окон, подсказок и других) отдельно в каждом фреймворке путем однократного моделирования логики взаимодействия независимым от фреймворка способом. Основные идеи, изложенные в README: - Пишите один раз, используйте везде: взаимодействие компонентов моделируется независимо от какого-либо фреймворка, а адаптеры предоставляются для React, Solid, Svelte и Vue. - Фокус на доступности: в проекте утверждается, что он обрабатывает такие детали, как взаимодействие с клавиатурой, управление фокусом, а также роли и атрибуты ARIA. - Headless: API автоматов описываются как полностью лишенные стилей, что оставляет выбор решения для стилизации за разработчиком. - Конечные автоматы: реализация построена на идеях диаграмм состояний (statecharts), хотя в README отмечается, что она не следует спецификации SCXML. Модель использования: автоматы публикуются для каждого компонента в виде отдельных пакетов, например @zag-js/dialog и @zag-js/tooltip, устанавливаемых с помощью npm или yarn. Обертки для фреймворков, такие как @zag-js/react, @zag-js/vue, @zag-js/solid и @zag-js/svelte, позволяют использовать автомат внутри приложения. Пример для React в README показывает использование useMachine из @zag-js/react в сочетании с пакетом компонента, а затем connect(service, normalizeProps) для создания API пропсов, которые распределяются (spread) по элементам, таким как корневой контейнер и каждый элемент. Руководящие принципы, изложенные в README: автоматы и тесты моделируются на основе практик разработки WAI-ARIA; сквозные (end-to-end) тесты пишутся для каждого компонента, чтобы поведение было согласованным во всех фреймворках; а автоматы должны оставаться легковесными и простыми, избегая сложных концепций автоматов, таких как spawn и вложенные состояния. Примечания по репозиторию и рабочему процессу: - Ссылки на документацию и журнал изменений (changelog) приведены в README (zagjs.com и CHANGELOG.md). - Сборка использует esbuild и turborepo для параллельной сборки пакетов, генерируя выходные данные в форматах CJS, ESM и DTS. - Существуют стартовые примеры для React (Next.js TypeScript), Vue 3, Solid и Svelte. - Сквозные тесты используют Playwright и запускаются для каждого фреймворка (React, Vue, Solid). - Предоставляются команды генератора для создания шаблона нового пакета автомата или нового утилитарного пакета. - Другие команды охватывают запуск тестов, линтинг, сборку и запуск веб-сайта. В README также упоминается ряд источников вдохновения, включая дублирующийся код между реализациями Chakra UI для React и Vue, чистые паттерны UI, Material Components Web, Radix UI, XState, Vue.js, Lit и Sonner. Руководство по внесению вклада указывает на метку Good First Issue, сообщения об ошибках и пробелах в документации, а также запросы на новые функции. Проект лицензирован под MIT и поддерживается Chakra Systems Inc.