Build and deploy e-commerce progressive web apps (PWAs) in record time.
Full Guides, API Documentation, and Examples
Example Site Built with React Storefront
You can create a local copy of this site using create-react-storefront
to use as a starting point for your own site:
npm install -g create-react-storefront
create-react-storefront my-site
React Storefront is licensed under the Apache 2.0 License.
To contribute to react-storefront:
- Make a branch from
master
- Make your changes
- Add tests
- Verify all tests pass by running
yarn test
- Add an item to the Change Log in readme.md. Use your best judgement as to whether your change is a patch, minor release, or major release. We'll ensure that the correct version number is assigned before it is released.
- Create a PR.
First, clone the repo and run yarn to install dependencies
yarn
To use your local copy of react-storefront when developing apps, in your clone of this repo, run:
yarn link:all
To automatically transpile your code when you make changes, run:
yarn watch
Then, in your app's root directory run:
npm link react-storefront && npm link babel-plugin-react-storefront && npm link react-storefront-moov-xdn && npm link react-storefront-middleware
prettier-vscode
can be installed using the extension sidebar.
To format on save, just update your editor.formatOnSave
setting.
For other editors, https://prettier.io/docs/en/editors.html
To publish a release, run:
yarn release
- Added a
Carousel
component that supports AMP
- Added
redirected
flag to response context for downstream event handlers
- Removed buggy optimization for ExpandableSection, it conflicted with MobX and caused rendering issues.
- Fixed bug where app would scroll to the top of the page before updating the UI during client side navigation.
- Fixed scroll to top and lazy loading not working as expected when attributes
title
,description
andcanonicalUrl
ofAppModel
set to null.
- Fix for
TabPanel
amp initial state
- Fixed AMP Menu bug which was causing sub menus not to close
- Added
Accordion
component which only allows one childExpandableSection
to be open at a time.
- Added
ProductColors
andProductThumbnail
components to support dynamic color swatches within a PLP page. - Fixes a bug in
AmpForm
that caused errors when injected into non-PWA pages.
- Removed css minification for non-amp request to speed up execution times.
- Added
DrawerButton
component for creating drawers with custom content with support for anchoring from any side Lazy
no longer requires akey
prop to automatically unmount it's children when the URL changes.
- Added
visibilitySensorProps
toLazy
.
- uninstall-service-worker.js is no longer prefetched.
- Elements inside
Lazy
are now shown in AMP.
- Search how hides and disables the submit button until the user enters a non-whitespace character
- Fixes hiding
<title>
tag whenapp.title
isnull
- Added
renderLeafHeader
andrenderLeafFooter
toMenu
. These allow developers to customize the header and footer sections for non-root menu cards. - Added
linkProps
prop toHeaderLogo
for adding props intoLink
component.
- Updated
Image
to leavesrc
in place when the image fails to load andnotFoundSrc
is not defined. - Fixes on-screen keyboard collapsing when search field was cleared
- Fixes an issue where outdated state can be recorded in history if the app state changes immediately before navigation - Issue #272
- Fixed an issue where
<Image />
components withlazy
parameter and no width are never rendered if they are initially above the fold.
- Improved consistency of prefetch caching.
- Upgrades workbox to 4.3.1
- Fixes a bug where prefetched data always results in a cache miss when navigating to a new page.
- Fixes a bug introduced in 6.47.0 that caused responses cached in the browser to not expire properly
- Added a
throttleClick
prop toAddToCartButton
with a default of 250 milliseconds to help prevent users from adding a product to their cart multiple times by accident. - Fixed the NavTabs storybook example.
- Improves the patch from 6.52.1 to also handle the case when the product was rendered on the server.
- Fixed a bug introduced in 6.52.0 where the product thumbnail shown over the main product images while loading would not be hidden when returning back to the same product as was previously viewed.
- Added AMP functionality to the
SearchDrawer
. In order to make the search drawer work in AMP:- Use the new
SearchButton
component in your app header to open the search drawer. - In your
search/suggest-handler.js
, addthumbnails: (true|false)
to each item in groups. Set totrue
when items in the group have a thumbnail, otherwisefalse
.
- Use the new
- The
renderers/render
method is now correctly markedasync
.
ImageSwitcher
now uses the product name for thealt
prop on any images or thumbnails that do not have one.
- Fixed an issue where elements inside a
Lazy
component are never rendered if they are initially above the fold.
- Fixed error when running apps in express due to
headers.get(name)
not being defined.
- You can now add data to
amp-analytics
tags by implementinggetAmpAnalyticsData()
on analytics targets. - Updated
Headers
implementation to support spreading, deleting, direct access of properties. - Added woff2 support.
ImageSwitcher
can now display videos.- Added a new
Video
component which supports displaying videos in AMP. - Added a
fromOrigin(originName)
handler type that allows you to proxy an origin from the edge. - Added a
redirectTo(path)
handler type that allows you redirect the request at the edge.
- Fixed AMP validation errors in
AmpImageSwitcher
.
- ImageSwitcher with color selector now works in AMP
- create-react-storefront now checks for node 8 at startup.
- Skeletons are now skipped when the URL matches a route that is cached on the client.
- Fixing AMP check in
Server
- When
cache({ edge })
is present on a route and has akey
property, the cookies in that key will be forwarded on anyfetch
calls sent upstream. - Added
react-storefront/requestContext
for request scoped state storage access - Redirects from AMP to the PWA if
@withAmp
is not present on the main page component or ifreact-storefront-extensions/transformAmpHtml
is not used. - Added the ability to disable analytics by setting a cookie named
rsf_disable_analytics
totrue
. The default smoke test now disables analytics so that smoke test runs aren't counted as real user sessions.
- Added tracking search events for the
SearchPopup
component
cache/clearClientCache
no longer requires the service worker to be installed in order to clear the cache. This is now done entirely by the main browser thread.
- Adds a new
react-storefront-puppeteer
package to help developers write puppeteer tests for React Storefront apps and schedule smoke testing with Moovweb Control Center.
- Fixed a client build issue relating to AMP exclusion.
- Prevent errors when headers forwarded by fetch are not provided by the browser.
- Added
BackToTop
component for scrolling to top of page. - The
authorization
header sent from the browser will be forwarded to fetch calls made from the server when basic auth is enabled.
- Restored the default export of
react-storefront/fetch
for backwards compatibility.
- Restored
react-storefront/fetch
for backwards compatibility.
- The headers object included in fetch responses now matches the Headers interface from the standard fetch API.
- Fixes an issue where the
Menu
would not reset the user taps on an item to drill down.
- Adds the ability to clear the client cache using
clearClientCache()
fromreact-storefront/cache
- Added the ability to override the style of selected a NavTab via a new
selected
class.
fetch()
now relays theuser-agent
header from the browser if one is not explicitly provided.- The
server
option incache()
route handlers has been renamededge
. Usage ofserver
is still supported, but will result in a deprecation warning.
- Added the ability to split and normalize the server cache for routes using the
cache()
handler's newserver.key
property andreact-storefront/router/createCustomCacheKey
.
- Adding analytics events
searchSubmitted
andsearchLinkClicked
to SearchDrawer
- Fixed webpack production build issue
Server
now cleans and minifies server side rendered CSShydrate
now lives in utils. Used internally and for RSF components in adapt pages.
- Removes this warning about deprecated usage of
require("history/createBrowserHistory")
.
Server
now properly handle the case when rendering an error fails- The app shell will no longer be throttled when prefetching.
SearchResultsModelBase
nows updatesfacetGroups
if defined in a search results response
- Fixed
Filter
issue where all group items were being rendered even when not expanded - Updated the
lodash
dependency to fix a vulnerability - Fixed missing prefech flag header on prefetch requests.
- Added a
hideLast
prop to to theBreadcrumbs
component. - You can now disable the service worker by setting passing
serviceWorker: false
tolaunchClient
.
- Sourcemap files are now excluded from the service worker precache manifest.
- Added
resetSelectionWhenImagesChange
prop toImageSwitcher
. PageLink
now merges thestate
prop with state automatically created from themodel
prop.- Added
optimize
prop onImage
component which allows you to optimize images for mobile devices using Moovweb's CDN.
- Fixed prefetch throttling opt-in in production client webpack config.
- Fixed issues with lazy loading images in
CmsSlot
- Fixed sizing of loading spinner in the
ShowMore
button so that it matches the button height
- Fixed warning "React does not recognize the lazyLoadImages prop on a DOM element." when using
CmsSlot
.
- Cookies are now sent with AJAX requests to get suggestions in the search drawer.
- Fixed an error that occurs in Link when
history
cannot be injected from app scope. - Added
Lazy
component for late loading components with a simple wrapper CmsSlot
now lazy loads images withdata-rsf-lazy
attribute
- Fixed linking to JS assets introduced in 6.33.0
- Added source maps for production builds.
- You can now lazy load items in the main menu by setting
lazyItemsURL
inMenuItemModel
instances. - You can now customize the rendering of menu items via Menu's
itemRenderer
anditemContentRenderer
props.
- Fixes the "Uncaught TypeError: Converting circular structure to JSON" error shown in the console when the user clicks the
ShowMore
button.
- Adds a new
labelComponent
prop toBackNav
, which allows you to override the default HTML element used to render the label. - Fixes a bug where requests could be catched by
serviceWorker.cache(path)
even if the path matches a route that doesn't have a cache handler. - Disable prefetching throttling by default.
- Improved service worker cache-busting by including settings in the hashed filename for the bootsrap file.
- Fixed deprecation warning:
Please use require("history").createMemoryHistory instead of require("history/createMemoryHistory")
SearchDrawer
now handles a null value forapp.search.results
gracefully.
- Adds a
createSubmitURL
prop toSearchDrawer
. - You can now define a set of
initialGroups
to display in the search drawer when the search field is blank. - Adds an
imageProps
prop toImageSwitcher
- Adds support for accessing the app state tree with React's
useContext
hook via the newreact-storefront/AppContext
. - Added a
withPersonalization
HOC andusePersonalization
hook for late loading personalized data.
- Adds an
initialContent
prop toSearchDrawer
that determines the content to display when the search field is blank. - Fixed bug where custom
ExpandableSection
icons were showing wrong icon when usingdefaultExpanded
. - Fixed a bug where format was not being passed as a request param. This was introduced in 6.25.0
- Fixed bug in
renderers/render
which caused injection of PWA components into proxied pages to fail. This was a regression introduced in 6.26.0
- Adds a new
delayUntilInteractive
prop toAnalyticsProvider
that delays loading analytics scripts until the app is fully interactive. This helps ensure the best TTI and user experience.
- Added
optimizeImages
util function for use in handlers - Fixed issue with JS scripts being included in the wrong order during SSR in 6.26.0.
- JavaScript bundles are now prefetched using link rel="prefetch" headers.
- Fixes bug in handling of AMP routes introduced in 6.25.0
- The Router now explicitly adds a JSON route with each Route initialization
- Fixed max-age cache control header configuration
- Rerelease of 6.24.1 due to a botched build.
- You can now specify webpack
optimization
options in the client build config. - You can now use the
OPEN_BROWSER
environment variable to control whether or not the browser opens after starting in development mode - Added universal error reporting with the new
errorReporter
config on bothreact-storefront/launchClient
andreact-storefront-moov-xdn/index
.
- Rolled back optimization to exclude AMP components in the client build that was added in 6.23.0 as it was causing issues in some apps.
- You can now pass options to control how Router's
applySearch
function stringifies params. For example,router.applySearch({ colors: ['red', 'green'] }, { arrayFormat: 'brackets' })
- AMP-specific components are now left out of the client build as they are only needed during server side rendering. This helps reduce client bundle size.
- The JSON that is cached by the service worker during the initial app load is now raw JSON returned from the router, not the serialized model. This brings it in line with how JSON returned from
fromServer
during client-side navigation is cached.
- The
Menu
component now looks the same when rendering in AMP and React. - Fixed bug where links in the menu main were not rendered properly for SEO introduced in 6.16.0
- Fixes an issue where
ImageSwitcher
would not reset itsselectedIndex
after switching products. - If an analytics target throws an error it will now be caught so that other targets have a chance to fire.
- Fixes UI styling in cases where the last breadcrumb is a link.
- Adds
sortProps
toSortButton
, which allows your to pass props to the underlyingSort
component.
-
Added
serveSSRFromCache
option to the client webpack build. Set totrue
to allow the sevice worker to serve from the cache when a user initially lands on your app. Defaults tofalse
. -
Fixed the padding of the close button in the
UpdateNotification
component.
- Improved
MenuIcon
with better animation. Note: MenuIcon'sOpenIcon
andCloseIcon
props have been removed.
- Fetch now implements the standard
redirected
andurl
properties on theResponse
object. See https://developer.mozilla.org/en-US/docs/Web/API/Response#Properties.
- You can now define a surrogate key for each route using:
new Router().get(
'/p/:1',
cache({
server: {
surrogateKey: (params, request) => {
return 'product'
}
}
}),
fromServer('./path/to/handler')
)
- Fixed bug in converting relative URLs to absolute URLs in Link that was introduced in 6.16.0
- Updated mobx-react to correct peerDependency ^5.4.3
- Added
trackSelected
prop toMenu
. Set totrue
to indicate the item corresponding to the current page - Improved the performance of
Menu
by eliminating excessive rendering.
- New "PowerLinks" feature allows you link to a React Storefront app with
<a data-rsf-power-link="on" href="https://my.domain.com">Visit My Store</a>
and have the link prefetched and cached so that navigation is instant. Just add this to the site containing the link:
<script src="http://my.domain.com/.powerlinks.js" defer />
- Added the ability to overwrite
cache()
route handler withresponse.set('cache-control', '...')
.
- Fix bug in client webpack config due to a bad merge that would prevent apps from starting.
- Added support for prefetch throttling.
- Improved JSS class name generation in development
- Fixed a bug where links in the main menu were not rendered properly for SEO.
- Added
environment
module withisClient
andisServer
functions that allows you to detect whether your code is running on the client or the server. - Stub out Response's
set
,get
,status
,cookie
, andredirect
methods on the client.
- Update peerDependencies for mobx, mobx-react, and mobx-state-tree to more stable versions.
- Improved offline support.
- Users will now be able to navigate back to any page they have previously visited when offline.
- The
AppBar
component now displays "Your device lost its internet connection" when offline. This message is configurable via AppBar'sofflineWarning
prop. - Added an
Offline
component to be displayed as the main body of the app when the user attempts to navigate to a page that isn't cached when offline. - Added
appShell
configuration method toRouter
. Configure the appShell with afromServer
handler that returns global data to display in the app shell when the user attempts to load the site while offline.
To add offline support to your app, upgrade to 6.12.0, then:
- Add an
appShell
configuration to your router definition:
// src/routes.js
new Router()
// ...
.appShell(
// returns only the global data needed to build the app-shell for offline support
fromServer('./app-shell/app-shell-handler')
)
- Add the
Offline
component to yourPages
element inApp.js
.
// src/App.js
import Offline from 'react-storefront/Offline'
// then in the render method...
class App extends Component {
render() {
return (
<Pages
components={universal => ({
// ...
Offline
})}
/>
)
}
}
- Gracefully handle when
history.replace
fails due to the state object being too large. This was happening on Firefox for apps with large state trees as Firefox imposes a limit of 640kB on the state object. When history.replace fails, history.state will simply be cleared out and the app will get the state from the network if the user navigates back or forward.
- Removed
onImpression
fromLink
. We decided this logic was better handled inCommerceAnalyticsTarget
inreact-storefront-extensions
. AnalyticsProvider
now automatically callssetHistory
for all targets.
- Fixed an issue with
Link
whereonImpression
would not fire if the user returns to a page using the back or forward buttons.
- Fixed an issue with
Link
whereonImpression
would not fire unlessprefetch="visible"
was also present
- Added support for
acceptInvalidCerts
option tofetch
- The
transform
passed intoreact-storefront-moov-xdn/index
can now be asynchronous. The allowsreact-storefront-extensions/transformAmpHtml
to fetch heights and widths for images when rendering AMP. - Added
utils/batchPromises
for running batches of concurrent promises. - Added
onImpression
prop toLink
to help with tracking product impressions usingTrack
. - Added
currencyCode
toProductModelBase
- Fixed a bug where a number shows in the
ImageSwitcher
component when rendered in AMP without thumbnails.
- Fixes an issue where images sometimes do not show up in
AmpImageSwitcher
due to a bug inamp-carousel
when rendering in a div withdisplay: flex
. ampproject/amphtml#14519 - Fixes styling differences when rendering
ExpandableSection
in AMP. - Each card in the main menu now scrolls independently.
CmsSlot
now spreads props to the underlyingspan
. This fixes an issue where<Track>
would not fire events when aCmsSlot
was the child element.
- Restored
AnalyticsProvider
accidentally removed in 6.8.0
- Removes unnecessary dependency on js-cookie.
- Added bottom border for selected thumbnail in AMP image carousel
- Added
className
toMenuItemModel
. This allows you to add CSS class names to individual items in the Menu.
- Browsers that support source maps will now display original react-storefront source code when debugging.
- Changes to
Filter
andFilterButton
:- adds
LoadMask
intoFilter
'sfacetGroups
block when model is loading - disables clear all button when model is loading
- clear all button semantics fixed: use
<button>
instead<a>
w/ohref
attribute
- adds
- Added AMP analytics when using AnalyticsProvider
- Added ability to pass amp-analytics attributes
- Handle
content-type: text/plain
in post bodies.
- Fixed posting from AMP when served from Google cache by adding the correct CORS headers.
- Fixed a bug where
ImageSwitcher
'sthumbs
class is not applied when rendering AMP. - Added customization props to
Rating
- Added ability to add plugins to client webpack bundle
- Added
minimumTextLength
toSearchModelBase
- Added
AmpModal
component based on<amp-lightbox>
. - Added
AnalyticsProvider
for loading analytics on mount - Fixes a layout issue with the
Drawer
component on iOS <= 10
- Removed extraneous logging of config on every request.
Menu
now renders children so you can add custom controls.- Fixed a bug where an error would be thrown when posting application/json data with ESL enabled or posting an empty body.
- Added
name
prop toQuantitySelector
to make it easier to submit the value when rendering AMP. - Fixed a bug where multipart/form-data requests were not parsed properly.
fetch
now supports theredirect
option with values"follow"
,"error"
, and"manual"
.- Added
x-rsf-routes
header to get available route information.
- Added
searchButtonVariant
andshowClearButton
props toSearchDrawer
to give you greater control over the behavior of the search input. - Fixes an issue where the page scrolls to the top when a route with a
proxyUpstream
handler runs on the client. - Added
notFoundSrc
prop toImage
component which will be used in case the primary image source fails to load - TTF files are now processed by webpack file loader
- Fixed a bug where links were unresponsive until all JavaScript was fully loaded.
- Fixes a bug that resulted in an error from mst-middleware about rendering circular JSON when the user opens the main menu.
fetch
now supports inflating responses withcontent-encoding: gzip
<Track>
now allows you to map triggers to events. For example:<Track trigger={{ onVisible: 'productShown', onClick: 'productClicked' }}>
<Link>
now has aonVisible
prop that you can use to be notified when a link is scrolled into the viewport.withGlobalState(request, callback, localState)
now passesrequest
to thecallback
.- Removed proxy-polyfill, which was causing errors when using analytics in IE11. If you plan to support IE11 and use analytics, you must call
analytics.fire('eventName', data)
instead of the proxied methods likeanalytics.eventName(data)
.
- Properly handle vendor chunks for components shared between pages.
- Fixed a bug causing the Filter component's apply button to be hidden on iOS.
- Corrected some out-of-date peerDependencies.
- Upgraded to mobx 4 and mobx-state-tree 3
- Upgraded to babel 7
- Upgraded to webpack 4
- Upgraded to material-ui@3.8.1
- Changes to
Filter
andFilterButton
:- adds
LoadMask
intoFilter
'sfacetGroups
block when model is loading - disables clear all button when model is loading
- clear all button semantics fixed: use
<button>
instead<a>
w/ohref
attribute
- adds
- Fixes a layout issue with the
Drawer
component on iOS <= 10
- Added
AnalyticsProvider
for loading analytics on mount
- Added
AmpModal
component based on<amp-lightbox>
.
- Fixed where links were unresponsive until all JavaScript was fully loaded.
- Removed extraneous console.log calls.
- Added
notFoundSrc
prop toImageSwitcher
and handle missing images before the app mounts.
- Added
searchButtonVariant
andshowClearButton
props toSearchDrawer
to give you greater control over the behavior of the search input. - Fixed an issue where the page scrolls to the top when a route with a
proxyUpstream
handler runs on the client. - Added
notFoundSrc
prop toImage
component which will be used in case the primary image source fails to load
- Removed proxy-polyfill, which was causing errors when using analytics in IE11. If you plan to support IE11 and use analytics, you must call
analytics.fire('eventName', data)
instead of the proxied methods likeanalytics.eventName(data)
.
- Fixed a bug causing the Filter component's apply button to be hidden on iOS.
- Switch Webpack Bundle Analyzer to static mode so that analysis can be saved by CI
- Added a
state
field toBreadcrumbModel
so that state can be passed to skeletons when the user clicks on a breadcrumb. - Added support for setting bundle analyzer mode using
ANALYZER_MODE
env variable.
- Fixed case error with importing lodash/isFunction in Router.
- Added
cookie
helper method toResponse
- Replaced regular
<iframe>
with<amp-iframe>
when rendering AMP. - Replaced YouTube
<iframe>
with<amp-youtube>
when rendering AMP. - Removed extra padding at the bottom of the Drawer component.
- Improved accessibility of QuantitySelector and ButtonSelector.
- Improved error handling for SSR.
- Fix layout issue with Filter title bar.
- Added warning for setting cookies on cached route
- Fix for production webpack builds with no options
- Fix errors in SearchResultModelBase when filtering after paging.
- Runs
yarn link:all
during CI builds to ensure that linking will work properly. - Transition to PWA and open filter/sort from AMP.
- Added
variant="drawer|menu"
toFilterButton
. The default is "drawer
".
- Added
envVariables
to webpack server options - Added ability to set asset path base
- Added
itemRenderer
prop toMenu
- Fixes an issue with Chrome 71 which prevents async loading of scripts by the service worker.
- Fix bugs related to production builds
- Code is now transpiled to ES5 before publishing
- Bundle size reduced by about 20%
- Can now run your build with an environment variable
ANALYZE=true
to see client build stats in your browser.
- Fixed a bug with sending redirects in response to POST requests from AMP.
- Prevents errors when webpack's OpenBrowserPlugin fails
- Fixed bug where all analytics targets would result in AMP event triggers being rendered, even if they don't support AMP.
- Removed some unused dependencies.
- Fixed vertical alignment of + / - icons in QuantiySelector
- You can now display the main menu on the right by setting
<AppBar menuAlign="right"/>
and<Menu align="right"/>
. - You can disable the "menu" label below the main menu button by setting
<AppBar menuIconProps={{ label: false }}/>
- You can now provide a custom eslint config for webpack client and server builds.
- Fix bug where an empty popup would show when the user hovers over a NavTab without a menu on desktop.
- Fixed error when attempting to redirect from http to https.
- Added x-rsf-response-type and x-rsf-handler headers
- TabPanel's onChange prop no longer requires selected to be controlled.
- TabPanel is now controllable via a new
onChange
prop. - Fixed bug in Container that would cause horizontal scrollbars to display on the window body.
- Fix CSS syntax error in LoadMask that could cause CSS not to load properly app-wide
- Reduce latency when serving static assets
- Corrected peerDependencies by adding "react-transition-group" and removing "react-css-transition-group"
- Improved performance of page transitions by setting
app.loading
totrue
inPageLink
to eliminate a reconciliation cycle. - The service worker now excludes mp4 videos from the catch-all runtime route to work around a known issue with videos and service workers in Safari.
- Upgrade to Material UI 3
- Improved responsive capabilities of many components
- NavTabs can now have menus
- Menu icon is now animated
- Added option to override selectedIndex in ImageSwitcher
- AMP analytics event data is now automatically generated based on configured targets.
- Added support for pageview events in AMP.
- Adds support for res.arrayBuffer() to react-storefront's internal fetch implementation. This allows developers to fetch binary data as a buffer.
-
Prefetching now ramps up over the course of 25 minutes by default to ease the load on servers after clearing the cache during deployment
-
Removes some assets from the precache manifest that don't need to be prefetched.
- You can now set a custom content-type using
response.set('content-type', contentType)
.
-
You can now override
<meta>
tags usingreact-helmet
. -
Now throws an error in development when a cache handler runs during non-GET request
-
Removes set-cookie headers when route has a cache handler with server maxAgeSeconds > 0.
-
Automatically caches all proxied images and fonts for a day
- ExpandableSection's expanded state can now be controlled via an expanded prop
- Fixed bug with Referrer-Policy header.
- Added Referrer-Policy: no-referrer-when-downgrade response header
- Added
response.json()
helper method for sending JSON data - Fixed ShowMore infinity scrolling bug
- Added
X-Frame-Options: SAMEORIGIN
response header by default.
response.redirect(url, status)
no longer requires you to call response.send() afterwards.- Fixed bug where
<Image lazy/>
and<Link prefetch="visible"/>
elements would eager fetch when hidden by upgrading react-visibility-sensor.
- Fixed XXS vulnerability where code could be injected via the URL into the canonical link tag.
- Moved proxy-polyfill to dependencies.
- Static assets are now cached at the network edge.
- s-maxage is now only removed when there is no outer edge cache.
- Added
anchorProps
to Link - Added analytics support for IE9+ via the addition of proxy-polyfill
- Added onSuccess prop to
Track
- Prefetching now automatically resumes once page navigation is complete.
- Added
ProductModelBase.basePrice
ProductModelBase.price
is now a view that returns theprice
of the selected size or, if not present, thebasePrice
.ButtonSelector
can now display a CSS color code instead of an image via the newcolor
field onOptionModelBase
ButtonSelector
can now be configured to display a strike through when disabled by settingstrikeThroughDisabled
. The angle can be controlled viastrikeThroughAngle
.
- Renamed to react-storefront and published on npmjs.org
- Routes now automatically fire pageView analytics events. The
track
handler module has been removed - The new
<Track>
component let's you track interactions with analytics declaratively. - CommerceAnalyticsTarget and all subclasses have been moved to a separate package called 'moov-pwa-analytics'
- Many methods of CommerceAnalyticsTarget have a new signature. All event methods now take a single options object. Please check your calls to methods on
react-storefront/analytics
to make sure they match the updated signatures. - Built in models in
react-storefront/model
no longer fire analytics events. Analytics events are only fired front components. - AMP analytics are now supported.
- You can now return state objects from
proxyUpstream
handlers to render the PWA. Return null or undefined to render the proxied page.
- Skeletons are no longer fullscreen. Pages remain hidden while
app.loading
istrue
, instead of being covered by the LoadMask/Skeleton.
- Pages now keeps one page of each type hidden in the DOM to make navigating back and forward much faster.
- AppModelBase.applyState has been optimized to minimize rerendering of observer components.
- ResponsiveTiles has been optimized to render faster.
-
Renamed Breadcrumbs component to BackNav. It no longer tags an array of breadcrumbs, it now takes a single url and text.
-
Created a new Breadcrumbs component for displaying multiple breadcrumbs.
- The request parameter passed to fromServer handlers has been refactored. The "path" property has been deprecated in favor of separate "pathname" and "search" properties.
- Added a new
UpdateNotification
component that notifies the user when a new version of the app is available. - The service worker will now only load HTML from the cache when coming from AMP or when launching from the homescreen.
- Adds the ability to reuse product thumbnails as the main product image in the PDP skeleton when navigating from PLP to PDP.
- Fixed
Link
bug which formatted URL's incorrectly - Fixed issue where prefetched results are deleted when new SW is installed
- Added
SearchDrawer
, which replacesSearchPopup
.
- You can now perfect proxy and transform pages from the upstream site using the new
proxyUpstream
handler. As a result, support forrequestHeaderTransform({ fallbackToAdapt: true })
has been removed. Instead, simple add afallback(proxyUpstream())
handler to your router.
- Improved error handling with react-redbox and sourcemapped stacktraces for server-side errors
- Added react error boundary to catch errors while rendering and display a component stack trace.
- Automatically relay
set-cookie
headers fromfetch
calls to upstream APIs when not caching on the server. - Added
fetchWithCookies
to automatically forward all cookies when calling upstream APIs.
- Support for moovsdk
- Refactored handler signature to
handler(params, request, response)
- Renamed
ShowMoreButton
toShowMore
and addedinfiniteScroll
prop - Functionality for moov_edge_request_transform, moov_edge_response_transform, moov_request_header_transform, index, and moov_response_header transform are not standardized in
platform/*
modules. moov-react-dev-server
is no longer needed- new
ButtonSelector
component for color and size selections - App state is automatically recorded in
window.history.state
so back and forward transitions are instantaneous. - AMP Form POST is now supported and multipart encoded request bodies are parsed automatically.
- Added
Skeleton
components for creating custom loading skeletons