Repository: rrd108/vue-mess-detector
Pull request #147 (2024-08-17 22:40:40)

fix: lowercased single-words should not raise warning
The issue was that the regex pattern was identifying lowercased single-words (like `message`) as invalid.

To solve it we had to update the regex to ignore this words. I tried updating the regex with `magic-regexp` as its initially but I couldnt. It was giving me lots of problems, so the solution was:
- I changed the pattern to a regular regex and it worked right away.
- Add more tests


Patch:
diff --git a/src/rules/vue-strong/propNameCasing.ts b/src/rules/vue-strong/propNameCasing.ts
index e33a8c4..14c59d4 100644
--- a/src/rules/vue-strong/propNameCasing.ts
+++ b/src/rules/vue-strong/propNameCasing.ts
@@ -1,14 +1,10 @@
 import type { SFCScriptBlock } from '@vue/compiler-sfc'
-import { createRegExp, letter, oneOrMore } from 'magic-regexp'
 import { BG_RESET, BG_WARN, TEXT_INFO, TEXT_RESET, TEXT_WARN } from '../asceeCodes'
 import type { FileCheckResult, Offense } from '../../types'
 
 const results: FileCheckResult[] = []
 
-const camelCasePattern = createRegExp(
-  oneOrMore(letter.lowercase).at.lineStart(),
-  oneOrMore(letter.uppercase, letter.lowercase.times.any().grouped()).at.lineEnd(),
-)
+const camelCasePattern = /^[a-z]+([A-Z][a-z]*)*$/
 
 const checkPropNameCasing = (script: SFCScriptBlock | null, filePath: string) => {
   if (!script) {


Test patch:
diff --git a/src/rules/vue-strong/propNameCasing.test.ts b/src/rules/vue-strong/propNameCasing.test.ts
index 5e4e299..a6b59ed 100644
--- a/src/rules/vue-strong/propNameCasing.test.ts
+++ b/src/rules/vue-strong/propNameCasing.test.ts
@@ -21,7 +21,38 @@ describe('checkPropNameCasing', () => {
     expect(reportPropNameCasing()).toStrictEqual([])
   })
 
-  it('should report files with none camelCase props name', () => {
+  it('should not report files with lowercased single-words props name', () => {
+    const script = {
+      content: `<script setup>
+      import { ref } from 'vue'
+      defineProps({
+        message: String,
+      })
+    </script>`,
+    } as SFCScriptBlock
+    const fileName = 'camelCase-prop-name.vue'
+    checkPropNameCasing(script, fileName)
+    expect(reportPropNameCasing().length).toBe(0)
+    expect(reportPropNameCasing()).toStrictEqual([])
+  })
+
+  it('should not report files with lowercased single-words + camelCase props name', () => {
+    const script = {
+      content: `<script setup>
+      import { ref } from 'vue'
+      defineProps({
+        message: String,
+        isOpen: Boolean
+      })
+    </script>`,
+    } as SFCScriptBlock
+    const fileName = 'camelCase-prop-name.vue'
+    checkPropNameCasing(script, fileName)
+    expect(reportPropNameCasing().length).toBe(0)
+    expect(reportPropNameCasing()).toStrictEqual([])
+  })
+
+  it('should report files with kebab-case props name', () => {
     const script = {
       content: `<script setup>
       const props = defineProps({
@@ -39,4 +70,46 @@ describe('checkPropNameCasing', () => {
       message: `prop names are ${BG_WARN}not camelCased${BG_RESET} 🚨`,
     }])
   })
+
+  it('should report files with PascalCase props name', () => {
+    const script = {
+      content: `<script setup>
+      import { ref } from 'vue'
+      defineProps({
+        Message: String,
+      })
+    </script>`,
+    } as SFCScriptBlock
+    const fileName = 'capitalized-prop-name.vue'
+    checkPropNameCasing(script, fileName)
+    expect(reportPropNameCasing().length).toBe(1)
+    expect(reportPropNameCasing()).toStrictEqual([{
+      file: fileName,
+      rule: `${TEXT_INFO}vue-strong ~ prop names are not camelCased${TEXT_RESET}`,
+      description: `👉 ${TEXT_WARN}Rename the props to camelCase.${TEXT_RESET} See: https://vue-mess-detector.webmania.cc/rules/vue-strong/prop-name-casing.html`,
+      message: `prop names are ${BG_WARN}not camelCased${BG_RESET} 🚨`,
+    }])
+  })
+
+  it('should report files with none camelCased props name', () => {
+    const script = {
+      content: `<script setup>
+      import { ref } from 'vue'
+      defineProps({
+        Message: String,
+        'greeting-text': String,
+        'is_open': Boolean,
+      })
+    </script>`,
+    } as SFCScriptBlock
+    const fileName = 'capitalized-prop-name.vue'
+    checkPropNameCasing(script, fileName)
+    expect(reportPropNameCasing().length).toBe(1)
+    expect(reportPropNameCasing()).toStrictEqual([{
+      file: fileName,
+      rule: `${TEXT_INFO}vue-strong ~ prop names are not camelCased${TEXT_RESET}`,
+      description: `👉 ${TEXT_WARN}Rename the props to camelCase.${TEXT_RESET} See: https://vue-mess-detector.webmania.cc/rules/vue-strong/prop-name-casing.html`,
+      message: `prop names are ${BG_WARN}not camelCased${BG_RESET} 🚨`,
+    }])
+  })
 })