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	#2151
Fixed a button clipping bug	Bugfix	#2499
Fixed a Mini Cart bug that displayed incorrect dimensions and spacing for swatch images	Bugfix	#2457
Fixed dropdown arrows in Firefox	Bugfix	#2455
Fixed price summary not updating when shipping info is updated	Bugfix	#2445
Fixed css on the Checkout page	Bugfix	#2416
Fixed bug in Mini Cart where product options should be on separate lines	Bugfix	#2393
Fixed a Service Worker HTML caching bug	Bugfix	#2390
Fixed an incorrect propType in order confirmation page	Bugfix	#2375
Fixed a bug where Magento2 media image would not load	Bugfix	#2339
Fixed checkout button props	Bugfix	#2334
Added a white stroke to the checkout button css in Mini Cart	Bugfix	#2330
Fixed bug where a scroll position would not reset on router change	Bugfix	#2309
Fixed a css var in the checkbox.css	Bugfix	#2307
Fixed a rounding error on image src set	Bugfix	#2300
Fixed font size on the Order Summary page	Bugfix	#2275
Removed a duplicate css property	Bugfix	#2248
Fixed the placement of next and previous button for the Carousel component in Chrome	Bugfix	#2512

Peregrine library

Description	Change type	PR
Created a new useSort() hook for sorting logic	Feature	#2343
Added code for handling invalid braintree nonce error while placing order	Update	#2405
Updated app to preselect the lowest cost shipping method for authenticated users without one	Update	#2402
Fixed a race condition during order placement after details have been fetched	Bugfix	#2486
Fixed a bug where the price does not get updated after changing the color/size	Bugfix	#2483
Fixed shipping method loading error	Bugfix	#2481
Fixed country list so that it uses abbreviation for the label if english text is not available	Bugfix	#2476
Fixed gift card flashing on error	Bugfix	#2462
Fixed a bug where updating the sort criteria does not reset the paging	Bugfix	#2458
Fixed a bug where Country/Region list occasionally resets initial value	Bugfix	#2456
Fixed order confirmation page refreshing multiple times	Bugfix	#2433
Addressed the GraphQL warning thrown during build	Bugfix	#2421
Fixed a bug causing the checkout shipping method flashing of old content	Bugfix	#2382
Fixed a bug in Mini Cart caused by an expired auth token	Bugfix	#2379
Fixed an inadvertent error message associated with checkout shipping methods	Bugfix	#2371
Fixed a persistence bug during the checkout step between refreshes	Bugfix	#2354
Fixed bug in the quantity stepper when initialValue changes	Bugfix	#2353
Fixed a bug where the price summary would not get updated after removing an item.	Bugfix	#2329
Fixed a bug with sensitive data on logout, login, and checkout	Bugfix	#2322
Fixed a bug in the create account process where the subscribe flag is not set	Bugfix	#2265
Fixed wrong value type used in useCategoryTree.js	Bugfix	#2243
Fixed input errors in the Cart and Checkout pages	Bugfix	#2495

Build tools

Description	Change type	PR
Added more extension points and JSDocs for the extensibility framework	Feature	#2298
Added ability to provide Page Builder Content Type configurations dynamically	Feature	#2131
Upgraded graphql-playground-middleware-express dependency	Update	#2482
Fixed a broken sort function	Bugfix	#2497
Removed unintentionally spammy loadEnvironment warnings	Bugfix	#2466
Fixed an unhandled error in the dev server	Bugfix	#2420
Added a preinstall script that prevents npm install and requires yarn install instead	Bugfix	#2384

Documentation

Description	Change type	PR
Published production launch checklist topic	Documentation	#2440
Published graphql tutorial	Documentation	#2432
Published state management tutorial	Documentation	#2399
Added an input section to the styleguide	Documentation	#2360
Published a community-driven FAQ page	Documentation	#2358
Published css modules tutorial	Documentation	#2341
Published component props tutorial	Documentation	#2324
Added new tutorial about using SASS and LESS	Documentation	#2316
Published the update footer tutorial	Documentation	#2299
Published project structure topic	Documentation	#2214
Clarified entry about optional sample data	Update	#2474
Implemented minor doc site updates	Update	#2388
Updated search index for the Magento User Guide	Update	#2418
Implemented Spectrum redesign for docs	Update	#2386
Added extra information in the FAQ for using the image component	Update	#2383
Added FAQ section on how to query different storeviews	Update	#2381
Updated the Cloud Deploy tutorial	Update	#2319
Updated styleguide colors & typography	Update	#2236
Removed an unwanted link	Update	#2202
Corrected mispelling in 'Introduction to React'	Bugfix	#2487
Fixed Modal/Portal reference doc generation	Bugfix	#2450
Fixed content in Cloud Deploy topic	Bugfix	#2398

