Define path and query param propagation semantics.

bower.json

@@ -26,6 +26,6 @@
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0"
   },
   "dependencies": {
-    "polymer": "polymer/polymer#^1.2.3"
+    "polymer": "polymer/polymer#^1.3.1"
   }
 }

carbon-location.html

@@ -24,11 +24,7 @@
 `https://elements.polymer-project.org/elements/carbon-route-converter?foo=bar&baz=qux`:
     {
       prefix: '',
-      path: '/elements/carbon-route-converter',
-      queryParams: {
-        foo: 'bar',
-        baz: 'qux'
-      }
+      path: '/elements/carbon-route-converter'
     }
 
 Example Usage:

carbon-route-converter.html

@@ -100,12 +100,12 @@
     observers: [
       '_locationChanged(path, queryParams)',
       '_routeChanged(route.prefix, route.path)',
-      '_routeQueryParamsChanged(route.queryParams)'
+      '_routeQueryParamsChanged(route.__queryParams)'
     ],
 
     created: function() {
-      this.linkPaths('route.queryParams', 'queryParams');
-      this.linkPaths('queryParams', 'route.queryParams');
+      this.linkPaths('route.__queryParams', 'queryParams');
+      this.linkPaths('queryParams', 'route.__queryParams');
     },
 
     /**
@@ -119,7 +119,7 @@
       this.route = {
         prefix: '',
         path: path,
-        queryParams: queryParams
+        __queryParams: queryParams
       };
     },
 

carbon-route.html

@@ -111,12 +111,20 @@
         notify: true
       },
 
+      queryParams: {
+        type: Object,
+        value: function() {
+          return {};
+        },
+        notify: true
+      },
+
       /**
        * The part of `path` NOT consumed by `pattern`.
        */
       tail: {
         type: Object,
-        value: function() {return {path: null, prefix: null, queryParams: null};},
+        value: function() {return {path: null, prefix: null, __queryParams: null};},
         notify: true
       },
 
@@ -138,45 +146,68 @@
       '__tryToMatch(route.path, pattern)',
       '__updatePathOnDataChange(data.*)',
       '__tailPathChanged(tail.path)',
-      '__routeQueryParamsChanged(route.queryParams)',
-      '__tailQueryParamsChanged(tail.queryParams)'
+      '__routeQueryParamsChanged(route.__queryParams)',
+      '__tailQueryParamsChanged(tail.__queryParams)',
+      '__queryParamsChanged(queryParams.*)'
     ],
 
     created: function() {
-      this.linkPaths('route.queryParams', 'tail.queryParams');
-      this.linkPaths('tail.queryParams', 'route.queryParams');
+      this.linkPaths('route.__queryParams', 'tail.__queryParams');
+      this.linkPaths('tail.__queryParams', 'route.__queryParams');
     },
 
     // Deal with the query params object being assigned to wholesale
     __routeQueryParamsChanged: function(queryParams) {
       if (queryParams && this.tail) {
-        this.set('tail.queryParams', queryParams);
+        this.set('tail.__queryParams', queryParams);
+
+        if (!this.active || this._skipMatch) {
+          return;
+        }
+
+        this._skipMatch = true;
+        this.set('queryParams', Object.assign({}, queryParams));
+        this._skipMatch = false;
       }
     },
 
     __tailQueryParamsChanged: function(queryParams) {
       if (queryParams && this.route) {
-        this.set('route.queryParams', queryParams);
+        this.set('route.__queryParams', queryParams);
       }
     },
 
