Update vue/prop-name-casing rule to support <script setup> (#1544)

* Update `vue/prop-name-casing` rule to support `<script setup>` * fix for test on node v8
vuejs · Jul 5, 2021 · f93892f · f93892f
1 parent e495132
commit f93892f
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 4 deletions.
diff --git a/lib/rules/prop-name-casing.js b/lib/rules/prop-name-casing.js
@@ -8,6 +8,12 @@ const utils = require('../utils')
 const casing = require('../utils/casing')
 const allowedCaseOptions = ['camelCase', 'snake_case']
 
+/**
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ */
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -22,8 +28,11 @@ function create(context) {
   // Public
   // ----------------------------------------------------------------------
 
-  return utils.executeOnVue(context, (obj) => {
-    for (const item of utils.getComponentProps(obj)) {
+  /**
+   * @param {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} props
+   */
+  function processProps(props) {
+    for (const item of props) {
       const propName = item.propName
       if (propName == null) {
         continue
@@ -39,7 +48,17 @@ function create(context) {
         })
       }
     }
-  })
+  }
+  return utils.compositingVisitors(
+    utils.defineScriptSetupVisitor(context, {
+      onDefinePropsEnter(_node, props) {
+        processProps(props)
+      }
+    }),
+    utils.executeOnVue(context, (obj) => {
+      processProps(utils.getComponentProps(obj))
+    })
+  )
 }
 
 // ------------------------------------------------------------------------------

diff --git a/tests/lib/rules/prop-name-casing.js b/tests/lib/rules/prop-name-casing.js
@@ -8,6 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
+const semver = require('semver')
 const rule = require('../../../lib/rules/prop-name-casing')
 const RuleTester = require('eslint').RuleTester
 
@@ -322,6 +323,44 @@ ruleTester.run('prop-name-casing', rule, {
       `,
       options: ['snake_case'],
       parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({
+        greetingText: String
+      })
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['greetingText'])
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        greetingText: number
+      }
+      defineProps<Props>()
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        ...parserOptions,
+        parser: require.resolve('@typescript-eslint/parser')
+      }
     }
   ],
 
@@ -580,6 +619,69 @@ ruleTester.run('prop-name-casing', rule, {
       `,
       parserOptions,
       errors: ['Prop "/greeting-text/" is not in camelCase.']
-    }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({
+        greeting_text: String
+      })
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions,
+      errors: [
+        {
+          message: 'Prop "greeting_text" is not in camelCase.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['greeting_text'])
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions,
+      errors: [
+        {
+          message: 'Prop "greeting_text" is not in camelCase.',
+          line: 3
+        }
+      ]
+    },
+    ...(semver.lt(
+      require('@typescript-eslint/parser/package.json').version,
+      '4.0.0'
+    )
+      ? []
+      : [
+          {
+            filename: 'test.vue',
+            code: `
+            <script setup lang="ts">
+            interface Props {
+              greeting_text: number
+            }
+            defineProps<Props>()
+            </script>
+            `,
+            parser: require.resolve('vue-eslint-parser'),
+            parserOptions: {
+              ...parserOptions,
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            errors: [
+              {
+                message: 'Prop "greeting_text" is not in camelCase.',
+                line: 4
+              }
+            ]
+          }
+        ])
   ]
 })