react-querystring-router - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0-beta.1

lib/index.js

 'use strict';
 
-/* eslint-disable global-require */
+var _uri = require('./uri');
 
+var _uri2 = _interopRequireDefault(_uri);
+
+var _router = require('./router');
+
+var _router2 = _interopRequireDefault(_router);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 module.exports = {
-  uri: require('./uri'),
-  Router: require('./router')
+  uri: _uri2.default,
+  Router: _router2.default
 };

lib/router.js

 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }; }(); /* eslint-env browser */
@@ -9,10 +15,4 @@
 
-var _lodash = require('lodash');
+var _uri = require('./uri');
 
-var _lodash2 = _interopRequireDefault(_lodash);
-
-var _uri = require('./uri.js');
-
-var _uri2 = _interopRequireDefault(_uri);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,2 +24,6 @@
 
+var getCurrentLocation = function getCurrentLocation() {
+  return window.location.href;
+};
+
 var Router = function () {
@@ -29,5 +33,3 @@ function Router(options) {
 
-    this.options = _lodash2.default.extend({
-      defaultProps: {}
-    }, options);
+    this.options = options;
 
@@ -37,6 +39,6 @@ this.routeLink = this.routeLink.bind(this);
 
-    this.bindPopStateEvent();
+    window.addEventListener('popstate', this.onPopState);
 
     // The initial render is done instantly when the Router instance is created
-    this.loadParams(_uri2.default.parseLocation(this.getCurrentLocation()));
+    this.loadParams((0, _uri.parseLocation)(getCurrentLocation()));
   }
@@ -47,3 +49,3 @@
     value: function stop() {
-      this.unbindPopStateEvent();
+      window.removeEventListener('popstate', this.onPopState);
     }
@@ -71,4 +73,4 @@ }, {
     value: function onPopState() {
-      var location = this.getCurrentLocation();
-      var params = _uri2.default.parseLocation(location);
+      var location = getCurrentLocation();
+      var params = (0, _uri.parseLocation)(location);
 
@@ -81,3 +83,3 @@ this.loadParams(params);
       // Old-school refreshes are made when pushState isn't supported
-      if (!this.isPushStateSupported()) {
+      if (!window.history.pushState) {
         window.location = location;
@@ -88,5 +90,5 @@ return;
       // Create a history entry for the new component
-      this.pushHistoryState({}, location);
+      window.history.pushState({}, '', location);
 
-      this.loadParams(_uri2.default.parseLocation(location));
+      this.loadParams((0, _uri.parseLocation)(location));
     }
@@ -96,44 +98,24 @@ }, {
     value: function loadParams(params) {
-      var props = _lodash2.default.extend({
+      var _options = this.options,
+          getComponentClass = _options.getComponentClass,
+          getComponentProps = _options.getComponentProps,
+          container = _options.container,
+          onChange = _options.onChange;
+
+      var ComponentClass = getComponentClass(params);
+      var props = _extends({}, getComponentProps(params), {
         // Always send the components a reference to the router. This makes it
         // possible for a component to change the page through the router and
         // not have to rely on any sort of globals
+        // TODO: Send only methods instead
         router: this
-      }, this.options.defaultProps, params);
-
-      var ComponentClass = this.options.getComponentClass(props);
+      });
       var componentElement = _react2.default.createElement(ComponentClass, props);
 
-      // The router exposes the instance of the currently rendered component
-      this.rootComponent = ReactDOM.render(componentElement, this.options.container);
+      ReactDOM.render(componentElement, container);
 
-      if (_lodash2.default.isFunction(this.options.onChange)) {
-        this.options.onChange.call(this, props);
+      if (typeof onChange === 'function') {
+        onChange.call(this, params);
       }
     }
-  }, {
-    key: 'getCurrentLocation',
-    value: function getCurrentLocation() {
-      return window.location.href;
-    }
-  }, {
-    key: 'bindPopStateEvent',
-    value: function bindPopStateEvent() {
-      window.addEventListener('popstate', this.onPopState);
-    }
-  }, {
-    key: 'unbindPopStateEvent',
-    value: function unbindPopStateEvent() {
-      window.removeEventListener('popstate', this.onPopState);
-    }
-  }, {
-    key: 'pushHistoryState',
-    value: function pushHistoryState(state, url) {
-      window.history.pushState(state, '', url);
-    }
-  }, {
-    key: 'isPushStateSupported',
-    value: function isPushStateSupported() {
-      return !!window.history.pushState;
-    }
   }]);
@@ -144,2 +126,2 @@
 
-module.exports = Router;
+exports.default = Router;

package.json

 {
   "name": "react-querystring-router",
-  "version": "1.1.0",
+  "version": "2.0.0-beta.1",
   "description": "Bare router for React components, using props as query string",
@@ -13,3 +13,2 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/master/packages/react-querystring-router",
   "dependencies": {
-    "lodash": "^3.10.1",
     "react-dom-polyfill": "^1.0.1"
@@ -16,0 +15,0 @@ },

README.md

@@ -9,11 +9,9 @@ # react-querystring-router
 
-This route will render the component class returned by `getComponentClass`
-using the following props:
+By making use of the `getComponentClass` and `getComponentProps` callbacks, this route will render the following element:
 
-```js
-{
-  component: 'Father',
-  eyes: 'blue',
-  mood: 'happy'
-}
+```jsx
+<Father
+  eyes="blue"
+  mood="happy"
+/>
 ```
@@ -24,13 +22,14 @@
 ```js
-var Router = require('react-querystring-router').Router;
+import { Router } from 'react-querystring-router';
 
-var myRouter = new Router({
-  // These props will be sent to all components loaded, and will be overridden
-  // by the ones in the URL query string
-  defaultProps: {
-    fries: true
-  },
+const myRouter = new Router({
   // This is how the router maps component names to corresponding classes
-  getComponentClass: function(props) {
-    return require('components/' + props.component + '.jsx');
+  getComponentClass: ({ component }) => require(`components/${component}.jsx`),
+  // This is to combine url params with default and additional props
+  getComponentProps: (params) => {
+    return {
+      unlessOverridden: true,
+      ...params,
+      alwaysHere: true,
+    };
   },
@@ -41,4 +40,4 @@ // Tell React where to render in the DOM
   // props as the first argument
-  onChange: function(props) {
-    // E.g. Use the props to set a custom document.title
+  onChange: (params) => {
+    // E.g. Use the params to set a custom document.title
   }
@@ -54,14 +53,17 @@ });
 ```jsx
-var stringifyParams = require('react-querystring-router').uri.stringifyParams;
+import { uri } from 'react-querystring-router';
+const { stringifyParams } = uri;
 
 //...
 
-render: function() {
-  return <div className="serious-component">
-    <a href={stringifyParams({lifeChangingProp: 1})}
-       onClick={this.props.router.routeLink}>
-       Click me por favor
-    </a>
-  </div>;
+render() {
+  return (
+    <div className="serious-component">
+      <a href={stringifyParams({ lifeChangingProp: 1 })}
+         onClick={this.props.router.routeLink}>
+         Click me por favor
+      </a>
+    </div>
+  );
 };
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Number of lines in readme file

66

increased by3.13%

Worsened metrics

Total package byte prevSize

8329

decreased by-1.2%

Lines of code

154

decreased by-8.33%

Number of low quality alerts

2

increased by100%

Dependency changes

• - Removedlodash@^3.10.1

• - Removedlodash@3.10.1(transitive)