v7.0.0

Release 7.0.0

NOTE:
This changelog only contains release notes for PWA Studio 7.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 7.0.0
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 7.0.0

PWA Studio 7.0.0 contains new features, refactors, and various improvements.

Extensibility framework

This release improves on the extensibility framework introduced in version 6.0.0.
It introduces new extension points for the Buildpack, Peregrine, and Venia UI library components.

Developers can use these extension points to extend their storefront project without duplicating and maintaining PWA-Studio code.

As of 7.0.0, PWA-Studio contains the following extension points:

Venia UI extension points

Venia UI extension points are declared in [venia-ui-declare.js][].

Target name	Description
richContentRenderers	Add custom rich content renderers to your storefront
routes	Add or modify storefront-specific routes

Peregrine extension points

Peregrine extensions points are declared in [peregrine-declare.js][].

Target name	Description
talons	Intercept specific Peregrine talons and wrap them with your custom components

Wrappable talons:

• useProductFullDetail()
• useApp()

Buildpack extension points

Buildpack extension points are declared in [declare-base.js][].

Target name	Description
enVarDefinition	Add custom environment variables to PWA-Studio's environment variables system
transformModules	Apply custom file transformers through webpack
webpackCompiler	Access the webpack compiler object
specialFeatures	Specify special features to the webpack compiler for components

New Venia look

Release 7.0.0 introduces numerous improvements to the shopper experience with various stylistic changes to the Venia example storefront.
These storefront changes are the result of extensive research by the UX team to provide an optimal shopping experience.

These improvements are available to developers as individual library components or as a whole when they set up a new storefront project.

Page Builder home page

In addition to the style changes for Venia, release 7.0.0 also adds a new home page built using [Page Builder][].
The content of this CMS page is defined in the Magento Admin using the Page Builder extension.
It showcases Page Builder content types such as Sliders, Banners, and Gallery Items.

This new page replaces the old home page content in Venia.

Check out the new Venia homepage

Standalone Cart and Checkout pages

This release builds on the standalone Shopping Cart page introduced in 6.0.0 and connects it to a new standalone Checkout page.
Developers can use these pages as starting points in their storefront projects or use the new components developed for those pages in their own solutions.

These pages are still under development as of this release, but you can view the current progress at:

https://develop.pwa-venia.com/cart

Order Confirmation page

This release adds an Order Confirmation page at the end of the cart and checkout workflow.
It contains the billing and shipping information specified during checkout along with the items ordered.

This page works with guest and authenticated checkout.
For guest checkout, the shopper is given the option to create an account for the store.

Standard Dialog component

This release introduces a standard modal window with the [Dialog component][].

Modals are child windows that render over the main application.
They are highly visual components that show important messages or prompts for user interactions.

The Dialog component introduced in this release provides a standard way of working with this modal windows.
This guarantees a unified look and feel for all your modal window use cases.

PWA Studio Fundamentals tutorials

Over the course of 7.0.0 development, the PWA Studio doc site has published introductory tutorials for working with the PWA-Studio tools and libraries.

These tutorials provide steps for common tasks associated with storefront development.
They cover everything from setting up the initial project to providing a checklist for deploying to production.

