fix: use hyphenate instead of kebabCase (fixes #165)

nuxt · Mar 11, 2021 · 3de27ff · 3de27ff
1 parent f396cfa
commit 3de27ff
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 5 deletions.
diff --git a/src/scan.ts b/src/scan.ts
@@ -1,12 +1,17 @@
 import { basename, extname, join, dirname, relative } from 'upath'
 import globby from 'globby'
-import { kebabCase, pascalCase, splitByCase } from 'scule'
+import { pascalCase, splitByCase } from 'scule'
 import type { ScanDir, Component } from './types'
 
 export function sortDirsByPathLength ({ path: pathA }: ScanDir, { path: pathB }: ScanDir): number {
   return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length
 }
 
+// vue@2 src/shared/util.js
+function hyphenate (str: string):string {
+  return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
+}
+
 export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<Component[]> {
   const components: Component[] = []
   const filePaths = new Set<string>()
@@ -54,7 +59,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<
       resolvedNames.set(componentName, filePath)
 
       const pascalName = pascalCase(componentName)
-      const kebabName = kebabCase(componentName)
+      const kebabName = hyphenate(componentName)
       const shortPath = relative(srcDir, filePath)
       const chunkName = 'components/' + kebabName
 

diff --git a/test/fixture/components/PAScal.vue → test/fixture/components/NComponent.vue b/test/fixture/components/PAScal.vue → test/fixture/components/NComponent.vue
diff --git a/test/fixture/pages/index.vue b/test/fixture/pages/index.vue
@@ -7,6 +7,6 @@
     <IconHome />
     <MAwesome />
     <Functional />
-    <PAScal />
+    <NComponent />
   </div>
 </template>
diff --git a/test/unit/scanner.test.ts b/test/unit/scanner.test.ts
@@ -11,7 +11,7 @@ test('scanner', async () => {
     'Bar',
     'Big',
     'Mouse',
-    'PAScal',
+    'NComponent',
     'Foo',
     'Functional',
     'FunctionalChild',

diff --git a/test/unit/tagExtractor.test.ts b/test/unit/tagExtractor.test.ts
@@ -4,7 +4,7 @@ import { extractTags } from '../../src/tagExtractor'
 test('with template', async () => {
   const tags = await extractTags(path.resolve('test/fixture/pages/index.vue'))
 
-  expect(tags).toEqual(['Header', 'Foo', 'LazyBar', 'BaseButton', 'IconHome', 'MAwesome', 'Functional', 'PAScal', 'div'])
+  expect(tags).toEqual(['Header', 'Foo', 'LazyBar', 'BaseButton', 'IconHome', 'MAwesome', 'Functional', 'NComponent', 'div'])
 })
 
 test('without template', async () => {