Merge pull request #177 from canjs/minor

DO NOT MERGE: supports .dataUrl

can-route.html

@@ -3,7 +3,7 @@
 var DefineMap = require("can-define/map/map");
 
 
-route("{page}/{id}");
+route.register("{page}/{id}");
 route.ready();
 
 

can-route.js

@@ -15,15 +15,16 @@ var urlHelpers = require("./src/url-helpers");
 var routeParam = require("./src/param");
 var routeDeparam = require("./src/deparam");
 var bindingProxy = require("./src/binding-proxy");
-var hashchange = require("./src/hashchange");
+var Hashchange = require("can-route-hash");
 
 var isWebWorker =  require('can-globals/is-web-worker/is-web-worker');
 var isBrowserWindow =  require('can-globals/is-browser-window/is-browser-window');
 
-
-
-bindingProxy.bindings.hashchange = hashchange;
+var hashchangeObservable = new Hashchange();
+bindingProxy.bindings.hashchange = hashchangeObservable;
 bindingProxy.defaultBinding = "hashchange";
+bindingProxy.urlDataObservable.value = hashchangeObservable;
+
 
 // ## route.js
 // `can-route`
@@ -129,14 +130,19 @@ Object.defineProperty(canRoute,"defaultBinding",{
 	},
 	set: function(newVal){
 		bindingProxy.defaultBinding = newVal;
+		var observable = bindingProxy.bindings[bindingProxy.defaultBinding];
+		if(observable) {
+			bindingProxy.urlDataObservable.value = observable;
+		}
 	}
 });