Misc

Description	Change type	PR
Bumped websocket-extensions dependency from 0.1.3 to 0.1.4	Update	#2465
Bumped apollo-server dependency from 2.6.9 to 2.14.2	Update	#2464
Added Lars Roettig to the list of Community Maintainers	Update	#2439 #2293
Updated pull request template to use valid markdown syntax for checkboxes	Update	#2434
Updated docker image	Update	#2406
Updated pull request template	Update	#2389
Renamed docker file to get syntax highlighting	Update	#2374
Bumped jquery from 3.4.1 to 3.5.0 in pwa-devdocs project directory	Update	#2370
Updated the node version in venia-concept to allow Node >=10.x	Update	#2315
Bumped acorn from 5.7.3 to 5.7.4	Update	#2312
Fixed https-proxy-agent dependency issue	Bugfix	#2356

Known issues

• A new Mini Cart is in development which removes the checkout flow in favor of the standalone Checkout page.
  An issue exists in the checkout section of the old Mini Cart where the Pay with Card header does not appear on the Credit Card payment form.
  This issue is low priority since the old Mini Cart will be replaced with the new one in future releases.

Upgrading from a previous version

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

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

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.

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 bundle CE or EE features in Venia	Feature	#2121
Changed default value and docs for DEV_SERVER_SERVICE_WORKER_ENABLED environment variable	Update	#2148
Refactored image processing for 5x faster streaming image optimization with no SSL failures	Refactor	#2005
Fixed RootComponentsPlugin to be IE compatible	Bugfix	#2169
Removed out of the box tests from scaffolding command	Bugfix	#2321
Fixed missing extension files in newly scaffolded projects	Bugfix	#2305

UPWARD

Description	Change type	PR
Fixed binary file reading	Bugfix	#2050

Documentation

Description	Change type	PR
Revised and published PWA Studio fundamentals intro and project setup topics	Documentation	#2179
Created new tutorial for adding a static route	Documentation	#2249
Added updates to updates-to-into-project-setup draft	Draft	#2083
Added preparing-to-go-live tutorial draft doc	Draft	#2081
Added manage-state-with-redux tutorial draft doc	Draft	#2079
Added use-magentos-graphql-api tutorial draft doc	Draft	#2077
Added explore-graphql tutorial draft doc	Draft	#2075
Added reuse-a-venia-component tutorial draft doc	Draft	#2073
Added component-state tutorial draft doc	Draft	#2071
Added css-modules tutorial draft doc	Draft	#2069
Added props-proptypes tutorial draft doc	Draft	#2067
Added update-site-footer tutorial draft doc	Draft	#2065
Added add-a-static-route tutorial draft doc	Draft	#2063
Added project-structure-and-routing tutorial draft doc	Draft	#2061
Updated Cloud deployment topic	Update	#2235
Updated code block in doc to better work with copying and pasting	Update	#2229
Updated the contribution guide	Update	#2218
Updated dependencies and build script	Update	#2195
Updated setup topic	Update	#2192
Updated contribution guidelines to make explicit the need to sign Adobe's CLA	Update	#2125
Fixed broken reference doc generator	Bugfix	#2183
Added a missing variable in a topic	Bugfix	#2153

Misc

Description	Change type	PR
Added new variable to support AWS builds	Feature	#2144
Added ability to use .jsx files	Feature	#2128
Added an App Bar section to the styleguide	Feature	#2119
Added Drawer Footer to styleguide	Feature	#2093
Added a button section to the styleguide	Feature	#2088
Added color section to styleguide	Feature	#2030
Added typography section to styleguide	Feature	#2013
Added venia-concept dist directory to the npmignore file	Update	#2225
Upgraded dependencies	Update	#2098
Fixed broken summarizeEvents function	Bugfix	#2194
Fixed broken VSCode Jest Plugin	Bugfix	#2039

