А что вы мне сделаете? Я в другом городе =D
100% дам что 99% фронтендеров скажут мне что я переизобретаю велосипед / переоткрываю headlessUI, react-aria, или что там ещё сейчас на слуху.
И да, и нет.
Во-первых это не то что вы подумали.
2 клиентские зависимости в бандле - uuid и classnames. Не считая самих рендер-движков конечно. Планируется на выходе максимум 20 компонентов, это не так и много. Суть в том, что на самом деле нам не нужна толпа разных компонентов, если их поведение идентично.
В документации будет cookbook - как сделать toggle из checkbox, tabs из button group, drawer из modal, итп.
Во-вторых это не чистый UI Kit.
В пакет так же входит пачка плагинов, решающих ряд проблем, присущих и React, и Vue, которые за 6 лет разработки на оных меня уже достали.
На данный момент их 4:
- Плагин провайдер svg иконок
- Плагин управления диалоговыми окнами
- Плагин управления уведомлениями
- Плагин-мемоизатор функций
Планируется еще один - рестайл-провайдер. О его реализации я пока думаю. Он понадобится для подтягивания изменённых простых компонентов в сложносоставные базовые, без необходимости их лишний раз слотировать.
В чём суть.
А в том что в UI компонентах логика всегда единая. Она отличается лишь в мелочах, а базис везде один. Я устал переписывать этот базис по новой 100500 раз, поэтому решил сделать так.
Берём сначал укропа!
Потом кошачью жопу!..
Или стоп, минуточку... перепутал с докой ангуляра =D
Беру последний кастомный ui kit который я писал, вырезаю оттуда все стили, удаляю все те компоненты, где логика повторялась, и выношу весь стайлинг в props. Беру vanilla-extract и прописываю дефолтные стили компонента в виде дефолтных пропов. Варианты модификаторов состояний так же завязываю на стили через style variants. Весь этот огород элементов и модификаторов прокидываю пропами в компоненты и вуаля.
Первый этап завершён.
Дальше открываю компонент за компонентом и слотирую всё что может быть необходимо для слотирования. Параллельно вспоминаю все упоротые идеи дизайнеров, которые я не мог реализовать при применении других китов и решаю вопросики. Добавил таким образом возможность стилизовать плейсхолдеры, использовать в нём вёрстку не ограничиваясь одним псевдоэлементом в базе. Ну признайтесь - с кем не бывало - открываешь макет, а дизайнер в плейсхолдере инпута сделал звёздочку красной =D а то и в плейсхолдере textarea разместил свёрстанный ненумерованный список.
Вообщем поколдовали над слотами и их фишками и второй этап завершён.
Третьим этапом вспоминаешь все сложные компоненты с определением поведения или вёрсткой в которых были проблемы. У меня отдельную жопоболь всегда вызывали Table и Calendar + Datepicker. У Table в либах постоянно API говно. Часто сложно пиксель в пиксель вычухать ширины колонок, намутить рекурсивный рендер строк (ака таблица-дерево), придумать как включать и отключать колонки, сделать их прилипающими.
С календарём часто требуются лишние зависимости для работы с датами типа date-fns, дай бог не moment, которые на мой взгляд нафиг не сдались если перед тобой не стоит прямой задачи рендерить локали относительного времени (а календарь как раз не тот случай).
Четвёртым этапом пишешь новость на хабр и шлёшь в жопу адептов tree-shaking, которые возомнили что он вкупе с SSR, Astro, code-splitting и прочими непотребными матерными словами решает вопросы ожиревающего с каждым днём фронта веб-приложений!
Кто за путь лёгкого кода и считает, что размер бандла приложения не должен превышать 100 kb gzip - бобро поржаловать в репозиторий!
PS тому кто поставил минус насылаю порчу на понос
Источник новости: habr.com
