fix(router): format redirect and alias in tree, closes #1027

Author: Guillaume Chau

packages/app-frontend/src/components/DataField.vue

@@ -207,23 +207,15 @@
 <script>
 import { mapState } from 'vuex'
 import {
-  UNDEFINED,
-  INFINITY,
-  NEGATIVE_INFINITY,
-  NAN,
   isPlainObject,
   sortByKey,
   openInEditor,
-  escape,
-  specialTokenToString,
   copyToClipboard
 } from '@utils/util'
+import { formattedValue, valueType } from '@front/filters'
 
 import DataFieldEdit from '@front/mixins/data-field-edit'
 
-const rawTypeRE = /^\[object (\w+)]$/
-const specialTypeRE = /^\[native (\w+) (.*)\]$/
-
 function subFieldCount (value) {
   if (Array.isArray(value)) {
     return value.length
@@ -284,33 +276,7 @@ export default {
 
     valueType () {
       const value = this.field.value
-      const type = typeof value
-      if (value == null || value === UNDEFINED) {
-        return 'null'
-      } else if (
-        type === 'boolean' ||
-        type === 'number' ||
-        value === INFINITY ||
-        value === NEGATIVE_INFINITY ||
-        value === NAN
-      ) {
-        return 'literal'
-      } else if (value && value._custom) {
-        return 'custom'
-      } else if (type === 'string') {
-        if (specialTypeRE.test(value)) {
-          const [, type] = specialTypeRE.exec(value)
-          return `native ${type}`
-        } else {
-          return 'string'
-        }
-      } else if (Array.isArray(value) || (value && value._isArray)) {
-        return 'array'
-      } else if (isPlainObject(value)) {
-        return 'plain-object'
-      } else {
-        return 'unknown'
-      }
+      return valueType(value)
     },
 
     rawValueType () {
@@ -337,30 +303,11 @@ export default {
 
     formattedValue () {
       let value = this.field.value
-      let result
       if (this.fieldOptions.abstract) {
         return ''
-      } else if ((result = specialTokenToString(value))) {
-        return result
-      } else if (this.valueType === 'custom') {
-        return value._custom.display
-      } else if (this.valueType === 'array') {
-        return 'Array[' + value.length + ']'
-      } else if (this.valueType === 'plain-object') {
-        return 'Object' + (Object.keys(value).length ? '' : ' (empty)')
-      } else if (this.valueType.includes('native')) {
-        return escape(specialTypeRE.exec(value)[2])
-      } else if (typeof value === 'string') {
-        const typeMatch = value.match(rawTypeRE)
-        if (typeMatch) {
-          value = escape(typeMatch[1])
-        } else {
-          value = `<span>"</span>${escape(value)}<span>"</span>`
-        }
-        value = value.replace(/ /g, '&nbsp;')
-          .replace(/\n/g, '<span>\\n</span>')
+      } else {
+        return formattedValue(value)
       }
-      return value
     },
 
     rawValue () {

packages/app-frontend/src/filters.js

@@ -1,4 +1,75 @@
+import {
+  UNDEFINED,
+  INFINITY,
+  NEGATIVE_INFINITY,
+  NAN,
+  isPlainObject,
+  escape,
+  specialTokenToString
+} from '@utils/util'
+
+const rawTypeRE = /^\[object (\w+)]$/
+const specialTypeRE = /^\[native (\w+) (.*)\]$/
+
 export function formatTime (timestamp, format) {
   const date = new Date(timestamp)
   return `${date.toString().match(/\d\d:\d\d:\d\d/)[0]}${format === 'ms' ? '.' + date.getMilliseconds() : ''}`
 }
+
+export function valueType (value) {
+  const type = typeof value
+  if (value == null || value === UNDEFINED) {
+    return 'null'
+  } else if (
+    type === 'boolean' ||
+    type === 'number' ||
+    value === INFINITY ||
+    value === NEGATIVE_INFINITY ||
+    value === NAN
+  ) {
+    return 'literal'
+  } else if (value && value._custom) {
+    return 'custom'
+  } else if (type === 'string') {
+    if (specialTypeRE.test(value)) {
+      const [, type] = specialTypeRE.exec(value)
+      return `native ${type}`
+    } else {
+      return 'string'
+    }
+  } else if (Array.isArray(value) || (value && value._isArray)) {
+    return 'array'
+  } else if (isPlainObject(value)) {
+    return 'plain-object'
+  } else {
+    return 'unknown'
+  }
+}
+
+export function formattedValue (value, quotes = true) {
+  let result
+  const type = valueType(value)
+  if ((result = specialTokenToString(value))) {
+    return result
+  } else if (type === 'custom') {
+    return value._custom.display
+  } else if (type === 'array') {
+    return 'Array[' + value.length + ']'
+  } else if (type === 'plain-object') {
+    return 'Object' + (Object.keys(value).length ? '' : ' (empty)')
+  } else if (type.includes('native')) {
+    return escape(specialTypeRE.exec(value)[2])
+  } else if (typeof value === 'string') {
+    const typeMatch = value.match(rawTypeRE)
+    if (typeMatch) {
+      value = escape(typeMatch[1])
+    } else if (quotes) {
+      value = `<span>"</span>${escape(value)}<span>"</span>`
+    } else {
+      value = escape(value)
+    }
+    value = value.replace(/ /g, '&nbsp;')
+      .replace(/\n/g, '<span>\\n</span>')
+  }
+  return value
+}

packages/app-frontend/src/views/routes/RoutesTreeItem.vue

@@ -36,13 +36,13 @@
         v-if="route.alias"
         class="info alias"
       >
-        alias: <b>{{ route.alias }}</b>
+        alias: <b v-html="formattedValue(route.alias, false)" />
       </span>
       <span
         v-if="route.redirect"
         class="info redirect"
       >
-        redirect: <b>{{ route.redirect }}</b>
+        redirect: <b v-html="formattedValue(route.redirect, false)" />
       </span>
       <span
         v-if="isActive"
@@ -65,6 +65,7 @@
 
 <script>
 import { mapState, mapMutations, mapGetters } from 'vuex'
+import { formattedValue } from '@front/filters'
 
 export default {
   name: 'RoutesTreeItem',
@@ -105,9 +106,12 @@ export default {
     ...mapMutations('routes', {
       inspect: 'INSPECT'
     }),
+
     toggleExpand () {
       this.expanded = !this.expanded
-    }
+    },
+
+    formattedValue
   }
 }
 </script>

packages/shell-dev/target/router.js

@@ -27,16 +27,17 @@ const routes = [
     component: RouteWithBeforeEnter,
     beforeEnter: (to, from, next) => {
       next()
-    }},
+    } },
   { path: '/route-with-redirect', redirect: '/route-one' },
+  { path: '/route-with-redirect-function', redirect: () => '/route-one' },
   { path: '/route-with-alias', component: RouteWithAlias, alias: '/this-is-the-alias' },
   { path: '/route-with-dynamic-component', component: DynamicComponent, props: true },
   { path: '/route-with-props',
     component: RouteWithProps,
     props: {
       username: 'My Username',
       id: 99
-    }},
+    } },
   { path: '/route-with-props-default', component: RouteWithProps },
   { path: '/route-parent',
     component: ParentRoute,