Upgrading from a previous version

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

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

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.

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	Refactor	#1916
Refactored VeniaAdapter to improve initial page load	Refactor	#1816
Refactor Gallery component	Refactor	#1791
Fixed a bug that caused an incorrect default swatch image ratio on the product details page	Bugfix	#2055
Fixed Search Result counts mismatch	Bugfix	#2037
Fixed bug that incorrectly toggled the cart drawer inside the update item action	Bugfix	#2038
Fixed bug that caused an error when adding, editing, then saving a configurable item	Bugfix	#2040
Fixed Footer position bug which broke z-index styling on Edge	Bugfix	#2014
Fixed storybook	Bugfix	#1945
Fixed invalud default initial value for checkout form	Bugfix	#1983
Fixed bug where Product price does not change when changing configurable options	Bugfix	#1964
Fixed bug that caused an incorrect number of products being loaded for product content type	Bugfix	#1973
Fixed bug where data was being persisted on logout	Bugfix	#1962
Added ability to debounce search input	Bugfix	#1952
Fixed Hook dependencies for app toast error handling	Bugfix	#1929
Fixed Button being exported twice	Bugfix	#1912
Fixed regular expression	Bugfix	#1880
Fixed a bug that overwrote the animation-fill-mode	Bugfix	#1839
Fixed Talon import in pagination	Bugfix	#1826
Fixed SearchBar lazy loading	Bugfix	#1764
Removed back arrow for first level in main menu	Bugfix	#1337
Fixed a transparent background bug for .png images	Bugfix	#1690

Peregrine library

Description	Change type	PR
Implemented Product Images pre-fetching	Feature	#1938
Created Search root component Talon	Feature	#1953
Add ability to lazy load images	Feature	#1871
Created FilterModal Talon	Feature	#1884
Created Product Options Talons	Feature	#1819
Created Footer Talon	Feature	#1860
Created app Talon	Feature	#1828
Created ProductFullDetail Talon	Feature	#1814
Created Navigation Talon	Feature	#1810
Created ProductImagecarousel and Thumbnail Talons	Feature	#1817
Created Pagination Talon	Feature	#1812
Created CreateAccount and CreateAccountPage Talons	Feature	#1778
Created image Talons	Feature	#1803
Created MiniCart Talons	Feature	#1807
Created Forgot Password Talon	Feature	#1788
Created SearchBar Talons	Feature	#1786
Created Checkout Talons	Feature	#1775
Created useCategoryTree Talon	Feature	#1754
Created categoryTile/categoryList Talon	Feature	#1755
Created authBar and userChip Talons	Feature	#1751
Created authModal Talon	Feature	#1752
Created signIn mixin	Feature	#1745
Created myAccount mixin	Feature	#1727
Made pagination page buffer configurable	Update	#2032
Improved Image API	Update	#1956
Renamed mixins to Talons	Update	#1757
Removed selector code	Update	#1703
Combined the checkoutReceipt actions/state/etc with the checkout state slice	Update	#1686
Merged the directory state and actions into the checkout state slice	Update	#1694
Refactored getCartDetails to GraphQL	Refactor	#2029
Refactored getUserDetails to use GraphQL	Refactor	#2004
Refactored code to eliminate use of MagentoRouteHandler	Refactor	#1966
Replaced withRouter with react router Hooks	Refactor	#1937
Refactored code to use the opposite operator	Refactor	#1851
Refactored header components and added Talons	Refactor	#1793
Refactored Venia to extract modular components into Peregrine	Refactor	#1605
Fixed a Page Builder bug that affected alignment Inheritance for Button Group	Bugfix	#2085
Fixed a Page Builder bug that appended .html to links redirected to CMS pages	Bugfix	#2054
Fixed a bug that made the Page Builder's product content type behavior inconsistent with Luma	Bugfix	#2056
Fixed route cache bug	Bugfix	#1841

Build tools

