Simplify path encoding/decoding

Author: mjackson

modules/locations/HashLocation.js

@@ -1,8 +1,20 @@
+var invariant = require('react/lib/invariant');
+var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 var LocationActions = require('../actions/LocationActions');
-var getWindowPath = require('../utils/getWindowPath');
+var Path = require('../utils/Path');
 
+/**
+ * Returns the current URL path from `window.location.hash`, including query string
+ */
 function getHashPath() {
-  return window.location.hash.substr(1);
+  invariant(
+    canUseDOM,
+    'getHashPath needs a DOM'
+  );
+
+  return Path.decode(
+    window.location.hash.substr(1)
+  );
 }
 
 var _actionType;
@@ -69,12 +81,12 @@ var HashLocation = {
 
   push: function (path) {
     _actionType = LocationActions.PUSH;
-    window.location.hash = path;
+    window.location.hash = Path.encode(path);
   },
 
   replace: function (path) {
     _actionType = LocationActions.REPLACE;
-    window.location.replace(getWindowPath() + '#' + path);
+    window.location.replace(window.location.pathname + '#' + Path.encode(path));
   },
 
   pop: function () {

modules/locations/HistoryLocation.js

@@ -1,5 +1,21 @@
+var invariant = require('react/lib/invariant');
+var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
 var LocationActions = require('../actions/LocationActions');
-var getWindowPath = require('../utils/getWindowPath');
+var Path = require('../utils/Path');
+
+/**
+ * Returns the current URL path from `window.location`, including query string
+ */
+function getWindowPath() {
+  invariant(
+    canUseDOM,
+    'getWindowPath needs a DOM'
+  );
+
+  return Path.decode(
+    window.location.pathname + window.location.search
+  );
+}
 
 var _changeListeners = [];
 
@@ -41,12 +57,12 @@ var HistoryLocation = {
   },
 
   push: function (path) {
-    window.history.pushState({ path: path }, '', path);
+    window.history.pushState({ path: path }, '', Path.encode(path));
     notifyChange(LocationActions.PUSH);
   },
 
   replace: function (path) {
-    window.history.replaceState({ path: path }, '', path);
+    window.history.replaceState({ path: path }, '', Path.encode(path));
     notifyChange(LocationActions.REPLACE);
   },
 

modules/locations/RefreshLocation.js

@@ -1,4 +1,5 @@
-var getWindowPath = require('../utils/getWindowPath');
+var HistoryLocation = require('./HistoryLocation');
+var Path = require('../utils/Path');
 
 /**
  * A Location that uses full page refreshes. This is used as
@@ -8,18 +9,18 @@ var getWindowPath = require('../utils/getWindowPath');
 var RefreshLocation = {
 
   push: function (path) {
-    window.location = path;
+    window.location = Path.encode(path);
   },
 
   replace: function (path) {
-    window.location.replace(path);
+    window.location.replace(Path.encode(path));
   },
 
   pop: function () {
     window.history.back();
   },
 
-  getCurrentPath: getWindowPath,
+  getCurrentPath: HistoryLocation.getCurrentPath,
 
   toString: function () {
     return '<RefreshLocation>';

modules/utils/Path.js

@@ -2,16 +2,12 @@ var invariant = require('react/lib/invariant');
 var merge = require('qs/lib/utils').merge;
 var qs = require('qs');
 
-function encodeURL(url) {
-  return encodeURIComponent(url).replace(/%20/g, '+');
+function decodePathSegment(string) {
+  return decodeURIComponent(string.replace(/\+/g, ' '));
 }
 
-function decodeURL(url) {
-  return decodeURIComponent(url.replace(/\+/g, ' '));
-}
-
-function encodeURLPath(path) {
-  return String(path).split('/').map(encodeURL).join('/');
+function encodePathSegment(string) {
+  return encodeURIComponent(string).replace(/%20/g, '+');
 }
 
 var paramCompileMatcher = /:([a-zA-Z_$][a-zA-Z0-9_$]*)|[*.()\[\]\\+|{}^$]/g;
@@ -47,6 +43,20 @@ function compilePattern(pattern) {
 
 var Path = {
 
+  /**
+   * Safely decodes special characters in the given URL path.
+   */
+  decode: function decodePath(path) {
+    return String(path).split('/').map(decodePathSegment).join('/');
+  },
+
+  /**
+   * Safely encodes special characters in the given URL path.
+   */
+  encode: function encodePath(path) {
+    return String(path).split('/').map(encodePathSegment).join('/');
+  },
+
   /**
    * Returns an array of the names of all parameters in the given pattern.
    */
@@ -61,7 +71,7 @@ var Path = {
    */
   extractParams: function (pattern, path) {
     var object = compilePattern(pattern);
-    var match = decodeURL(path).match(object.matcher);
+    var match = path.match(object.matcher);
 
     if (!match)
       return null;
@@ -94,10 +104,10 @@ var Path = {
           'Missing "' + paramName + '" parameter for path "' + pattern + '"'
         );
       } else {
-        paramName = paramName.slice(0, -1)
-        if (params[paramName] == null) {
-            return '';
-        }
+        paramName = paramName.slice(0, -1);
+
+        if (params[paramName] == null)
+          return '';
       }
 
       var segment;
@@ -112,7 +122,7 @@ var Path = {
         segment = params[paramName];
       }
 
-      return encodeURLPath(segment);
+      return segment;
     }).replace(paramInjectTrailingSlashMatcher, '/');
   },
 

