feat: Add option to show kebab-case component names (#911)

* Replace `classifyComponents` with `componentNameStyle`

This change allows for multiple additional styles of component displayed names, most importantly kebab-case

* Remove leftover console.log


Co-authored-by: Guillaume Chau <[email protected]>

Author: Aareksio

src/backend/highlighter.js

@@ -1,4 +1,4 @@
-import { inDoc, classify, getComponentName } from '../util'
+import { inDoc, getComponentName, getComponentDisplayName } from '../util'
 import { getInstanceName } from './index'
 import SharedData from 'src/shared-data'
 import { isBrowser, target } from '../devtools/env'
@@ -46,7 +46,7 @@ export function highlight (instance) {
   if (rect) {
     const content = []
     let name = instance.fnContext ? getComponentName(instance.fnOptions) : getInstanceName(instance)
-    if (SharedData.classifyComponents) name = classify(name)
+    name = getComponentDisplayName(name, SharedData.componentNameStyle)
     if (name) {
       const pre = document.createElement('span')
       pre.style.opacity = '0.6'

src/devtools/views/components/ComponentInspector.vue

@@ -69,7 +69,7 @@
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import StateInspector from 'components/StateInspector.vue'
-import { searchDeepInObject, sortByKey, classify, openInEditor } from 'src/util'
+import { searchDeepInObject, sortByKey, openInEditor, getComponentDisplayName } from 'src/util'
 import groupBy from 'lodash.groupby'
 
 export default {
@@ -102,7 +102,7 @@ export default {
     },
 
     targetName () {
-      return this.$shared.classifyComponents ? classify(this.target.name) : this.target.name
+      return getComponentDisplayName(this.target.name, this.$shared.componentNameStyle)
     },
 
     filteredState () {

src/devtools/views/components/ComponentInstance.vue

@@ -102,7 +102,7 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import { classify, scrollIntoView, UNDEFINED } from '../../../util'
+import { getComponentDisplayName, scrollIntoView, UNDEFINED } from '../../../util'
 
 export default {
   name: 'ComponentInstance',
@@ -143,7 +143,7 @@ export default {
     },
 
     displayName () {
-      return this.$shared.classifyComponents ? classify(this.instance.name) : this.instance.name
+      return getComponentDisplayName(this.instance.name, this.$shared.componentNameStyle)
     },
 
     componentHasKey () {

src/devtools/views/events/EventsHistory.vue

@@ -87,7 +87,7 @@ import Keyboard, {
 } from '../../mixins/keyboard'
 import EntryList from '../../mixins/entry-list'
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
-import { classify, focusInput } from 'src/util'
+import { focusInput, getComponentDisplayName } from 'src/util'
 
 export default {
   components: {
@@ -162,7 +162,7 @@ export default {
     ]),
 
     displayComponentName (name) {
-      return this.$shared.classifyComponents ? classify(name) : name
+      return getComponentDisplayName(name, this.$shared.componentNameStyle)
     }
   }
 }

src/devtools/views/events/module.js

@@ -1,5 +1,5 @@
 import * as storage from 'src/storage'
-import { classify } from 'src/util'
+import { getComponentDisplayName } from 'src/util'
 import SharedData from 'src/shared-data'
 
 const ENABLED_KEY = 'EVENTS_ENABLED'
@@ -46,10 +46,9 @@ const mutations = {
 }
 
 const matchingEvent = ({ searchText, searchComponent, regEx }) => e => {
-  const classifyComponents = SharedData.classifyComponents
+  const componentNameStyle = SharedData.componentNameStyle
   let searchTerm = (searchComponent
-    ? (classifyComponents
-      ? classify(e.instanceName) : e.instanceName)
+    ? getComponentDisplayName(e.instanceName, componentNameStyle)
     : e.eventName)
 
   if (regEx) {

src/devtools/views/perf/ComponentRenderDetails.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { classify } from 'src/util'
+import { getComponentDisplayName } from 'src/util'
 
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
@@ -126,7 +126,7 @@ export default {
     },
 
     componentName () {
-      return (this.$shared.classifyComponents ? classify(this.entry.id) : this.entry.id) || 'Anonymous Component'
+      return getComponentDisplayName(this.entry.id, this.$shared.componentNameStyle) || 'Anonymous Component'
     },
 
     highDensity () {

src/devtools/views/perf/ComponentRenderStats.vue

@@ -62,7 +62,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { scaleLinear, extent } from 'd3'
-import { classify } from 'src/util'
+import { getComponentDisplayName } from 'src/util'
 
 import SplitPane from 'components/SplitPane.vue'
 import ScrollPane from 'components/ScrollPane.vue'
@@ -138,7 +138,7 @@ export default {
     },
 
     getComponentName (entry) {
-      return (this.$shared.classifyComponents ? classify(entry.id) : entry.id) || 'Anonymous Component'
+      return getComponentDisplayName(entry.id, this.$shared.componentNameStyle) || 'Anonymous Component'
     }
   }
 }

src/devtools/views/settings/GlobalPreferences.vue

@@ -2,17 +2,21 @@
   <div class="global-preferences preferences">
     <VueFormField title="Normalize component names">
       <VueGroup
-        v-model="$shared.classifyComponents"
+        v-model="$shared.componentNameStyle"
         class="extend"
       >
         <VueGroupButton
-          :value="false"
+          value="original"
           label="Original name"
         />
         <VueGroupButton
-          :value="true"
+          value="class"
           label="Pascal case"
         />
+        <VueGroupButton
+          value="kebab"
+          label="Kebab case"
+        />
       </VueGroup>
     </VueFormField>
 

src/shared-data.js

@@ -3,7 +3,7 @@ import * as storage from './storage'
 // Initial state
 const internalSharedData = {
   openInEditorHost: '/',
-  classifyComponents: true,
+  componentNameStyle: 'class',
   theme: 'auto',
   displayDensity: 'low',
   recordVuex: true,
@@ -18,7 +18,7 @@ const internalSharedData = {
 }
 
 const persisted = [
-  'classifyComponents',
+  'componentNameStyle',
   'theme',
   'displayDensity',
   'recordVuex',

src/util.js

@@ -27,10 +27,31 @@ export const camelize = cached((str) => {
   return str.replace(camelizeRE, toUpper)
 })
 
+const kebabizeRE = /([a-z0-9])([A-Z])/g
+export const kebabize = cached((str) => {
+  return str && str
+    .replace(kebabizeRE, (_, lowerCaseCharacter, upperCaseLetter) => {
+      return `${lowerCaseCharacter}-${upperCaseLetter}`
+    })
+    .toLowerCase()
+})
+
 function toUpper (_, c) {
   return c ? c.toUpperCase() : ''
 }
 
+export function getComponentDisplayName (originalName, style = 'class') {
+  switch (style) {
+    case 'class':
+      return classify(originalName)
+    case 'kebab':
+      return kebabize(originalName)
+    case 'original':
+    default:
+      return originalName
+  }
+}
+
 export function inDoc (node) {
   if (!node) return false
   var doc = node.ownerDocument.documentElement