Release 9.0.0
NOTE:
This changelog only contains release notes for PWA Studio and Venia 9.0.0.
For older release notes, see PWA Studio releases.
Table of contents
- What's new in 9.0.0
- Pull requests merged in this release
- Known issues
- Upgrading from a previous version
What's new in 9.0.0
PWA Studio 9.0.0 contains new features, refactors, and various improvements.
IMPORTANT:
Due to an issue with the scaffolding tool released in 9.0.0, we released 9.0.1 quickly to resolve this issue.
Extensibility framework improvements
This release adds several improvements to the extensibility framework in PWA Studio to make it easier for developers to customize their storefronts.
For an overview of this framework, check out the new Extensibility framework topic on the docs site.
In previous releases, Peregrine talons had limited Target coverage.
This release adds an automatic API generator to Peregrine that exposes all hooks and talons as Targets.
Now, existing and future hooks and talons in Peregrine automatically get their own Targets API that developers may use to modify or extend functionality.
This release also adds the Targetables feature to the extensibility framework.
These represent source files used in your PWA Studio project, and
they give developers the ability to change the source code during the build process.
With Targetables, developers no longer have to copy PWA Studio source code into their storefront projects to make minor modifications.
PWA Studio extensions
PWA Studio's extensibility framework lets developers create extensions and install them as project dependencies in their storefronts.
As part of the work on the new extensibility framework, we refactored and relocated existing Venia features into PWA Studio extensions.
We also developed new extensions that provide useful Venia features that developers can add to their projects.
The source code for these extensions are available under the packages/extensions directory in the PWA Studio repository.
upward-security-headers
: intercepts build targets to add security headers to UPWARD
venia-adobe-data-layer
: provides Adobe Client Data Layer support for your project
venia-sample-backends
: provides demo Magento backends and backend validation utilities for your project
(this extension should be removed prior to going live)
venia-sample-language-packs
: provides example translations to illustrate how new languages can be installed into your storefronts
Internationalization and localization
The internationalization(i18n) feature in PWA Studio lets developers localize their storefront content according to different regions and languages.
The Magento backend provides your storefront with this list of regions and languages and the I18n feature provides translated content using PWA Studio language pack extensions.
As part of the i18n feature work, we refactored Venia UI components and gave them the ability to display the correct translations for multi-language storefronts.
This release also gives developers the ability to develop and install PWA Studio language packages as NPM dependencies.
An example of a language pack extension is in the packages/extensions directory in the PWA Studio repository.
For more information, read the new topic on the Localization feature.
My Account
This release adds components that support My Account features for customers that create an account with a store.
My Account features included in this release:
- Wishlist
- Saved Payments
- Address Book
- Order History
Increased test coverage
Our continued commitment to stability and quality has seen an increase in overall unit test code coverage.
Coverage as reported by coveralls.io:
Current coverage (9.0.0)
: 84.19%
Previous coverage (8.0.0)
: 79.21%
Magento release support change
Previous releases of PWA Studio supported multiple versions of the Magento back-end.
To help us deliver value faster, we modified our support matrix.
Starting with PWA Studio & Venia 9.0.0, we will only support the most recent version of Magento.
For example, version 9.0.0 only supports Magento 2.4.2.
Minor versions of PWA Studio & Venia released between typical Magento releases will support the last publicly available release.
Pull requests merged in this release
Venia (storefront and visual component library)
| Description | Change type | PR |
|---|---|---|
| Created UI skeleton for Saved Payments | Feature | #2671 |
| Created component for displaying account information | Feature | #2672 |
| Added ability for shoppers to change locale using a store view switcher | Feature | #2686 |
| Created the main view for Wishlist | Feature | #2692 |
| Added the expanded view in the order history table | Feature | #2703 |
| Created a currency switcher component | Feature | #2728 |
Added USE_STORE_CODE_IN_URL environment variable configuration
| Feature | #2735 |
| Created Wishlist UI | Feature | #2766 |
| Added ability to determine whether to unmount or just hide child components in the Dialog component | Feature | #2767 |
| Added ability to remove products from Wishlist | Feature | #2793 |
| Added a "maskable icon" to Venia for Google Lighthouse | Feature | #2818 |
| Created message to display when no allowed or configured payment methods are present | Feature | #2855 |
| Created the main view for Address Book in My Account | Feature | #2857 |
| Added ability to Add and Edit addresses in the Address Book | Feature | #2879 |
| Created the main view for Saved payment methods | Feature | #2882 |
| Added ability to delete Address from Address Book | Feature | #2888 |
| Created new Sign In view for Checkout flow | Feature | #2889 |
| Updated logic for routes handling to accept an array of paths | Feature | #2893 |
| Replaced hardcoded root category id with an actual value retrieved from a query | Feature | #2902 |
| Added search by order number feature to the order history page | Feature | #2916 |
| Added pagination for Order History | Feature | #2928 |
| Refactored Edit Payment to use Dialog component | Refactor | #2806 |
| Refactored Edit Product to use Dialog component | Refactor | #2824 |
| Refactored Payment feature to make it extendable | Refactor | #2838 |
Added access to checkout's useOverview() talon
| Update | #2636 |
| Updated the Search trigger button in the site header to behave like My Account and Cart trigger buttons | Update | #2685 |
| Replaced the ProductQuantity component on the Product page with a QuantityFields stepper component | Update | #2690 |
| Localized My Account and Signed In sidebar | Update | #2721 |
| Localized Mini Cart and Search | Update | #2734 |
| Localized Cart | Update | #2740 |
| Localized Checkout page | Update | #2759 |
| Localized CMS | Update | #2764 |
| Localized Category page | Update | #2771 |
| Localized Product page | Update | #2772 |
| Localized Form Validators | Update | #2781 |
| Localized additional client-side strings | Update | #2799 |
| Removed temp code | Update | #2811 |
| Update service worker logic to handle all Venia images | Update | #2846 |
| Fixed a bug where the Zip code field does not get cleared when switching country | Bugfix | #2680 |
| Fixed a bug where the Filter and Sort buttons would not display at same time | Bugfix | #2681 |
| Removed ability to submit form data prefixed/suffixed with spaces for all fields | Bugfix | #2749 |
| Limited clickable link area for the product name on the product page | Bugfix | #2755 |
| Fixed message on the Search Page when searching for less than 3 characters | Bugfix | #2756 |
| Fixed a bug where clicking on a Label would not focus Input | Bugfix | #2774 |
Fixed theme_color value in the manifest.json
| Bugfix | #2823 |
| Fixed button type on product image carousel thumbnails | Bugfix | #2844 |
| Fixed Service Worker caching for home page routes with store code | Bugfix | #2856 |
Peregrine library
| Description | Change type | PR |
|---|---|---|
| Created a shallow merge utility for classes in UI components and merge operations in talons | Feature | #2794 |
Increased useApp() talon test coverage
| Update | #2782 |
Increased peregrine/lib/apollo test coverage
| Update | #2785 |
| Increased CartPage test coverage | Update | #2847 |
| Improved RootComponents talons test coverage | Update | #2896 |
| Removed routes to features still in progress | Update | #2918 |
Migrated GQL related files and folders to the peregrine package
| Refactor | #2712 |
Removed the @client directive in Order History queries
| Refactor | #2786 |
| Fixed spelling for a function name | Refactor | #2807 |
| Refactored MagentoRoute to use ApolloClient | Refactor | #2859 |
| Moved product detail GraphQl fields to fragment | Refactor | #2868 |
Fixed JavaScript errors thrown by the useOrderConfirmationPage talon
| Bugfix | #2850 |
Fixed apiBase URL in resolveUnknownRoute.js
| Bugfix | #2877 |
| Fixed broken top level category navigation | Bugfix | #2911 |
| Fixed offline cached search and category pages | Bugfix | #2929 |
Build tools
| Description | Change type | PR |
|---|---|---|
| Enabled PWA Studio packages and extensions to provide translations | Feature | #2696 |
| Added support for GIF files in Webpack config | Feature | #2714 |
| Created Targetables feature and expanded Peregrine talons Target coverage | Feature | #2765 |
| Enabled self-signed certificates for backend validation | Feature | #2891 |
| Fixed unsupported webp image format for Safari | Bugfix | #2778 |
Fixed bug related to apicache overriding good cache headers
| Bugfix | #2870 |
Fixed missing projectConfig in create-custom-origin command
| Bugfix | #2897 |
Extensions
| Description | Change type | PR |
|---|---|---|
| Enable async tapping of Targets | Feature | #2718 |
| Added i18n feature as an extension with French language pack included | Feature | #2840 |
| Added the Adobe Client Data Layer as an extension | Feature | #2852 |
| Added new extension to pick from multiple sample backends | Feature | #2853 |
| Updated PageBuilder form field/field group viewport to read non-media styles | Update | #2881 |
| Converted PageBuilder style blocks to inline styles to prevent backward incompatible changes | Bugfix | #2694 |
Documentation
| Description | Change type | PR |
|---|---|---|
| Created docs for the Internationalization feature | Documentation | #2741 |
| Created a new tutorial for intercepting talons | Documentation | #2777 |
| Created a new tutorial on how to use environment variables in front end code | Documentation | #2819 |
| Created extensibility framework overview topic | Documentation | #2863 |
| Removed "scroll to top" code in GraphQL tutorial | Update | #2715 |
| Update code sample in static route tutorial | Update | #2725 |
| Updated extensibility doc with minor fixes | Update | #2742 |
| Updated code samples in tutorial | Update | #2746 |
| Added info about RAIL model | Update | #2761 |
| Added the Adobe logo to the doc site header | Update | #2812 |
| Updated cloud deployment topic | Update | #2871 |
| Refactored tutorials section | Refactor | #2907 |
| Removed duplicate word from doc | Bugfix | #2865 |
Misc
| Description | Change type | PR |
|---|---|---|
Removed the venia-styleguide package
| Update | #2706 |
Update use of Whitelist to Allowlist
| Update | #2779 |
Added jsx-no-literals linting rule
| Update | #2789 |
| Update PR template to add translation entry to checklist | Update | #2800 |
Fixed a Storybook bug related to fetchLocaleData in storybook config
| Bugfix | #2801 |
| Fix failing unit tests related to race conditions | Bugfix | #2880 |
| Fixed a Storybook bug related to the relative import of a local custom loader | Bugfix | #2912 |
Known issues
- If you are using Multi-Source Inventory(MSI), a GraphQL issue prevents users from adding a configurable product to the shopping cart on non-default store views.
- Prerender feature is unable to cache HTML on Fastly enabled environments.
- The
yarn watchprocess may run out of memory if left running for an extended amount of time.
If an error occurs because of this, restart the watcher.
Upgrading from a previous version
The method for updating to 9.0.0 from a previous version depends on how PWA Studio is incorporated into your project.
The following are common use cases we have identified and how to update the project code.
Scaffolded project
Using the scaffolding tool is the recommended method for starting a new storefront project.
This tool generates a copy of the storefront project defined in the Venia concept package.
Upgrade method: Update dependencies and manual merge
Since scaffolded projects consume PWA Studio libraries as dependencies, you just need to update your PWA Studio dependencies in your package.json file to use the released version.
After that, install the new dependencies using the install command:
yarn installor
npm installIf you need to update other project files, such as configuration and build scripts,
you need to use a diff tool to compare your projects files with those of Venia concept.
This will help determine what changes you need to manually copy into your project files.
PWA Studio fork
Many PWA Studio users have forked the PWA Studio Git repository.
Even though their codebase may have diverged a great deal from the current codebase, there is still a Git relationship.
Upgrade method: Update using Git
Pull and Merge the changes from the upstream repository using Git.
Most of the conflicts will be in components that we have fully refactored.
We recommend merging the library code we changed and updating component calls with any new prop signatures introduced in this version.
Manual code copies
Some PWA Studio users have copied parts of the code into their own projects.
This is similar to the Git workflow, but without the merging tools Git provides.
Upgrade method: Manual copy updates
Updating this code involves manually copying updates for the code they use.
New code may also need to be copied over if the updated code depends on it.
This method can be a chore, and we hope that some of the features in 5.0.0+ will help these users migrate to a package management approach.
NPM packages
Some users have imported the PWA Studio libraries using NPM.
This is the easiest way to work with the released versions of PWA Studio.
Upgrade method: Update package.json
To upgrade to the latest version (currently 9.0.0), simply call yarn add on each of the @magento packages. This will both update package.json in your project, as well as install the latest versions.
Sample command:
yarn add @magento/eslint-config @magento/pagebuilder @magento/peregrine @magento/pwa-buildpack @magento/upward-js @magento/venia-ui