modules/utils/__tests__/Path-test.js

@@ -93,13 +93,13 @@ describe('Path.extractParams', function () {
 
     describe('and the path matches', function () {
       it('returns an empty object', function () {
-        expect(Path.extractParams(pattern, 'one%2C+two')).toEqual({});
+        expect(Path.extractParams(pattern, 'one, two')).toEqual({});
       });
     });
 
     describe('and the path does not match', function () {
       it('returns null', function () {
-        expect(Path.extractParams(pattern, 'one+two')).toBe(null);
+        expect(Path.extractParams(pattern, 'one two')).toBe(null);
       });
     });
   });
@@ -109,7 +109,7 @@ describe('Path.extractParams', function () {
 
     describe('and the path matches', function () {
       it('returns an object with the params', function () {
-        expect(Path.extractParams(pattern, '/comments/abc/edit+now')).toEqual({ id: 'abc' });
+        expect(Path.extractParams(pattern, '/comments/abc/edit now')).toEqual({ id: 'abc' });
       });
     });
 
@@ -198,7 +198,7 @@ describe('Path.injectParams', function () {
       var pattern = 'comments/:id?/edit';
 
       it('returns the correct path when param is supplied', function () {
-        expect(Path.injectParams(pattern, {id:'123'})).toEqual('comments/123/edit');
+        expect(Path.injectParams(pattern, { id:'123' })).toEqual('comments/123/edit');
       });
 
       it('returns the correct path when param is not supplied', function () {
@@ -210,7 +210,7 @@ describe('Path.injectParams', function () {
       var pattern = 'comments/:id?/?edit';
 
       it('returns the correct path when param is supplied', function () {
-        expect(Path.injectParams(pattern, {id:'123'})).toEqual('comments/123/edit');
+        expect(Path.injectParams(pattern, { id:'123' })).toEqual('comments/123/edit');
       });
 
       it('returns the correct path when param is not supplied', function () {
@@ -230,7 +230,7 @@ describe('Path.injectParams', function () {
 
     describe('and some params have special URL encoding', function () {
       it('returns the correct path', function () {
-        expect(Path.injectParams(pattern, { id: 'one, two' })).toEqual('comments/one%2C+two/edit');
+        expect(Path.injectParams(pattern, { id: 'one, two' })).toEqual('comments/one, two/edit');
       });
     });