Allow overriding url-pattern's compiler. Fixes #140

Author: STRML

README.md

@@ -23,6 +23,7 @@ in a declarative manner, directly as a part of your component hierarchy.
 * [Capturing Clicks on Anchor Elements][a-elements]
 * [A custom Link Component][rec-custom-link]
 * [A custom Router Component][rec-custom-router]
+* [Overridding URL-Pattern's Compiler][override-url-pattern]
 
 ## Project Overview
 
@@ -82,6 +83,7 @@ See [docs][] for the usage.
 [a-elements]: http://strml.viewdocs.io/react-router-component/a-elements
 [rec-custom-link]: http://strml.viewdocs.io/react-router-component/recipes/custom-link
 [rec-custom-router]: http://strml.viewdocs.io/react-router-component/recipes/custom-router
+[override-url-pattern]: http://strml.viewdocs.io/react-router-component/override-url-pattern
 [async]: http://strml.viewdocs.io/react-router-component/async
 [implementation]: http://strml.viewdocs.io/react-router-component/implementation
 

docs/override-url-pattern.md

@@ -0,0 +1,26 @@
+# Overriding the `url-pattern` compiler
+
+You may have more advanced needs from your url patterns.
+
+The author of `url-pattern`, which does the underlying conversion in RRC from route declaration to RegExp,
+[has written documentation on overriding the compiler](https://github.com/snd/url-pattern#modifying-the-compiler).
+
+For example:
+
+    var Router = require('react-router-component');
+
+    // Create a compiler that only matches alphabetical characters in urls.
+    //
+    // This function is passed the props object of the route it is generating a RegExp for.
+    // While not recommended, you could use this to generate a different compiler per route.
+    Router.createURLPatternCompiler = function(routeProps) {
+      var compiler = new URLPattern.Compiler();
+      compiler.segmentValueCharset = 'a-zA-Z';
+      return compiler;
+    }
+
+Overriding the compiler allows you to write very powerful route definitions.
+
+Note that this override is global. At this time, there is no way to define a compiler per Router. If you have
+more advanced needs, we recommend using `url-pattern` directly to generate regular expressions to use as route paths,
+or using regular expressions directly.

index.js

@@ -14,6 +14,8 @@ var environment               = require('./lib/environment');
 
 var CaptureClicks             = require('./lib/CaptureClicks');
 
+var URLPattern                = require('url-pattern');
+
 module.exports = {
   Locations: Router.Locations,
   Pages: Router.Pages,
@@ -31,5 +33,10 @@ module.exports = {
   AsyncRouteRenderingMixin: AsyncRouteRenderingMixin,
 
   NavigatableMixin: NavigatableMixin,
-  CaptureClicks: CaptureClicks
+  CaptureClicks: CaptureClicks,
+
+  // The fn used to create a compiler for "/user/:id"-style routes is exposed here so it can be overridden.
+  createURLPatternCompiler: function() {
+    return new URLPattern.Compiler();
+  }
 };

lib/matchRoutes.js

@@ -29,12 +29,11 @@ function matchRoutes(routes, path) {
     if (process.env.NODE_ENV !== "production") {
       invariant(
         current.props.handler !== undefined && current.props.path !== undefined,
-        "Router should contain either Route or NotFound components " +
-        "as routes")
+        "Router should contain either Route or NotFound components as routes");
     }
 
     if (current.props.path) {
-      current.props.pattern = current.props.pattern || new URLPattern(current.props.path, createCompiler());
+      current.props.pattern = current.props.pattern || new URLPattern(current.props.path, createCompiler(current.props));
       if (!page) {
         match = current.props.pattern.match(path);
         if (match) {
@@ -114,6 +113,6 @@ Match.prototype.getHandler = function() {
   // Passed a component descriptor - create an element. Assign it the ref
   // from the <Location> tag.
   return React.createElement(handler, props);
-}
+};
 
 module.exports = matchRoutes;

tests/browser-jsx.js

@@ -59,9 +59,9 @@ describe('JSX + Routing with async components', function() {
       var Locations = Router.Locations;
       var Location = Router.Location;
       return (
-        React.createElement(Locations, {ref: "router", className: "App"},
-          React.createElement(Location, {path: "/__zuul", handler: Main, ref: "main"}),
-          React.createElement(Location, {path: "/__zuul/page1", handler: Page1, ref: "page1"}),
+        React.createElement(Locations, {ref: "router", className: "App"}, 
+          React.createElement(Location, {path: "/__zuul", handler: Main, ref: "main"}), 
+          React.createElement(Location, {path: "/__zuul/page1", handler: Page1, ref: "page1"}), 
           React.createElement(Location, {path: "/__zuul/:text", handler: Page2, ref: "page2"})
         )
       );

tests/matchRoutes.js

@@ -5,6 +5,7 @@ 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() {
 
@@ -14,10 +15,19 @@ 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']}),
+              matchKeys: ['name', 'num', 'text']}),
     NotFound({handler: React.createElement('div', {name: 'notfound'})})
   ];
 
+  afterEach(function() {
+    // Remove any compiled regex patterns from all routes
+    routes.forEach(function(r) {
+      r.props.pattern = null;
+    });
+    // In case we overrode this, reset it.
+    Router.createURLPatternCompiler = function () { return new URLPattern.Compiler(); };
+  });
+
   it('matches ""', function() {
     var match = matchRoutes(routes, '');
     assert(match.route);
@@ -48,6 +58,62 @@ describe('matchRoutes', function() {
     assert.strictEqual(match.unmatchedPath, null);
   });
 
+  it('fails to match /cat/:id with periods in param', function() {
+    var match = matchRoutes(routes, '/cat/hello.with.periods');
+    assert(match.route);
+    assert.strictEqual(match.route.props.handler.props.name, 'notfound');
+    assert.deepEqual(match.match, null);
+    assert.strictEqual(match.path, '/cat/hello.with.periods');
+    assert.strictEqual(match.matchedPath, '/cat/hello.with.periods');
+    assert.strictEqual(match.unmatchedPath, null);
+  });
+
+  it('matches /cat/:id with a custom url-pattern compiler and periods in param', function() {
+    Router.createURLPatternCompiler = function() {
+      var compiler = new URLPattern.Compiler();
+      compiler.segmentValueCharset = 'a-zA-Z0-9_\\- %\\.';
+      return compiler;
+    };
+    var match = matchRoutes(routes, '/cat/hello.with.periods');
+    assert(match.route);
+    assert.strictEqual(match.route.props.handler.props.name, 'cat');
+    assert.deepEqual(match.match, {id: 'hello.with.periods'});
+    assert.strictEqual(match.path, '/cat/hello.with.periods');
+    assert.strictEqual(match.matchedPath, '/cat/hello.with.periods');
+    assert.strictEqual(match.unmatchedPath, null);
+  });
+
+  it('matches a very custom url-pattern compiler config', function() {
+    var route = Location({path: '[http[s]!://][$sub_domain.]$domain.$toplevel-domain[/?]',
+                          handler: React.createElement('div', {name: 'parseDomain'})});
+
+    // Lifted from url-pattern docs
+    Router.createURLPatternCompiler = function(routeProps) {
+      // Somebody might use this, make sure it works.
+      assert.strictEqual(routeProps.path, route.props.path);
+
+      // Create a very custom compiler.
+      var compiler = new URLPattern.Compiler();
+      compiler.escapeChar = '!';
+      compiler.segmentNameStartChar = '$';
+      compiler.segmentNameCharset = 'a-zA-Z0-9_-';
+      compiler.segmentValueCharset = 'a-zA-Z0-9';
+      compiler.optionalSegmentStartChar = '[';
+      compiler.optionalSegmentEndChar = ']';
+      compiler.wildcardChar = '?';
+      return compiler;
+    };
+
+    var match = matchRoutes([route], 'https://www.github.com/strml/react-router-component');
+    assert(match.route);
+    assert.strictEqual(match.route.props.handler.props.name, 'parseDomain');
+    assert.deepEqual(match.match, {sub_domain: 'www', domain: 'github', 'toplevel-domain': 'com',
+                                   _: ['strml/react-router-component']});
+    assert.strictEqual(match.path, 'https://www.github.com/strml/react-router-component');
+    assert.strictEqual(match.matchedPath, 'https://www.github.com/');
+    assert.strictEqual(match.unmatchedPath, 'strml/react-router-component');
+  });
+
   it('matches /mod/wow/here', function() {
     var match = matchRoutes(routes, '/mod/wow/here');
     assert(match.route);