Remove dependency on route-recognizer

- Use regular expressions instead for more flexibility, better
  performance, and a smaller package

Author: jdlehman

dist/switcheroo.min.js

@@ -11,12 +11,4 @@ A "Switch" component is always used inside of the context of a `Switcher` compon
 
 ### path
 
-The `path` prop is a string that if matches the path, the corresponding handler component will be rendered. If you define multiple `Switch`es with the same path, the last one will be used. switcheroo makes use of [`route-recognizer`](https://github.com/tildeio/route-recognizer) to match paths with the URL, meaning that dynamic segments and star segments will work.
-
-```js
-// dynamic segments
-"/post/:id" matches "/post/1", "/post/100", and "/post/whatever", but not "/post"
-
-// star segements
-"/post/*everything" matches "/post/one", "post/one/two", and "/post/one/two/three", but not "/post"
-```
+The `path` prop is a string representing a regular expression. If the regular expression matches the path, the corresponding handler component will be rendered. If you define multiple `Switch`es with the same path, the first one will be used.

docs/components/Switch.md

@@ -45,7 +45,14 @@ module.exports = function(config) {
       },
       module: {
         loaders: [
-          { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
+          {
+            test: /\.js$/,
+            loader: 'babel',
+            exclude: /node_modules/,
+            query: {
+              auxiliaryCommentBefore: 'istanbul ignore next'
+            }
+          }
         ],
         postLoaders: [
           {

karma.conf.js

@@ -52,8 +52,5 @@
   },
   "peerDependencies": {
     "react": ">=0.12.0 <0.14.0"
-  },
-  "dependencies": {
-    "route-recognizer": "^0.1.9"
   }
 }

package.json

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import Recognizer from 'route-recognizer';
+import {ensureTrailingSlash} from 'helpers';
 import window from 'window';
 
 export default class Switcher extends Component {
@@ -18,7 +18,7 @@ export default class Switcher extends Component {
     onChange: React.PropTypes.func,
     wrapper: React.PropTypes.any,
     location: React.PropTypes.string,
-    baseURL: React.PropTypes.string
+    basePath: React.PropTypes.string
   };
 
   static defaultProps = {
@@ -32,7 +32,6 @@ export default class Switcher extends Component {
   constructor(props) {
     super(props);
     this.defaultSwitch = props.defaultHandler ? React.createElement(props.defaultHandler, props.defaultHandlerProps) : null;
-    this.initializeRecognizer(props);
 
     var currentPath = this.getLocation();
     var switchElement = this.getSwitch(currentPath);
@@ -54,8 +53,6 @@ export default class Switcher extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.initializeRecognizer(nextProps);
-
     var currentPath = this.getLocation();
     var switchElement = this.getSwitch(currentPath);
 
@@ -86,22 +83,15 @@ export default class Switcher extends Component {
   }
 
   getSwitch = (path) => {
-    var handlers = this.recognizer.recognize(path);
-    return (handlers && handlers[0] && handlers[0].handler) || null;
+    var children = [].concat(this.props.children);
+    var consistentPath = ensureTrailingSlash(path);
+    return children.filter(child => {
+      var fullChildPath = ensureTrailingSlash(this.props.basePath + child.props.path);
+      var regex = new RegExp(`^${fullChildPath}$`);
+      return consistentPath.match(regex);
+    })[0] || null;
   }
 
-  initializeRecognizer = (props) => {
-    this.recognizer = new Recognizer();
-    var children = [].concat(props.children);
-    children.forEach((child) => {
-      this.recognizer.add([{
-        path: `${props.basePath}${child.props.path}`,
-        handler: child.props.handler || child
-      }]);
-    });
-  }
-
-
   handleRouteChange = (ev) => {
     var currentPath = this.getLocation();
     var switchElement = this.getSwitch(currentPath);

src/components/Switcher.js

@@ -0,0 +1,3 @@
+export function ensureTrailingSlash(path) {
+  return path.slice(-1) !== '/' ? `${path}/` : path;
+}

src/helpers.js

@@ -93,8 +93,8 @@ describe('Switcher', function() {
           <Switcher>
             <div path="/">Home</div>
             <div path="/another">Another</div>
-            <div path="/wildCardPath/*anything">Wild</div>
-            <div path="/path/:dynamic/more">Dynamic</div>
+            <div path="/wildCardPath/.*">Wild</div>
+            <div path="/path/.+/more">Dynamic</div>
             <div path="/duplicate">Dup 1</div>
             <div path="/duplicate">Dup 2</div>
           </Switcher>,
@@ -121,9 +121,9 @@ describe('Switcher', function() {
         assert.isNull(swtch);
       });
 
-      it('gets last match if duplicate paths', function() {
+      it('gets first match if duplicate paths', function() {
         var swtch = this.switcher.getSwitch('/duplicate');
-        assert.equal(swtch.props.children, 'Dup 2');
+        assert.equal(swtch.props.children, 'Dup 1');
       });
 
       it('handles paths with wild cards', function() {