Skip to content

@dpatil-magento dpatil-magento released this Oct 7, 2019 · 150 commits to develop since this release

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

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.

Assets 2

@dpatil-magento dpatil-magento released this Jun 25, 2019 · 316 commits to develop since this release

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

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.

Assets 2
You can’t perform that action at this time.