ScandiPWA Updates: July 28 (Issue #57)
Performance optimizations, bugfixes
The ScandiPWA team prepared for you updates about performance optimizations and bug fixed, feedback from ScandiPWA partners, and a new YouTube video!
Performance
Note: this release contains changes that require manual action when migrating from the previous versions. See the * Important notes* section for details.
This release improves the Lighthouse v6 score from ~30 to ~75. It has been achieved by smarter code-splitting, resource load — sequence, and configuration management. In order to get the same results on your project, update the configuration, .html and .phtml templates and follow the new ESLint rule - create-config-files.
Improvements
- Add aggregations support
- Port the ESLint plugin
@scandipwa/eslint-plugin-scandipwa-guidelinesfrom 3.x - Delete redundant components
- Update Danish translations
Bug fixes
- Different shipping and billing addresses are not 100% respected during the checkout #770
- Incorrect field validation message #761
- Product list stays filtered when navigating back and forth to category #698
- Unable to go back from checkout on both mobile and desktop
- You can now use the back button in popups
- You can now use the back button in overlays
Incompatible changes and important notes
Config files for string constants
In pre-2.15 versions constants were declared right in the components they were related to. This reduced performance rising the bundle size when these constants were imported from other bundles, importing the whole module and just using the constants. To rise the performance these constants have been moved to the configuration files of the corresponding components. Corresponding ESLint rule has also been created.
Due to that, all the imports of such constants in your custom code are now invalid. To correct that, fix all the errors related to some constants not being found, replacing the import with the new constants’ location.
/* Image.component.js => Image.config.js */// ...export const IMAGE_LOADING = 0;
export const IMAGE_LOADED = 1;
export const IMAGE_NOT_FOUND = 2;
export const IMAGE_NOT_SPECIFIED = 3;
Routing on mobile
Header no longer gets updated every time something changes in history. Now components are responsible for header state on their own.
Webpack dependencies
Please require react-visisbility-sensor, otherwise, the theme install will fail.
Grab them patches here:
Great feedback from ScandiPWA partners
Very excited to see amazing feedback from one of our solution partner agency choosing ScandiPWA for their PWA Magento projects!
Read the blog post published by Embitel to learn “Why ScandiPWA is the only choice for Embitel”.
ScandiPWA Weekly Updates
Watch the video and follow ScandiPWA YouTube Chanel
We hope you enjoyed the latest ScandiPWA updates. Follow us on Twitter or join the first Magento PWA community in our Slack channel where you can stay up-to-date with our work, explore the latest technical progress, ask questions, and meet other enthusiasts!
ScandiPWA is the first open-source PWA theme for Magento
