Проблема: “С styled-components смена темы занимает несколько секунд, они безнадежны”. Плавали, знаем. Совет простой - не использовать динамические значения от пропсов и темы. Нет ну иногда можно, для всяких вариантов, но для темы точно лучше использовать уже везде доступные css-vars.

Но как это делать тайпсейф? В лоб:

// no
color: ${p => p.theme.color}

// yes
color: ${THEME.color}

Заведите контанту темы со всеми параметрами и придуманными css-vars в значениях. Не забудьте закинуть для всех переменных значения в руте, подвяжите какие-то из них на стейт, если нужно.

Конкретно этот совет почему-то не подсвечен в прекрасной статье The styled-components Happy Path, но в остальном крайне рекомендую к ее ознакомлению пользователям SC.

Не оставлю вас в пятницу без видосов 🙂
Зацените на что способно лего https://www.youtube.com/c/BrickTechnology/videos

Буду под #help_oss публиковать разные простые ишьесы, может кому интересно будет порешать и свой github пополнить.

Например, вот.

Привет! @reatom/form и @reatom/form-web уже почти готовы, вот моя песочница где я их разрабатываю. Пример использования в App.tsx. Обратите внимание, что апишка практически никак не завязана на реакт :)

Объявление филдов через заранее созданный инстанс формы помогает правильно синкать все рантайм связи. Само объявление (а не регистрация через name и тп) необходимо для надежной проверки типов - тип для переменной data корректно выводится, несмотря на то что во всем App.tsx вообще нет типов. Ну и все эти филды-этомы можно как угодно комбинировать совместо: зависимые поля, лайфсайкл хуки - проще простого, попозже наделаю примеров.

Весит это все (кор, биндинги реакта, сами формы) в три раза меньше react-hook-form, а bind к элементу раз в 10 быстрее register из react-hook-form (и это заметно на больших формах, я проверял).

Основные штуки (регистрация, валидация, типы и еще кучка всего) уже написаны, но сейчас есть только поддержка HTMLInputElement (и то не все типы).

В файле reatom-form-web.tsx есть константа UNSUPPORTED_INPUT_TYPES, хорошо бы перетащить из нее хотя бы radio, во вторую очередь file. Так же есть тудушка на HTMLSelectElement.
Если кто-то может с этим помочь - будет очень круто! Форкайте сендбокс, изменения в итоге через ПР закинем в репо реатома, когда я запаблишу новые пакеты и накопленные изменения для npm-react, lens, primitives, logger.