javascript

React-Hot-Loader v4.6

  • суббота, 15 декабря 2018 г. в 00:19:27
https://habr.com/post/433122/
  • JavaScript
  • ReactJS


Примерно месяц назад вышли React Hooks, и сразу же выяснилось что React-Hot-Loader портит все малину и не только сам с ними не очень совместим, так еще и весь остальной код ломает. В общем это был жаркий месяц...


Hot

Что внутри?


  • Новый API для HMR
  • Полная поддержка React 16.6 – React.lazy, React.memo и forwardRef
  • Конечно же hooks
  • React--dom (что бы это не значило)
  • Webpack plugin
  • Automagic ErrorBoundaries
  • Pure Render
  • “Principles”

Новый API для HMR


Тут почти ничего не изменилось — был hot — остался hot. Только стал короче и умнее:


Before
import {hot} from 'react-hot-loader';
....
export default hot(module)(MyComponent)


Now
import {hot} from 'react-hot-loader/root';
....
export default hot(MyComponent)

На самом деле новый hot это просто старый, разделенный на две части. В итоге можно детектировать ситуации когда первая часть была вызвана, а вторая нет (подробности).


React 16.6 support


forwardRef просто работает(никто не сказал что они не работали раньше), memo будет обновлен несмотря на то что он memo, ну а lazy научился пере-импортировать свои внутрености.


И конечно же все работает прямо из кробки.


React Hooks support


После выхода 16.7 стало понятно, что с Hooks беда. К сожалению этой беде были подвержены такие крупные проекты как StoryBook(issue) и Gatsby(issue).


Проблема итекала из самой природы React-Hot-Loader — для того чтобы обмануть React и предотвратить уничтожение старой версии дерева HotLoader оборачивает каждый компонент во враппер, который меняет только ссылку на "реальный" компонент внутри себя.
Конечно же SFC были обернуты в Components, и все сломалось.


На самом деле SFC оборачивались с SFC, которые возвращали экземпляр Класса. Очень недокументированная "фабричная" фича Реакта.

Сообщество быстро нашло выход(до которого я сам с ходу не додумался), благо надо было только изменить одну опцию — {pureSFC: true}, и RHL будет переходит в более простой режим работы, который ранее был выключен из-за проблема с deep-force-update, который мы сейчас тоже обновили.


React-Hot-Dom


Hot-Loader всегда был про хакнуть Реакт, и делал это через перегрузку createElement и возврат "проксированных" компонентов, чтобы обмануть проверку внутри React-Dom. Теперь Hot-Loader будет хакать как раз эту самую проверку :) Работает изумительно.


К сожалению никакого API для этого сам реакт не предоставляет, потому мы выпустили специальный пакет — hot-loader/react-dom со всеми нужными патчами.


Поставить "patch" просто:


// this would always work
yarn add @hot-loader/react-dom@npm:react-dom

// or change your webpack config
alias: {
  'react-dom': '@hot-loader/react-dom'
}

// or do the same with package.json to enable it in parcel

Для тех кому ставить левые пакеты не хочется — в комплекте идет webpack-loader который пропатчит конкретно вашу версию react-dom.


Webpack-loader


Тот самый webpack loader, который мы прибили в версии 4, вернулся к нам опять. Зачем?


  • Чтобы быстро пережавать node_modules и предоставить больше информации о коде
  • Чтобы пропатчить react-dom
  • Для тех кому babel не люб

Automagic ErrorBoundaries


Ошибки во время разработки — любимое дело, но ошибки+react-hot-loader не любил никто — работало просто не очень, а иногда так вообще не работало.


Начиная с версии 4.6 React-Hot-Loader перед началом апдейта будет добавлять во все компоненты по componentDidCatch, а после апдейта убирать. Ошибки можно будет отловить и показать "just-in-place".


Вроде как мелочь, но эта мелочь меняет весь процесс разработки. Ну и конечно же все настраивается на свой вкус.
Error Reporter


"Pure" Render


Эта проблема была с Hot-Loader всегда. Пока носом не ткнули. Если кратко — в React Dev Tools можно по правому клику открыть меню, и прыгнуть прямо к компоненту… Точнее (было) нельзя этого сделать


dev tools


Теперь есть опция pureRender, покуда выключенная по умолчанию, которая снимает с Компонент пару сайд эффектов, которые приводят к этой бяке.


К сожалению это работает только для "Class based" компонентов, для SFC требуется патч в react-dom, про который говорилось выше.


В принципе сейчас есть возможность практически скрыть присуствует HotLoader в системе.


Principles


Буквально неделю назад Dan Abramov опубликовал свой wish list для hot-loader — 22 принципа, которым hot-loader должен соотвествовать чтобы быть если не белым и пушистым, то "правильным".


В настоящий момент 14 пункта выполнены 100%, и еще 4 на 50%. Итого — 17 из 22. В принципе не плохо, и ясно что нужно сделать, чтобы добить остальные.
Кто знает, быть можно после этого Дэн вернется в проект.


Так что


  • просто обновите hot loader!
  • замените старый hot на новый hot, знаю — звучит странно, но вы меня поняли.
  • постарайтесь как-то пропатчить react-dom. Это не так чтобы обязательно, все будет работать хорошо и без этого шага — но с ним будет совсем хорошо.
  • по идее все. Должно работать. Просто попробуйте.

С вами был ️


https://github.com/gaearon/react-hot-loader