From f252de5eb8ccae2f2d02f6c02582479e7a8b4414 Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Thu, 30 Apr 2015 22:19:33 +0300 Subject: [PATCH 1/3] Rename minimal router to querystring router #4 --- README.md | 6 +++--- package.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0c03409..f38aa39 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-minimal-router [![Build Status](https://travis-ci.org/skidding/react-minimal-router.svg?branch=master)](https://travis-ci.org/skidding/react-minimal-router) [![Coverage Status](https://coveralls.io/repos/skidding/react-minimal-router/badge.svg?branch=master)](https://coveralls.io/r/skidding/react-minimal-router?branch=master) +# react-querystring-router [![Build Status](https://travis-ci.org/skidding/react-querystring-router.svg?branch=master)](https://travis-ci.org/skidding/react-querystring-router) [![Coverage Status](https://coveralls.io/repos/skidding/react-querystring-router/badge.svg?branch=master)](https://coveralls.io/r/skidding/react-querystring-router?branch=master) Bare router for React components, using query string as props. ``` @@ -18,7 +18,7 @@ using the following props: #### Options ```js -var Router = require('react-minimal-router').Router; +var Router = require('react-querystring-router').Router; var myRouter = new Router({ // These props will be sent to all components loaded, and will be overridden @@ -46,7 +46,7 @@ the `router` prop. #### Changing the route ```jsx -var stringifyParams = require('react-minimal-router').uri.stringifyParams; +var stringifyParams = require('react-querystring-router').uri.stringifyParams; //... diff --git a/package.json b/package.json index c6ebf2e..6adaf0b 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-minimal-router", - "version": "0.1.3", + "name": "react-querystring-router", + "version": "0.2.0", "description": "Bare router for React components, using props as query string", "main": "src/main.js", "repository": { "type": "git", - "url": "https://github.com/skidding/react-minimal-router.git" + "url": "https://github.com/skidding/react-querystring-router.git" }, "devDependencies": { "chai": "^2.2.0", From 4b1b79bd7dba57f7c5389b5ef08465a4b218b526 Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Thu, 30 Apr 2015 22:36:18 +0300 Subject: [PATCH 2/3] Send all props to callbacks #4 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove “component” magic param --- README.md | 13 +++++++------ src/router.js | 6 +++--- tests/router.js | 24 ++++++++++++++++-------- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index f38aa39..b19c1c1 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,12 @@ Bare router for React components, using query string as props. http://mysite.com/?component=Father&eyes=blue&mood=happy ``` -This route would render the Father component (see `getComponentClass` option), +This route will render the component class returned by `getComponentClass` using the following props: ```js { + component: 'Father', eyes: 'blue', mood: 'happy' } @@ -27,15 +28,15 @@ var myRouter = new Router({ fries: true }, // This is how the router maps component names to corresponding classes - getComponentClass: function(name) { - return require('components/' + name + '.jsx'); + getComponentClass: function(props) { + return require('components/' + props.component + '.jsx'); }, // Tell React where to render in the DOM container: document.getElementById('content'), // Called whenever the route changes (also initially), receiving the parsed - // params as the first argument - onChange: function(params) { - // E.g. Use the params to set a custom document.title + // props as the first argument + onChange: function(props) { + // E.g. Use the props to set a custom document.title } }); ``` diff --git a/src/router.js b/src/router.js index 323e6d7..d9d6e6c 100644 --- a/src/router.js +++ b/src/router.js @@ -69,9 +69,9 @@ Router.prototype = { // possible for a component to change the page through the router and // not have to rely on any sort of globals router: this - }, this._options.defaultProps, _.omit(params, 'component')); + }, this._options.defaultProps, params); - var ComponentClass = this._options.getComponentClass(params.component), + var ComponentClass = this._options.getComponentClass(props), componentElement = React.createElement(ComponentClass, props); // The router exposes the instance of the currently rendered component @@ -79,7 +79,7 @@ Router.prototype = { this._options.container); if (_.isFunction(this._options.onChange)) { - this._options.onChange.call(this, params); + this._options.onChange.call(this, props); } }, diff --git a/tests/router.js b/tests/router.js index 60caf1d..3564c1f 100644 --- a/tests/router.js +++ b/tests/router.js @@ -34,9 +34,16 @@ describe('Router class', function() { expect(uri.parseLocation.lastCall.args[0]).to.equal(uriLocation); }); - it('should call getComponentClass with name', function() { - expect(routerOptions.getComponentClass.lastCall.args[0]) - .to.equal(uriParams.component); + it('should call getComponentClass with params', function() { + var propsSent = routerOptions.getComponentClass.lastCall.args[0]; + expect(propsSent.component).to.equal(uriParams.component); + expect(propsSent.dataUrl).to.equal(uriParams.dataUrl); + }); + + it('should call getComponentClass with default props', function() { + var propsSent = routerOptions.getComponentClass.lastCall.args[0]; + expect(propsSent.defaultProp) + .to.equal(routerOptions.defaultProps.defaultProp); }); it('should call createElement with returned class', function() { @@ -48,11 +55,6 @@ describe('Router class', function() { expect(propsSent.dataUrl).to.equal(uriParams.dataUrl); }); - it('should omit component param in props', function() { - var propsSent = React.createElement.lastCall.args[1]; - expect(propsSent.component).to.be.undefined; - }); - it('should attach router reference to props', function() { expect(React.createElement.lastCall.args[1].router) .to.equal(routerInstance); @@ -77,6 +79,12 @@ describe('Router class', function() { expect(params.component).to.equal(uriParams.component); expect(params.dataUrl).to.equal(uriParams.dataUrl); }); + + it('should call onChange callback with default props', function() { + var params = routerOptions.onChange.lastCall.args[0]; + expect(params.defaultProp) + .to.equal(routerOptions.defaultProps.defaultProp); + }); }; var currentLocationTests = function() { From ddce5d88770f48af9a933bfb991d0c42939ec8fc Mon Sep 17 00:00:00 2001 From: Ovidiu Chereches Date: Thu, 30 Apr 2015 22:43:47 +0300 Subject: [PATCH 3/3] Fix location parsing #4 --- src/uri.js | 9 +++++++-- tests/uri.js | 17 ++++++++++++++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/uri.js b/src/uri.js index 5f673ed..e7f6bbb 100644 --- a/src/uri.js +++ b/src/uri.js @@ -1,7 +1,12 @@ module.exports = { parseLocation: function(location) { - var queryString = location.split('?').pop(), - params = {}; + var params = {}; + + if (location.indexOf('?') === -1) { + return params; + } + + var queryString = location.split('?').pop(); if (!queryString.length) { return params; diff --git a/tests/uri.js b/tests/uri.js index db17e07..3864858 100644 --- a/tests/uri.js +++ b/tests/uri.js @@ -1,6 +1,21 @@ -var uri = require('../src/uri.js'); +var _ = require('lodash'), + uri = require('../src/uri.js'); describe('uri lib', function() { + it('should return empty object when querystring is missing', function() { + var uriLocation = 'mypage.com'; + params = uri.parseLocation(uriLocation); + + expect(_.keys(params).length).to.equal(0); + }); + + it('should return empty object when querystring is empty', function() { + var uriLocation = 'mypage.com?'; + params = uri.parseLocation(uriLocation); + + expect(_.keys(params).length).to.equal(0); + }); + it('should parse stringified and encoded props from location', function() { var uriLocation = 'mypage.com?name=Jack&info=%7B%22age%22%3A25%7D'; params = uri.parseLocation(uriLocation);