ion-router - npm Package Compare versions

Comparing version 0.11.1 to 0.11.2

lib/Toggle.js

@@ -6,4 +6,6 @@ 'use strict';
 });
-exports.NullComponent = exports.error = undefined;
+exports.error = undefined;
 
+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; }; }();
+
 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; };
@@ -17,6 +19,2 @@
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 var _DisplaysChildren = require('./DisplaysChildren');
@@ -26,2 +24,6 @@
 
+var _NullComponent = require('./NullComponent');
+
+var _NullComponent2 = _interopRequireDefault(_NullComponent);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,2 +33,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var error = exports.error = function error() {
@@ -42,41 +50,2 @@ throw new Error('call connectToggle with the connect function from react-redux to ' + 'initialize Toggle (see https://github.com/cellog/ion-router/issues/1)');
 
-var NullComponent = function NullComponent(Loading, Component, ElseComponent, debug) {
-  var cons = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : console;
-
-  if (process.env.NODE_ENV !== 'production') {
-    var _Toggle = function _Toggle(_ref) {
-      var loadedProp = _ref['@@__loaded'],
-          nullProps = _objectWithoutProperties(_ref, ['@@__loaded']);
-
-      if (debug) {
-        cons.log('Toggle: loaded: ' + loadedProp + ', active: ' + nullProps['@@__isActive']);
-        cons.log('Loading component', Loading, 'Component', Component, 'Else', ElseComponent);
-      }
-      return !loadedProp ? _react2.default.createElement(Loading, nullProps) // eslint-disable-line
-      : nullProps['@@__isActive'] ? _react2.default.createElement(Component, nullProps) : _react2.default.createElement(ElseComponent, nullProps);
-    };
-
-    _Toggle.propTypes = {
-      '@@__loaded': _propTypes2.default.bool,
-      '@@__isActive': _propTypes2.default.bool
-    };
-    return _Toggle;
-  }
-  var Toggle = function Toggle(_ref2) {
-    var loadedProp = _ref2['@@__loaded'],
-        nullProps = _objectWithoutProperties(_ref2, ['@@__loaded']);
-
-    return !loadedProp ? _react2.default.createElement(Loading, nullProps) // eslint-disable-line
-    : nullProps['@@__isActive'] ? _react2.default.createElement(Component, nullProps) : _react2.default.createElement(ElseComponent, nullProps);
-  };
-
-  Toggle.propTypes = {
-    '@@__loaded': _propTypes2.default.bool,
-    '@@__isActive': _propTypes2.default.bool
-  };
-  return Toggle;
-};
-
-exports.NullComponent = NullComponent;
-
 exports.default = function (isActive) {
@@ -110,48 +79,107 @@ var loaded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
 
-  var lastProps = {
-    component: null,
-    else: null,
-    loadingComponent: null
-  };
+  var Toggle = function (_ReactComponent) {
+    _inherits(Toggle, _ReactComponent);
 
-  function Toggle(_ref3) {
-    var _ref3$component = _ref3.component,
-        Component = _ref3$component === undefined ? defaults.component : _ref3$component,
-        _ref3$else = _ref3.else,
-        ElseComponent = _ref3$else === undefined ? defaults.else : _ref3$else,
-        _ref3$loadingComponen = _ref3.loadingComponent,
-        Loading = _ref3$loadingComponen === undefined ? defaults.loadingComponent : _ref3$loadingComponen,
-        children = _ref3.children,
-        props = _objectWithoutProperties(_ref3, ['component', 'else', 'loadingComponent', 'children']);
+    function Toggle(props) {
+      _classCallCheck(this, Toggle);
 
-    // eslint-disable-line
-    var useProps = _extends({}, props);
-    var map = ['component', 'loadingComponent', 'else'];
-    map.forEach(function (item) {
-      if (componentLoadingMap[item]) {
-        useProps[item] = props[componentLoadingMap[item]];
-        useProps[componentLoadingMap[item]] = undefined;
-      }
-    });
+      var _this = _possibleConstructorReturn(this, (Toggle.__proto__ || Object.getPrototypeOf(Toggle)).call(this, props));
 
-    if (Component !== lastProps.component || ElseComponent !== lastProps.else || Loading !== lastProps.loadingComponent) {
-      lastProps.component = Component;
-      lastProps.else = ElseComponent;
-      lastProps.loadingComponent = Loading;
-      var Switcher = NullComponent(Loading, Component, ElseComponent, debug);
-      Toggle.HOC = connect(scaffold, undefined, undefined, { storeKey: storeKey })(Switcher);
-      var elseName = ElseComponent.displayName || ElseComponent.name || 'Component';
-      var componentName = Component.displayName || Component.name || 'Component';
-      var loadingName = Loading.displayName || Loading.name || 'Component';
-      Toggle.HOC.displayName = 'Toggle(component:' + componentName + ',else:' + elseName + ',loading:' + loadingName + ')';
+      _this.lastComponents = {
+        component: false,
+        else: false,
+        loadingComponent: false
+      };
+      _this.makeHOC(props);
+      _this.rendered = 0;
+      return _this;
     }
 
-    var HOC = Toggle.HOC;
-    return _react2.default.createElement(
-      HOC,
-      useProps,
-      children
-    );
-  }
+    _createClass(Toggle, [{
+      key: 'makeHOC',
+      value: function makeHOC(props) {
+        var _props$component = props.component,
+            Component = _props$component === undefined ? defaults.component : _props$component,
+            _props$else = props.else,
+            ElseComponent = _props$else === undefined ? defaults.else : _props$else,
+            _props$loadingCompone = props.loadingComponent,
+            Loading = _props$loadingCompone === undefined ? defaults.loadingComponent : _props$loadingCompone;
 
+        this.lastComponents = {
+          component: Component,
+          else: ElseComponent,
+          loadingComponent: Loading
+        };
+        var Switcher = (0, _NullComponent2.default)(Loading, Component, ElseComponent, debug);
+        var HOC = connect(scaffold, undefined, undefined, { storeKey: storeKey })(Switcher);
+        var elseName = ElseComponent.displayName || ElseComponent.name || 'Component';
+        var componentName = Component.displayName || Component.name || 'Component';
+        var loadingName = Loading.displayName || Loading.name || 'Component';
+        HOC.displayName = 'Toggle(component:' + componentName + ',else:' + elseName + ',loading:' + loadingName + ')';
+        this.HOC = HOC;
+      }
+    }, {
+      key: 'init',
+      value: function init(newprops) {
+        var _newprops$component = newprops.component,
+            Component = _newprops$component === undefined ? defaults.component : _newprops$component,
+            _newprops$else = newprops.else,
+            ElseComponent = _newprops$else === undefined ? defaults.else : _newprops$else,
+            _newprops$loadingComp = newprops.loadingComponent,
+            Loading = _newprops$loadingComp === undefined ? defaults.loadingComponent : _newprops$loadingComp;
+
+        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent) {
+          this.makeHOC(newprops);
+        }
+      }
+    }, {
+      key: 'shouldComponentUpdate',
+      value: function shouldComponentUpdate(newprops) {
+        var _newprops$component2 = newprops.component,
+            Component = _newprops$component2 === undefined ? defaults.component : _newprops$component2,
+            _newprops$else2 = newprops.else,
+            ElseComponent = _newprops$else2 === undefined ? defaults.else : _newprops$else2,
+            _newprops$loadingComp2 = newprops.loadingComponent,
+            Loading = _newprops$loadingComp2 === undefined ? defaults.loadingComponent : _newprops$loadingComp2,
+            children = newprops.children;
+
+        if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else || Loading !== this.lastComponents.loadingComponent || children !== this.props.children) {
+          this.init(newprops);
+          return true;
+        }
+        return false;
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        this.rendered++;
+
+        var _props = this.props,
+            component = _props.component,
+            unused = _props.else,
+            loadingComponent = _props.loadingComponent,
+            children = _props.children,
+            props = _objectWithoutProperties(_props, ['component', 'else', 'loadingComponent', 'children']);
+
+        var useProps = _extends({}, props);
+        var map = ['component', 'loadingComponent', 'else'];
+        map.forEach(function (item) {
+          if (componentLoadingMap[item]) {
+            useProps[item] = props[componentLoadingMap[item]];
+            useProps[componentLoadingMap[item]] = undefined;
+          }
+        });
+
+        var HOC = this.HOC;
+        return _react2.default.createElement(
+          HOC,
+          useProps,
+          children
+        );
+      }
+    }]);
+
+    return Toggle;
+  }(_react.Component);
+
   var map = ['component', 'loadingComponent', 'else'];
@@ -158,0 +186,0 @@ var names = {

package.json

 {
   "name": "ion-router",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "elegant powerful routing based on the simplicity of storing url as state",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/Toggle.jsx

@@ -1,5 +0,5 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { Component as ReactComponent } from 'react'
 
 import DisplaysChildren from './DisplaysChildren'
+import NullComponent from './NullComponent'
 
@@ -17,31 +17,2 @@ export const error = () => {
 
-export const NullComponent = (Loading, Component, ElseComponent, debug, cons = console) => {
-  if (process.env.NODE_ENV !== 'production') {
-    const Toggle = ({ '@@__loaded': loadedProp, ...nullProps }) => {
-      if (debug) {
-        cons.log(`Toggle: loaded: ${loadedProp}, active: ${nullProps['@@__isActive']}`)
-        cons.log('Loading component', Loading, 'Component', Component, 'Else', ElseComponent)
-      }
-      return !loadedProp ? <Loading {...nullProps} />  // eslint-disable-line
-        : (nullProps['@@__isActive'] ? <Component {...nullProps} /> : <ElseComponent {...nullProps} />)
-    }
-
-    Toggle.propTypes = {
-      '@@__loaded': PropTypes.bool,
-      '@@__isActive': PropTypes.bool
-    }
-    return Toggle
-  }
-  const Toggle = ({ '@@__loaded': loadedProp, ...nullProps }) => (
-    !loadedProp ? <Loading {...nullProps} />  // eslint-disable-line
-      : (nullProps['@@__isActive'] ? <Component {...nullProps} /> : <ElseComponent {...nullProps} />)
-  )
-
-  Toggle.propTypes = {
-    '@@__loaded': PropTypes.bool,
-    '@@__isActive': PropTypes.bool
-  }
-  return Toggle
-}
-
 export default (isActive, loaded = () => true, componentLoadingMap = {}, debug = false, storeKey = 'store') => {
@@ -65,36 +36,77 @@ const scaffold = (state, rProps) => {
 
-  const lastProps = {
-    component: null,
-    else: null,
-    loadingComponent: null
-  }
+  class Toggle extends ReactComponent {
 
-  function Toggle({ component: Component = defaults.component, else: ElseComponent = defaults.else, // eslint-disable-line
-      loadingComponent: Loading = defaults.loadingComponent, children, ...props }) {  // eslint-disable-line
-    const useProps = { ...props }
-    const map = ['component', 'loadingComponent', 'else']
-    map.forEach((item) => {
-      if (componentLoadingMap[item]) {
-        useProps[item] = props[componentLoadingMap[item]]
-        useProps[componentLoadingMap[item]] = undefined
+    constructor(props) {
+      super(props)
+      this.lastComponents = {
+        component: false,
+        else: false,
+        loadingComponent: false
       }
-    })
+      this.makeHOC(props)
+      this.rendered = 0
+    }
 
-    if (Component !== lastProps.component || ElseComponent !== lastProps.else
-      || Loading !== lastProps.loadingComponent) {
-      lastProps.component = Component
-      lastProps.else = ElseComponent
-      lastProps.loadingComponent = Loading
+    makeHOC(props) {
+      const {
+        component: Component = defaults.component, else: ElseComponent = defaults.else, // eslint-disable-line
+        loadingComponent: Loading = defaults.loadingComponent // eslint-disable-line
+      } = props
+      this.lastComponents = {
+        component: Component,
+        else: ElseComponent,
+        loadingComponent: Loading
+      }
       const Switcher = NullComponent(Loading, Component, ElseComponent, debug)
-      Toggle.HOC = connect(scaffold, undefined, undefined, { storeKey })(Switcher)
+      const HOC = connect(scaffold, undefined, undefined, { storeKey })(Switcher)
       const elseName = ElseComponent.displayName || ElseComponent.name || 'Component'
       const componentName = Component.displayName || Component.name || 'Component'
       const loadingName = Loading.displayName || Loading.name || 'Component'
-      Toggle.HOC.displayName = `Toggle(component:${componentName},else:${elseName},loading:${loadingName})`
+      HOC.displayName = `Toggle(component:${componentName},else:${elseName},loading:${loadingName})`
+      this.HOC = HOC
     }
 
-    const HOC = Toggle.HOC
-    return (<HOC {...useProps}>
-      {children}
-    </HOC>)
+    init(newprops) {
+      const {
+        component: Component = defaults.component, else: ElseComponent = defaults.else,
+        loadingComponent: Loading = defaults.loadingComponent
+      } = newprops
+      if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else
+        || Loading !== this.lastComponents.loadingComponent) {
+        this.makeHOC(newprops)
+      }
+    }
+
+    shouldComponentUpdate(newprops) {
+      const {
+        component: Component = defaults.component, else: ElseComponent = defaults.else,
+        loadingComponent: Loading = defaults.loadingComponent, children
+      } = newprops
+      if (Component !== this.lastComponents.component || ElseComponent !== this.lastComponents.else
+        || Loading !== this.lastComponents.loadingComponent || children !== this.props.children) {
+        this.init(newprops)
+        return true
+      }
+      return false
+    }
+
+    render() {
+      this.rendered++
+      const {
+        component, else: unused, loadingComponent, children, ...props // eslint-disable-line
+      } = this.props
+      const useProps = { ...props }
+      const map = ['component', 'loadingComponent', 'else']
+      map.forEach((item) => {
+        if (componentLoadingMap[item]) {
+          useProps[item] = props[componentLoadingMap[item]]
+          useProps[componentLoadingMap[item]] = undefined
+        }
+      })
+
+      const HOC = this.HOC
+      return (<HOC {...useProps}>
+        {children}
+      </HOC>)
+    }
   }
@@ -101,0 +113,0 @@

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

931683

increased by0.74%

Number of package files

103

increased by1.98%

Lines of code

2941

increased by4%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes