Add hash option (#667)

* Add hash option

* Avoid unecessary scroll into view-call

* Update readme with hash option

* Fix typo

* Remove nanolocation dep

* Default hash option to true

Author: tornqvist

README.md

@@ -284,10 +284,12 @@ Querystrings (e.g. `?foo=bar`) are ignored when matching routes. An object
 containing the key-value mappings exists as `state.query`.
 
 ### Hash routing
-Using hashes to delimit routes is supported out of the box (e.g. `/foo#bar`).
-When a hash is found we also check if there's an available anchor on the same
-page, and will scroll the screen to the position. Using both hashes in URLs and
-anchor links on the page is generally not recommended.
+By default hashes are treated as part of the url when routing. Using hashes to
+delimit routes (e.g. `/foo#bar`) can be disabled by setting the `hash`
+[option](#app--chooopts) to `false`. Regardless, when a hash is found we also
+check if there's an available anchor on the same page, and will scroll the
+screen to the position. Using both hashes in URLs and anchor links on the page
+is generally not recommended.
 
 ### Following links
 By default all clicks on `<a>` tags are handled by the router through the
@@ -532,6 +534,9 @@ Initialize a new `choo` instance. `opts` can also contain the following values:
 - __opts.cache:__ default: `undefined`. Override default class cache used by
   `state.cache`. Can be a a `number` (maximum number of instances in cache,
   default `100`) or an `object` with a [nanolru][nanolru]-compatible API.
+- __opts.hash:__ default: `true`. Treat hashes in URLs as part of the pathname,
+  transforming `/foo#bar` to `/foo/bar`. This is useful if the application is
+  not mounted at the website root.
 
 ### `app.use(callback(state, emitter, app))`
 Call a function and pass it a `state`, `emitter` and `app`. `emitter` is an instance

index.js

@@ -1,6 +1,5 @@
 var scrollToAnchor = require('scroll-to-anchor')
 var documentReady = require('document-ready')
-var nanolocation = require('nanolocation')
 var nanotiming = require('nanotiming')
 var nanorouter = require('nanorouter')
 var nanomorph = require('nanomorph')
@@ -39,8 +38,8 @@ function Choo (opts) {
   // properties for internal use only
   this._historyEnabled = opts.history === undefined ? true : opts.history
   this._hrefEnabled = opts.href === undefined ? true : opts.href
+  this._hashEnabled = opts.hash === undefined ? true : opts.hash
   this._hasWindow = typeof window !== 'undefined'
-  this._createLocation = nanolocation
   this._cache = opts.cache
   this._loaded = false
   this._stores = []
@@ -128,8 +127,11 @@ Choo.prototype.start = function () {
     if (self._hrefEnabled) {
       nanohref(function (location) {
         var href = location.href
-        var currHref = window.location.href
-        if (href === currHref) return
+        var hash = location.hash
+        if (href === window.location.href) {
+          if (!this._hashEnabled && hash) scrollToAnchor(hash)
+          return
+        }
         self.emitter.emit(self._events.PUSHSTATE, href)
       })
     }
@@ -224,10 +226,12 @@ Choo.prototype.toString = function (location, state) {
 Choo.prototype._matchRoute = function (locationOverride) {
   var location, queryString
   if (locationOverride) {
-    location = locationOverride.replace(/\?.+$/, '')
+    location = locationOverride.replace(/\?.+$/, '').replace(/\/$/, '')
+    if (!this._hashEnabled) location = location.replace(/#.+$/, '')
     queryString = locationOverride
   } else {
-    location = this._createLocation()
+    location = window.location.pathname.replace(/\/$/, '')
+    if (this._hashEnabled) location += window.location.hash.replace(/^#/, '/')
     queryString = window.location.search
   }
   var matched = this.router.match(location)

package.json

@@ -42,7 +42,6 @@
     "nanocomponent": "^6.5.0",
     "nanohref": "^3.0.0",
     "nanohtml": "^1.1.0",
-    "nanolocation": "^1.0.0",
     "nanolru": "^1.0.0",
     "nanomorph": "^5.1.2",
     "nanoquery": "^1.1.0",