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 the DropdownMenu component in the UI package
• Product and Category pages no longer initially render with mocked product and category 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.

1. Update all @jetshop packages to 5.0
2. Run the emotion-to-linaria codemod on MacOS or Linux
3. 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.
4. Update Theme.js, and create theme-variables.js
5. Add null checks to the product and category pages
6. add .linaria-cache* to .gitignore
7. Helmet is no longer a default export from react-helmet-async , upgrade your code to import correctly: import { Helmet } from 'react-helmet-async'
8. Remove any uses of SelectDropdown, ClearFilter, MultiSelectList, SelectList, SizeSelector
9. If still using the deprecated filter components, upgrade to the new implementation
10. Run the 4.0 codemod if you haven’t already done so
11. If still using the deprecated variant handling, upgrade to the new implementation
12. react-pose has been removed from dependencies. Either install react-pose or refactor components using the library (removing it decreases gzipped bundle by ~20kb)
13. lodash.get has been removed from dependencies. Either install lodash.get or update the code wherever it was used
14. react-slider has been removed from dependencies. If you are using this library (ex. range filter), then install react-slider.
15. Remove ConfigSwitch if using product configurations
16. 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.