router-links: convert from kebab case to camel case param-* and query-* attributes

Author: blikblum

lib/middlewares/router-links.js

@@ -38,6 +38,17 @@ const undelegate = function (el, handler) {
   el.removeEventListener(eventName, handler, false)
 }
 
+const camelize = (str) => {  
+  if (str.indexOf('-') === -1) return str 
+  const words = str.split('-')  
+  let result = ''
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i]    
+    result += i ? word.charAt(0).toUpperCase() + word.slice(1) : word
+  }
+  return result 
+}
+
 function mutationHandler (mutations, observer) {
   mutations.forEach(function (mutation) {
     if (mutation.type === 'attributes') {
@@ -64,7 +75,7 @@ function getAttributeValues (el, prefix, result) {
   for (let i = 0; i < attributes.length; i++) {
     const attr = attributes[i]
     if (attr.name.indexOf(prefix) === 0) {
-      const paramName = attr.name.slice(prefix.length)
+      const paramName = camelize(attr.name.slice(prefix.length))
       result[paramName] = attr.value
     }
   }

tests/functional/routerLinksTest.js

@@ -40,6 +40,7 @@ class ParentView extends BaseParentView {
         <a id="a-grandchildlink" route="grandchild" query-name="test"></a>
         <a id="a-rootlink2" route="root" param-id="2"></a>
         <a id="a-rootlink3" route="root"></a>
+        <a id="a-secondrootlink" route="secondroot" param-person-id="2" query-test-value="yyy"></a>
         <a id="a-replace" route="parent" replace></a>
         <a id="a-childlink" route="child" query-name="test"></a>
         <div id="div-a-parent" route="parent"><a id="childanchor"></a><a id="childanchor2"></a><div><a id="childanchor3"></a></div></div>
@@ -101,6 +102,7 @@ describe('routerLinks', () => {
         })
       })
       route('root', { path: 'root/:id', component: ParentView })
+      route('secondroot', { path: 'secondroot/:personId', component: ParentView })
     }
     parentComponent = ParentView
     router = new Router({ location: 'memory', outlet, routes })
@@ -119,12 +121,29 @@ describe('routerLinks', () => {
       const parentEl = document.querySelector(parentTag)
       await parentEl.updateComplete
 
-      expect($('#a-parentlink').attr('href')).to.be.equal('/parent')
+      expect($('#a-parentlink').attr('href')).to.be.equal('/parent')     
+    })
+  })
+
+  it('should use param-* and query-* attributes to generate href', async function () {
+    return router.transitionTo('parent').then(async function () {
+      const parentEl = document.querySelector(parentTag)
+      await parentEl.updateComplete
+      
       expect($('#a-rootlink2').attr('href')).to.be.equal('/root/2')
       expect($('#a-grandchildlink').attr('href')).to.be.equal('/parent/child/grandchild?name=test')
     })
   })
 
+  it('should convert param-* and query-* attributes from kebab to camel case', async function () {
+    return router.transitionTo('parent').then(async function () {
+      const parentEl = document.querySelector(parentTag)
+      await parentEl.updateComplete
+      
+      expect($('#a-secondrootlink').attr('href')).to.be.equal('/secondroot/2?testValue=yyy')
+    })
+  })
+
   it('should update href attributes in anchor tags when attribute is changed', function () {
     return router.transitionTo('parent').then(async function () {
       const parentEl = document.querySelector(parentTag)