See [PWA Studio fundamentals][] for a list of these tutorials.

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Created a new Portal component	Feature	[#2436][]
Added support for png image requests for servers that cannot handle webp	Feature	[#2400][]
Implemented UX around $0 total checkout	Feature	[#2394][]
Implemented auto-population of shipping information when authenticated	Feature	[#2380][]
Implemented shopping cart merging on login	Feature	[#2377][]
Added ability to specify ratio for image component	Feature	[#2372][]
Implemented Checkout page price adjustments	Feature	[#2366][]
Created a new Dialog Component	Feature	[#2365][]
Added Storybook to Venia concept for scaffolded projects	Feature	[#2355][]
Added a new CMS home page with Page Builder content	Feature	[#2345][]
Implemented a guest payment workflow on the Checkout page	Feature	[#2320][]
Enabled the RadioGroup component to pass rest attributes to radio group items	Feature	[#2313][]
Added sorting to search page	Feature	[#2294][]
Created new Order Confirmation page	Feature	[#2288][]
Created Items Review component for Cart and Checkout	Feature	[#2257][]
Added property to specify the cart trigger color	Feature	[#2220][]
Updated home page route	Update	[#2565][]
Renamed identities to be culturally appropriate	Update	[#2478][]
Updated Cart page to show loading state while fetching data from network	Update	[#2454][]
Updated cache policy for Home page	Update	[#2453][]
Swapped usage of React Head to React Helmet Async	Update	[#2412][]
Updated Service Worker to be more strict when doing catalog image checks	Update	[#2392][]
Removed reference related to recently viewed items	Update	[#2387][]
Changed the accordion section buttons to type button	Update	[#2335][]
Changed the Venia loading spinner image to a simpler CSS spinner	Update	[#2310][]
Added check for the isRequired validation rule	Update	[#2303][]
Implemented Shipping Information form for guest checkout	Update	[#2285][]
Added Shipping Methods form to Checkout page	Update	[#2280][]
Made minor updates to the Order Summary feature	Update	[#2278][]
Styled icons with CSS	Update	[#2272][]
Added the Order Summary to the Checkout page	Update	[#2271][]
Cleaned and made Cart and Checkout pages consistent	Update	[#2258][]
Updated Checkout page GraphQL query	Update	[#2254][]
Added category description (with PageBuilder support as well) in the category view	Update	[#2226][]
Updated cms component to include meta data	Update	[#2159][]
Changed the random swatch color to the actual color	Update	[#...

v6.0.1

Release 6.0.1

NOTE:
This changelog only contains release notes for PWA Studio 6.0.1.
For older release notes, see PWA Studio releases.

Table of contents

• What's new in 6.0.1
• Pull requests merged in this release
• Upgrading from a previous version

What's new in 6.0.1

PWA Studio 6.0.1 contains a hotfix for the scaffolding generator.

This release fixes an error generated by the scaffolding generator when you run the create-project command directly.

See PR #2363 for additional details.

Upgrading from a previous version

The method for updating to 6.0.1 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.

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 6.0.1, update the project's package.json file and change the version string for any PWA Studio package dependencies.

v6.0.0

Release 6.0.0

NOTE:
This changelog only contains release notes for PWA Studio 6.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 6.0.0
• Pull requests merged in this release
• Upgrading from a previous version

What's new in 6.0.0

PWA Studio 6.0.0 contains new features, refactors, and various improvements.

Initial extensibility framework

This release contains initial work for an extensibility framework in PWA Studio.
This framework gives developers the ability to create an extensibility API for their storefront or write plugins that can tap into those API and modify storefront logic.

An example of this framework in action can be found in the Venia storefront, which exposes an API and installs the Page Builder PWA package as a dependency.

Previously the only way to add Page Builder features was to have a copy of the Page Builder module's source code inside the project itself.
This had the unfortunate side effect of you having to manually apply any code changes to your copy of Page Builder whenever a new version releases.
With the new extensibility framework, updating is as easy as installing the new version.

Caching and data fetching improvements

This release contains improved caching logic and other data fetching optimizations in the Peregrine and Venia UI component libraries.
These components have been refactored to take advantage of Apollo cache features to reduce overfetching or prevent the storage of sensitive data.

Shopping cart page components

This release adds components that can be used for a full page shopping cart experience.
The standalone cart page for Venia is still under development as of this release, but you can view the current progress at: https://develop.pwa-venia.com/cart

PWA Studio tutorials

Since the last release, the PWA Studio doc site has created a new tutorial section for PWA Studio fundamentals.
Topics in this section will be more instructional than the topics found in the Getting started section.

Currently, the following drafts have been published (with more to come):

• Project setup
• Project structure
• Add a static route

Thanks to community member rossmc for contributing the drafts for this these topics!

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Added current applied Gift Card balance to UI	Feature	[#2156][]
Added "Edit Item" feature from mini-cart into Cart Page kebab menu	Feature	[#2191][]
Added an error toast for invalid Product quantities	Feature	[#2196][]
Created initial skeleton for a checkout page	Feature	[#2181][]
Implemented sorting for Category page	Feature	[#2133][]
Added Gift Cards support to Cart page	Feature	[#2124][]
Added Shipping Method to Cart page	Feature	[#2123][]
Added a product quantity stepper to cart items	Feature	[#2115][]
Added Gift options support in cart page	Feature	[#2114][]
Added intermediate level breadcrumbs	Feature	[#2113][]
Added Cart Coupons functionality	Feature	[#2108][]
Added Cart Price Summary to cart page	Feature	[#2092][]
Created new ProductListing Component for cart page	Feature	[#2094][]
Added PriceAdjustments and Accordion components to cart page	Feature	[#2090][]
Created a standalone Cart Page	Feature	[#2084][]
Removed client-side Email Validation on Signin, Create Acount, and Forgot Password forms	Update	[#2157][]
Refactored JSX in some modules to follow standards for conditionals	Refactor	[#2200][]
Refactored usage of isFastNetwork() in service worker.	Refactor	[#2193][]
Refactored Accordion component to close sections instead of unmounting them	Refactor	[#2149][]
Refactored ErrorView to be more scalable	Refactor	[#2116][]
Refactored cart style to fit design intent	Refactor	[#2104][]
Created Firefox-specific CSS to fix text alignment issues	Bugfix	[#2233][]
Fixed Email field validation bug in Billing Information by removing field	Bugfix	[#2216][]
Fixed style for quantity field/steppers in Firefox	Bugfix	[#2206][]
Fixed Cart page sign out error when cart does not exist in cache	Bugfix	[#2189][]
Fixed a bug in the Cart page where items showed incorrect configurable options	Bugfix	[#2167][]
Fixed a bug related to search trigger focus	Bugfix	[#2165][]
Fixed venia-static files not loading out-of-the box with scaffolding command	Bugfix	[#2143][]
Fixed the incorrect export for PriceSummaryQuery	Bugfix	[#2142][]
Fixed incorrect cart page title	Bugfix	[#2140][]
Updated informed version to fix Windows 10/Edge issues	Bugfix	[#2129][]
Fixed bug that rendered price components when cart is empty	Bugfix	[#2112][]
Fixed validator for venia-ui	Bugfix	[#2095][]
Fixed search result counts not matching in different components	Bugfix	[#2037][]

Peregrine library

Description	Change type	PR
Enabled mutation queueing to prevent race conditions when multiple mutations are in flight	Feature	[#2215][]
Adds validation and input trimming for Gift Card input field	Feature	[#2175][]
Enabled real Filtering functionality by connect to GraphQL	Feature	[#2166][]
Refactored Apollo cache use to prevent overfetching	Refactor	[#2250][]
Removed mutation PII while still updating the cache correctly	Refactor	[#2240][]
Fixed a bug with the breadcrumbs in the Product Details Page talon for products without categories	Bugfix	[#2224][]
Fixed bug that showed stale suggestions during searches	Bugfix	[#2150][]
Fixed Accordion talon bugs that kept resetting sections	Bugfix	[#2147][]

Page Builder plugin

Description	Change type	PR
Re-implemented Page Builder as an extension	Feature	[#2137][]
Added support for Page Builder's Video Background feature	Feature	[#2187][]
Fixed video alignment background in embedded videos	Bugfix	[#2201][]
Fixed bug that would cause extensions utilizing Page Builder to break when upgraded	Bugfix	[#2199][]
Fixed bug where Row Full-Width contents were horizontally positioned incorrectly in desktop	Bugfix	[#2146][]
Fixed escaped HTML bug that broke the HTML content type	Bugfix	[#2283][]

Build tools

Description	Change type	PR
Added interception targets for environmental variables	Feature	[#2174][]
Add ability to conditionally ...

v5.0.1

Release 5.0.1

NOTE:
This changelog only contains release notes for PWA Studio 5.0.1.
For older release notes, see PWA Studio releases.

Table of contents

• What's new in 5.0.1
• Pull requests merged in this release
• Upgrading from a previous version

What's new in 5.0.1

PWA Studio 5.0.1 is a patch release to fix an Image loading issue and cache persistence issue.

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Fix images not loading correctly	Bugfix	#2164

Peregrine library

Description	Change type	PR
Prevent invalid mutation caching	Bugfix	#2176

Upgrading from a previous version

The method for updating to 5.0.1 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.

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 5.0.1, update the project's package.json file and change the dependency version for PWA Studio.

v5.0.0

Release 5.0.0

NOTE:
This changelog only contains release notes for PWA Studio 5.0.0 and above.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 5.0.0
• Pull requests merged in this release
• Updating from 4.0.0
• Known issues

What's new in 5.0.0

PWA Studio 5.0.0 contains new features, refactors, breaking changes, and various improvements.

Page Builder integration

Page Builder is a content creation tool developed by Magento.
It allows merchants to define store layouts using the Admin panel.

Page Builder integrating with PWA Studio means merchants may now use Page Builder to define the layout in the Magento backend and have that content rendered in a PWA Studio storefront.

This release makes the Venia RichContent component compatible with the default Page Builder content types.

Scaffolding

Getting a new PWA Studio project up and running is now easier with the @magento/create-pwa command.
This command is a user-friendly version of the create-project sub-command in the pwa-buildpack CLI tool.

Use this command to set up an initial project structure using the Venia storefront as a template.
It provides an interactive questionnaire to help configure the different parts of your project.

For more information see: Scaffolding

Talons

This release introduces the concept of Peregrine Talons.

Peregrine Talons are a set of React Hooks tailored for a specific UI component.
They contain logic for calculating the values rendered by its companion UI component.

Separating the logic and the presentational pieces of a component lets developers swap out either piece when creating custom UI components.

For more information see: Peregrine Talons

New route handler

Routing in the project has been updated to use the React Router library instead of a custom router.

The following is a summary of these changes:

• The new Routes component replaces renderRoutes()
• The new MagentoRoute component replaces MagentoRouteHandler
• The new useMagentoRoute() Talon replaces MagentoRouteHandler

State management refactors

This release refactors the way PWA Studio handles state management in Venia.
Instead of using Redux directly, Peregrine now provides a set of context providers and Hooks to interact with the different slices of state in the global data store.

For more information, read State management

REST to GraphQL migration

With the increase in GraphQL coverage in the latest Magento release (2.3.4), PWA Studio continues to refactor out REST usage in favor of GraphQL.

Various usage of REST have been converted to GraphQL.
These changes include the various cart interactions, sign-in/sign-out, and fetching country data.

For more information on GraphQL, see: GraphQL Developer Guide

Performance improvements

A lot of work has been done in this release to improve the performance provided by PWA Studio tools and libraries.

Service worker improvements

Service worker changes in this release provides smarter use of the cache and when to invalidate stale data.
Other improvements include more optimized bundles/images and route handling.

Optimized images

Handling images on the storefront has been improved in this release.
Storefronts are now able to load the optimal image for a given viewport.

New features such as pre-fetching and lazy loading also boosts page load performance.

Refactoring classes to functional components

This release refactors various classes into functional components.
This was done to align with the move towards using React Hooks throughout the project.

Breadcrumbs

The breadcrumb feature has been added to Venia's product and category pages.
Use this feature to improve navigation in your storefronts.

Potential breaking changes

Since this is a major release, some of the changes previously listed may break projects dependent on PWA Studio and its tools and components.

These changes include:

• Refactoring to produce Talons have modified the public API of some Venia components
• Converting from REST to GraphQL calls
• Optimizing images required updates that modify how images should be used
• Converting classes to functional components to use React Hooks
• Replacing MagentoRouteHandler with new component and Talon

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Added meta descriptions to root pages	Feature	[#2035][]
Added email validation to ForgotPasswordForm	Feature	[#1997][]
Improved performance by lazy loading AuthModal	Feature	[#1955][]
Improved performance by lazy loading Category filters	Feature	[#1971][]
Improved Image fit with Fastly	Feature	[#1976][]
Added product page breadcrumbs	Feature	[#1960][]
Added category page breadcrumbs	Feature	[#1949][]
Improved product page caching	Feature	[#1935][]
Added PageBuilder components	Feature	[#1872][]
Implemented the apollo-link-retry Link	Feature	[#1799][]
Created component for showing categories with no products	Feature	[#1496][]
Updated template HTML to include noscript fallback	Update	[#2034][]
Removed id from getCustomer response object	Update	[#2028][]
Added Email validation in signin form	Update	[#1981][]
Added support for Carousel appearance for Product content type	Update	[#1951][]
Updated static to venia-static	Update	[#1932][]
Upgraded Apollo View layer to Hooks	Update	[#1827][]
Improved efficiency of the getNavigationMenu query	Update	[#1867][]
Added field labels for inputs	Update	[#1845][]
Update mixin references to Talon	Update	[#1820][]
Deleted unused home component	Update	[#1798][]
Implemented route-based code splitting	Update	[#1765][]
Updated Swatch Treatments	Update	[#1512][]
Added support for initial selections on the Edit Item screen	Update	[#1592][]
Replaced connected components with context Hooks	Update	[#1664][]
Removed sticky attribute from the pagination	Update	[#1735][]
Replaced rem to pixels in the height and width attribute for the pagination image	Update	[#1738][]
Refactored checkout workflow to set shipping address/get shipping methods with GraphQL	Refactor	[#2018][]
Refactored code to use updateItem mutations	Refactor	[#2017][]
Refactored code to use GraphQL for adding items to cart	Refactor	[#1987][]
Replaced REST endpoing for cart item removal with a removeItemFromCart mutation	Refactor	[#2015][]
Refactor code to revoke customer token using GraphQL mutation on sign out	Refactor	[#2012][]
Refactor code to use GraphQL mutation to create/fetch cartId.	Refactor	[#1988][]
Removed test.only from test file	Refactor	[#1989][]
Refactor components to fetch Countries from GraphQL instead of REST	Refactor	[#1993][]
Replaced sign-in REST with GraphQL	Refactor	[#1904][]
Standardized GraphQL files with 4-space indentation	Refactor	[#1914][]
Replaced the create-account REST endpoint with the createCustomer GraphQL mutation	Refactor	[#1898][]
Removed redux.compose() where not needed ...

v4.0.0

Release 4.0.0

NOTE:
This changelog only contains release notes for PWA Studio 4.0.0 and above.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 4.0.0
• Pull requests merged in this release
• Updating from 3.0.0

What's new in 4.0.0

PWA Studio 4.0.0 contains new features, refactors, breaking changes, and various improvements.

Summary of notable changes

The following is a list of the notable changes included in this release.

New Peregrine Hooks

This release introduces the following new hooks in Peregrine:

• Toast hooks and ToastContainer - Provide logic for managing toast messages and a container for displaying these messages.
• useWindowSize() - A hook that provides window size data and lets you respond to window resizing events.
• useRestApi() and useRestResponse() - Hooks that expose the API for sending REST calls and handling the response.
• useScrollLock() - Hook that gives the ability to lock the document element.
• usePagination() - A hook that provides pagination logic for components that need to navigate through paged data.
• useEventListener() - A hook that gives the ability to add a callback function when an event is triggered on an element.
• useCarousel() - A hook for interacting with the state for a carousel of images.

Component refactors

This release includes code refactors to existing components.
The main purpose for this refactor is to extract the logic from these components and convert them into re-useable Peregrine hooks, such as useCarousel() and useScrollLock().
Another reason for refactoring some of these components is to convert them into functional components.

The list of refactored components in this release include:

• List, List Items, and List Item in Peregrine
• Category in RootComponent
• Header, Checkout, MiniCart, Image, and ProductFullDetail in Venia
• Various left drawer components (See PR [#1552][] for the full list of affected components)

Summary of breaking changes

This release includes changes that may break projects dependent on PWA Studio and its tools and components.

src to lib

The src directories in Peregrine and Venia have been renamed to lib.
This enforces the idea that these packages are meant to be consumed as libraries, but
it also means that you may have to update your import paths in your project.

Venia split

The Venia project is now split into separate venia-ui and venia-concept packages.
This paves the way for better extensibility and customizability when it comes to storefront creation.

The venia-ui package contains the templates and components used to create the Venia storefront.
This package is meant to be used as a component library for custom storefront projects.

The venia-concept package contains the project scripts and configurations used to build and run the actual Venia storefront project.

This change may also require you to update import paths in your project.

See PR [#1499][]

New build tools

This release contains new tools for building, bundling, and configuring storefront projects.

buildpack CLI command - A command line toolkit with subcommands for:

• Generating SSL certificates
• Creating a .env file
• Loading and validating a project's .env file.

See PR [#1498][]

configureWebpack() - A function that provides an opinionated configuration for Webpack.
This replaces a large portion of the webpack.config.js file in the Venia project in favor of a configurable utility that can be used in other storefront projects.

babel-preset-peregrine - A new package that defines a preset for Babel.
This preset is required for storefronts using Peregrine and Venia-UI components.
See PR [#1404][].

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Added a feature that allows CSS in node_modules to circumvent CSS modules	Feature	[#1242][]
Added a layered navigation modal component for filters	Feature	[#797][]
Added ability to source media URL from GraphQL	Feature	[#1267][]
Added height to makeUrl() and enforced crop in middleware if provided	Feature	[#1361][]
Improved scroll locking	Feature	[#1449][]
Update Billing Address Form to show additional fields	Update	[#1286][]
Removed errant debugger statement in tests	Update	[#1353][]
Updated feathericons to 2.0.x	Update	[#1416][]
Updated webpack-bundle-analyzer dependency	Update	[#1466][]
Added insecure flag to GraphQL schema validation	Update	[#1313][]
Refactored the create account form	Refactor	[#835][]
Refactored templates to allow branded first renders	Refactor	[#1275][]
Added a name property for the search trigger button to improve accessibility	Refactor	[#1395][]
Refactored MiniCart components into functions from classes	Refactor	[#1266][]
Refactored Product Details component to use hooks	Refactor	[#1240][]
Refactored the Header component into a function	Refactor	[#1241][]
Refactored create-account route to use appShell to get provided requisite properties	Refactor	[#1430][]
Refactored Checkout components to use hooks, fix bugs, and split code into functional components	Refactor	[#1309][]
Refactored Category RootComponent into functional components and use hooks	Refactor	[#1211][]
Refactored driver usage to improve Venia portability	Refactor	[#1217][]
Refactored slide filter UX to make it behave like the nav menu	Refactor	[#1471][]
Refactored the edit steps out of redux and into local checkout state	Refactor	[#1338][]
Removed root-relative imports from Venia code	Refactor	[#1497][]
Moved the majority of Venia components into a separate UI library	Refactor	[#1499][]
Refactored left drawer components to use hooks, improve performance, and clean up the UI	Refactor	[#1552][]
Refactored image tags to utilize srcset and sizes for optimized images	Refactor	[#1584][]
Fixed the order ID being displayed incorrectly	Bugfix	[#1249][]
Removed duplicate search icon during load	Bugfix	[#1274][]
Fixed a bug that prevented the loading of JS resources from root	Bugfix	[#1257][]
Fixed a bug that reloaded the cart twice when the last item is removed	Bugfix	[#1230][]
Fixed a bug that created an infinite loop when a product is out of stock	Bugfix	[#1229][]
Fixed a bug that allowed the submi...

v3.0.0

Release 3.0.0

NOTE:
This changelog only contains release notes for PWA Studio 3.0.0 and above.
For older release notes, see PWA Studio releases.

Table of contents

• What's new in 3.0.0
• Updating from 2.1.0

What's new in 3.0.0

PWA Studio 3.0.0 contains improvements, new features, and some breaking changes.

Summary of major changes

• Peregrine hooks:
  Custom React Hooks that contain data and state management logic has been added to the Peregrine library.
  These hooks allow developers to easily create functional components that focus on presentational logic.
  These also allow for a more modular use of PWA logic and easier "restyling" of Venia (or any PWA storefront built using PWA Studio).

Summary of breaking changes

• PR #1169 includes the following breaking changes:

  • Removed some public user actions
  • Prop type removed in the CreateAccount component
  • Deleted the ErrorDisplay component
  • Deleted the Input component

• PR [#1078][] includes the following breaking changes:

  • SearchBar component converted into a React hook that uses custom Peregrine hooks

Peregrine changes

Change type	Description	PR
Feature	New custom React hooks	[#1078][]
Update	Upgrade react-router-dom to 5.0.0	[#1063][]

UPWARD changes

Change type	Description	PR
Feature	New resolver added: UrlResolver	#1058, #1175

Venia changes

Change type	Description	PR
Feature	New SwatchTooltip component	[#956][]
Feature	Focus search input on search icon button click	[#1019][]
Update	Improve the usability of the "Remove item" feature in the MiniCart	[#882][]
Tests	Add component unit tests	[#1027][]
Bugfix	Make Create Account and Sign In input style consistent	#1169
Bugfix	Populate Create Account fields with correct values after guest checkout	#1153
Bugfix	Fix expired guest cart errors	#1150
Bugfix	Fix header logo width style	#1070
Bugfix	Disable adding to cart until product options are selected	#1097
Bugfix	Disable update cart button until product options are selected	#1125
Bugfix	Update div tag with Fragment	#1103
Bugfix	Fix configurable media loading issue	#1094
Bugfix	Use placeholder in carousel while loading next image	[#1085][]
Bugfix	Add / to graphql validation endpoint	[#1045][]
Bugfix	Fix makeUrl for Fastly	[#1039][]
Bugfix	Hide menu item from navigation if it is disabled in the Magento admin	[#1022][]
Bugfix	Prevent adding to cart during rapid multi-clicking	[#910][]

Buildpack changes

Change type	Description	PR
Update	Update workbox-webpack-plugin to v4	#1102

Misc project changes

Change type	Description	PR
Update	Update eslint configuration version	#1088
Infrastructure	CI/CD and DevOps fixes and improvements	#1132, #1155, #1087, [#1043][]
Infrastructure	GitHub template updates	[#1077][], [#1048][]

Documentation changes

Change type	Description	PR
Documentation	Explainer comments added to the venia-upward.yml file	#1174
Documentation	New reference docs for Peregrine hooks	#1253
Documentation	New Client side caching topic	#1152
Documentation	Hello UPWARD tutorial	[#1080][]
Update	Add explanation to Magento compatibility table	[#1059][]
Feature	Documentation linting tool added	#1140, #1177
Bugfix	Editorial and minor content fixes	#1171, #1167, #1158, #1139, #1109, [#1020][], [#1000][]

Updating from 2.1.0

The method for updating to 3.0.0 from 2.1.0 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.

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 3.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 3.0.0, update the project's package.json file and change the dependency version for PWA Studio.

Release 2.1.0

What's new in 2.1.0

Release 2.1.0 is a compatibility release for the core Magento 2.3.1 release.

Notable changes include:

• Updated GraphQL queries
• Magento GraphQL query validation tool

Updated GraphQL queries

The Magento 2.3.1 release contains GraphQL schema changes that are not compatible with PWA Studio 2.0.0 presentational components.
This release adds a mapping layer to the wrapper components to maintain backwards compatibility for the presentational components.

This update also includes a change to the .env.dist file in the Venia project.
This change sets the MAGENTO_BACKEND_URL variable to that of a Magento 2.3.1 instance.

If you have previously set up Venia and copied the .env.dist file into your project's .env file, you must update the MAGENTO_BACKEND_URL variable to keep your project compatible.

Pull Request: #990

Query validation tool

PWA Studio 2.1.0 creates a new graphql-cli plugin called validate-magento-pwa-queries to replace the validate-queries.js script in the Venia package.

This tool lets developers know when a breaking change occurs with GraphQL to address incompatibility or breaking changes.
It provides clear error messages regarding where and how to resolve issues.

Pull Request: #1004

Other updates

• Unit tests created to increase test coverage
• Documentation typo fixes
• Devdocs script created for auto-generating reference docs from source
• Misc code cleanup
• Bugfix for shopping cart error when continuing to shop after checkout
• Bugfix for the full screen checkout drawer
• Bugfix for pagination persisting during Query loading state
• Bugfix for Search autocomplete rendering loading component on clear

v2.0.0

🎉 PWA Studio 2.0.0 is live on NPM. Welcome!

What's new

This is a brief development summary for this release.

For a list of relevant Pull Requests related to the 2.0 release, see this GitHub query result.

Server platform and language independence

• UPWARD spec introduced for cross platform server behavior configuration.
  An UPWARD file describes a stack-agnostic server that is used for server side rendering, asset delivery, and proxying.
• A PWA package can now define its network requirements in an UPWARD file.
• A PWA can now be deployed on any tech stack as long as the server is UPWARD compliant.
• UPWARD servers implemented in NodeJS and PHP
• UPWARD spec published and open for community contribution.

Related documentation updates

• UPWARD spec overview(#382)
• UPWARD-js server(#382)

Improved developer experience

• Implemented consistent patterns for workflow, such as action/reducer organization and container/presentational separation, in the Venia reference storefront source code.
• Venia components are now portable and can be used in any React application.
• New centralized driver and adapter concepts for all PWA-Studio component input/output.
• Configurable low level UI elements, such as lists and forms, available for developers without the need for drivers or adapters.
• Improved error handling to help detection and recoverability.

Related documentation updates

• Modular Venia components (#796)
• Venia directory structure(#487 #752)

Venia app-like experience

• Pagination feature added to Venia reference storefront for app-like navigation.
• Inline checkout implemented in the Venia reference storefront.
• Basic account creation and management implemented in Venia.
• Loading state implemented to improved the app-like experience.

Related documentation updates

• Venia Checkout implementation (#673)

Improved shopper experience

• Braintree checkout integration in the Venia reference storefront.
• Search with intelligent previews implemented in the Venia reference storefront.

Related documentation updates

• Braintree integration(#793)

PWA compliance

• Web App Manifest file created for the Venia reference storefront.
  This file provides the metadata for adding the Venia storefront to a mobile home screen.
• Service worker optimizations.

Performance enhancements

• Smart caching implemented to improve service worker catalog caching
• Bandwidth usage optimizations achieved using:
  • Dynamic image compression/resize
  • Advanced minification
  • Bundle splitting
• Improved app performance on devices, including smoother renders and faster Time To First Meaningful Paint.

GraphQL usage

• GraphQL usage increased to match coverage updates in Magento 2.3.0.

Magento Cloud compatibility

• A new Magento module (Magento_UpwardConnector) is available to route frontend requests through an UPWARD-PHP server.
• Solution Implementers(SI) can replace existing Magento cloud storefronts with a new PWA storefront using the UPWARD connector module.
• Documentation created for deploying storefront to Magento Cloud
• Assistance offered by Magento Enterprise Cloud deployment team

Related documentation updates

• README for the Magento_UpwardConnector module, which contains Cloud deployment instructions.

Other documentation updates

New topics

• Theme vs Storefront (#509)
• Install Venia sample data (#474)
• Peregrine Routing (#453)

Updated topics

• Certificate and Valet+ troubleshooting (#637)
• Tools and Libraries (#621)

Known issues

• After submitting a successful order, the application throws up an error notification, and the user has to actively click out of the error notification. (#916)
• Create account page displayed with null values for email, first and last name when creating an account during a guest checkout. (#830)
• (Mobile specific) When there are more categories, users cannot scroll to Sign in button. It blocks user from signing to the account. (#824)

Other notable updates

• Switched from NPM to Yarn for package management
• Setup Venia storefront video developed and available in Magento U

v2.0.0 Release Candidate 2: UPWARD

UPWARD has landed!

PWA Studio is now powered by the UPWARD specification in its middle tier implementation. It no longer relies on Magento's web server to generate application shells. This is a big change! Read more about it in the specification documents.

Changelog

James Zetlen 2018-10-04 Add UPWARD specification, guide, tests, reference implementation (#248)

• doc(upward): UPWARD spec and paper

• feat(upward): test suite and reference impl

• feat(dev): finalize UpwardPlugin for dev mode

• refactor: encapsulate domain gen

• feat(stage): add HTTPS to staging server

James Zetlen 2018-10-04 Update queries for latest 2.3 schema and add validator script (#318)

• fix: update query for small_image schema change

• feat(venia): Script to lint queries against schema