Description	Change type	PR
Implemented robust HTML update checking using Node HTML Parser	Feature	#2086
Optimized Webpack for Service Worker	Feature	#1992
Improved error handling for env and stage errors	Feature	#1943
Implemented HTML caching and Service Worker communication API	Feature	#1905
Added Image Optimizing Origin as an environment variable	Feature	#1849
Added commit hash to generated bundles	Feature	#1881
Improved Service Worker HTML handling	Feature	#1874
Enabled client side caching	Feature	#1806
Created scaffolding tools for new projects	Feature	#1500
Updated Braintree environment variable to be self documenting	Update	#2008
Updated the backend value in create-pwa package	Update	#1975
Removed duplicate code	Update	#1838
Improve buildpack test coverage	Update	#1598
Replaced the async webpack plugin	Update	#1628
Refactored Service Worker and ServiceWorkerPlugin	Refactor	#1832
Removed unused parameters	Refactor	#1837
Restored working debug error page	Bugfix	#2011
Fixed handling of service worker actions in Dev mode	Bugfix	#2002
Fixed hot reloading	Bugfix	#1972
Suppressed GraphQL Certificate Errors	Bugfix	#1969
Fixed invalid veniaResource reference in upward.js comments	Bugfix	#1910
Added a missing break statement	Bugfix	#1887
Resolved the heuristic fragment matcher warning	Bugfix	#1707
Fixed a bug in the post-install script	Bugfix	#1734

Documentation

Description	Change type	PR
Created draft for first tutorial for PWA Studio Fundamentals	Documentation	#2022
Created draft for new tutorial series to help beginners	Documentation	#2024
Created Tutorial to create storefront component	Documentation	#1982
Created content rendering topic	Documentation	#2003
Published venia ui component docs	Documentation	#1946
Added JSDocs for Venia UI Components	Documentation	#1853
Created Peregrine Talons overview	Documentation	#1876
Created List components jsdocs	Documentation	#1795
Created Carousel component jsdocs	Documentation	#1794
Created state management doc	Documentation	#1785
Updated doc dependencies	Update	#2033
Added MBI to search and updated site switcher	Update	#2001
Updated upward-spec doc	Update	#1977
Added site switcher to the header	Update	#1970
Updated devdocs dependencies	Update	#1957
Updated cloud deploy docs	Update	#1926
Added instructions to circumvent self-signed ssl-certificate errors	Update	#1923
Fixed tools and library graphic	Update	#1889
Updated Venia setup doc	Update	#1809
Updated README file	Update	#1717
Update contribution guide	Update	#1651
Refactored site content navigation	Refactor	#1933
Refactored doc scripts to remove unused imports and ignore some parameters	Refactor	#1835
Fixed typo on cloud deployment topic	Bugfix	#2007
Fixed typo on cloud deployment topic	Bugfix	#1974
Removed duplicate words from sentences	Bugfix	#1893
Changed word to lowercase	Bugfix	#1834
Fixed pwa-devdocs folder path	Bugfix	#1643
Fixed UPWARD yml path	Bugfix	#1644

Misc

Description	Change type	PR
Created initial content for a Venia styleguide	Feature	#1984
Improved Jest error detection and reporter output	Feature	#1948
Simplified image middleware with express-sharp update	Feature	#1830
Updated handlebars version from 4.1.2 to 4.5.3	Update	#2048
Added typography section to styleguide	Update	#2013
Updated eslint dependency	Update	#2000
Added tests for registerImagePreFetchHandler in service worker	Update	#1994
Added tests for Service Worker	Update	#1965
Added CODEOWNERS for Page Builder	Update	#1961
Updated csv-parse version from 4.3.4 to 4.4.6	Update	#1896
Updated test URL for Jest tests	Update	#1836
Update dependency for npm-run	Update	#1674
Refactored Service Worker route handling	Refactor	#1859
Added .gitignore entries to the files comming from @magento/pwa	Bugfix	#1939
Fixed Prettier use	Bugfix	#1941
Fixed compatibility of string compare	Bugfix	#1878
Fixed npx bundlesize path resolution issue	Bugfix	#1854
Fixed react-feather bundle	Bugfix	#1852
Fixed a bug that prevented a dev server from running in a Docker environment	Bugfix	#1558

Upgrading from a previous version

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

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

Known issues

The following is a list of known issues for this release.

Console error when clicking links

When Magento's Admin UI and PWA Studio storefront are open in the same browser, a console error is thrown.
This happens if your backend shares the same hostname as your storefront.
As a workaround, access the admin from a private browser session so the service worker does not affect requests to the storefront.