+    __queryParamsChanged: function(changes) {
+      if (!this.active || this._skipMatch) {
+        return;
+      }
+
+      this.set('route.__' + changes.path, changes.value);
+    },
+
+    __resetProperties: function() {
+      this._setActive(false);
+      this._matched = null;
+      //this.tail = { path: null, prefix: null, queryParams: null };
+      //this.data = {};
+    },
+
     __tryToMatch: function(path, pattern) {
-      if (this._skipMatch || !path || !pattern) {
+      if (this._skipMatch || !pattern) {
         return;
       }
+
+      if (!path) {
+        this.__resetProperties();
+        return;
+      }
+
       var remainingPieces = path.split('/');
       var patternPieces = pattern.split('/');
 
       var matched = [];
       var namedMatches = {};
 
-      var clearProperties = function clearProperties() {
-        this._setActive(false);
-        this._matched = null;
-        // this.tail = null;
-        // this.data = {};
-      }.bind(this);
-
       for (var i=0; i < patternPieces.length; i++) {
         var patternPiece = patternPieces[i];
         if (!patternPiece && patternPiece !== '') {
@@ -186,15 +217,15 @@
 
         // We don't match this path.
         if (!pathPiece && pathPiece !== '') {
-          clearProperties();
+          this.__resetProperties();
           return;
         }
         matched.push(pathPiece);
 
         if (patternPiece.charAt(0) == ':') {
           namedMatches[patternPiece.slice(1)] = pathPiece;
         } else if (patternPiece !== pathPiece) {
-          clearProperties();
+          this.__resetProperties();
           return;
         }
       }
@@ -214,7 +245,7 @@
         this.tail = {
           prefix: tailPrefix,
           path: tailPath,
-          queryParams: this.route.queryParams
+          __queryParams: this.route.__queryParams
         };
       }
       this._setActive(true);

test/app-example-1.html

@@ -18,8 +18,7 @@
     </carbon-route>
     <carbon-route route='{{route}}' pattern='/user' tail='{{userRoute}}'>
     </carbon-route>
-
-    <carbon-route route='{{userRoute}}' pattern='/:page' data='{{userData}}'>
+    <carbon-route route='{{userRoute}}' pattern='/:page' data='{{userData}}' query-params="{{userQueryParams}}">
     </carbon-route>
   </template>
   <script>

test/carbon-location.html

@@ -84,13 +84,13 @@
 
         setup(function() {
           originalPath = carbonLocation.route.path;
-          originalQueryParams = assign({}, carbonLocation.route.queryParams);
+          originalQueryParams = assign({}, carbonLocation.route.__queryParams);
         });
 
         teardown(function() {
           carbonLocation.set('route.prefix', '');
           carbonLocation.set('route.path', originalPath);
-          carbonLocation.set('route.queryParams', originalQueryParams);
+          carbonLocation.set('route.__queryParams', originalQueryParams);
         });
 
         test('it reflects path to location.pathname', function() {
@@ -99,12 +99,12 @@
         });
 
         test('it reflects queryParams values to location.search', function() {
-          carbonLocation.set('route.queryParams.foo', 1);
+          carbonLocation.set('route.__queryParams.foo', 1);
           expect(window.location.search).to.match(/foo=1/);
         });
 
         test('it reflects completely replaced queryParams', function() {
-          carbonLocation.set('route.queryParams', { bar: 1 });
+          carbonLocation.set('route.__queryParams', { bar: 1 });
           expect(window.location.search).to.be.equal('?bar=1');
         });
 
@@ -134,9 +134,9 @@
           expect(carbonLocation.route.path).to.be.equal('/fiz/buz');
         });
 
-        test('it reflects location.search to route.queryParams', function() {
+        test('it reflects location.search to route.__queryParams', function() {
           setLocation('?fiz=buz');
-          expect(carbonLocation.route.queryParams).to.be.eql({
+          expect(carbonLocation.route.__queryParams).to.be.eql({
             fiz: 'buz'
           });
         });

test/carbon-route-converter.html

@@ -40,14 +40,14 @@
         expect(converter.route).to.be.deep.equal({
           prefix: '',
           path: '/a/b/c',
-          queryParams: queryParams
+          __queryParams: queryParams
         });
 
         converter.set('route.path', '/d/e/f');
         expect(converter.path).to.be.equal('/d/e/f');
 
         queryParams = {y: '11'};
-        converter.set('route.queryParams', queryParams);
+        converter.set('route.__queryParams', queryParams);
         expect(converter.queryParams).to.be.deep.equal(queryParams);
 
         queryParams['z'] = '12';