Upgrading to Flight 5.0
This major release of the framework has a focus on improving performance and preparing for future architectural changes to the framework.
The changes are as follows:
- Emotion 9 has been removed and replaced with Linaria
- Theme values must be defined in theme.json instead of in Theme.js
- react-pose (animation library) has been removed for performance reasons
- The deprecated filter components have been removed
- The deprecated variant components/hooks have been removed
- The ConfigSwitch component has been removed
- A new notification system (for displaying ‘toasts’) has been added to the core package in favour of react-toastify
-
The
SelectDropdown
component and Downshift have been removed in favour of theDropdownMenu
component in the UI package -
Product and Category pages no longer initially render with mocked
product
andcategory
objects
The biggest change in the release is the removal of Emotion 9, in favour of Linaria, a zero-runtime CSS-in-JS library.
Upgrade steps
The steps to upgrade to 5.0 are listed below. Each step links to an explanation and guide.
- Update all @jetshop packages to 5.0
- Run the emotion-to-linaria codemod on MacOS or Linux
- Read the Migrating to Linaria documentation , as it describes how to fix some warnings you receive during running codemod, and includes some additional manual fixes you need to do.
-
Update
Theme.js
, and createtheme-variables.js
- Add null checks to the product and category pages
-
add
.linaria-cache*
to.gitignore
-
Helmet
is no longer a default export fromreact-helmet-async
, upgrade your code to import correctly:import { Helmet } from 'react-helmet-async'
- Remove any uses of SelectDropdown, ClearFilter, MultiSelectList, SelectList, SizeSelector
- If still using the deprecated filter components, upgrade to the new implementation
- Run the 4.0 codemod if you haven’t already done so
- If still using the deprecated variant handling, upgrade to the new implementation
- react-pose has been removed from dependencies. Either install react-pose or refactor components using the library (removing it decreases gzipped bundle by ~20kb)
- lodash.get has been removed from dependencies. Either install lodash.get or update the code wherever it was used
- react-slider has been removed from dependencies. If you are using this library (ex. range filter), then install react-slider.
- Remove ConfigSwitch if using product configurations
- Remove react-toastify and instead use the notification component and hooks (optional, but recommended — decreases gzipped bundle by ~15kb)
Upgrading the dependencies
Start off by upgrading your dependencies:
"@jetshop/core": "^5.0.0",
"@jetshop/intl": "^5.0.0",
"@jetshop/react-scripts": "^5.0.0",
"@jetshop/ui": "^5.0.0",
Upgrade to the new filter implementation
If still using the deprecated filter components, upgrade to the new implementation.
Removal of SelectDropdown (and Downshift)
The SelectDropdown
component and a number of related components have been
removed from the @jetshop/ui
package. This enabled us to remove Downshift from
the bundle, reducing bundle size. The following components have been removed:
- @jetshop/ui/Select/SelectComponents/ClearFilter.tsx
- @jetshop/ui/Select/SelectComponents/MultiSelectList.tsx
- @jetshop/ui/Select/SelectComponents/SelectList.tsx
- @jetshop/ui/Select/SelectDropdown.tsx
- @jetshop/ui/Select/SizeSelector.tsx
We recommend using the new Dropdown Menu component that is well-documented, and easier to customise for various use-cases.
The other components that were removed were used along with the old and now-removed filter implementation. As part of 5.0 you will need to upgrade to the newer (hook-based) filter implementation that was released in 3.7.0. The migration guide for filters can be found here.