From 489649fbe5daf36bcd4894fc771765e385a43872 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 4 Jul 2021 10:16:26 +0900
Subject: [PATCH 1/3] Update `vue/no-restricted-props` rule to support `<script
 setup>`

---
 lib/rules/no-restricted-props.js       |  79 +++++---
 lib/utils/index.js                     |  57 ++++--
 tests/lib/rules/no-restricted-props.js | 252 +++++++++++++++++++++++++
 3 files changed, 350 insertions(+), 38 deletions(-)

diff --git a/lib/rules/no-restricted-props.js b/lib/rules/no-restricted-props.js
index 8a64913c3..9bd26a81e 100644
--- a/lib/rules/no-restricted-props.js
+++ b/lib/rules/no-restricted-props.js
@@ -7,6 +7,12 @@
 const utils = require('../utils')
 const regexp = require('../utils/regexp')
 
+/**
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ */
+
 /**
  * @typedef {object} ParsedOption
  * @property { (name: string) => boolean } test
@@ -88,39 +94,58 @@ module.exports = {
     /** @type {ParsedOption[]} */
     const options = context.options.map(parseOption)
 
-    return utils.defineVueVisitor(context, {
-      onVueObjectEnter(node) {
-        for (const prop of utils.getComponentProps(node)) {
-          if (!prop.propName) {
-            continue
-          }
+    /**
+     * @param {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} props
+     * @param { { [key: string]: Property | undefined } } [withDefaultsProps]
+     */
+    function processProps(props, withDefaultsProps) {
+      for (const prop of props) {
+        if (!prop.propName) {
+          continue
+        }
 
-          for (const option of options) {
-            if (option.test(prop.propName)) {
-              const message =
-                option.message ||
-                `Using \`${prop.propName}\` props is not allowed.`
-              context.report({
-                node: prop.key,
-                messageId: 'restrictedProp',
-                data: { message },
-                suggest: createSuggest(prop.key, option)
-              })
-              break
-            }
+        for (const option of options) {
+          if (option.test(prop.propName)) {
+            const message =
+              option.message ||
+              `Using \`${prop.propName}\` props is not allowed.`
+            context.report({
+              node: prop.key,
+              messageId: 'restrictedProp',
+              data: { message },
+              suggest: createSuggest(
+                prop.key,
+                option,
+                withDefaultsProps && withDefaultsProps[prop.propName]
+              )
+            })
+            break
           }
         }
       }
-    })
+    }
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(node, props) {
+          processProps(props, utils.getWithDefaultsProps(node))
+        }
+      }),
+      utils.defineVueVisitor(context, {
+        onVueObjectEnter(node) {
+          processProps(utils.getComponentProps(node))
+        }
+      })
+    )
   }
 }
 
 /**
  * @param {Expression} node
  * @param {ParsedOption} option
+ * @param {Property} [withDefault]
  * @returns {Rule.SuggestionReportDescriptor[]}
  */
