updated: added support for routes with fragments

src/components/route-hoc.riot

@@ -6,6 +6,7 @@
   <script>
     import {route, toRegexp, match, router, createURLStreamPipe} from '../'
     import getCurrentRoute from '../get-current-route'
+    import {getLocation} from '../util'
     import compose from 'cumpa'
 
     const getInitialRouteValue = (pathToRegexp, path, options) => {
@@ -41,8 +42,11 @@
         }
       },
       onRoute(route) {
+        const loc = getLocation()
+
         this.callLifecycleProperty('onBeforeMount', route)
         this.update({route})
+        if (route.hash) loc.hash = route.hash; // make browser scroll to fragment
         this.callLifecycleProperty('onMounted', route)
       },
       callLifecycleProperty(method, ...params) {

src/dom.js

@@ -1,6 +1,6 @@
 import {
   CLICK_EVENT,
-  DOWNLOAD_LINK_ATTRIBUTE, HASH,
+  DOWNLOAD_LINK_ATTRIBUTE,
   HREF_LINK_ATTRIBUTE,
   LINK_TAG_NAME,
   RE_ORIGIN,
@@ -35,7 +35,6 @@ const isForbiddenLink = el => !el || !isLinkNode(el) // not A tag
   || !has(el, HREF_LINK_ATTRIBUTE) // has no href attr
   || isTargetSelfLink(el)
   || isCrossOriginLink(el.href)
-const isHashLink = path => path.split(HASH).length > 1
 const normalizePath = path => path.replace(defaults.base, '')
 const isInBase = path => !defaults.base || path.includes(defaults.base)
 
@@ -49,7 +48,7 @@ const onClick = event => {
 
   const el = getLinkElement(event.target)
 
-  if (isForbiddenLink(el) || isHashLink(el.href) || !isInBase(el.href)) return
+  if (isForbiddenLink(el) || !isInBase(el.href)) return
 
   const path = normalizePath(el.href)
 

test/misc-dom.spec.js

@@ -0,0 +1,43 @@
+import {fireEvent, sleep} from './util'
+import {initDomListeners, route, setBase} from '../src'
+import $ from 'bianco.query'
+import {expect} from 'chai'
+import {spy} from 'sinon'
+
+describe('misc DOM-related', function() {
+  let teardown // eslint-disable-line
+
+  beforeEach(() => {
+    setBase('/')
+
+    document.body.innerHTML = `
+    <nav>
+      <a id="a1" href="/hello#anchor">Hello</a>
+    </nav>
+  `
+    teardown = initDomListeners($('nav')[0])
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    window.history.replaceState(null, '', '/')
+    teardown()
+  })
+
+  it('url with fragments are supported', async function() {
+    const onRoute = spy()
+    const hello = route('/hello(/?[?#].*)?').on.value(onRoute)
+
+    const [a] = $('#a1')
+
+    fireEvent(a, 'click')
+
+    await sleep()
+
+    expect(onRoute).to.have.been.called
+    expect(window.location.pathname).to.be.equal('/hello')
+    expect(window.location.hash).to.be.equal('#anchor')
+
+    hello.end()
+  })
+})

test/misc.spec.js

@@ -23,5 +23,6 @@ describe('misc methods', function() {
     expect(normalizeBase('/hello')).to.be.equal(`${base}/hello`)
     expect(normalizeBase('hello')).to.be.equal(`${base}/hello`)
     expect(normalizeBase('http://google.com')).to.be.equal('http://google.com')
+    expect(normalizeBase('/page#anchor')).to.be.equal(`${base}/page#anchor`)
   })
 })