Images not loading in development

If you set the MAGENTO_BACKEND_URL environment variable to the secure (https) base url of a local instance, or an instance with a known-bad SSL certificate, images will not load correctly.
As a workaround, manually set the NODE_TLS_REJECT_UNAUTHORIZED environment variable to 0 when running the development server.

Pull Request #2005 addresses this issue and will be part of a future release.

Magento 2.3.2 compatibility

The changes and features introduced in this release use GraphQL endpoints found only in Magento versions 2.3.3 and above.
If your Magento backend uses 2.3.2 and below, you will need additional development to make PWA Studio libraries compatible.

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 submission of undefined search queries	Bugfix	#1363
Fixed the the continue shopping button background color and hover color	Bugfix	#1264
Fixed the spacing between image and title on the product list page	Bugfix	#1364
Fixed the warning about export loadingIndicator not being found during build	Bugfix	#1391
Fixed a bug that made Webpack fail on missing modules	Bugfix	#1388
Fixed a bug that displayed the search suggestion box when there are no results	Bugfix	#1252
Fixed a bug that caused CSS font to block rendering	Bugfix	#1196
Fixed bug that prevented the Braintree dropin from lazy loading	Bugfix	#1419
Fixed a bug that caused a tooltips memory leak on mobile	Bugfix	#1288
Fixed a bug where suspense temporarily loads a fallback component while the SearchBar component is being loaded	Bugfix	#1351
Fixed product page image jutter	Bugfix	#1478
Fixed bug that allowed a signed in customer to access the create account page	Bugfix	#1559
Fixed a bug that prevented the cart counter from persisting after reload	Bugfix	#1556
Fixed handling of head and meta tags	Bugfix	#1537
Fixed test config	Bugfix	#1606
Fixed a bug where Image isLoaded state was incorrectly being set to false	Bugfix	#1618
Fixed missing import of catalogActions when clearing filters	Bugfix	#1626
Fixed a bug that prevented the logo from loading when using upward-php	Bugfix	#1637

Peregrine library

Description	Change type	PR
Added a window size hook	Feature	#1193
Added Toast feature	Feature	#1218
Added eslint plugin for react hooks	Feature	#1358
Added a withLogger util function for useReducer	Feature	#1374
Added a REST API Hook	Feature	#1321
Added a Peregrine context provider	Feature	#1316
Added support for List initial selections	Feature	#1589
Removed Storybook from peregrine and update references	Update	#1482
Changed prop type of uniqueID for list Item component	Update	#1586
Refactored the image carousel component into hooks and visual components	Refactor	#1268
Refactored list components to use hooks	Refactor	#1515
Fixed a bug that caused a pagination double fetch	Bugfix	#1381
Fixed peregrine watcher and watch:all	Bugfix	#1378
Fixed ApolloContext hook	Bugfix	#1467
Fixed bug in MagentoRouteHandler so it can correctly handle unknown routes	Bugfix	#1495

Build tools

Description	Change type	PR
Added tools for a unified system of environment-based configuration	Feature	#1224
Added feature to allow GraphQL playground to autodetect queries	Feature	#1219
Added Webpack configuration utility	Feature	#1498
Added Webpack HTML Plugin to generate HTML at compile	Feature	#1595
Replaced cheap-source-map with eval-source-map for devtool	Update	#1581
Removed errant debugger statement in test file	Bugfix	#1572

Documentation

