fixed: Computed path attributes and invalid query selector strings autoscrolling

Author: GianlucaGuarini

src/components/route-hoc.js

@@ -9,7 +9,11 @@ import {
 import $ from 'bianco.query'
 import getCurrentRoute from '../get-current-route.js'
 import { get as getAttr } from 'bianco.attr'
-import { createDefaultSlot, getAttribute } from '../util.js'
+import {
+  createDefaultSlot,
+  getAttribute,
+  isValidQuerySelectorString,
+} from '../util.js'
 import compose from 'cumpa'
 
 const getInitialRouteValue = (pathToRegexp, path, options) => {
@@ -42,7 +46,8 @@ export const routeHoc = ({ slots, attributes }) => {
       // create the component state
       const currentRoute = getCurrentRoute()
       const path =
-        getAttribute(attributes, PATH_ATTRIBUTE) || getAttr(el, PATH_ATTRIBUTE)
+        getAttribute(attributes, PATH_ATTRIBUTE)?.evaluate(context) ||
+        getAttr(el, PATH_ATTRIBUTE)
       const pathToRegexp = toRegexp(path, [])
       const state = {
         pathToRegexp,
@@ -127,11 +132,12 @@ export const routeHoc = ({ slots, attributes }) => {
 
       // if this route component was already mounted we need to update it
       if (prevRoute) this.slot.update({}, this.context)
-      // this route component was never mounted so we need to create its DOM
+      // this route component was never mounted, so we need to create its DOM
       else this.mountSlot()
 
       // emulate the default browser anchor links behaviour
-      if (route.hash) $(route.hash)?.[0].scrollIntoView()
+      if (route.hash && isValidQuerySelectorString(route.hash))
+        $(route.hash)?.[0].scrollIntoView()
     },
     callLifecycleProperty(method, ...params) {
       const attr = getAttribute(attributes, method)

src/util.js

@@ -41,3 +41,7 @@ export const createDefaultSlot = (attributes = []) => {
     },
   ])
 }
+
+// True if the selector string is valid
+export const isValidQuerySelectorString = (selector) =>
+  /^([a-zA-Z0-9-_*#.:[\]\s>+~()='"]|\\.)+$/.test(selector)

test/components.spec.js

@@ -4,6 +4,7 @@ import NestedUpdates from './components/nested-updates.riot'
 import RecursiveUpdatesBugRouter from './components/recursive-updates-bug-router.riot'
 import StaticBasePath from './components/static-base-path.riot'
 import SameRouteMatches from './components/same-route-matches.riot'
+import ComputedRoutes from './components/computed-routes.riot'
 import { component } from 'riot'
 import { expect } from 'chai'
 import { router, defaults } from '../src/index.js'
@@ -105,4 +106,27 @@ describe('components', function () {
 
     comp.unmount()
   })
+
+  it('Computed routes get properly rendered', async function () {
+    const el = document.createElement('div')
+    const comp = component(ComputedRoutes)(el)
+
+    expect(comp.$('p')).to.be.not.ok
+
+    router.push('/home')
+
+    await sleep()
+
+    expect(comp.$('p')).to.be.ok
+
+    await sleep()
+
+    router.push('/')
+
+    await sleep()
+
+    expect(comp.$('p')).to.be.not.ok
+
+    comp.unmount()
+  })
 })

test/components/computed-routes.riot

@@ -0,0 +1,21 @@
+<computed-routes>
+  <router>
+    <route path={state.home}>
+      <p>{state.name}</p>
+    </route>
+  </router>
+  <script>
+    import { Router, Route } from '../../src/index.js'
+
+    export default {
+      components: {
+        Router,
+        Route,
+      },
+      state: {
+        home: '/home',
+        name: 'hello'
+      },
+    }
+  </script>
+</computed-routes>