-function createSuggest(node, option) {
+function createSuggest(node, option, withDefault) {
   if (!option.suggest) {
     return []
   }
@@ -140,7 +165,17 @@ function createSuggest(node, option) {
   return [
     {
       fix(fixer) {
-        return fixer.replaceText(node, replaceText)
+        const fixes = [fixer.replaceText(node, replaceText)]
+        if (withDefault) {
+          if (withDefault.shorthand) {
+            fixes.push(
+              fixer.insertTextBefore(withDefault.value, `${replaceText}:`)
+            )
+          } else {
+            fixes.push(fixer.replaceText(withDefault.key, replaceText))
+          }
+        }
+        return fixes.sort((a, b) => a.range[0] - b.range[0])
       },
       messageId: 'instead',
       data: { suggest: option.suggest }
diff --git a/lib/utils/index.js b/lib/utils/index.js
index dc7f3d280..9b86cf6e4 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1152,29 +1152,24 @@ module.exports = {
    * @returns { { [key: string]: Expression | undefined } }
    */
   getWithDefaultsPropExpressions(node) {
-    if (!hasWithDefaults(node)) {
-      return {}
-    }
-    const param = node.parent.arguments[1]
-    if (!param || param.type !== 'ObjectExpression') {
-      return {}
-    }
+    const map = getWithDefaultsProps(node)
 
-    /** @type {Record<string, Expression>} */
+    /** @type {Record<string, Expression | undefined>} */
     const result = {}
 
-    for (const prop of param.properties) {
-      if (prop.type !== 'Property') {
-        return {}
-      }
-      const name = getStaticPropertyName(prop)
-      if (name != null) {
-        result[name] = prop.value
-      }
+    for (const key of Object.keys(map)) {
+      const prop = map[key]
+      result[key] = prop && prop.value
     }
 
     return result
   },
+  /**
+   * Gets a map of the property nodes defined in withDefaults.
+   * @param {CallExpression} node The node of defineProps
+   * @returns { { [key: string]: Property | undefined } }
+   */
+  getWithDefaultsProps,
 
   getVueObjectType,
   /**
@@ -2400,6 +2395,36 @@ function hasWithDefaults(node) {
   )
 }
 
+/**
+ * Gets a map of the property nodes defined in withDefaults.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { { [key: string]: Property | undefined } }
+ */
+function getWithDefaultsProps(node) {
+  if (!hasWithDefaults(node)) {
+    return {}
+  }
+  const param = node.parent.arguments[1]
+  if (!param || param.type !== 'ObjectExpression') {
+    return {}
+  }
+
+  /** @type {Record<string, Property>} */
+  const result = {}
+
+  for (const prop of param.properties) {
+    if (prop.type !== 'Property') {
+      return {}
+    }
+    const name = getStaticPropertyName(prop)
+    if (name != null) {
+      result[name] = prop
+    }
+  }
+
+  return result
+}
+
 /**
  * Get all props by looking at all component's properties
  * @param {ObjectExpression|ArrayExpression} propsNode Object with props definition
diff --git a/tests/lib/rules/no-restricted-props.js b/tests/lib/rules/no-restricted-props.js
index 4206b4014..1b6317b5d 100644
--- a/tests/lib/rules/no-restricted-props.js
+++ b/tests/lib/rules/no-restricted-props.js
@@ -326,6 +326,258 @@ tester.run('no-restricted-props', rule, {
           ]
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps({
+        foo: {},
+      })
+      </script>
+      `,
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup>
+      defineProps({
+        Foo: {},
+      })
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      defineProps(['foo'])
+      </script>
+      `,
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 3,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup>
+      defineProps(["Foo"])
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      defineProps<{
+        foo:boolean
+      }>()
+      </script>
+      `,
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup lang="ts">
+      defineProps<{
+        Foo:boolean
+      }>()
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        foo:boolean
+      }
+      defineProps<Props>()
+      </script>
+      `,
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup lang="ts">
+      interface Props {
+        Foo:boolean
+      }
+      defineProps<Props>()
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        foo:boolean
+      }
+      withDefaults(defineProps<Props>(),
+        {
+          foo: false
+        }
+      )
+      </script>
+      `,
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 4,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup lang="ts">
+      interface Props {
+        Foo:boolean
+      }
+      withDefaults(defineProps<Props>(),
+        {
+          Foo: false
+        }
+      )
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const foo = false
+      </script>
+      <script setup lang="ts">
+      interface Props {
+        foo:boolean
+      }
+      withDefaults(defineProps<Props>(),
+        {
+          foo
+        }
+      )
+      </script>
+      `,
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 7,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script>
+      const foo = false
+      </script>
+      <script setup lang="ts">
+      interface Props {
+        Foo:boolean
+      }
+      withDefaults(defineProps<Props>(),
+        {
+          Foo:foo
+        }
+      )
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      withDefaults(defineProps<Props>(),
+        {
+          foo: false
+        }
+      )
+      interface Props {
+        foo:boolean
+      }
+      </script>
+      `,
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser')
+      },
+      options: [{ name: 'foo', suggest: 'Foo' }],
+      errors: [
+        {
+          message: 'Using `foo` props is not allowed.',
+          line: 9,
+          suggestions: [
+            {
+              desc: 'Instead, change to `Foo`.',
+              output: `
+      <script setup lang="ts">
+      withDefaults(defineProps<Props>(),
+        {
+          Foo: false
+        }
+      )
+      interface Props {
+        Foo:boolean
+      }
+      </script>
+      `
+            }
+          ]
+        }
+      ]
     }
   ]
 })

From de36e6de544b21e076628c1f9fff881f11fc24da Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 4 Jul 2021 10:19:16 +0900
Subject: [PATCH 2/3] fix

---
 tests/lib/rules/no-restricted-props.js | 167 +++++++++++++------------
 1 file changed, 87 insertions(+), 80 deletions(-)

diff --git a/tests/lib/rules/no-restricted-props.js b/tests/lib/rules/no-restricted-props.js
index 1b6317b5d..f05370e44 100644
--- a/tests/lib/rules/no-restricted-props.js
+++ b/tests/lib/rules/no-restricted-props.js
@@ -413,9 +413,15 @@ tester.run('no-restricted-props', rule, {
         }
       ]
     },
-    {
-      filename: 'test.vue',
-      code: `
+    ...(semver.lt(
+      require('@typescript-eslint/parser/package.json').version,
+      '4.0.0'
+    )
+      ? []
+      : [
+          {
+            filename: 'test.vue',
+            code: `
       <script setup lang="ts">
       interface Props {
         foo:boolean
@@ -423,18 +429,18 @@ tester.run('no-restricted-props', rule, {
       defineProps<Props>()
       </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      options: [{ name: 'foo', suggest: 'Foo' }],
-      errors: [
-        {
-          message: 'Using `foo` props is not allowed.',
-          line: 4,
-          suggestions: [
-            {
-              desc: 'Instead, change to `Foo`.',
-              output: `
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            options: [{ name: 'foo', suggest: 'Foo' }],
+            errors: [
+              {
+                message: 'Using `foo` props is not allowed.',
+                line: 4,
+                suggestions: [
+                  {
+                    desc: 'Instead, change to `Foo`.',
+                    output: `
       <script setup lang="ts">
       interface Props {
         Foo:boolean
@@ -442,14 +448,14 @@ tester.run('no-restricted-props', rule, {
       defineProps<Props>()
       </script>
       `
-            }
-          ]
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            filename: 'test.vue',
+            code: `
       <script setup lang="ts">
       interface Props {
         foo:boolean
@@ -461,18 +467,18 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      options: [{ name: 'foo', suggest: 'Foo' }],
-      errors: [
-        {
-          message: 'Using `foo` props is not allowed.',
-          line: 4,
-          suggestions: [
-            {
-              desc: 'Instead, change to `Foo`.',
-              output: `
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            options: [{ name: 'foo', suggest: 'Foo' }],
+            errors: [
+              {
+                message: 'Using `foo` props is not allowed.',
+                line: 4,
+                suggestions: [
+                  {
+                    desc: 'Instead, change to `Foo`.',
+                    output: `
       <script setup lang="ts">
       interface Props {
         Foo:boolean
@@ -484,14 +490,14 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `
-            }
-          ]
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            filename: 'test.vue',
+            code: `
       <script>
       const foo = false
       </script>
@@ -506,18 +512,18 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      options: [{ name: 'foo', suggest: 'Foo' }],
-      errors: [
-        {
-          message: 'Using `foo` props is not allowed.',
-          line: 7,
-          suggestions: [
-            {
-              desc: 'Instead, change to `Foo`.',
-              output: `
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            options: [{ name: 'foo', suggest: 'Foo' }],
+            errors: [
+              {
+                message: 'Using `foo` props is not allowed.',
+                line: 7,
+                suggestions: [
+                  {
+                    desc: 'Instead, change to `Foo`.',
+                    output: `
       <script>
       const foo = false
       </script>
@@ -532,14 +538,14 @@ tester.run('no-restricted-props', rule, {
       )
       </script>
       `
-            }
-          ]
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            filename: 'test.vue',
+            code: `
       <script setup lang="ts">
       withDefaults(defineProps<Props>(),
         {
@@ -551,18 +557,18 @@ tester.run('no-restricted-props', rule, {
       }
       </script>
       `,
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      options: [{ name: 'foo', suggest: 'Foo' }],
-      errors: [
-        {
-          message: 'Using `foo` props is not allowed.',
-          line: 9,
-          suggestions: [
-            {
-              desc: 'Instead, change to `Foo`.',
-              output: `
+            parserOptions: {
+              parser: require.resolve('@typescript-eslint/parser')
+            },
+            options: [{ name: 'foo', suggest: 'Foo' }],
+            errors: [
+              {
+                message: 'Using `foo` props is not allowed.',
+                line: 9,
+                suggestions: [
+                  {
+                    desc: 'Instead, change to `Foo`.',
+                    output: `
       <script setup lang="ts">
       withDefaults(defineProps<Props>(),
         {
@@ -574,10 +580,11 @@ tester.run('no-restricted-props', rule, {
       }
       </script>
       `
-            }
-          ]
-        }
-      ]
-    }
+                  }
+                ]
+              }
+            ]
+          }
+        ])
   ]
 })

From 604694ded0cf86bdaab6274a20ed0811b10ed313 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 4 Jul 2021 10:24:01 +0900
Subject: [PATCH 3/3] fix

---
 tests/lib/rules/no-restricted-props.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/lib/rules/no-restricted-props.js b/tests/lib/rules/no-restricted-props.js
index f05370e44..3348ca1a0 100644
--- a/tests/lib/rules/no-restricted-props.js
+++ b/tests/lib/rules/no-restricted-props.js
@@ -7,6 +7,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
+const semver = require('semver')
 const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-restricted-props')