Description	Change type	PR
Added topic for deploying a storefront to the Magento Cloud	Documentation	#1232
Create usePagination() hook docs	Documentation	#1461
Created environment variables documentation	Documentation	#1566
Created Toasts reference docs	Documentation	#1574
Create architecture overview topics	Documentation	#1538
Added Google Tag manager for analytics	Feature	#1450
Added ability to search across all DevDocs documentation sites	Feature	#1280
Added product diagrams to relevant topics	Feature	#1360
Embeded codesandbox examples to some reference topics	Feature	#1417
Updated docs project dependencies	Update	#1234
Bumped lodash version from 4.17.11 to 4.17.14 in pwa-devdocs	Update	#1434
Updated Venia Setup steps	Update	#1458
Updated useWindowSize() docs	Update	#1457
Updated the modular components docs	Update	#1439
Update devdocs project dependencies	Update	#1437
Updated Venia Setup steps	Update	#1427
Updated the axios dependency version	Update	#1352
Updated usage of UI Component	Update	#1462
Added site migration banner (pre migration)	Update	#1493
Restored doc site banner's original content (post migration)	Update	#1506
Updated repository references after the migration	Update	#1511
Updated link to point to files in develop instead of master	Update	#1560
Revised useEventListener() doc blocks	Refactor	#1442
Revised configuration management draft	Refactor	#1435
Rewrote Peregrine Overview page	Refactor	#1376
Improved Tutorial page discoverability and content	Refactor	#1292
Fixed the an issue that created 404 links for 'Edit this page on GitHub'	Bugfix	#1302
Removed broken links	Bugfix	#1238
Fixed links in the “Contributing” section	Bugfix	#1557
Fixed link in Contributing page	Bugfix	#1571

Misc

Description	Change type	PR
Refactored Peregrine package and added babel preset	Feature	#1404
Bumped lodash version from 4.17.11 to 4.17.14 in docker project	Update	#1436
Added a publishConfig property to the graphql-cli-validate-magento-pwa-queries package	Update	#1424
Merged master branch changes to develop	Update	#1392
Added dangerfile.js to list of files to ignore	Update	#1307
Updated the PR template for danger checks and updated danger	Update	#1269
Removed repetitive section from PR template	Update	#1372
Updated js-yaml dependency to 3.13.1	Update	#1464
Updated project to use less restrictive version	Update	#1480
Updated now.json alias to avoid collisions	Update	#1522
Added publishConfig keys to upward-spec and upward-js	Update	#1544
Removed version checklist from pr template	Update	#1567
Updated dependencies to react@~16.9.0	Update	#1564
Updated GraphQL Yarn lock	Update	#1629
Removed Now.sh pipeline	Update	#1575
Bumped eslint-utils from 1.4.0 to 1.4.2	Update	#1640
Fixed filename casing inconsistency	Refactor	#1304
Simplified the creation and consumption of image URLs	Refactor	#1213
Fixed develop branch deployment on AWS	Bugfix	#1444

Upgrading from a previous version

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

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

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.

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

🎉 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

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

This is a prerelease in preparation for a larger architectural change in RC2. Here is a rough changelog:

