Use URLSearchParams for paramsObject

bower.json

@@ -23,7 +23,8 @@
   "homepage": "https://github.com/PolymerElements/iron-location",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#1.9 - 2"
+    "polymer": "Polymer/polymer#1.9 - 2",
+    "url-search-params": "^0.9.0"
   },
   "devDependencies": {
     "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",

iron-query-params.html

@@ -10,7 +10,12 @@
 @demo demo/iron-query-params.html
 -->
 <link rel="import" href="../polymer/polymer.html">
-
+<!-- Polyfill URLSearchParams 
+  polyfill provided by:
+    Andrea Giammarchi (https://github.com/WebReflection/url-search-params)
+  /*! (C) Andrea Giammarchi - Mit Style License */
+-->
+<script src="../url-search-params/build/url-search-params.js"></script>
 <script>
   'use strict';
 
@@ -28,7 +33,7 @@
         type: Object,
         notify: true,
         value: function() {
-          return {};
+          return new URLSearchParams();
         }
       },
 
@@ -61,39 +66,15 @@
     },
 
     _encodeParams: function(params) {
-      var encodedParams = [];
-
-      for (var key in params) {
-        var value = params[key];
-
-        if (value === '') {
-          encodedParams.push(encodeURIComponent(key));
-
-        } else if (value) {
-          encodedParams.push(
-              encodeURIComponent(key) +
-              '=' +
-              encodeURIComponent(value.toString())
-          );
-        }
-      }
-      return encodedParams.join('&');
-    },
-
-    _decodeParams: function(paramString) {
-      var params = {};
+      let paramString = params.toString();
       // Work around a bug in decodeURIComponent where + is not
       // converted to spaces:
       paramString = (paramString || '').replace(/\+/g, '%20');
-      var paramList = paramString.split('&');
-      for (var i = 0; i < paramList.length; i++) {
-        var param = paramList[i].split('=');
-        if (param[0]) {
-          params[decodeURIComponent(param[0])] =
-              decodeURIComponent(param[1] || '');
-        }
-      }
-      return params;
+      return paramString;
+    },
+
+    _decodeParams: function(paramString) {
+      return new URLSearchParams(paramString);
     }
   });
 </script>

test/integration.html

@@ -92,22 +92,22 @@
           expect(ironLocationQuery).to.contain(ironLocation.query);
           expect(ironLocationQuery).to.contain(ironQueryParams.paramsString);
           if (plainTextQuery) {
-            expect('').to.be.equal(ironQueryParams.paramsObject[plainTextQuery])
+            expect('').to.be.equal(ironQueryParams.paramsObject.get(plainTextQuery))
           } else {
-            expect(ironQueryParams.paramsObject[plainTextQuery]).to.be.undefined;
+            expect(ironQueryParams.paramsObject.get(plainTextQuery)).to.be.null;
           }
         }
       });
 
       test('propagations from iqp to location', function() {
         var queryEncodingExamples = {
-          'foo': '?foo',
-          '': '',
-          'foo bar': '?foo%20bar',
-          'foo#bar': '?foo%23bar',
-          'foo?bar': '?foo?bar',
-          '/foo\'bar\'baz': ['?/foo%27bar%27baz', '?/foo\'bar\'baz'],
-          'foo/bar/baz': '?foo/bar/baz'
+          'foo': '?foo=',
+          '': '?=',
+          'foo bar': '?foo%20bar=',
+          'foo#bar': '?foo%23bar=',
+          'foo?bar': '?foo?bar=',
+          '/foo\'bar\'baz': ['?/foo%27bar%27baz=', '?/foo\'bar\'baz='],
+          'foo/bar/baz': '?foo/bar/baz='
         };
         for (var plainTextQuery in queryEncodingExamples) {
           var encodedQueries = queryEncodingExamples[plainTextQuery];
@@ -121,10 +121,11 @@
             });
           }
 
-          var newParamsObject = {};
-          newParamsObject[plainTextQuery] = '';
+          var newParamsObject = new URLSearchParams();
+          newParamsObject.append(plainTextQuery, '');
 
           ironQueryParams.paramsObject = newParamsObject;
+          // might need to notify
           expect(encodedQueries).to.contain(window.location.search);
           expect(ironLocationQuery).to.contain(ironLocation.query);
         }

test/iron-query-params.html

@@ -18,6 +18,7 @@
   <link rel="import" href="../../polymer/polymer.html">
   <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
   <link rel="import" href="../iron-query-params.html">
+  <link rel="import" href="./urlsearchparams.html">
 </head>
 <body>
 