-Object.defineProperty(canRoute,"currentBinding",{
+Object.defineProperty(canRoute,"urlData",{
  	get: function(){
-		return bindingProxy.currentBinding;
+		return bindingProxy.urlDataObservable.value;
 	},
 	set: function(newVal){
-		bindingProxy.currentBinding = newVal;
+		canRoute._teardown();
+		bindingProxy.urlDataObservable.value = newVal;
 	}
 });
 
@@ -189,13 +195,12 @@ canReflect.assignMap(canRoute, {
 
 	// called when the route is ready
 	_setup: function () {
-		if (!canRoute.currentBinding) {
-			canRoute.currentBinding =canRoute.defaultBinding;
+		if (!canRoute._canBinding) {
 
 			var bindingOptions = {
 
 				// The parent is the hashchange observable
-				parent: bindingProxy.bindings[canRoute.currentBinding],
+				parent: bindingProxy.urlDataObservable.value,
 				setParent: updateUrl,
 
 				// The child is route.data
@@ -235,10 +240,9 @@ canReflect.assignMap(canRoute, {
 		}
 	},
 	_teardown: function () {
-		if (canRoute.currentBinding) {
+		if (canRoute._canBinding) {
 			canRoute._canBinding.stop();
 			canRoute._canBinding = null;
-			canRoute.currentBinding = null;
 		}
 		clearTimeout(timer);
 	},

demos/counter.html

@@ -10,7 +10,7 @@
     }
 });
 
-route("",{count: 0});
+route.register("",{count: 0});
 
 window.myCounter = new Counter();
 route.data = myCounter;

doc/can-route.md

@@ -17,18 +17,20 @@
 
   ```js
 {
-	data,     // The bound observable.
+	data,     // The bound key-value observable.
+    urlData,  // The observable that represents the
+              // hash. Defaults to RouteHash.
 	register, // Register routes that translate between
-	// the url and the bound observable.
+	          // the url and the bound observable.
 	start,    // Begin updating the bound observable with
-	// url data and vice versa.
+	          // url data and vice versa.
 	deparam,  // Given url fragment, return the data for it.
 	rule,     // Given url fragment, return the routing rule
 	param,    // Given data, return a url fragment.
 	url,      // Given data, return a url for it.
 	link,     // Given data, return an <a> tag for it.
 	isCurrent,   // Given data, return true if the current url matches
-	// the data.
+	             // the data.
 	currentRule // Return the matched rule name.
 }
 ```

doc/currentRule.md

@@ -12,8 +12,8 @@
 Use `route.currentRule()` to find the current route rule.
 
 ```js
-route( "{type}", { type: "foo" } );
-route( "{type}/{subtype}" );
+route.register( "{type}", { type: "foo" } );
+route.register( "{type}/{subtype}" );
 route.currentRule(); // "{type}"
 route.data.subtype = "foo";
 route.currentRule(); // "{type}/{subtype}"

doc/data.md

@@ -1,7 +1,7 @@
 @property {Object|HTMLElement} can-route.data data
 @parent can-route.static
 
-This is the internal observable object underlying [can-route]. It can be set in order to cross-bind a top level state object (Application ViewModel) to can-route.
+An observable key-value object used to cross bind to the url observable [can-route.urlData]. Set it to cross-bind a top level state object (Application ViewModel) to [can-route].
 
 @type {Object} If `route.data` is set to a [can-reflect]ed observable object of
 key-value pairs, once [can-route.start] is called, changes in `route.data`'s

doc/urlData.md

@@ -0,0 +1,51 @@
+@property {ValueObservable} can-route.urlData urlData
+@parent can-route.static
+
+Specifies an observable value that represents the URL. Useful for changing
+what URL [can-route route] is cross-bound to.
+
+@type {ValueObservable} `urlData` is an observable value that represents the part of the URL cross
+  bound to the [can-route.data] state object.  It can be set to other observable urls like [can-route-pushstate]
+  or [can-route-mock]. It defaults to [can-route-hash].
+
+  The following shows setting `urlData` to another observable.
+
+  ```js
+  import {route, RouteMock, DefineMap} from "can";
+
+  // route.data will update routeMock and be updated by changes in
+  // routeMock.
+  var routeMock = route.urlData = new RouteMock();
+  var routeData = route.data = new DefineMap({},false);
+
+  // begin binding
+  route.start()
+
+  // simulate setting the URL
+  routeMock.value = "foo=bar";
+
+  routeData.foo //-> "bar";
+  ```
+  @codepen
+
+@body
+
+## Creating your own `ValueObservable`
+
+> WARNING: The following is non-normative and may change in a
+> future release.  Please let us know if you are trying to create your own
+> observable and we will work with you to stabilize the API.
+
+
+Besides implementing the standard `ValueObservable` symbols:
+
+- [can-reflect.getValue]
+- [can-reflect.setValue]
+- [can-reflect/observe.onValue]
+- [can-reflect/observe.offValue]
+
+The `ValueObservable` should include the following properties:
+
+- `paramsMatcher` - A regular expression used to test if the URL is formatted correctly for [can-route.deparam].
+- `querySeparator` - A string that separates when arbitrary key-value pairs begin in the url (Example: `"?"`).
+- `root` - A string value used to identify the part of the url where routing begins.  For example, [can-route-hash] defaults to `"#!"`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "can-route",
-  "version": "4.1.2",
+  "version": "4.2.0-pre.1",
   "description": "Observable front-end application routing for CanJS.",
   "homepage": "https://canjs.com/doc/can-route.html",
   "license": "MIT",
@@ -49,12 +49,14 @@
     "can-simple-map": "^4.0.0",
     "can-simple-observable": "^2.0.0",
     "can-symbol": "^1.0.0",
-    "can-util": "^3.9.0"
+    "can-util": "^3.9.0",
+    "can-route-hash": "<2.0.0"
   },
   "devDependencies": {
     "can-define": "^2.0.0",
     "can-map": "^4.0.0",
     "can-observe": "^2.0.0",
+    "can-route-mock": "<2.0.0",
     "can-stache-key": "^1.0.0",
     "detect-cyclic-packages": "^1.1.0",
     "done-serve": "^1.5.0",

src/binding-proxy.js

@@ -2,22 +2,20 @@ var canReflect = require('can-reflect');
 var canSymbol = require("can-symbol");
 var SimpleObservable = require("can-simple-observable");
 
-var defaultBinding = new SimpleObservable("hashchange");
+var urlDataObservable = new SimpleObservable(null);
 
 var bindingProxy = {
-    get defaultBinding(){
-        return defaultBinding.get();
-    },
-    set defaultBinding(newVal){
-        defaultBinding.set(newVal);
-    },
-    currentBinding: null,
+    defaultBinding: null,
+    urlDataObservable: urlDataObservable,
     bindings: {},
     call: function(){
         var args = canReflect.toArray(arguments),
             prop = args.shift(),
-            binding = bindingProxy.bindings[bindingProxy.currentBinding ||bindingProxy.defaultBinding],
-            method = binding[prop.indexOf("can.") === 0 ? canSymbol.for(prop) : prop];
+            binding = urlDataObservable.value;
+        if(binding === null) {
+            throw new Error("there is no current binding!!!");
+        }
+        var method = binding[prop.indexOf("can.") === 0 ? canSymbol.for(prop) : prop];
         if (method.apply) {
             return method.apply(binding, args);
         } else {

src/deparam.js

@@ -51,7 +51,7 @@ function canRoute_getRule(url){
  * Extract data from a url, creating an object representing its values.
  *
  * ```js
- * route("{page}");
+ * route.register("{page}");
  *
  * var result = route.deparam("page=home");
  * console.log(result.page); // -> "home"
@@ -88,7 +88,7 @@ function canRoute_getRule(url){
  * data object.
  *
  * ```js
- * route("{type}/{id}");
+ * route.register("{type}/{id}");
  *
  * route.deparam("videos/5");
  *   // -> { id: 5, route: "{type}/{id}", type: "videos" }

src/param.js

@@ -132,7 +132,7 @@ function paramFromRoute(route, data) {
  * URL as & separated key/value parameters.
  *
  * ```js
- * route("{type}/{id}");
+ * route.register("{type}/{id}");
  *
  * route.param({ type: "video", id: 5 }) // -> "video/5"
  * route.param({ type: "video", id: 5, isNew: false })

src/register.js

@@ -88,8 +88,8 @@ var RouteRegistry = {
 
 	    		if (sameMapKeys && sameDefaultValues && !matchingRoutesWithoutTrailingSlash) {
 	    			dev.warn('two routes were registered with matching keys:\n' +
-	    				'\t(1) route("' + r.route + '", ' + JSON.stringify(r.defaults) + ')\n' +
-	    				'\t(2) route("' + url + '", ' + JSON.stringify(defaults) + ')\n' +
+	    				'\t(1) route.register("' + r.route + '", ' + JSON.stringify(r.defaults) + ')\n' +
+	    				'\t(2) route.register("' + url + '", ' + JSON.stringify(defaults) + ')\n' +
 	    				'(1) will always be chosen since it was registered first');
 	    		}
 	    	});

src/url-helpers.js

@@ -70,7 +70,7 @@ module.exports = {
      * key/value parameters.
      *
      * ```js
-     * route("{type}/{id}");
+     * route.register("{type}/{id}");
      *
      * route.url( { type: "videos", id: 5 } ) // -> "#!videos/5"
      * route.url( { type: "video", id: 5, isNew: false } )