Представляем Fela 6.0
Хотя общедоступный API как основного пакета, так и большинства плагинов и привязок был довольно стабильным в последние пару выпусков, многое изменилось в базовой реализации.
Выполняя нашу миссию по созданию самого мощного инструментария для стилизации, мы с гордостью представляем совершенно новую основную версию Fela! Давайте рассмотрим изменения и то, как они улучшают ваше приложение и удобство использования:
Механизм кеширования
До сих пор несколько строковых кешей, включая чистые строки CSS, использовались вместе с кешем key-className для прямого пропуска отображаемых classNames. Это позволило обеспечить сверхбыстрый рендеринг строк для SSR и режима разработки, но в любом случае не имел отношения к производственному режиму.
Новая реализация теперь использует кэш ключевой ссылки, где ссылка - это объект, содержащий все, что нам нужно для рендеринга стилей.
Благодаря новому механизму мы теперь можем правильно регидрировать разметку, отображаемую на стороне сервера, на клиенте. Это значительно сокращает время начального рендеринга!
Кроме того, требовалось полностью предварительно скомпилировать правила во время согласования с использованием нашего нового плагина babel.
Бабель-плагин-фела
В этом выпуске также была опубликована самая первая версия нового плагина babel от Fela. Он извлекает объявления статического стиля и выполняет предварительную рендеринг во время компиляции исходного кода, чтобы оптимизировать размер пакета и производительность рендеринга .
Сейчас он довольно ограничен и работает только с createComponent-HoC, предоставляемым react-fela, preact-fela и inferno-fela. Однако вскоре будут отправлены другие варианты использования.
PubSub ThemeProvider
Полностью переписано оформление со встроенным ThemeProvider. Старая реализация была основана исключительно на контексте React. Он отлично работал со статическими темами и по умолчанию предоставлял каждому компоненту Fela дополнительный объект темы.
Однако динамические изменения темы могли быть пропущены из-за того, что контекст React не обновляется для дочерних компонентов. если какой-либо родительский компонент реализует функцию shouldComponentUpdate, проверяющую значение false . (например, если вы используете connect-HoC от react-redux).
Чтобы поддерживать реальную динамическую тематику, ThemeProvider был переработан и теперь построен на основе шаблона проектирования публикация-подписка.
Кроме того, теперь мы поставляем withTheme- HoC , чтобы безопасно внедрить объект темы в любой компонент React.
@supports
Также впервые мы официально поддерживаем синтаксис @supports CSS. Его можно использовать так же, как медиа-запросы. Мы даже поддерживаем вложение, которое будет автоматически преобразовано в один составной запрос.
Прочие улучшения
Помимо перечисленных выше основных изменений, мы рады добавить в Fela дальнейшие улучшения. Мы даже более счастливы сказать, что большинство этих улучшений были сделаны сообществом по PR:
- подъем статических методов компонентов
- преобразование справа налево с использованием fela-plugin-rtl или fela-plugin-bidi
- блокировка чувствительных к рекламе имен классов по умолчанию
- использование стилей-отладчика для отладки верстки
- общие улучшения определения TypeScript
Как всегда, это только начало. Мы еще не закончили.
Если вам нравятся улучшения и / или сама Fela, подумайте поддержите нас в OpenCollective. С вашей помощью мы сможем воплотить в жизнь лучший ремень для укладки. Вы также можете следить за Fela в Твиттере.
