cosmetics

Author: francesco-strazzullo

Chapter06/00.2/pages.js

@@ -18,7 +18,10 @@ export default container => {
   const anotherDetail = (params) => {
     const { id, anotherId } = params
     container
-      .textContent = `This is Detail Page with Id ${id} and AnotherId ${anotherId}`
+      .textContent = `
+        This is Detail Page with Id ${id} 
+        and AnotherId ${anotherId}
+      `
   }
 
   const notFound = () => {

Chapter06/00.2/router.js

@@ -2,12 +2,12 @@ const ROUTE_PARAMETER_REGEXP = /:(\w+)/g
 const URL_FRAGMENT_REGEXP = '([^\\/]+)'
 
 const extractUrlParams = (route, windowHash) => {
+  const params = {}
+
   if (route.params.length === 0) {
-    return {}
+    return params
   }
 
-  const params = {}
-
   const matches = windowHash
     .match(route.testRegExp)
 
@@ -28,16 +28,22 @@ export default () => {
   const router = {}
 
   const checkRoutes = () => {
+    const { hash } = window.location
+
     const currentRoute = routes.find(route => {
-      return route.testRegExp.test(window.location.hash)
+      const { testRegExp } = route
+      return testRegExp.test(hash)
     })
 
     if (!currentRoute) {
       notFound()
       return
     }
 
-    const urlParams = extractUrlParams(currentRoute, window.location.hash)
+    const urlParams = extractUrlParams(
+      currentRoute,
+      window.location.hash
+    )
 
     currentRoute.component(urlParams)
   }
@@ -46,10 +52,15 @@ export default () => {
     const params = []
 
     const parsedFragment = fragment
-      .replace(ROUTE_PARAMETER_REGEXP, (match, paramName) => {
-        params.push(paramName)
-        return URL_FRAGMENT_REGEXP
-      }).replace(/\//g, '\\/')
+      .replace(
+        ROUTE_PARAMETER_REGEXP,
+        (match, paramName) => {
+          params.push(paramName)
+          return URL_FRAGMENT_REGEXP
+        })
+      .replace(/\//g, '\\/')
+
+    console.log(`^${parsedFragment}$`)
 
     routes.push({
       testRegExp: new RegExp(`^${parsedFragment}$`),
@@ -71,7 +82,11 @@ export default () => {
 
   router.start = () => {
     window
-      .addEventListener('hashchange', checkRoutes)
+      .addEventListener(
+        'hashchange',
+        checkRoutes
+      )
+
     if (!window.location.hash) {
       window.location.hash = '#/'
     }

Chapter06/01.1/router.js

@@ -1,19 +1,7 @@
 const ROUTE_PARAMETER_REGEXP = /:(\w+)/g
 const URL_FRAGMENT_REGEXP = '([^\\/]+)'
-const NAV_A_SELECTOR = 'a[data-navigation]'
 const TICKTIME = 250
-
-const attachAnchorsHandler = navigate => {
-  document
-    .body
-    .addEventListener('click', e => {
-      const { target } = e
-      if (target.matches(NAV_A_SELECTOR)) {
-        e.preventDefault()
-        navigate(target.href)
-      }
-    })
-}
+const NAV_A_SELECTOR = 'a[data-navigation]'
 
 const extractUrlParams = (route, pathname) => {
   if (route.params.length === 0) {
@@ -95,7 +83,15 @@ export default () => {
     checkRoutes()
     window.setInterval(checkRoutes, TICKTIME)
 
-    attachAnchorsHandler(router.navigate)
+    document
+      .body
+      .addEventListener('click', e => {
+        const { target } = e
+        if (target.matches(NAV_A_SELECTOR)) {
+          e.preventDefault()
+          router.navigate(target.href)
+        }
+      })
 
     return router
   }

Chapter06/01/router.js

@@ -3,12 +3,12 @@ const URL_FRAGMENT_REGEXP = '([^\\/]+)'
 const TICKTIME = 250
 
 const extractUrlParams = (route, pathname) => {
+  const params = {}
+
   if (route.params.length === 0) {
-    return {}
+    return params
   }
 
-  const params = {}
-
   const matches = pathname
     .match(route.testRegExp)
 
@@ -38,7 +38,8 @@ export default () => {
     lastPathname = pathname
 
     const currentRoute = routes.find(route => {
-      return route.testRegExp.test(pathname)
+      const { testRegExp } = route
+      return testRegExp.test(pathname)
     })
 
     if (!currentRoute) {
@@ -55,10 +56,13 @@ export default () => {
     const params = []
 
     const parsedPath = path
-      .replace(ROUTE_PARAMETER_REGEXP, (match, paramName) => {
-        params.push(paramName)
-        return URL_FRAGMENT_REGEXP
-      }).replace(/\//g, '\\/')
+      .replace(
+        ROUTE_PARAMETER_REGEXP,
+        (match, paramName) => {
+          params.push(paramName)
+          return URL_FRAGMENT_REGEXP
+        })
+      .replace(/\//g, '\\/')
 
     routes.push({
       testRegExp: new RegExp(`^${parsedPath}$`),
@@ -75,13 +79,14 @@ export default () => {
   }
 
   router.navigate = path => {
-    window.history.pushState(null, null, path)
+    window
+      .history
+      .pushState(null, null, path)
   }
 
   router.start = () => {
     checkRoutes()
     window.setInterval(checkRoutes, TICKTIME)
-    return router
   }
 
   return router