@@ -33,24 +34,57 @@
     suite('<iron-query-params>', function () {
 
       var paramsElem;
+      var expectedSearchParams;
       setup(function() {
         paramsElem = fixture('BasicQueryParams');
       });
 
       test('basic functionality with ?key=value params', function() {
         // Check initialization
         expect(paramsElem.paramsString).to.be.eq('');
-        expect(paramsElem.paramsObject).to.deep.eq({});
+        expectedSearchParams = new URLSearchParams();
+        expect(URLSearchParamsUtil.equal(
+          paramsElem.paramsObject,
+          expectedSearchParams
+        )).to.be.true;
 
         // Check the mapping from paramsString to paramsObject.
         paramsElem.paramsString = 'greeting=hello&target=world';
-        expect(paramsElem.paramsObject).to.deep.equal(
-            {greeting: 'hello', target: 'world'});
+        expectedSearchParams = new URLSearchParams([
+          ['greeting', 'hello'], 
+          ['target', 'world']
+        ]);
+        expect(URLSearchParamsUtil.equal(
+          paramsElem.paramsObject,
+          expectedSearchParams
+        )).to.be.true;
+
+        // Check the mapping from paramsString to paramsObject 
+        // with multiple values for the same key
+        // NOTE: order matters in the creation for URLSearchParams
+        //       the spec has a sequence (which is ordered) as one of
+        //       the valid constructor inits. This could be ameliorated
+        //       with the .sort method, but only Firefox implements it
+        //       as of July 2017. 
+        paramsElem.paramsString = 
+          'greeting=hello&target=world&greeting=hola&target=mundo';
+        expectedSearchParams = new URLSearchParams([
+          ['greeting', 'hello'],
+          ['target', 'world'],
+          ['greeting', 'hola'],
+          ['target', 'mundo']
+        ]);
+        expect(URLSearchParamsUtil.equal(
+          paramsElem.paramsObject,
+          expectedSearchParams
+        )).to.be.true;
 
         // Check the mapping from paramsObject back to paramsString.
-        paramsElem.set('paramsObject.another', 'key');
+        let newParamsObject = new URLSearchParams(paramsElem.paramsObject);
+        newParamsObject.append('another', 'key');
+        paramsElem.set('paramsObject', newParamsObject);
         expect(paramsElem.paramsString).to.be.equal(
-            'greeting=hello&target=world&another=key');
+          'greeting=hello&target=world&greeting=hola&target=mundo&another=key');
       });
       test('encoding of params', function() {
         var mappings = [
@@ -59,7 +93,7 @@
             object: {'a': 'b'}
           },
           {
-            string: 'debug&ok',
+            string: 'debug=&ok=',
             object: {'debug': '', 'ok': ''}
           },
           {
@@ -74,27 +108,39 @@
 
         mappings.forEach(function(mapping) {
           // Clear
-          paramsElem.paramsObject = {};
+          paramsElem.paramsObject = new URLSearchParams();
           expect(paramsElem.paramsString).to.be.equal('');
 
           // Test going from string to object
           paramsElem.paramsString = mapping.string;
-          expect(paramsElem.paramsObject).to.deep.equal(mapping.object);
+          console.log(paramsElem.paramsObject.toString(), mapping.string);
+          expect(URLSearchParamsUtil.equal(
+            paramsElem.paramsObject,
+            new URLSearchParams(
+              URLSearchParamsUtil.objectToArray(mapping.object)
+            )
+          )).to.be.true;
 
           // Clear again.
-          paramsElem.paramsObject = {};
+          paramsElem.paramsObject = new URLSearchParams();
           expect(paramsElem.paramsString).to.be.equal('');
 
           // Test going from object to string
-          paramsElem.paramsObject = mapping.object;
+          paramsElem.paramsObject = new URLSearchParams(
+            URLSearchParamsUtil.objectToArray(mapping.object)
+          );
           expect(paramsElem.paramsString).to.be.equal(mapping.string);
         });
       });
       test('query strings with alternative encodings', function() {
         // Check the mapping for querystrings with + instead of %20.
         paramsElem.paramsString = 'key=value+with+spaces';
-        expect(paramsElem.paramsObject).to.deep.equal(
-            {key: 'value with spaces'});
+        expect(URLSearchParamsUtil.equal(
+          paramsElem.paramsObject,
+          new URLSearchParams(
+            URLSearchParamsUtil.objectToArray({key: 'value with spaces'})
+          )
+        )).to.be.true;
       });
     });
 

test/urlsearchparams.html

@@ -0,0 +1,27 @@
+<script>
+  var URLSearchParamsUtil = (function() {
+    return {
+      equal: function(url1, url2) {
+        var url1Array = Array.from(url1.entries()),
+            url2Array = Array.from(url2.entries());
+        if (url1Array.length !== url2Array.length) {
+          return false;
+        }
+        for (var i = 0; i < url1Array.length; ++i) {
+          if (url1Array[i][0] !== url2Array[i][0] ||
+              url1Array[i][1] !== url2Array[i][1]) {
+            return false;
+          }
+        }
+        return true;
+      },
+      objectToArray: function(obj) {
+        var arr = [];
+        for (var prop in obj) {
+          arr.push([prop, obj[prop]]);
+        }
+        return arr;
+      }
+    }
+  })();
+</script>