ion-router - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

docs/md/README.md

@@ -28,2 +28,3 @@ <img src='ion-router.png' alt='Ion Router Logo' width='300px'>
     * [Explicitly changing URL](#explicitly-changing-url)
+  * [Animating page changes](#animating-page-changes)
   * [Why a new router?](#why-a-new-router)
@@ -728,2 +729,78 @@ * [Principles](#principles)
 
+## Animating page changes
+
+ion-router makes animating page changes possible and is not opinionated about the
+animation library. To enable animations, pass in the animating component
+as a wrapper. For example, with ReactCSSTransitionGroup:
+
+```javascript
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import Toggle from 'ion-router/Toggle'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+
+
+import Concert from './Concert'
+import ConcertList from './ConcertList'
+
+const ConcertToggle = Toggle(state => state.concerts.selected,
+  state => !state.concerts.selected || state.concerts.concerts[state.concerts.selected])
+
+const Loading = () => <div>Loading...</div>
+const wProps = {
+  transitionName: "concert",
+  transitionAppear: true,
+  transitionAppearTimeout: 500,
+  transitionEnterTimeout: 500,
+  transitionLeave: true,
+  transitionLeaveTimeout: 500,
+  transitionEnter: true
+}
+export class Tour extends PureComponent {
+  static propTypes = {
+    select: PropTypes.func.isRequired,
+    upcoming: PropTypes.array.isRequired
+  }
+
+  render() {
+    return (
+      <div className="Tour">
+        <div className="csq"/>
+        <h1 className="App-h1 shadow">Concerts</h1>
+        <ConcertToggle
+          wrapper={ReactCSSTransitionGroup}
+          wrapperProps={wProps}
+          component={Concert}
+          else={ConcertList}
+          loadingComponent={Loading}
+      </div>
+    )
+  }
+}
+```
+
+ion-router sets the key of your component to "component", of the
+else component to "else" and the loading component to "loading" to
+allow the animation wrapper to easily detect when your component is
+loaded or removed.
+
+The above code renders as:
+
+```javascript
+  const code = <ReactCSSTransitionGroup
+     transitionName="concert"
+     transititionAppear={true}
+     transitionAppearTimeout={500}
+     transitionEnterTimeout={500}
+     transitionLeave={true}
+     transitionLeaveTimeout={500}
+     transitionEnter={true}
+   >
+     <Concert key="component"/>
+     {/* or <ConcertList key="else"/>*/}
+     {/* or <Loading key="loading"/>*/}
+   </ReactCSSTransitionGroup>
+```
+
 ## Why a new router?
@@ -730,0 +807,0 @@

lib/NullComponent.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -20,2 +22,6 @@
 
+var _DisplaysChildren = require('./DisplaysChildren');
+
+var _DisplaysChildren2 = _interopRequireDefault(_DisplaysChildren);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,4 +37,4 @@
 
-function NullComponent(Loading, Component, ElseComponent, debug) {
-  var cons = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : console;
+function NullComponent(Loading, Component, ElseComponent, Wrapper, wrapperProps, debug) {
+  var cons = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : console;
 
@@ -60,4 +66,12 @@ var Toggle = function (_PureComponent) {
         }
-        return !loadedProp ? _react2.default.createElement(Loading, nullProps) // eslint-disable-line
-        : nullProps['@@__isActive'] ? _react2.default.createElement(Component, nullProps) : _react2.default.createElement(ElseComponent, nullProps);
+        if (Wrapper === _DisplaysChildren2.default) {
+          return !loadedProp ? _react2.default.createElement(Loading, nullProps) // eslint-disable-line
+          : nullProps['@@__isActive'] ? _react2.default.createElement(Component, nullProps) : _react2.default.createElement(ElseComponent, nullProps);
+        }
+        return _react2.default.createElement(
+          Wrapper,
+          wrapperProps,
+          !loadedProp ? _react2.default.createElement(Loading, _extends({}, nullProps, { key: 'loading' })) // eslint-disable-line
+          : nullProps['@@__isActive'] ? _react2.default.createElement(Component, _extends({}, nullProps, { key: 'component' })) : _react2.default.createElement(ElseComponent, _extends({}, nullProps, { key: 'else' }))
+        );
       }
@@ -64,0 +78,0 @@ }]);

lib/Toggle.js

@@ -18,2 +18,6 @@ 'use strict';
 
+var _shallowequal = require('shallowequal');
+
+var _shallowequal2 = _interopRequireDefault(_shallowequal);
+
 var _DisplaysChildren = require('./DisplaysChildren');
@@ -47,2 +51,16 @@
 
+var defaults = {
+  component: _DisplaysChildren2.default,
+  else: function _else() {
+    return null;
+  },
+  loadingComponent: function loadingComponent() {
+    return null;
+  },
+  wrapper: _DisplaysChildren2.default,
+  wrapperProps: {}
+};
+defaults.else.displayName = 'null';
+defaults.loadingComponent.displayName = 'null';
+
 exports.default = function (isActive) {
@@ -64,14 +82,2 @@ var loaded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
 
-  var defaults = {
-    component: _DisplaysChildren2.default,
-    else: function _else() {
-      return null;
-    },
-    loadingComponent: function loadingComponent() {
-      return null;
-    }
-  };
-  defaults.else.displayName = 'null';
-  defaults.loadingComponent.displayName = 'null';
-
   var Toggle = function (_ReactComponent) {
@@ -88,3 +94,5 @@ _inherits(Toggle, _ReactComponent);
         else: false,
-        loadingComponent: false
+        loadingComponent: false,
+        wrapper: false,
+        extra: false
       };
@@ -104,3 +112,8 @@ _this.makeHOC(props);
             _props$loadingCompone = props.loadingComponent,
-            Loading = _props$loadingCompone === undefined ? defaults.loadingComponent : _props$loadingCompone;
+            Loading = _props$loadingCompone === undefined ? defaults.loadingComponent : _props$loadingCompone,
+            _props$wrapper = props.wrapper,
+            Wrapper = _props$wrapper === undefined ? defaults.wrapper : _props$wrapper,
+            _props$wrapperProps = props.wrapperProps,
+            wrapperProps = _props$wrapperProps === undefined ? defaults.wrapperProps : _props$wrapperProps,
+            extra = _objectWithoutProperties(props, ['component', 'else', 'loadingComponent', 'wrapper', 'wrapperProps']);
 
@@ -110,5 +123,8 @@ this.lastComponents = {
           else: ElseComponent,
-          loadingComponent: Loading
+          loadingComponent: Loading,
+          wrapper: Wrapper,
+          wrapperProps: wrapperProps,
+          extra: extra
         };
-        var Switcher = (0, _NullComponent2.default)(Loading, Component, ElseComponent, debug);
+        var Switcher = (0, _NullComponent2.default)(Loading, Component, ElseComponent, Wrapper, wrapperProps, debug);
         var HOC = connect(scaffold, undefined, undefined, { storeKey: storeKey })(Switcher);
@@ -118,3 +134,8 @@ var elseName = ElseComponent.displayName || ElseComponent.name || 'Component';
         var loadingName = Loading.displayName || Loading.name || 'Component';
-        HOC.displayName = 'Toggle(component:' + componentName + ',else:' + elseName + ',loading:' + loadingName + ')';
+        var wrapperName = Wrapper.displayName || Wrapper.name || 'Component';
+        if (Wrapper === _DisplaysChildren2.default) {
+          HOC.displayName = 'Toggle(component:' + componentName + ',else:' + elseName + ',loading:' + loadingName + ')';
+        } else {
+          HOC.displayName = 'Toggle(component:' + componentName + ',else:' + elseName + ',loading:' + loadingName + '),wrapper:' + wrapperName;
+        }
         this.HOC = HOC;
@@ -130,5 +151,9 @@ }
             _newprops$loadingComp = newprops.loadingComponent,
-            Loading = _newprops$loadingComp === undefined ? defaults.loadingComponent : _newprops$loadingComp;
+            Loading = _newprops$loadingComp === undefined ? defaults.loadingComponent : _newprops$loadingComp,
+            _newprops$wrapper = newprops.wrapper,
+            Wrapper = _newprops$wrapper === undefined ? defaults.wrapper : _newprops$wrapper,
+            _newprops$wrapperProp = newprops.wrapperProps,
+            wrapperProps = _newprops$wrapperProp === undefined ? defaults.wrapperProps : _newprops$wrapperProp;
 
-        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent) {
+        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent || Wrapper !== this.lastComponents.wrapper || !(0, _shallowequal2.default)(wrapperProps, this.lastComponents.wrapperProps)) {
           this.makeHOC(newprops);
@@ -146,5 +171,11 @@ }
             Loading = _newprops$loadingComp2 === undefined ? defaults.loadingComponent : _newprops$loadingComp2,
-            children = newprops.children;
+            children = newprops.children,
+            _newprops$wrapper2 = newprops.wrapper,
+            Wrapper = _newprops$wrapper2 === undefined ? defaults.wrapper : _newprops$wrapper2,
+            _newprops$wrapperProp2 = newprops.wrapperProps,
+            wrapperProps = _newprops$wrapperProp2 === undefined ? defaults.wrapperProps : _newprops$wrapperProp2,
+            extra = _objectWithoutProperties(newprops, ['component', 'else', 'loadingComponent', 'children', 'wrapper', 'wrapperProps']);
 
-        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent || children !== this.props.children) {
+        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent || Wrapper !== this.lastComponents.wrapper || !(0, _shallowequal2.default)(wrapperProps, this.lastComponents.wrapperProps) || children !== this.props.children || !(0, _shallowequal2.default)(extra, this.lastComponents.extra)) {
+          this.lastComponents.extra = extra;
           this.init(newprops);
@@ -165,3 +196,5 @@ return true;
             children = _props.children,
-            props = _objectWithoutProperties(_props, ['component', 'else', 'loadingComponent', 'children']);
+            wrapper = _props.wrapper,
+            wrapperProps = _props.wrapperProps,
+            props = _objectWithoutProperties(_props, ['component', 'else', 'loadingComponent', 'children', 'wrapper', 'wrapperProps']);
 
@@ -168,0 +201,0 @@ var useProps = _extends({}, props);

package.json

 {
   "name": "ion-router",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "elegant powerful routing based on the simplicity of storing url as state",
@@ -35,7 +35,7 @@ "main": "lib/index.js",
   },
-  "homepage": "https://github.com/cellog/ion-router#readme",
   "dependencies": {
     "history": "^4.5.1",
     "invariant": "^2.2.2",
-    "route-parser": "0.0.5"
+    "route-parser": "0.0.5",
+    "shallowequal": "^1.0.2"
   },
@@ -90,2 +90,3 @@ "peerDependencies": {
     "mocha": "^3.2.0",
+    "prop-types": "^15.5.10",
     "raw-loader": "^0.5.1",
@@ -95,2 +96,3 @@ "react": "^15.5.4",
     "react-redux": "^5.0.4",
+    "redux": "^3.7.2",
     "rimraf": "^2.5.4",
@@ -97,0 +99,0 @@ "selenium-webdriver": "^3.0.1",

src/NullComponent.jsx

 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
-export default function NullComponent(Loading, Component, ElseComponent, debug, cons = console) {
+import DisplaysChildren from './DisplaysChildren'
+
+export default function NullComponent(Loading, Component,
+  ElseComponent, Wrapper, wrapperProps, debug, cons = console) {
   class Toggle extends PureComponent {
@@ -23,4 +26,14 @@ static propTypes = {
       }
-      return !loadedProp ? <Loading {...nullProps} />  // eslint-disable-line
-        : (nullProps['@@__isActive'] ? <Component {...nullProps} /> : <ElseComponent {...nullProps} />)
+      if (Wrapper === DisplaysChildren) {
+        return !loadedProp ? <Loading {...nullProps} />  // eslint-disable-line
+          : (nullProps['@@__isActive'] ? <Component {...nullProps} /> : <ElseComponent {...nullProps} />)
+      }
+      return (
+        <Wrapper {...wrapperProps}>
+          {!loadedProp ? <Loading {...nullProps} key="loading" />  // eslint-disable-line
+            : (nullProps['@@__isActive'] ?
+              <Component {...nullProps} key="component" /> :
+              <ElseComponent {...nullProps} key="else" />)}
+        </Wrapper>
+      )
     }
@@ -27,0 +40,0 @@ }

src/Toggle.jsx

 import React, { Component as ReactComponent } from 'react'
+import shallowEqual from 'shallowequal'
 
@@ -17,2 +18,12 @@ import DisplaysChildren from './DisplaysChildren'
 
+const defaults = {
+  component: DisplaysChildren,
+  else: () => null,
+  loadingComponent: () => null,
+  wrapper: DisplaysChildren,
+  wrapperProps: {},
+}
+defaults.else.displayName = 'null'
+defaults.loadingComponent.displayName = 'null'
+
 export default (isActive, loaded = () => true, componentLoadingMap = {}, debug = false, storeKey = 'store') => {
@@ -28,10 +39,2 @@ const scaffold = (state, rProps) => {
 
-  const defaults = {
-    component: DisplaysChildren,
-    else: () => null,
-    loadingComponent: () => null
-  }
-  defaults.else.displayName = 'null'
-  defaults.loadingComponent.displayName = 'null'
-
   class Toggle extends ReactComponent {
@@ -44,3 +47,5 @@
         else: false,
-        loadingComponent: false
+        loadingComponent: false,
+        wrapper: false,
+        extra: false
       }
@@ -54,3 +59,5 @@ this.makeHOC(props)
         component: Component = defaults.component, else: ElseComponent = defaults.else, // eslint-disable-line
-        loadingComponent: Loading = defaults.loadingComponent // eslint-disable-line
+        loadingComponent: Loading = defaults.loadingComponent, // eslint-disable-line
+        wrapper: Wrapper = defaults.wrapper, wrapperProps = defaults.wrapperProps, // eslint-disable-line
+        ...extra
       } = props
@@ -60,5 +67,9 @@ this.lastComponents = {
         else: ElseComponent,
-        loadingComponent: Loading
+        loadingComponent: Loading,
+        wrapper: Wrapper,
+        wrapperProps,
+        extra
       }
-      const Switcher = NullComponent(Loading, Component, ElseComponent, debug)
+      const Switcher = NullComponent(Loading,
+        Component, ElseComponent, Wrapper, wrapperProps, debug)
       const HOC = connect(scaffold, undefined, undefined, { storeKey })(Switcher)
@@ -68,3 +79,8 @@ const elseName = ElseComponent.displayName || ElseComponent.name || 'Component'
       const loadingName = Loading.displayName || Loading.name || 'Component'
-      HOC.displayName = `Toggle(component:${componentName},else:${elseName},loading:${loadingName})`
+      const wrapperName = Wrapper.displayName || Wrapper.name || 'Component'
+      if (Wrapper === DisplaysChildren) {
+        HOC.displayName = `Toggle(component:${componentName},else:${elseName},loading:${loadingName})`
+      } else {
+        HOC.displayName = `Toggle(component:${componentName},else:${elseName},loading:${loadingName}),wrapper:${wrapperName}`
+      }
       this.HOC = HOC
@@ -76,6 +92,9 @@ }
         component: Component = defaults.component, else: ElseComponent = defaults.else,
-        loadingComponent: Loading = defaults.loadingComponent
+        loadingComponent: Loading = defaults.loadingComponent, wrapper: Wrapper = defaults.wrapper,
+        wrapperProps = defaults.wrapperProps
       } = newprops
       if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else
-        || Loading !== this.lastComponents.loadingComponent) {
+        || Loading !== this.lastComponents.loadingComponent
+        || Wrapper !== this.lastComponents.wrapper
+        || !shallowEqual(wrapperProps, this.lastComponents.wrapperProps)) {
         this.makeHOC(newprops)
@@ -88,6 +107,13 @@ }
         component: Component = defaults.component, else: ElseComponent = defaults.else,
-        loadingComponent: Loading = defaults.loadingComponent, children
+        loadingComponent: Loading = defaults.loadingComponent, children,
+        wrapper: Wrapper = defaults.wrapper, wrapperProps = defaults.wrapperProps,
+        ...extra
       } = newprops
       if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else
-        || Loading !== this.lastComponents.loadingComponent || children !== this.props.children) {
+        || Loading !== this.lastComponents.loadingComponent
+        || Wrapper !== this.lastComponents.wrapper
+        || !shallowEqual(wrapperProps, this.lastComponents.wrapperProps)
+        || children !== this.props.children
+        || !shallowEqual(extra, this.lastComponents.extra)) {
+        this.lastComponents.extra = extra
         this.init(newprops)
@@ -102,3 +128,3 @@ return true
       const {
-        component, else: unused, loadingComponent, children, ...props // eslint-disable-line
+        component, else: unused, loadingComponent, children, wrapper, wrapperProps, ...props // eslint-disable-line
       } = this.props
@@ -105,0 +131,0 @@ const useProps = { ...props }

No alert changes

Improved metrics

Total package byte prevSize

935967

increased by0.43%

Lines of code

2984

increased by1.29%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

54

increased by3.85%

Number of package files

102

decreased by-0.97%

Dependency changes

• + Addedshallowequal@^1.0.2

• + Addedshallowequal@1.1.0(transitive)