Jonathan Stein 2018-10-03 Account creation (issue #250) (#293) * create generic input component

• create login component, action and reducer catch

• Hook login form to utilize and store token

• Add navigation animation and user icon

• add auth to REST requests

• Add user icon

• add auth header login_token to graphql queries

• Change animation, add user to store

• Move user logic into separate action/reducer

• Add token to auth headers when token is available (rest)

• Style sign in form, fix user reducer

• Rename log in -> sign in. Wire up sign in form.

• Style error messages in sign in form

• write test for signIn and input, small style and prop fixes

• Add redux actions to create account and transfer guest cart to user's account

• add form, navheader and create account components, update styles

• Transferring cart to a newly created customer account created an
  issue where a guest cart could not be made. getCartDetails now checks if
  a user is signed in.

• add debounce email check

• add error display and checkbox components, wire up account creation with redux

• add automatic login

• Close createaccount if user is signed in

• let checkbox highlight on focus, add firstname and lastname required fields

• Tests for createAccount form

• use browser persistence instead of interacting directly with local storage

• add autocomplete to input

• set default username and replace Form component with Informed's Form

• start switch to Text component from Informed

• switch to dot lookup in navigation states

• Set initial value of CreateAccount (inform)

• modify user actions/reducers to be in release 2.0 format

• write tests for async User actions

Jimmy Sanford 2018-10-01 Update hardcoded client path in root template (#315) Now that client assets are output to web/js, the currently
hardcoded path in root.phtml needs to be updated.

James Zetlen 2018-10-01 fix: reducer removes guestCartId when it fails (#314)

James Zetlen 2018-09-28 fix(dev): merge 'assets' and 'output' paths (#220) - Remove the concept of the "assets" directory entirely, and set the
"output" directory to be just "web/".

• Remove the old logo asset from /web/ (pre-Venia rebrand!)
• Gitignore entire "web" directory
• Set JS files to output to 'web/js' subdirectory by adding directory
  prefix to output.filename and output.chunkFilename
• Modify tests, documentation, and type expectations to remove
  paths.assets

• Check if captureStackTrace exists before calling

• Add test to ensure captureStackTrace isn't called when it does not exist

Unit tests should use MemoryRouter, not BrowserRouter, and do
shallow rendering rather than full mounting.

• feat(dev): Make PWADevServer host/SSL optional (#175)

PWADevServer attempts to create a unique domain name, create local
SSL certificates, and tell the OS to trust those certificates, for
every new project. It also tries to confirm they exist on every run!

This causes many problems for users under some common conditions:

• No administrative access to local machine
• No OpenSSL installed, or wrong OpenSSL installed
• OS cannot be scripted to trust certificates
• Developer uses Firefox, which uses its own cert store

Additionally, some bugs in the implementation have caused some
developers' projects to enter an unusable state.

• Adds provideUniqueHost flag to PWADevServer configuration.
  PWADevServer will no longer try to create or retrieve a custom domain
  name unless provideUniqueHost is in its configuration in
  webpack.config.js as either a custom string or true.
• Adds provideSSLCert flag to PWADevServer configuration. PWADevServer
  will no longer try to create or retrieve a trusted SSL certificate
  unless provideSSLCert: true is in its configuration in
  webpack.config.js.
• Modifies custom domain name creation strategy to ensure uniqueness
  based on a hash of the full local path, rather than using the local
  flat file database.

We created these features for the needs of the developer working on
several PWAs at once on their local machine, so that they don't have to
set up manual SSL every time, and they have no conflicts with Service
Workers. This could be considered "bonus functionality", as it's not
critical to the setup of a minimum viable PWA. It was meant to establish
our focus on developer experience, and articulate the parts of developer
setup that PWA Studio can "own".

However, we soon learned that we could not maintain all scenarios for
automated setup and continue to make progress with shopper-facing
features. We still really want to support and automate all of these
scenarios, but for now, our implementations are a hindrance and we are
turning them off by default.

Paul 2018-09-26 Default pragma (#229) chore: Switch back to default pragma

• Switched import { Component, createElement } from 'react';) to import React from 'react', { Component };
• Switched import { Fragment, createElement } from 'react';) to import React from 'react', { Fragment };
• Switched import { createElement } from 'react';) to import React from 'react';
• Added eslint-plugin-react and updated eslint configuration
  accordingly

Jimmy Sanford 2018-09-25 Merge develop branch (#298) * Reorganize redux, add address form

• refactor(redux): Reorganize actions and reducers (#212)
• feature(checkout): Add address form to checkout flow (#226)
• test(redux): Add tests for redux actions (#239)

This is intended to be the final "minor" release on the existing PWA Studio architecture. Those who are working on projects currently based on master can continue to open pull requests against master if they are hotfix-sized changes, meaning that they fix bugs or performance issues, and do not change any public APIs or expected behaviors.

Significant Changes

There is no established prior release to which to compare, so this changelog reflects a diff of the last month of merged changes.

• chore(cicd): Removed Greenkeeper to increase test coverage before automating package updates
• chore(community): Added Community Contributors
• chore(cicd): Switched Lerna to "fixed" mode so all packages share a version
• feat(dev): Added root-level NPM scripts to ease common development modes
• chore(dependencies): Refactored developer dependencies to root as much as possible
• fix(compat): Changed Babel settings to address later browsers
• cleanup(peregrine): Removed unused Peregrine Simulators
• fix(peregrine): Handled absence of Error.captureStackTrace
• refactor(buildpack): Refactored PWADevServer to make SSL and hostnames optional and generate hostnames differently
• fix(buildpack): Fixed duplicated dependencies bug in MagentoRootComponentsPlugin
• fix(buildpack): Added better error reporting for SSL cert generation problems
• docs(peregrine): Added documentation for Peregrine utilities and components
• docs(buildpack): Added documentation for Buildpack utilities, specifically PWADevServer
• docs: Added Basic Concepts documentation for CSS Modules
• docs(venia): Updated Venia setup docs
• feat(venia): Added browser-routed Link elements to navigate between pages
• chore(venia): Adjusted Webpack config for clearer reporting

Acknowledgments

Thanks to all our community contributors, core engineers, documenters, and managers for helping us to formalize our process and take the next big step.