@shopgate/pwa-common 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/RangeSlider/helper.js

@@ -3,30 +3,55 @@
  * @param {number} relativeValue The relative value between [0...1].
  * @param {number} resolution The resolution, must be a value between [0,1...1].
  * @returns {number} The interpolated value.
- */var easeLinear=function easeLinear(relativeValue,resolution){var inverseResolution=1.0/resolution;return relativeValue*inverseResolution/inverseResolution;};/**
+ */
+const easeLinear = (relativeValue, resolution) => {
+  const inverseResolution = 1.0 / resolution;
+  return relativeValue * inverseResolution / inverseResolution;
+};
+
+/**
  * Generates a linear easing callback.
  * @param {number} resolution The discrete step size.
  * @returns {Function} The generated callback.
- */export var generateLinearEasingCallback=function generateLinearEasingCallback(){var resolution=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0.1;return function(relativeValue){return easeLinear(relativeValue,resolution);};};/**
+ */
+export const generateLinearEasingCallback = (resolution = 0.1) => relativeValue => easeLinear(relativeValue, resolution);
+
+/**
  * The exponential easing callback.
  * @param {number} relativeValue The relative value between [0...1].
  * @param {number} factor The exponential scale factor.
  * @returns {number} The interpolated value.
- */var easeExponential=function easeExponential(relativeValue,factor){return Math.pow(relativeValue,factor);};/**
+ */
+const easeExponential = (relativeValue, factor) => relativeValue ** factor;
+
+/**
  * Generates an exponential easing callback.
  * @param {number} factor The exponential scale factor.
  * @returns {Function} The generated callback.
- */export var generateExponentialEasingCallback=function generateExponentialEasingCallback(){var factor=arguments.length>0&&arguments[0]!==undefined?arguments[0]:2.5;return function(relativeValue){return easeExponential(relativeValue,factor);};};/**
+ */
+export const generateExponentialEasingCallback = (factor = 2.5) => relativeValue => easeExponential(relativeValue, factor);
+
+/**
  * Converts a range of [0...1] into a style object.
  * @param {number} min A value in interval [0...1]
  * @param {number} max A value in interval [0...1]
  * @param {number} transitionDuration The duration of the transition.
  * @returns {Object} The generated style object
- */export var getRangeStyle=function getRangeStyle(min,max,transitionDuration){return{left:"".concat(Math.min(1,Math.max(0,min))*100,"%"),right:"".concat((1-Math.min(1,Math.max(0,max)))*100,"%"),transition:transitionDuration>0?"left ".concat(transitionDuration,"ms, right ").concat(transitionDuration,"ms"):null};};/**
+ */
+export const getRangeStyle = (min, max, transitionDuration) => ({
+  left: `${Math.min(1, Math.max(0, min)) * 100}%`,
+  right: `${(1 - Math.min(1, Math.max(0, max))) * 100}%`,
+  transition: transitionDuration > 0 ? `left ${transitionDuration}ms, right ${transitionDuration}ms` : null
+});
+
+/**
  * Shortcut for retrieving x position of a touch event.
  * @param {TouchEvent} event The TouchEvent
  * @returns {number} The x position
- */export var getTouchPositionX=function getTouchPositionX(event){return event.touches[0].pageX;};/**
+ */
+export const getTouchPositionX = event => event.touches[0].pageX;
+
+/**
  * Converts a relative slider value into an absolute value.
  * A relative value is a value between [0...1] indicating the position
  * on the slider given its absolute width.
@@ -37,7 +62,13 @@
  * @param {number} max The maximum.
  * @param {boolean} allowRealValues Whether the value should be rounded to the nearest integer.
  * @returns {number} The converted absolute value.
- */export var getAbsoluteValue=function getAbsoluteValue(value,min,max){var allowRealValues=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var result=min+(max-min)*value;return Math.min(max,Math.max(min,allowRealValues?result:Math.round(result)));};/**
+ */
+export const getAbsoluteValue = (value, min, max, allowRealValues = false) => {
+  const result = min + (max - min) * value;
+  return Math.min(max, Math.max(min, allowRealValues ? result : Math.round(result)));
+};
+
+/**
  * Converts an absolute slider value into a relative value.
  * An absolute value is a value in screen space coordinates. This value must be
  * between [0...offsetWidth] of the price range slider.
@@ -47,4 +78,8 @@
  * @param {number} min The minimum.
  * @param {number} max The maximum.
  * @returns {number} The converted relative value.
- */export var getRelativeValue=function getRelativeValue(value,min,max){var result=(value-min)/(max-min);return Math.min(1,Math.max(0,result));};
+ */
+export const getRelativeValue = (value, min, max) => {
+  const result = (value - min) / (max - min);
+  return Math.min(1, Math.max(0, result));
+};

