urlPatternOptions bugfixes; merge from parent contextual routers

Author: STRML

docs/override-url-pattern.md

@@ -9,7 +9,7 @@ Compile an object matching these fields and pass it on your `<Location>` or `<Lo
 defaults.
 
 It's possible to set more specific rules on individual `<Location>` components. These rules will be merged
-with parent rules.
+with parent rules. Rules are even merged from parent contextual routers!
 
 For example:
 

lib/RouterMixin.js

@@ -79,7 +79,7 @@ var RouterMixin = {
       path = '/' + path;
     }
 
-    var match = matchRoutes(this.getRoutes(props), path);
+    var match = matchRoutes(this.getRoutes(props), path, this.getURLPatternOptions());
 
     return {
       match: match,
@@ -124,6 +124,16 @@ var RouterMixin = {
     return this.state.match;
   },
 
+  getURLPatternOptions: function() {
+    var parent = this.getParentRouter();
+    var parentOptions = parent && parent.getURLPatternOptions();
+    // Check existence so we don't return an empty object if there are no options.
+    if (parentOptions) {
+      return assign({}, this.props.urlPatternOptions, parentOptions);
+    }
+    return this.props.urlPatternOptions;
+  },
+
   /**
    * Make href scoped for the current router.
    */
@@ -155,7 +165,7 @@ var RouterMixin = {
    * @param {Callback} cb
    */
   setPath: function(path, navigation, cb) {
-    var match = matchRoutes(this.getRoutes(this.props), path, this.props);
+    var match = matchRoutes(this.getRoutes(this.props), path, this.getURLPatternOptions());
 
     var state = {
       match: match,

lib/matchRoutes.js

@@ -12,16 +12,12 @@ var patternCache = {};
 /**
  * Match routes against a path
  *
- * @param {Array.<Route>} routes
- * @param {String} path
- * @param {[Object]} properties of parent router
+ * @param {Array.<Route>}  routes                  Available Routes.
+ * @param {String}         path                    Path to match.
+ * @param {[Object|Array]} routerURLPatternOptions URLPattern options from parent router (and its parent and so on).
  */
-function matchRoutes(routes, path, routerProps) {
-  var match, page, notFound, queryObj;
-
-  if (!routerProps) { // optional
-    routerProps = {};
-  }
+function matchRoutes(routes, path, routerURLPatternOptions) {
+  var match, page, notFound, queryObj, urlPatternOptions;
 
   if (!Array.isArray(routes)) {
     routes = [routes];
@@ -47,12 +43,12 @@ function matchRoutes(routes, path, routerProps) {
       // Allow passing compiler options to url-pattern, see
       // https://github.com/snd/url-pattern#customize-the-pattern-syntax
       // Note that this blows up if you provide an empty object on a regex path
-      var urlPatternOptions;
+      urlPatternOptions = null;
       if (Array.isArray(current.props.urlPatternOptions) || current.props.path instanceof RegExp) {
         // If an array is passed, it takes precedence - assumed these are regexp keys
         urlPatternOptions = current.props.urlPatternOptions;
-      } else if (routerProps.urlPatternOptions || current.props.urlPatternOptions) {
-        urlPatternOptions = assign({}, routerProps.urlPatternOptions, current.props.urlPatternOptions);
+      } else if (routerURLPatternOptions || current.props.urlPatternOptions) {
+        urlPatternOptions = assign({}, routerURLPatternOptions, current.props.urlPatternOptions);
       }
 
       // matchKeys is deprecated
@@ -122,6 +118,9 @@ function Match(path, route, match, query) {
 }
 
 Match.prototype.getProps = function() {
+  if (!this.route) {
+    throw new Error("React-router-component: No route matched! Did you define a NotFound route?");
+  }
   var props = assign({}, this.route.props, this.match);
   // Querystring is assigned as _query.
   props._query = this.query || {};

tests/matchRoutes.js

@@ -5,7 +5,6 @@ var React       = require('react');
 var Router      = require('../');
 var Location    = React.createFactory(Router.Location);
 var NotFound    = React.createFactory(Router.NotFound);
-var URLPattern  = require('url-pattern');
 
 describe('matchRoutes', function() {
 
@@ -15,15 +14,10 @@ describe('matchRoutes', function() {
     Location({path: '/mod/*', handler: React.createElement('div', {name: 'mod'})}),
     Location({path: /\/regex\/([a-zA-Z]*)$/, handler: React.createElement('div', {name: 'regex'})}),
     Location({path: /\/(.*?)\/(\d)\/([a-zA-Z]*)$/, handler: React.createElement('div', {name: 'regexMatch'}),
-              matchKeys: ['name', 'num', 'text']}),
+              urlPatternOptions: ['name', 'num', 'text']}),
     NotFound({handler: React.createElement('div', {name: 'notfound'})})
   ];
 
-  afterEach(function() {
-    // In case we overrode this, reset it.
-    Router.createURLPatternCompiler = function () { return new URLPattern.Compiler(); };
-  });
-
   it('matches ""', function() {
     var match = matchRoutes(routes, '');
     assert(match.route);
@@ -65,9 +59,9 @@ describe('matchRoutes', function() {
   });
 
   it('matches /cat/:id with a custom url-pattern options and periods in param', function() {
-    var match = matchRoutes(routes, '/cat/hello.with.periods', {urlPatternOptions: {
+    var match = matchRoutes(routes, '/cat/hello.with.periods', {
       segmentValueCharset: 'a-zA-Z0-9_\\- %\\.'
-    }});
+    });
     assert(match.route);
     assert.strictEqual(match.route.props.handler.props.name, 'cat');
     assert.deepEqual(match.match, {id: 'hello.with.periods'});
@@ -91,9 +85,7 @@ describe('matchRoutes', function() {
       wildcardChar: '?'
     };
 
-    var match = matchRoutes([route], 'https://www.github.com/strml/react-router-component', {
-      urlPatternOptions: urlPatternOptions
-    });
+    var match = matchRoutes([route], 'https://www.github.com/strml/react-router-component', urlPatternOptions);
     assert(match.route);
     assert.strictEqual(match.route.props.handler.props.name, 'parseDomain');
     assert.deepEqual(match.match, {sub_domain: 'www', domain: 'github', 'toplevel-domain': 'com',

tests/server.js

@@ -38,7 +38,7 @@ describe('react-router-component (on server)', function() {
           }),
           React.createElement(Location, {
             path: /\/z\/(.*)\/(.*)/,
-            matchKeys: ['match1', 'match2'],
+            urlPatternOptions: ['match1', 'match2'],
             handler: React.createClass({
               render: function() {
                 return React.createElement('div', null, this.props.match1 + this.props.match2);
@@ -71,7 +71,7 @@ describe('react-router-component (on server)', function() {
       assert(markup.match(/ohhai/));
     });
 
-    it('renders with regex and matchKeys', function() {
+    it('renders with regex and urlPatternOptions(matchKeys)', function() {
       var markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/z/one/two'}));
       assert(markup.match(/class="App"/));
       assert(markup.match(/onetwo/));
@@ -318,4 +318,106 @@ describe('react-router-component (on server)', function() {
     });
   });
 
+  describe('urlPatternOptions hierarchy', function() {
+    var Inner = React.createClass({
+      displayName: 'Inner',
+
+      render: function() {
+        return React.createElement('div', {}, this.props.foo + '|' + this.props.bar + this.props._);
+      }
+    });
+
+    var App = React.createClass({
+
+      getRoutes: function() {
+        return [
+          // Direct passthrough from Locations
+          React.createElement(Location, {
+            path: '/1/$foo/$bar',
+            handler: Inner
+          }),
+          // Merge one property
+          React.createElement(Location, {
+            path: '/2/$foo/$bar',
+            handler: Inner,
+            urlPatternOptions: {
+              segmentValueCharset: 'A-Z'
+            }
+          }),
+          // Override a property
+          React.createElement(Location, {
+            path: '/3/!foo/!bar',
+            handler: Inner,
+            urlPatternOptions: {
+              segmentNameStartChar: '!'
+            }
+          }),
+          // Inherit from parent contextual
+          React.createElement(Location, {
+            path: '/4/[foo]?',
+            handler: Inner,
+            urlPatternOptions: {
+              optionalSegmentStartChar: '[',
+              optionalSegmentEndChar: ']'
+            }
+          }),
+          // Parent props
+          React.createElement(NotFound, {
+            handler: React.createElement('div', null, 'not found')
+          })
+        ]
+      },
+
+      render: function() {
+        return React.createElement('div', {className: 'App'},
+          React.createElement(Locations, {
+            path: this.props.path,
+            urlPatternOptions: {
+              wildcardChar: '?'
+            }
+          },
+            React.createElement(Location, {
+              path: '/start?',
+              handler:  React.createElement('div', null,
+                React.createElement(Locations, {
+                  contextual: true,
+                  children: this.getRoutes(),
+                  urlPatternOptions: {
+                    segmentNameStartChar: '$'
+                  }
+                })
+              )
+            }),
+            React.createElement(NotFound, {
+              handler: React.createElement('div', null, 'not found')
+            })
+          )
+        );
+      }
+    });
+
+
+    it('passes urlPatternOptions from parent <Locations>', function() {
+      var markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/start/1/biff/baz'}));
+      assert(markup.match(/biff\|baz/));
+    });
+
+    it('merges urlPatternOptions from parent <Locations> and a <Location>', function() {
+      var markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/start/2/BIFF/BA'}));
+      assert(markup.match(/BIFF\|BA/));
+      markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/start/2/biff/ba'}));
+      assert(markup.match(/not found/));
+    });
+
+    it('gives urlPatternOptions on route precedence over router', function() {
+      var markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/start/3/biff/boff'}));
+      assert(markup.match(/biff\|boff/));
+    });
+
+    it('inherits from parent contextual router', function() {
+      var markup = ReactDOMServer.renderToString(React.createElement(App, {path: '/start/4/foobar'}));
+      assert(markup.match(/undefined\|undefinedbar/));
+    });
+  });
+
 });