Router now supports variables in routes and route template.

ignite-html-router.js

@@ -3,9 +3,9 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
 import { IgniteCallback} from "../ignite-html/ignite-html.js";
 
 /**
- * Creates a route listener that runs when a route is switched.
+ * Creates a route listener that runs when a route is switched. The listener will run on construct the first time and update the state.
  * @param {String,String[]} routes A single or multiple set of routes that will invoke the callback if met.
- * @param {Function} callback A callback function to invoke if the route is met, it will be passed the pushstate event.
+ * @param {Function} callback A callback function that is called when the route is met. It will be passed any route data.
  * @param {Boolean} strict If true all routes must match before running the callback.
  * @returns {IgniteTemplate} This ignite template.
  */
@@ -15,28 +15,40 @@ IgniteTemplate.prototype.route = function(routes, callback, strict = false) {
         routes = [routes];
     }
 
-    //Create a managed callback
-    var managed = new IgniteCallback(event => {
+    //Create an update method that will be used to check and see if the route is met.
+    var update = (event) => {
+        console.log("Updating route:", routes);
+
         var routeMatches = false;
 
+        //Create an object to hold any data.
+        var data = {};
+
         //Based on whether we are strict matching or not check if we have a match.
         if (!strict) {
             for (var i = 0; i < routes.length && !routeMatches; i++) {
-                routeMatches = Router.matches(routes[i]);
+                routeMatches = Router.matches(routes[i], data);
             }
         } else {
             routeMatches = true;
             for (var i = 0; i < routes.length && routeMatches; i++) {
-                routeMatches = Router.matches(routes[i]);
+                routeMatches = Router.matches(routes[i], data);
             }
         }
 
         //Invoke the callback if the route matched.
         if (routeMatches) {
-            callback(event);
+            console.log("Route matches");
+            if (event && event.data) {
+                callback(event.data);
+            } else {
+                callback(data);
+            }
         }
+    };
 
-    }, () => {
+    //Create a managed callback
+    var managed = new IgniteCallback(update, () => {
         window.removeEventListener("pushstate", managed.callback);
     });
 
@@ -46,6 +58,9 @@ IgniteTemplate.prototype.route = function(routes, callback, strict = false) {
     //Add the managed callback to our template so that upon deconstruction our callback is destroyed correctly.
     this._callbacks.push(managed);
 
+    //Create a constructor callback that will update the state upon first load.
+    this._constructors.push(update);
+
     return this;
 };
 
@@ -271,9 +286,13 @@ class Router {
     /**
      * Returns whether or not the current location matches a given route.
      * @param {String} route The route to check.
+     * @param {Object} data The object to be populated with data from the route.
      * @returns {Boolean} Returns whether or not the current browser location matches the route.
+     * @example matches('/user/**') //Anything after /user/ is considered a match.
+     * @example matches('/user/{id}/profile') //Anything between /user and /profile is a match. data.id would be set to the value inside {id}
+     * @example matches('/user/!0/profile') //Anything between /user and /profile that is not '0' is a match.
      */
-    static matches(route) {
+    static matches(route, data = null) {
         //Get the path parts from the window
         var pathParts = [];
 
@@ -322,7 +341,11 @@ class Router {
         var max = Math.min(pathParts.length, routeParts.length);
         if (fromRoot) {
             for (var i = 0; i < max; i++) {
-                if (routeParts[i].startsWith("!") && pathParts[i] == routeParts[i].substring(1)) {
+                if (routeParts[i].startsWith("{") && routeParts[i].endsWith("}")) {
+                    if (data) {
+                        data[routeParts[i].substring(1, routeParts[i].length - 1)] = pathParts[i];
+                    }
+                } else if (routeParts[i].startsWith("!") && pathParts[i] == routeParts[i].substring(1)) {
                     return false;
                 } else if (routeParts[i] == "**") {
                     return true;
@@ -346,8 +369,7 @@ class Router {
                     if (i + offset >= pathParts.length) {
                         return false;
                     }
-
-                    if (routeParts[i].startsWith("!") && pathParts[i + offset] == routeParts[i].substring(1)) {
+                    else if (routeParts[i].startsWith("!") && pathParts[i + offset] == routeParts[i].substring(1)) {
                         break;
                     } else if (routeParts[i] == "**") {
                         return true;