package/components/RangeSlider/index.js

@@ -1,58 +1,248 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import styles from"./style";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { logger } from '@shopgate/pwa-core/helpers';
+import styles from "./style";
+import RangeSliderHandle from "./components/Handle";
+import { generateLinearEasingCallback, generateExponentialEasingCallback, getRangeStyle, getTouchPositionX, getAbsoluteValue, getRelativeValue } from "./helper";
+
+/**
  * The range slider component.
  * @deprecated Will be remove in v7.0.0.
  *             Please use `import { RangeSlider } from '@shopgate/engage/components'` instead.
- */var RangeSlider=/*#__PURE__*/function(_Component){/**
+ */
+class RangeSlider extends Component {
+  /**
    * Constructor
    * @param {Object} props The component properties
-   */function RangeSlider(props){var _this2;_classCallCheck(this,RangeSlider);_this2=_callSuper(this,RangeSlider,[props]);/**
-   * Processes touch start events on handles.
-   * @param {Object} event The touch event
-   * @param {number} index The index of the touched handle.
-   */_defineProperty(_this2,"handleTouchStart",function(event,index){_this2.draggedHandle=index;// Calculate the relative offset to the handles center
-var handleDOMElement=event.target;// Get the handles bounding rectangle ...
-var handleRect=handleDOMElement.getBoundingClientRect();// ... and calculate its absolute center.
-var handleCenterX=handleRect.left+handleDOMElement.offsetWidth/2;// Store the signed distanced between the current touch offset and the handle center.
-_this2.touchOffset=getTouchPositionX(event)-handleCenterX;});/**
-   * Processes move events on handles.
-   * @param {Object} event The touch event
-   */_defineProperty(_this2,"handleTouchMove",function(event){if(_this2.props.min===_this2.props.max){return;}if(_this2.draggedHandle===null){return;}var _this2$domElement=_this2.domElement,offsetWidth=_this2$domElement.offsetWidth,offsetLeft=_this2$domElement.offsetLeft;// Calculate the absolute offset where the element was touched...
-var deltaX=getTouchPositionX(event)-offsetLeft-_this2.touchOffset;// ...and convert it into a relative value between [0...1].
-deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this2.draggedHandle===1){// Right handle dragged
-if(_this2.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}else{// Not in valid range, swap handles
-_this2.draggedHandle=0;stateUpdate.rangeMax=_this2.state.rangeMin;stateUpdate.rangeMin=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}}else if(_this2.draggedHandle===0){// Left handle dragged
-if(_this2.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}else{// Not in valid range, swap handles
-_this2.draggedHandle=1;stateUpdate.rangeMin=_this2.state.rangeMax;stateUpdate.rangeMax=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}}_this2.draggedHandlePixelOffset*=_this2.domElement.offsetWidth;_this2.setState(stateUpdate,_this2.triggerChangeCallback);});/**
-   * Processes global touch end events for handles.
-   * @param {Object} e The touch event
-   */_defineProperty(_this2,"handleTouchEnd",function(){_this2.touchOffset=0;_this2.draggedHandle=null;});/**
-   * Processes outer range touch end events.
-   * @param {Object} event The touch event
-   */_defineProperty(_this2,"handleRangeTouch",function(event){var _this2$domElement2=_this2.domElement,offsetWidth=_this2$domElement2.offsetWidth,offsetLeft=_this2$domElement2.offsetLeft;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this2.state.rangeMin-dx);var d1=Math.abs(_this2.state.rangeMax-dx);if(d0<d1){_this2.draggedHandle=0;}else{_this2.draggedHandle=1;}_this2.handleTouchMove(event);});logger.warn('===== RangeSlider deprecated =====\nThe RangeSlider component and it\'s related components (@shopgate/pwa-common/component/RangeSlider) are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use: import { RangeSlider } from \'@shopgate/engage/components\'.\n===================================');_this2.draggedHandle=null;// 0 for left handle, 1 for right handle or null
-_this2.domElement=null;_this2.touchOffset=0;_this2.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
-_this2.state=_this2.getRange(props);return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Processes touch start events on handles.
+     * @param {Object} event The touch event
+     * @param {number} index The index of the touched handle.
+     */
+    this.handleTouchStart = (event, index) => {
+      this.draggedHandle = index;
+
+      // Calculate the relative offset to the handles center
+      const handleDOMElement = event.target;
+      // Get the handles bounding rectangle ...
+      const handleRect = handleDOMElement.getBoundingClientRect();
+      // ... and calculate its absolute center.
+      const handleCenterX = handleRect.left + handleDOMElement.offsetWidth / 2;
+      // Store the signed distanced between the current touch offset and the handle center.
+      this.touchOffset = getTouchPositionX(event) - handleCenterX;
+    };
+    /**
+     * Processes move events on handles.
+     * @param {Object} event The touch event
+     */
+    this.handleTouchMove = event => {
+      if (this.props.min === this.props.max) {
+        return;
+      }
+      if (this.draggedHandle === null) {
+        return;
+      }
+      const {
+        offsetWidth,
+        offsetLeft
+      } = this.domElement;
+      // Calculate the absolute offset where the element was touched...
+      let deltaX = getTouchPositionX(event) - offsetLeft - this.touchOffset;
+
+      // ...and convert it into a relative value between [0...1].
+      deltaX = Math.max(0, Math.min(1, deltaX / offsetWidth));
+      const stateUpdate = {};
+      if (this.draggedHandle === 1) {
+        // Right handle dragged
+        if (this.state.rangeMin < deltaX) {
+          stateUpdate.rangeMax = Math.min(1, deltaX);
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+        } else {
+          // Not in valid range, swap handles
+          this.draggedHandle = 0;
+          stateUpdate.rangeMax = this.state.rangeMin;
+          stateUpdate.rangeMin = deltaX;
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+        }
+      } else if (this.draggedHandle === 0) {
+        // Left handle dragged
+        if (this.state.rangeMax > deltaX) {
+          stateUpdate.rangeMin = Math.max(0, deltaX);
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+        } else {
+          // Not in valid range, swap handles
+          this.draggedHandle = 1;
+          stateUpdate.rangeMin = this.state.rangeMax;
+          stateUpdate.rangeMax = deltaX;
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+        }
+      }
+      this.draggedHandlePixelOffset *= this.domElement.offsetWidth;
+      this.setState(stateUpdate, this.triggerChangeCallback);
+    };
+    /**
+     * Processes global touch end events for handles.
+     * @param {Object} e The touch event
+     */
+    this.handleTouchEnd = () => {
+      this.touchOffset = 0;
+      this.draggedHandle = null;
+    };
+    /**
+     * Processes outer range touch end events.
+     * @param {Object} event The touch event
+     */
+    this.handleRangeTouch = event => {
+      const {
+        offsetWidth,
+        offsetLeft
+      } = this.domElement;
+      const dx = (getTouchPositionX(event) - offsetLeft) / offsetWidth;
+      const d0 = Math.abs(this.state.rangeMin - dx);
+      const d1 = Math.abs(this.state.rangeMax - dx);
+      if (d0 < d1) {
+        this.draggedHandle = 0;
+      } else {
+        this.draggedHandle = 1;
+      }
+      this.handleTouchMove(event);
+    };
+    logger.warn('===== RangeSlider deprecated =====\nThe RangeSlider component and it\'s related components (@shopgate/pwa-common/component/RangeSlider) are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use: import { RangeSlider } from \'@shopgate/engage/components\'.\n===================================');
+    this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
+    this.domElement = null;
+    this.touchOffset = 0;
+    this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
+
+    this.state = this.getRange(props);
+  }
+
+  /**
    * Sets the global event listeners when component mounts.
-   */_inherits(RangeSlider,_Component);return _createClass(RangeSlider,[{key:"componentDidMount",value:function componentDidMount(){document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}/**
+   */
+  componentDidMount() {
+    document.addEventListener('touchend', this.handleTouchEnd);
+    document.addEventListener('touchmove', this.handleTouchMove);
+  }
+
+  /**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
+   */
+  UNSAFE_componentWillReceiveProps(newProps) {
+    this.setState(this.getRange(newProps));
+  }
+
+  /**
    * Removes the global event listeners when component unmounts.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}/**
+   */
+  componentWillUnmount() {
+    document.removeEventListener('touchend', this.handleTouchEnd);
+    document.removeEventListener('touchmove', this.handleTouchMove);
+  }
+
+  /**
    * Get the easing function.
-   */},{key:"ease",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(this.props.factor)}[this.props.easing];}/**
+   */
+  get ease() {
+    return {
+      linear: generateLinearEasingCallback(this.props.resolution),
+      exponential: generateExponentialEasingCallback(this.props.factor)
+    }[this.props.easing];
+  }
+
+  /**
    * Get the function to invert an eased value to it's original value.
-   */},{key:"invertedEase",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(1/this.props.factor)}[this.props.easing];}/**
+   */
+  get invertedEase() {
+    return {
+      linear: generateLinearEasingCallback(this.props.resolution),
+      exponential: generateExponentialEasingCallback(1 / this.props.factor)
+    }[this.props.easing];
+  }
+
+  /**
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
-   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}},{key:"triggerChangeCallback",value:/**
+   */
+  getRange(props) {
+    const {
+      value,
+      min,
+      max
+    } = props;
+    return {
+      rangeMin: this.invertedEase(getRelativeValue(value[0], min, max)),
+      rangeMax: this.invertedEase(getRelativeValue(value[1], min, max))
+    };
+  }
+  /**
    * Calls the change callback in case of a state update.
-   */function triggerChangeCallback(){var _this$props=this.props,value=_this$props.value,onChange=_this$props.onChange,min=_this$props.min,max=_this$props.max;if(!onChange){return;}var newRange=[getAbsoluteValue(this.ease(this.state.rangeMin),min,max,true),getAbsoluteValue(this.ease(this.state.rangeMax),min,max,true)];if(newRange!==value){onChange(newRange);}}/**
+   */
+  triggerChangeCallback() {
+    const {
+      value,
+      onChange,
+      min,
+      max
+    } = this.props;
+    if (!onChange) {
+      return;
+    }
+    const newRange = [getAbsoluteValue(this.ease(this.state.rangeMin), min, max, true), getAbsoluteValue(this.ease(this.state.rangeMax), min, max, true)];
+    if (newRange !== value) {
+      onChange(newRange);
+    }
+  }
+
+  /**
    * Creates a new handle component.
    * @param {number} index The index of the component. Must be either 0 or 1.
    * @returns {JSX}
-   */},{key:"makeHandle",value:function makeHandle(index){return React.createElement(RangeSliderHandle,{index:index,onTouchStart:this.handleTouchStart,active:this.draggedHandle===index,classNames:this.props.classNames});}/**
+   */
+  makeHandle(index) {
+    return /*#__PURE__*/React.createElement(RangeSliderHandle, {
+      index: index,
+      onTouchStart: this.handleTouchStart,
+      active: this.draggedHandle === index,
+      classNames: this.props.classNames
+    });
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this3=this;// Calculate the animation speed.
-var animationSpeed=Math.round(1000/this.props.animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,animationSpeed>10?animationSpeed:0);return React.createElement("div",{className:"".concat(this.props.classNames.container||''," common__range-slider"),onTouchStart:this.handleRangeTouch},React.createElement("div",{className:"".concat(this.props.classNames.outerRange||''," ").concat(styles.outerRange),ref:function ref(_ref){_this3.domElement=_ref;}},React.createElement("div",{className:"".concat(this.props.classNames.range||''," ").concat(styles.range),style:rangeStyle},this.makeHandle(0),this.makeHandle(1))));}}]);}(Component);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;
+   */
+  render() {
+    // Calculate the animation speed.
+    const animationSpeed = Math.round(1000 / this.props.animationSpeed * this.draggedHandlePixelOffset);
+    const rangeStyle = getRangeStyle(this.state.rangeMin, this.state.rangeMax, animationSpeed > 10 ? animationSpeed : 0);
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${this.props.classNames.container || ''} common__range-slider`,
+      onTouchStart: this.handleRangeTouch
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${this.props.classNames.outerRange || ''} ${styles.outerRange}`,
+      ref: ref => {
+        this.domElement = ref;
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${this.props.classNames.range || ''} ${styles.range}`,
+      style: rangeStyle
+    }, this.makeHandle(0), this.makeHandle(1))));
+  }
+}
+RangeSlider.defaultProps = {
+  animationSpeed: 500,
+  classNames: {},
+  easing: 'linear',
+  factor: 2,
+  max: 100,
+  min: 0,
+  resolution: 1,
+  value: [0, 100],
+  onChange: null
+};
+export default RangeSlider;

package/components/RangeSlider/style.js

@@ -1 +1,14 @@
-import{css}from'glamor';var outerRange=css({minHeight:1,position:'relative'}).toString();var range=css({left:0,right:0,position:'absolute'}).toString();export default{outerRange:outerRange,range:range};
+import { css } from 'glamor';
+const outerRange = css({
+  minHeight: 1,
+  position: 'relative'
+}).toString();
+const range = css({
+  left: 0,
+  right: 0,
+  position: 'absolute'
+}).toString();
+export default {
+  outerRange,
+  range
+};

package/components/Route/RouteNotFound.js

@@ -1,5 +1,48 @@
-var _excluded=["setPattern"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import{router}from'@virtuous/conductor';import{RouteContext,RouterContext}from'@virtuous/react-conductor';import ErrorBoundary from"../ErrorBoundary";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { router } from '@virtuous/conductor';
+import { RouteContext, RouterContext } from '@virtuous/react-conductor';
+import ErrorBoundary from "../ErrorBoundary";
+
+/**
  * The RouteNotFound component
- */var RouteNotFound=/*#__PURE__*/function(_React$Component){function RouteNotFound(){_classCallCheck(this,RouteNotFound);return _callSuper(this,RouteNotFound,arguments);}_inherits(RouteNotFound,_React$Component);return _createClass(RouteNotFound,[{key:"currentRoute",get:function get(){var _this$context$stack$r=_slicedToArray(this.context.stack[router.routeIndex],2),route=_this$context$stack$r[1];return route;}/**
+ */
+class RouteNotFound extends React.Component {
+  /**
+   * @returns {Object}
+   */
+  get currentRoute() {
+    const {
+      [router.routeIndex]: [, route]
+    } = this.context.stack;
+    return route;
+  }
+
+  /**
    * @returns {JSX}
-   */},{key:"render",value:function render(){if(router.match(this.currentRoute.pathname)){return null;}var Component=this.props.component;var _this$currentRoute=this.currentRoute,setPattern=_this$currentRoute.setPattern,context=_objectWithoutProperties(_this$currentRoute,_excluded);context.open=true;context.visible=true;context.pattern='';context.is404=true;return React.createElement(ErrorBoundary,{key:"error.404"},React.createElement(RouteContext.Provider,{key:"404",value:context},React.createElement(Component,null)));}}]);}(React.Component);_defineProperty(RouteNotFound,"contextType",RouterContext);export default RouteNotFound;
+   */
+  render() {
+    if (router.match(this.currentRoute.pathname)) {
+      return null;
+    }
+    const {
+      component: Component
+    } = this.props;
+    const {
+      setPattern,
+      ...context
+    } = this.currentRoute;
+    context.open = true;
+    context.visible = true;
+    context.pattern = '';
+    context.is404 = true;
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      key: "error.404"
+    }, /*#__PURE__*/React.createElement(RouteContext.Provider, {
+      key: "404",
+      value: context
+    }, /*#__PURE__*/React.createElement(Component, null)));
+  }
+}
+RouteNotFound.contextType = RouterContext;
+export default RouteNotFound;

package/components/Route/index.js

@@ -1,19 +1,87 @@
-var _excluded=["setPattern"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Suspense}from'react';import PropTypes from'prop-types';import{router}from'@virtuous/conductor';import{RouteContext,RouterContext}from'@virtuous/react-conductor';import Loading from"../Loading";import ErrorBoundary from"../ErrorBoundary";import RouteNotFound from"./RouteNotFound";/**
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
+import { router } from '@virtuous/conductor';
+import { RouteContext, RouterContext } from '@virtuous/react-conductor';
+import Loading from "../Loading";
+import ErrorBoundary from "../ErrorBoundary";
+import RouteNotFound from "./RouteNotFound";
+
+/**
  * The Route component.
- */var Route=/*#__PURE__*/function(_React$Component){function Route(props){var _this2;_classCallCheck(this,Route);_this2=_callSuper(this,Route,[props]);router.register(props.pattern,props.transform);return _this2;}/**
+ */
+class Route extends React.Component {
+  /**
+   * @param {Object} props The component props.
+   */
+  constructor(props) {
+    super(props);
+    router.register(props.pattern, props.transform);
+  }
+
+  /**
    * TODO: Move to router
-   */_inherits(Route,_React$Component);return _createClass(Route,[{key:"currentRoute",get:function get(){var _this$context$stack$r=_slicedToArray(this.context.stack[router.routeIndex],2),route=_this$context$stack$r[1];return route;}/**
+   */
+  get currentRoute() {
+    const {
+      [router.routeIndex]: [, route]
+    } = this.context.stack;
+    return route;
+  }
+
+  /**
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,cache=_this$props.cache,Component=_this$props.component,pattern=_this$props.pattern;var matches=[];// If the current pattern does not match the whitelist but matches the current route
-// then add the current route as the only match.
-if(!cache&&pattern===this.currentRoute.pattern){matches=[[this.currentRoute.id,this.currentRoute]];}else if(cache){var subset=this.context.stack.slice(0,router.routeIndex+1);// Find matching patterns.
-matches=subset.filter(function(_ref){var _ref2=_slicedToArray(_ref,2),route=_ref2[1];return route.pattern===pattern;});}if(!matches.length){return null;}return matches.map(function(_ref3){var _context$state;var _ref4=_slicedToArray(_ref3,2),route=_ref4[1];var setPattern=route.setPattern,context=_objectWithoutProperties(route,_excluded);context.open=true;context.visible=route.id===_this3.currentRoute.id;/**
+   */
+  render() {
+    const {
+      cache,
+      component: Component,
+      pattern
+    } = this.props;
+    let matches = [];
+
+    // If the current pattern does not match the whitelist but matches the current route
+    // then add the current route as the only match.
+    if (!cache && pattern === this.currentRoute.pattern) {
+      matches = [[this.currentRoute.id, this.currentRoute]];
+    } else if (cache) {
+      const subset = this.context.stack.slice(0, router.routeIndex + 1);
+      // Find matching patterns.
+      matches = subset.filter(([, route]) => route.pattern === pattern);
+    }
+    if (!matches.length) {
+      return null;
+    }
+    return matches.map(([, route]) => {
+      const {
+        setPattern,
+        ...context
+      } = route;
+      context.open = true;
+      context.visible = route.id === this.currentRoute.id;
+      /**
        * When a route is "replaced" the router doesn't assign a new route id to the old route
        * stack entry. This can cause issues when a route is replaced by itself, since the content
        * will not remount out of the box.
        *
        * The "replaceRouteId" state prop is injected by the "historyReplace" action. It's used
        * to enforce re-remounting routes which where replaced by itself.
-       */var replaceRouteId=(context===null||context===void 0?void 0:(_context$state=context.state)===null||_context$state===void 0?void 0:_context$state.replaceRouteId)||'';return React.createElement(ErrorBoundary,{key:"error.".concat(route.id,"_").concat(replaceRouteId)},React.createElement(RouteContext.Provider,{key:"".concat(route.id,"_").concat(replaceRouteId),value:context},React.createElement(Suspense,{fallback:React.createElement(Loading,null)},React.createElement(Component,null))));});}}]);}(React.Component);_defineProperty(Route,"contextType",RouterContext);_defineProperty(Route,"NotFound",RouteNotFound);_defineProperty(Route,"defaultProps",{cache:false,transform:null/**
-   * @param {Object} props The component props.
-   */});export default Route;
+       */
+      const replaceRouteId = context?.state?.replaceRouteId || '';
+      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+        key: `error.${route.id}_${replaceRouteId}`
+      }, /*#__PURE__*/React.createElement(RouteContext.Provider, {
+        key: `${route.id}_${replaceRouteId}`,
+        value: context
+      }, /*#__PURE__*/React.createElement(Suspense, {
+        fallback: /*#__PURE__*/React.createElement(Loading, null)
+      }, /*#__PURE__*/React.createElement(Component, null))));
+    });
+  }
+}
+Route.contextType = RouterContext;
+Route.NotFound = RouteNotFound;
+Route.defaultProps = {
+  cache: false,
+  transform: null
+};
+export default Route;

package/components/Router/connector.js

@@ -1,4 +1,11 @@
-import{connect}from'react-redux';import{isUserLoggedIn}from"../../selectors/user";/**
+import { connect } from 'react-redux';
+import { isUserLoggedIn } from "../../selectors/user";
+
+/**
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{isUserLoggedIn:isUserLoggedIn(state)};};export default connect(mapStateToProps);
+ */
+const mapStateToProps = state => ({
+  isUserLoggedIn: isUserLoggedIn(state)
+});
+export default connect(mapStateToProps);