chore(docs): improve component name formatting (#6014)

jacobmllr95 · web-flow · commit afdd540e9b09 · 2020-11-04T14:03:57.000+01:00
diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue
@@ -299,7 +299,7 @@
 import Vue from 'vue'
 import commonProps from '../common-props.json'
 import { defaultConfig } from '../content'
-import { kebabCase } from '../utils'
+import { getComponentName, getCleanComponentName, kebabCase } from '../utils'
 import AnchoredHeading from './anchored-heading'
 
 export default {
@@ -478,13 +478,13 @@ export default {
     slotsItems() {
       // We use object spread here so that `_showDetails` doesn't
       // mutate the original array objects
-      return this.slots ? this.slots.map(s => ({ ...s })) : []
+      return this.slots ? this.slots.map(slot => ({ ...slot })) : []
     },
     componentName() {
-      return kebabCase(this.component).replace('{', '-{')
+      return getComponentName(this.component)
     },
     componentNameClean() {
-      return this.componentName.replace('{', '').replace('}', '')
+      return getCleanComponentName(this.component)
     },
     tag() {
       return `<${this.componentName}>`
diff --git a/docs/components/importdoc.vue b/docs/components/importdoc.vue
@@ -123,7 +123,7 @@
 <script>
 import startCase from 'lodash/startCase'
 import hljs from '../utils/hljs'
-import { kebabCase } from '../utils'
+import { getComponentName, kebabCase } from '../utils'
 import AnchoredHeading from './anchored-heading'
 
 const importPath = 'bootstrap-vue'
@@ -196,7 +196,7 @@ export default {
       const firstComponentImport = this.componentImports[0]
       return [
         `import { ${firstComponent} } from '${firstComponentImport.importPath}'`,
-        `Vue.component('${this.componentName(firstComponent)}', ${firstComponent})`
+        `Vue.component('${getComponentName(firstComponent)}', ${firstComponent})`
       ].join('\n')
     },
     directiveImportCode() {
@@ -221,11 +221,8 @@ export default {
     })
   },
   methods: {
-    componentName(component) {
-      return kebabCase(component).replace('{', '-{')
-    },
     componentTag(component) {
-      return `<${this.componentName(component)}>`
+      return `<${getComponentName(component)}>`
     },
     directiveName(directive) {
       return kebabCase(directive)
diff --git a/docs/utils/index.js b/docs/utils/index.js
@@ -1,9 +1,7 @@
 const RX_HYPHENATE = /\B([A-Z])/g
 
 // Converts PascalCase or camelCase to kebab-case
-export const kebabCase = str => {
-  return str.replace(RX_HYPHENATE, '-$1').toLowerCase()
-}
+export const kebabCase = value => value.replace(RX_HYPHENATE, '-$1').toLowerCase()
 
 // Parse a fully qualified version from a string
 export const parseVersion = version => {
@@ -17,6 +15,9 @@ export const parseFullVersion = version => {
   return matches.length > 0 ? matches[0] : ''
 }
 
+export const getComponentName = component => kebabCase(component).replace(/{/g, '-{')
+export const getCleanComponentName = component => getComponentName(component).replace(/({|})/g, '')
+
 export const parseUrl = value => {
   const anchor = document.createElement('a')
   anchor.href = value
@@ -93,8 +94,8 @@ export const updateMetaTOC = (tocData = {}, meta = null) => {
       componentToc.push(
         // Add component sub-headings
         ...meta.components.map(({ component }) => {
-          const tag = kebabCase(component).replace('{', '-{')
-          const hash = `#comp-ref-${tag}`.replace('{', '').replace('}', '')
+          const tag = getComponentName(component)
+          const hash = `#comp-ref-${getCleanComponentName(tag)}`
           return { label: `&lt;${tag}&gt;`, href: hash }
         }),
         // Add component import sub-heading
