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
Carouselcomponent that supports AMP
- Added
redirectedflag 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,descriptionandcanonicalUrlofAppModelset to null.
- Fix for
TabPanelamp initial state
- Fixed AMP Menu bug which was causing sub menus not to close
- Added
Accordioncomponent which only allows one childExpandableSectionto be open at a time.
- Added
ProductColorsandProductThumbnailcomponents to support dynamic color swatches within a PLP page. - Fixes a bug in
AmpFormthat caused errors when injected into non-PWA pages.
- Removed css minification for non-amp request to speed up execution times.
- Added
DrawerButtoncomponent for creating drawers with custom content with support for anchoring from any side Lazyno longer requires akeyprop to automatically unmount it's children when the URL changes.
- Added
visibilitySensorPropstoLazy.
- uninstall-service-worker.js is no longer prefetched.
- Elements inside
Lazyare 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.titleisnull
- Added
renderLeafHeaderandrenderLeafFootertoMenu. These allow developers to customize the header and footer sections for non-root menu cards. - Added
linkPropsprop toHeaderLogofor adding props intoLinkcomponent.
- Updated
Imageto leavesrcin place when the image fails to load andnotFoundSrcis 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 withlazyparameter 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
throttleClickprop toAddToCartButtonwith 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
SearchButtoncomponent in your app header to open the search drawer. - In your
search/suggest-handler.js, addthumbnails: (true|false)to each item in groups. Set totruewhen items in the group have a thumbnail, otherwisefalse.
- Use the new
- The
renderers/rendermethod is now correctly markedasync.
ImageSwitchernow uses the product name for thealtprop on any images or thumbnails that do not have one.
- Fixed an issue where elements inside a
Lazycomponent 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-analyticstags by implementinggetAmpAnalyticsData()on analytics targets. - Updated
Headersimplementation to support spreading, deleting, direct access of properties. - Added woff2 support.
ImageSwitchercan now display videos.- Added a new
Videocomponent 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 akeyproperty, the cookies in that key will be forwarded on anyfetchcalls sent upstream. - Added
react-storefront/requestContextfor request scoped state storage access - Redirects from AMP to the PWA if
@withAmpis not present on the main page component or ifreact-storefront-extensions/transformAmpHtmlis not used. - Added the ability to disable analytics by setting a cookie named
rsf_disable_analyticstotrue. 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
SearchPopupcomponent
cache/clearClientCacheno 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-puppeteerpackage 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
BackToTopcomponent for scrolling to top of page. - The
authorizationheader 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/fetchfor backwards compatibility.
- Restored
react-storefront/fetchfor backwards compatibility.
- The headers object included in fetch responses now matches the Headers interface from the standard fetch API.
- Fixes an issue where the
Menuwould 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
selectedclass.
fetch()now relays theuser-agentheader from the browser if one is not explicitly provided.- The
serveroption incache()route handlers has been renamededge. Usage ofserveris 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.keyproperty andreact-storefront/router/createCustomCacheKey.
- Adding analytics events
searchSubmittedandsearchLinkClickedto SearchDrawer
- Fixed webpack production build issue
Servernow cleans and minifies server side rendered CSShydratenow lives in utils. Used internally and for RSF components in adapt pages.
- Removes this warning about deprecated usage of
require("history/createBrowserHistory").
Servernow properly handle the case when rendering an error fails- The app shell will no longer be throttled when prefetching.
SearchResultsModelBasenows updatesfacetGroupsif defined in a search results response
- Fixed
Filterissue where all group items were being rendered even when not expanded - Updated the
lodashdependency to fix a vulnerability - Fixed missing prefech flag header on prefetch requests.
- Added a
hideLastprop to to theBreadcrumbscomponent. - You can now disable the service worker by setting passing
serviceWorker: falsetolaunchClient.
- Sourcemap files are now excluded from the service worker precache manifest.
- Added
resetSelectionWhenImagesChangeprop toImageSwitcher. PageLinknow merges thestateprop with state automatically created from themodelprop.- Added
optimizeprop onImagecomponent 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
ShowMorebutton 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
historycannot be injected from app scope. - Added
Lazycomponent for late loading components with a simple wrapper CmsSlotnow lazy loads images withdata-rsf-lazyattribute
- 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
lazyItemsURLinMenuItemModelinstances. - You can now customize the rendering of menu items via Menu's
itemRendereranditemContentRendererprops.
- Fixes the "Uncaught TypeError: Converting circular structure to JSON" error shown in the console when the user clicks the
ShowMorebutton.
- Adds a new
labelComponentprop 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")
SearchDrawernow handles a null value forapp.search.resultsgracefully.
- Adds a
createSubmitURLprop toSearchDrawer. - You can now define a set of
initialGroupsto display in the search drawer when the search field is blank. - Adds an
imagePropsprop toImageSwitcher - Adds support for accessing the app state tree with React's
useContexthook via the newreact-storefront/AppContext. - Added a
withPersonalizationHOC andusePersonalizationhook for late loading personalized data.
- Adds an
initialContentprop toSearchDrawerthat determines the content to display when the search field is blank. - Fixed bug where custom
ExpandableSectionicons 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/renderwhich caused injection of PWA components into proxied pages to fail. This was a regression introduced in 6.26.0
- Adds a new
delayUntilInteractiveprop toAnalyticsProviderthat delays loading analytics scripts until the app is fully interactive. This helps ensure the best TTI and user experience.
- Added
optimizeImagesutil 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
optimizationoptions in the client build config. - You can now use the
OPEN_BROWSERenvironment variable to control whether or not the browser opens after starting in development mode - Added universal error reporting with the new
errorReporterconfig on bothreact-storefront/launchClientandreact-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
applySearchfunction 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
fromServerduring client-side navigation is cached.
- The
Menucomponent 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
ImageSwitcherwould not reset itsselectedIndexafter 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
sortPropstoSortButton, which allows your to pass props to the underlyingSortcomponent.
-
Added
serveSSRFromCacheoption to the client webpack build. Set totrueto 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
UpdateNotificationcomponent.
- Improved
MenuIconwith better animation. Note: MenuIcon'sOpenIconandCloseIconprops have been removed.
- Fetch now implements the standard
redirectedandurlproperties on theResponseobject. 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
trackSelectedprop toMenu. Set totrueto indicate the item corresponding to the current page - Improved the performance of
Menuby 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
environmentmodule withisClientandisServerfunctions that allows you to detect whether your code is running on the client or the server. - Stub out Response's
set,get,status,cookie, andredirectmethods 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
AppBarcomponent now displays "Your device lost its internet connection" when offline. This message is configurable via AppBar'sofflineWarningprop. - Added an
Offlinecomponent 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
appShellconfiguration method toRouter. Configure the appShell with afromServerhandler 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
appShellconfiguration 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
Offlinecomponent to yourPageselement 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.replacefails 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
onImpressionfromLink. We decided this logic was better handled inCommerceAnalyticsTargetinreact-storefront-extensions. AnalyticsProvidernow automatically callssetHistoryfor all targets.
- Fixed an issue with
LinkwhereonImpressionwould not fire if the user returns to a page using the back or forward buttons.
- Fixed an issue with
LinkwhereonImpressionwould not fire unlessprefetch="visible"was also present
- Added support for
acceptInvalidCertsoption tofetch - The
transformpassed intoreact-storefront-moov-xdn/indexcan now be asynchronous. The allowsreact-storefront-extensions/transformAmpHtmlto fetch heights and widths for images when rendering AMP. - Added
utils/batchPromisesfor running batches of concurrent promises. - Added
onImpressionprop toLinkto help with tracking product impressions usingTrack. - Added
currencyCodetoProductModelBase
- Fixed a bug where a number shows in the
ImageSwitchercomponent when rendered in AMP without thumbnails.
- Fixes an issue where images sometimes do not show up in
AmpImageSwitcherdue to a bug inamp-carouselwhen rendering in a div withdisplay: flex. ampproject/amphtml#14519 - Fixes styling differences when rendering
ExpandableSectionin AMP. - Each card in the main menu now scrolls independently.
CmsSlotnow spreads props to the underlyingspan. This fixes an issue where<Track>would not fire events when aCmsSlotwas the child element.
- Restored
AnalyticsProvideraccidentally removed in 6.8.0
- Removes unnecessary dependency on js-cookie.
- Added bottom border for selected thumbnail in AMP image carousel
- Added
classNametoMenuItemModel. 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
FilterandFilterButton:- adds
LoadMaskintoFilter'sfacetGroupsblock when model is loading - disables clear all button when model is loading
- clear all button semantics fixed: use
<button>instead<a>w/ohrefattribute
- adds
- Added AMP analytics when using AnalyticsProvider
- Added ability to pass amp-analytics attributes
- Handle
content-type: text/plainin post bodies.
- Fixed posting from AMP when served from Google cache by adding the correct CORS headers.
- Fixed a bug where
ImageSwitcher'sthumbsclass is not applied when rendering AMP. - Added customization props to
Rating - Added ability to add plugins to client webpack bundle
- Added
minimumTextLengthtoSearchModelBase - Added
AmpModalcomponent based on<amp-lightbox>. - Added
AnalyticsProviderfor loading analytics on mount - Fixes a layout issue with the
Drawercomponent on iOS <= 10
- Removed extraneous logging of config on every request.
Menunow 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
nameprop toQuantitySelectorto make it easier to submit the value when rendering AMP. - Fixed a bug where multipart/form-data requests were not parsed properly.
fetchnow supports theredirectoption with values"follow","error", and"manual".- Added
x-rsf-routesheader to get available route information.
- Added
searchButtonVariantandshowClearButtonprops toSearchDrawerto 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
proxyUpstreamhandler runs on the client. - Added
notFoundSrcprop toImagecomponent 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.
fetchnow 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 aonVisibleprop that you can use to be notified when a link is scrolled into the viewport.withGlobalState(request, callback, localState)now passesrequestto 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
FilterandFilterButton:- adds
LoadMaskintoFilter'sfacetGroupsblock when model is loading - disables clear all button when model is loading
- clear all button semantics fixed: use
<button>instead<a>w/ohrefattribute
- adds
- Fixes a layout issue with the
Drawercomponent on iOS <= 10
- Added
AnalyticsProviderfor loading analytics on mount
- Added
AmpModalcomponent based on<amp-lightbox>.
- Fixed where links were unresponsive until all JavaScript was fully loaded.
- Removed extraneous console.log calls.
- Added
notFoundSrcprop toImageSwitcherand handle missing images before the app mounts.
- Added
searchButtonVariantandshowClearButtonprops toSearchDrawerto 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
proxyUpstreamhandler runs on the client. - Added
notFoundSrcprop toImagecomponent 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
statefield toBreadcrumbModelso that state can be passed to skeletons when the user clicks on a breadcrumb. - Added support for setting bundle analyzer mode using
ANALYZER_MODEenv variable.
- Fixed case error with importing lodash/isFunction in Router.
- Added
cookiehelper 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:allduring 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
envVariablesto webpack server options - Added ability to set asset path base
- Added
itemRendererprop 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=trueto 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
onChangeprop. - 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.loadingtotrueinPageLinkto 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: SAMEORIGINresponse 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
anchorPropsto 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.priceis now a view that returns thepriceof the selected size or, if not present, thebasePrice.ButtonSelectorcan now display a CSS color code instead of an image via the newcolorfield onOptionModelBaseButtonSelectorcan 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
trackhandler 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/analyticsto make sure they match the updated signatures. - Built in models in
react-storefront/modelno longer fire analytics events. Analytics events are only fired front components. - AMP analytics are now supported.
- You can now return state objects from
proxyUpstreamhandlers to render the PWA. Return null or undefined to render the proxied page.
- Skeletons are no longer fullscreen. Pages remain hidden while
app.loadingistrue, 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
UpdateNotificationcomponent 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
Linkbug 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
proxyUpstreamhandler. 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-cookieheaders fromfetchcalls to upstream APIs when not caching on the server. - Added
fetchWithCookiesto automatically forward all cookies when calling upstream APIs.
- Support for moovsdk
- Refactored handler signature to
handler(params, request, response) - Renamed
ShowMoreButtontoShowMoreand addedinfiniteScrollprop - 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-serveris no longer needed- new
ButtonSelectorcomponent for color and size selections - App state is automatically recorded in
window.history.stateso back and forward transitions are instantaneous. - AMP Form POST is now supported and multipart encoded request bodies are parsed automatically.
- Added
Skeletoncomponents for creating custom loading skeletons