From c675a61fa6bc3c3fb9b98894af06a690827f15e4 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 26 Mar 2022 21:20:28 -0700
Subject: [PATCH 01/14] Fix #1786: Add rule match-component-import-name

---
 docs/rules/match-component-import-name.md     |  30 ++++
 lib/index.js                                  |   1 +
 lib/rules/match-component-import-name.js      | 131 ++++++++++++++
 lib/utils/index.js                            |  74 ++++++++
 .../lib/rules/match-component-import-name.js  | 166 ++++++++++++++++++
 5 files changed, 402 insertions(+)
 create mode 100644 docs/rules/match-component-import-name.md
 create mode 100644 lib/rules/match-component-import-name.js
 create mode 100644 tests/lib/rules/match-component-import-name.js

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
new file mode 100644
index 000000000..1512f625b
--- /dev/null
+++ b/docs/rules/match-component-import-name.md
@@ -0,0 +1,30 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/match-component-import-name
+description: xxx
+---
+# vue/match-component-import-name
+
+> xxx
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule ....
+
+<eslint-code-block :rules="{'vue/match-component-import-name': ['error']}">
+
+```vue
+<template>
+
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
diff --git a/lib/index.js b/lib/index.js
index 22fe9a182..d412a6bf1 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -47,6 +47,7 @@ module.exports = {
     'key-spacing': require('./rules/key-spacing'),
     'keyword-spacing': require('./rules/keyword-spacing'),
     'match-component-file-name': require('./rules/match-component-file-name'),
+    'match-component-import-name': require('./rules/match-component-import-name'),
     'max-attributes-per-line': require('./rules/max-attributes-per-line'),
     'max-len': require('./rules/max-len'),
     'multi-word-component-names': require('./rules/multi-word-component-names'),
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
new file mode 100644
index 000000000..642391ff8
--- /dev/null
+++ b/lib/rules/match-component-import-name.js
@@ -0,0 +1,131 @@
+/**
+ * @author Doug Wade <douglas.b.wade@gmail.com>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+// ...
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '',
+      categories: undefined,
+      url: ''
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          prefix: {
+            type: 'string'
+          },
+          casing: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      // ...
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = context.options[0] || {}
+
+    /**
+     * @param {ExportDefaultDeclaration} node
+     * @return {Array<Property>}
+     */
+    function getComponents(node) {
+      if (node.declaration.type !== 'ObjectExpression') {
+        return []
+      }
+
+      const componentProperty = node.declaration.properties
+        .filter(utils.isProperty)
+        .filter((property) => {
+          return utils.getStaticPropertyName(property) === 'components'
+        })[0]
+
+      if (
+        !componentProperty ||
+        componentProperty.value.type !== 'ObjectExpression'
+      ) {
+        return []
+      }
+
+      return componentProperty.value.properties.filter(utils.isProperty)
+    }
+
+    /** @param {Property} property */
+    function propertyStartsWithPrefix(property) {
+      if (!options.prefix) {
+        return true
+      }
+
+      const name = utils.getStaticPropertyName(property)
+      return name ? name.startsWith(options.prefix) : false
+    }
+
+    return utils.defineScriptVisitor(context, {
+      ExportDefaultDeclaration(node) {
+        const components = getComponents(node)
+
+        if (!components) {
+          return
+        }
+
+        components.forEach(
+          /** @param {Property} property */
+          (property) => {
+            if (!propertyStartsWithPrefix(property)) {
+              context.report({
+                node: property,
+                message: `component alias ${utils.getStaticPropertyName(
+                  property
+                )} should have the prefix ${options.prefix}`
+              })
+            }
+
+            if (property.value.type !== 'Identifier') {
+              return
+            }
+
+            const prefix = options.prefix || ''
+            const importedName = utils.getStaticPropertyName(property) || ''
+            const expectedName =
+              options.casing === 'kebab'
+                ? prefix + casing.kebabCase(property.value.name)
+                : prefix + casing.pascalCase(property.value.name)
+            if (importedName !== expectedName) {
+              context.report({
+                node: property,
+                message: `component alias ${importedName} should match ${expectedName}`
+              })
+            }
+          }
+        )
+      }
+    })
+  }
+}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 69cd84a31..f8cdf9d23 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1015,6 +1015,12 @@ module.exports = {
    * @returns {VElement | null} the element of `<script setup>`
    */
   getScriptSetupElement,
+  /**
+   * Gets the element of `<script>` that is NOT setup
+   * @param {RuleContext} context The ESLint rule context object.
+   * @returns {VElement | null} the element of `<script>`
+   */
+  getScriptElement,
 
   /**
    * Check if current file is a Vue instance or component and call callback
@@ -1273,6 +1279,48 @@ module.exports = {
     return scriptSetupVisitor
   },
 
+  /**
+   * Define handlers to traverse the AST nodes in `<script>`.
+   *
+   * @param {RuleContext} context The ESLint rule context object.
+   * @param {ScriptSetupVisitor} visitor The visitor to traverse the AST nodes.
+   */
+  defineScriptVisitor(context, visitor) {
+    const script = getScriptElement(context)
+    if (script == null) {
+      return {}
+    }
+    const scriptRange = script.range
+
+    /**
+     * @param {ESNode} node
+     */
+    function inScript(node) {
+      return scriptRange[0] <= node.range[0] && node.range[1] <= scriptRange[1]
+    }
+    /**
+     * @param {string} key
+     * @param {ESNode} node
+     * @param {any[]} args
+     */
+    function callVisitor(key, node, ...args) {
+      if (visitor[key]) {
+        if (inScript(node)) {
+          // @ts-expect-error
+          visitor[key](node, ...args)
+        }
+      }
+    }
+
+    /** @type {NodeListener} */
+    const scriptVisitor = {}
+    for (const key in visitor) {
+      scriptVisitor[key] = (node) => callVisitor(key, node)
+    }
+
+    return scriptVisitor
+  },
+
   /**
    * Checks whether given defineProps call node has withDefaults.
    * @param {CallExpression} node The node of defineProps
@@ -2409,6 +2457,32 @@ function getScriptSetupElement(context) {
   return null
 }
 
+/**
+ * Gets the element of `<script>` that is NOT setup
+ * @param {RuleContext} context The ESLint rule context object.
+ * @returns {VElement | null} the elements of `<script>`
+ */
+function getScriptElement(context) {
+  const df =
+    context.parserServices.getDocumentFragment &&
+    context.parserServices.getDocumentFragment()
+  if (!df) {
+    return null
+  }
+  const scripts = df.children
+    .filter(isVElement)
+    .filter((e) => e.name === 'script')
+  if (scripts.length === 2) {
+    return scripts.find((e) => !hasAttribute(e, 'setup')) || null
+  } else {
+    const script = scripts[0]
+    if (script && !hasAttribute(script, 'setup')) {
+      return script
+    }
+  }
+  return null
+}
+
 /**
  * Check whether the given node is a Vue component based
  * on the filename and default export type
diff --git a/tests/lib/rules/match-component-import-name.js b/tests/lib/rules/match-component-import-name.js
new file mode 100644
index 000000000..52b94df95
--- /dev/null
+++ b/tests/lib/rules/match-component-import-name.js
@@ -0,0 +1,166 @@
+/**
+ * @author Doug Wade
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/match-component-import-name')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('match-component-import-name', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { ValidImport } } </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { ValidImport } } </script>
+      `,
+      options: [{ casing: 'camel' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'valid-import': ValidImport } } </script>
+      `,
+      options: [{ casing: 'kebab' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { ValidImport, ...SpreadImport } } </script>
+      `,
+      options: [{ casing: 'camel' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'valid-import': ValidImport, ...SpreadImport } } </script>
+      `,
+      options: [{ casing: 'kebab' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { PrefixValidImport: ValidImport } } </script>
+      `,
+      options: [{ casing: 'camel', prefix: 'Prefix' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'prefix-valid-import': ValidImport } } </script>
+      `,
+      options: [{ casing: 'kebab', prefix: 'prefix-' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { PrefixValidImport: ValidImport } } </script>
+      `,
+      options: [{ prefix: 'Prefix' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { name: "test" } </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { InvalidExport: SomeRandomName } } </script>
+      `,
+      errors: [
+        {
+          message: 'component alias InvalidExport should match SomeRandomName',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'invalid-export': InvalidExport } } </script>
+      `,
+      errors: [
+        {
+          message: 'component alias invalid-export should match InvalidExport',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { InvalidImport } } </script>
+      `,
+      options: [{ casing: 'kebab' }],
+      errors: [
+        {
+          message: 'component alias InvalidImport should match invalid-import',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'invalid-import': InvalidImport } }
+      `,
+      options: [{ casing: 'kebab', prefix: 'prefix-' }],
+      errors: [
+        {
+          message:
+            'component alias invalid-import should have the prefix prefix-',
+          line: 2,
+          column: 47
+        },
+        {
+          message:
+            'component alias invalid-import should match prefix-invalid-import',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'invalid-import': InvalidImport } } </script>
+      `,
+      options: [{ casing: 'camel', prefix: 'Prefix' }],
+      errors: [
+        {
+          message:
+            'component alias invalid-import should have the prefix Prefix',
+          line: 2,
+          column: 47
+        },
+        {
+          message:
+            'component alias invalid-import should match PrefixInvalidImport',
+          line: 2,
+          column: 47
+        }
+      ]
+    }
+  ]
+})

From 9c7084e5149938c5a8ac7c708f575f96aec7093c Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 26 Mar 2022 21:42:49 -0700
Subject: [PATCH 02/14] Write the documentation for match-component-import-name

---
 docs/rules/match-component-import-name.md | 81 ++++++++++++++++++++---
 1 file changed, 73 insertions(+), 8 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index 1512f625b..9c7e8dcc0 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -4,27 +4,92 @@ sidebarDepth: 0
 title: vue/match-component-import-name
 description: xxx
 ---
+
 # vue/match-component-import-name
 
-> xxx
+> require the registered component name to match the imported component name
+
+This rule reports if a the name of a registered component does not match its imported name.
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
 
 ## :book: Rule Details
 
-This rule ....
+This rule has some options.
+
+```json
+{
+  "vue/match-component-import-name": [
+    "error",
+    {
+      "prefix": "prefix-",
+      "case": "kebab"
+    }
+  ]
+}
+```
+
+By default, this rule will validate that the imported name is the same casing.
+
+Case can be one of: `"kebab"` (`casing-like-this`) or `"pascal"` (`CasingLikeThis`)
 
-<eslint-code-block :rules="{'vue/match-component-import-name': ['error']}">
+An optional prefix can be provided that must be prepended to all imports.
 
-```vue
-<template>
+If you are not registering components, this rule will be ignored.
 
-</template>
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { 'app-button': AppButton } }
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { 'app-button': AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { AppButton } }
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { PrefixAppButton: AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { 'app-button': AppButton } }
+export default { components: { 'prefix-app-button': PrefixAppButton } }
 ```
 
 </eslint-code-block>
 
 ## :wrench: Options
 
-Nothing.
+```json
+{
+  "vue/match-component-import-name": [
+    "error",
+    {
+      "prefix": "prefix-",
+      "case": "kebab"
+    }
+  ]
+}
+```
 
+- `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
+- `"case": "pascal"` ... one of "kebab" or "pascal", indicating the casing of the registered name. Default is set to `pascal`.

From eb435ae77995fca57f41160a71aa066db37f7dca Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Tue, 29 Mar 2022 22:45:36 -0700
Subject: [PATCH 03/14] fix(1786): Respond to PR feedback

---
 docs/rules/README.md                          |  2 ++
 docs/rules/match-component-import-name.md     | 21 +++++++++-----
 lib/rules/match-component-import-name.js      | 28 +++++++------------
 .../lib/rules/match-component-import-name.js  | 10 +++----
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index b4ebfefd7..9a57bdce1 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -12,6 +12,7 @@ sidebarDepth: 0
   :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
+
 ## Base Rules (Enabling Correct ESLint Parsing)
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
@@ -317,6 +318,7 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index 9c7e8dcc0..de84e93fd 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -2,14 +2,16 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/match-component-import-name
-description: xxx
+description: require the registered component name to match the imported component name
 ---
 
 # vue/match-component-import-name
 
 > require the registered component name to match the imported component name
 
-This rule reports if a the name of a registered component does not match its imported name.
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+This rule reports if the name of a registered component does not match its imported name.
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
 
@@ -23,7 +25,7 @@ This rule has some options.
     "error",
     {
       "prefix": "prefix-",
-      "case": "kebab"
+      "case": "kebab-case"
     }
   ]
 }
@@ -31,7 +33,7 @@ This rule has some options.
 
 By default, this rule will validate that the imported name is the same casing.
 
-Case can be one of: `"kebab"` (`casing-like-this`) or `"pascal"` (`CasingLikeThis`)
+Case can be one of: `"kebab-case"` or `"PascalCase"`
 
 An optional prefix can be provided that must be prepended to all imports.
 
@@ -50,7 +52,7 @@ export default { components: { 'app-button': AppButton } }
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab' }]}">
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">
 
 ```javascript
 /* ✓ GOOD */
@@ -85,11 +87,16 @@ export default { components: { 'prefix-app-button': PrefixAppButton } }
     "error",
     {
       "prefix": "prefix-",
-      "case": "kebab"
+      "case": "kebab-case"
     }
   ]
 }
 ```
 
 - `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
-- `"case": "pascal"` ... one of "kebab" or "pascal", indicating the casing of the registered name. Default is set to `pascal`.
+- `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/match-component-import-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/match-component-import-name.js)
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 642391ff8..2f74722ca 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -4,28 +4,15 @@
  */
 'use strict'
 
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
 const utils = require('../utils')
 const casing = require('../utils/casing')
 
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-// ...
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
 module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: '',
+      description:
+        'require the registered component name to match the imported component name',
       categories: undefined,
       url: ''
     },
@@ -45,7 +32,8 @@ module.exports = {
       }
     ],
     messages: {
-      // ...
+      unexpected:
+        'component alias {{importedName}} should match {{expectedName}}'
     }
   },
   /** @param {RuleContext} context */
@@ -114,13 +102,17 @@ module.exports = {
             const prefix = options.prefix || ''
             const importedName = utils.getStaticPropertyName(property) || ''
             const expectedName =
-              options.casing === 'kebab'
+              options.casing === 'kebab-case'
                 ? prefix + casing.kebabCase(property.value.name)
                 : prefix + casing.pascalCase(property.value.name)
             if (importedName !== expectedName) {
               context.report({
                 node: property,
-                message: `component alias ${importedName} should match ${expectedName}`
+                messageId: 'unexpected',
+                data: {
+                  importedName,
+                  expectedName
+                }
               })
             }
           }
diff --git a/tests/lib/rules/match-component-import-name.js b/tests/lib/rules/match-component-import-name.js
index 52b94df95..592744309 100644
--- a/tests/lib/rules/match-component-import-name.js
+++ b/tests/lib/rules/match-component-import-name.js
@@ -35,7 +35,7 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'valid-import': ValidImport } } </script>
       `,
-      options: [{ casing: 'kebab' }]
+      options: [{ casing: 'kebab-case' }]
     },
     {
       filename: 'test.vue',
@@ -49,7 +49,7 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'valid-import': ValidImport, ...SpreadImport } } </script>
       `,
-      options: [{ casing: 'kebab' }]
+      options: [{ casing: 'kebab-case' }]
     },
     {
       filename: 'test.vue',
@@ -63,7 +63,7 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'prefix-valid-import': ValidImport } } </script>
       `,
-      options: [{ casing: 'kebab', prefix: 'prefix-' }]
+      options: [{ casing: 'kebab-case', prefix: 'prefix-' }]
     },
     {
       filename: 'test.vue',
@@ -111,7 +111,7 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { InvalidImport } } </script>
       `,
-      options: [{ casing: 'kebab' }],
+      options: [{ casing: 'kebab-case' }],
       errors: [
         {
           message: 'component alias InvalidImport should match invalid-import',
@@ -125,7 +125,7 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'invalid-import': InvalidImport } }
       `,
-      options: [{ casing: 'kebab', prefix: 'prefix-' }],
+      options: [{ casing: 'kebab-case', prefix: 'prefix-' }],
       errors: [
         {
           message:

From 3f58b7f945f325dafaaafdd14ac89e1dd13ed674 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:30:28 -0700
Subject: [PATCH 04/14] Update lib/rules/match-component-import-name.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 lib/rules/match-component-import-name.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 2f74722ca..b9aa039d7 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -51,9 +51,7 @@ module.exports = {
 
       const componentProperty = node.declaration.properties
         .filter(utils.isProperty)
-        .filter((property) => {
-          return utils.getStaticPropertyName(property) === 'components'
-        })[0]
+        .find((property) => utils.getStaticPropertyName(property) === 'components')
 
       if (
         !componentProperty ||

From 51350ba6800ca86505c15b5cd9f99a0768c4976f Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:40:46 -0700
Subject: [PATCH 05/14] Don't change utils if you can avoid it

---
 lib/rules/match-component-import-name.js |  9 ++-
 lib/utils/index.js                       | 74 ------------------------
 2 files changed, 6 insertions(+), 77 deletions(-)

diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 2f74722ca..5b44af59f 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -36,7 +36,10 @@ module.exports = {
         'component alias {{importedName}} should match {{expectedName}}'
     }
   },
-  /** @param {RuleContext} context */
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   */
   create(context) {
     const options = context.options[0] || {}
 
@@ -75,7 +78,7 @@ module.exports = {
       return name ? name.startsWith(options.prefix) : false
     }
 
-    return utils.defineScriptVisitor(context, {
+    return {
       ExportDefaultDeclaration(node) {
         const components = getComponents(node)
 
@@ -118,6 +121,6 @@ module.exports = {
           }
         )
       }
-    })
+    }
   }
 }
diff --git a/lib/utils/index.js b/lib/utils/index.js
index f8cdf9d23..69cd84a31 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1015,12 +1015,6 @@ module.exports = {
    * @returns {VElement | null} the element of `<script setup>`
    */
   getScriptSetupElement,
-  /**
-   * Gets the element of `<script>` that is NOT setup
-   * @param {RuleContext} context The ESLint rule context object.
-   * @returns {VElement | null} the element of `<script>`
-   */
-  getScriptElement,
 
   /**
    * Check if current file is a Vue instance or component and call callback
@@ -1279,48 +1273,6 @@ module.exports = {
     return scriptSetupVisitor
   },
 
-  /**
-   * Define handlers to traverse the AST nodes in `<script>`.
-   *
-   * @param {RuleContext} context The ESLint rule context object.
-   * @param {ScriptSetupVisitor} visitor The visitor to traverse the AST nodes.
-   */
-  defineScriptVisitor(context, visitor) {
-    const script = getScriptElement(context)
-    if (script == null) {
-      return {}
-    }
-    const scriptRange = script.range
-
-    /**
-     * @param {ESNode} node
-     */
-    function inScript(node) {
-      return scriptRange[0] <= node.range[0] && node.range[1] <= scriptRange[1]
-    }
-    /**
-     * @param {string} key
-     * @param {ESNode} node
-     * @param {any[]} args
-     */
-    function callVisitor(key, node, ...args) {
-      if (visitor[key]) {
-        if (inScript(node)) {
-          // @ts-expect-error
-          visitor[key](node, ...args)
-        }
-      }
-    }
-
-    /** @type {NodeListener} */
-    const scriptVisitor = {}
-    for (const key in visitor) {
-      scriptVisitor[key] = (node) => callVisitor(key, node)
-    }
-
-    return scriptVisitor
-  },
-
   /**
    * Checks whether given defineProps call node has withDefaults.
    * @param {CallExpression} node The node of defineProps
@@ -2457,32 +2409,6 @@ function getScriptSetupElement(context) {
   return null
 }
 
-/**
- * Gets the element of `<script>` that is NOT setup
- * @param {RuleContext} context The ESLint rule context object.
- * @returns {VElement | null} the elements of `<script>`
- */
-function getScriptElement(context) {
-  const df =
-    context.parserServices.getDocumentFragment &&
-    context.parserServices.getDocumentFragment()
-  if (!df) {
-    return null
-  }
-  const scripts = df.children
-    .filter(isVElement)
-    .filter((e) => e.name === 'script')
-  if (scripts.length === 2) {
-    return scripts.find((e) => !hasAttribute(e, 'setup')) || null
-  } else {
-    const script = scripts[0]
-    if (script && !hasAttribute(script, 'setup')) {
-      return script
-    }
-  }
-  return null
-}
-
 /**
  * Check whether the given node is a Vue component based
  * on the filename and default export type

From 73095eb6bff77c8a4f3ad28e407b031304a1b68a Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:46:22 -0700
Subject: [PATCH 06/14] update docs

---
 docs/rules/match-component-import-name.md | 47 +++++++++++++----------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index de84e93fd..c9ecf0752 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -17,7 +17,15 @@ This rule reports if the name of a registered component does not match its impor
 
 ## :book: Rule Details
 
-This rule has some options.
+By default, this rule will validate that the imported name is the same casing.
+
+Case can be one of: `"kebab-case"` or `"PascalCase"`
+
+An optional prefix can be provided that must be prepended to all imports.
+
+If you are not registering components, this rule will be ignored.
+
+## :wrench: Options
 
 ```json
 {
@@ -31,13 +39,10 @@ This rule has some options.
 }
 ```
 
-By default, this rule will validate that the imported name is the same casing.
-
-Case can be one of: `"kebab-case"` or `"PascalCase"`
-
-An optional prefix can be provided that must be prepended to all imports.
+- `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
+- `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
 
-If you are not registering components, this rule will be ignored.
+### `{}`
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
 
@@ -52,6 +57,8 @@ export default { components: { 'app-button': AppButton } }
 
 </eslint-code-block>
 
+### `{ case: 'kebab-case' }`
+
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">
 
 ```javascript
@@ -65,6 +72,8 @@ export default { components: { AppButton } }
 
 </eslint-code-block>
 
+### `{ prefix: 'Prefix' }`
+
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
 
 ```javascript
@@ -79,22 +88,20 @@ export default { components: { 'prefix-app-button': PrefixAppButton } }
 
 </eslint-code-block>
 
-## :wrench: Options
+### `{ case: 'kebab-case', prefix: 'prefix-' }`
 
-```json
-{
-  "vue/match-component-import-name": [
-    "error",
-    {
-      "prefix": "prefix-",
-      "case": "kebab-case"
-    }
-  ]
-}
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case', prefix: 'prefix-' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { 'prefix-app-button': AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { AppButton } }
 ```
 
-- `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
-- `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
+</eslint-code-block>
 
 ## :mag: Implementation
 

From 4192a84d2933ef53e551c59ca4ed26e38e2cae4d Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 13:22:14 -0700
Subject: [PATCH 07/14] Update docs/rules/match-component-import-name.md

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/match-component-import-name.md | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index c9ecf0752..970a23cf4 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -92,13 +92,19 @@ export default { components: { 'prefix-app-button': PrefixAppButton } }
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case', prefix: 'prefix-' }]}">
 
-```javascript
-/* ✓ GOOD */
-export default { components: { 'prefix-app-button': AppButton } }
-
-/* ✗ BAD */
-export default { components: { SomeOtherName: AppButton } }
-export default { components: { AppButton } }
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    'prefix-app-button': AppButton,
+    
+    /* ✗ BAD */
+    SomeOtherName: AppButton,
+    AppButton
+  }
+}
+</script>
 ```
 
 </eslint-code-block>

From d4880317fa006078a2d7b1c00426cdd1a92477c5 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 13:22:21 -0700
Subject: [PATCH 08/14] Update docs/rules/match-component-import-name.md

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/match-component-import-name.md | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index 970a23cf4..cc26cae2a 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -76,14 +76,20 @@ export default { components: { AppButton } }
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
 
-```javascript
-/* ✓ GOOD */
-export default { components: { PrefixAppButton: AppButton } }
-
-/* ✗ BAD */
-export default { components: { SomeOtherName: AppButton } }
-export default { components: { 'app-button': AppButton } }
-export default { components: { 'prefix-app-button': PrefixAppButton } }
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    PrefixAppButton: AppButton,
+    
+    /* ✗ BAD */
+    SomeOtherName: AppButton,
+    'app-button': AppButton,
+    'prefix-app-button': PrefixAppButton
+  }
+}
+</script>
 ```
 
 </eslint-code-block>

From a202f50c93f01c7ffeb6ea2b24168ea598adbee7 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 13:22:29 -0700
Subject: [PATCH 09/14] Update docs/rules/match-component-import-name.md

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/match-component-import-name.md | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index cc26cae2a..d08e96140 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -61,13 +61,19 @@ export default { components: { 'app-button': AppButton } }
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">
 
-```javascript
-/* ✓ GOOD */
-export default { components: { 'app-button': AppButton } }
-
-/* ✗ BAD */
-export default { components: { SomeOtherName: AppButton } }
-export default { components: { AppButton } }
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    'app-button': AppButton,
+    
+    /* ✗ BAD */
+    SomeOtherName: AppButton,
+    AppButton
+  }
+}
+</script>
 ```
 
 </eslint-code-block>

From 65533a4e5906e0085d9082e20436fb44dbc69a3e Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 14:12:32 -0700
Subject: [PATCH 10/14] Update docs/rules/match-component-import-name.md

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/match-component-import-name.md | 40 +++++++++++------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index d08e96140..ff1b5d509 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -17,13 +17,28 @@ This rule reports if the name of a registered component does not match its impor
 
 ## :book: Rule Details
 
-By default, this rule will validate that the imported name is the same casing.
+By default, this rule will validate that the imported name is the same casing, but it can be configured to enforce kebab-case or PascalCase. An optional prefix can be provided that must be prepended to all imports.
 
-Case can be one of: `"kebab-case"` or `"PascalCase"`
+If you are not registering components, this rule will be ignored.
 
-An optional prefix can be provided that must be prepended to all imports.
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
 
-If you are not registering components, this rule will be ignored.
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    AppButton,
+
+    /* ✗ BAD */
+    SomeOtherName: AppButton,
+    'app-button': AppButton
+  }
+}
+</script>
+```
+
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -39,24 +54,9 @@ If you are not registering components, this rule will be ignored.
 }
 ```
 
-- `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
+- `"prefix": ""` ... required prefix for registered component names. Default is set to an empty string (no prefix).
 - `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
 
-### `{}`
-
-<eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
-
-```javascript
-/* ✓ GOOD */
-export default { components: { AppButton } }
-
-/* ✗ BAD */
-export default { components: { SomeOtherName: AppButton } }
-export default { components: { 'app-button': AppButton } }
-```
-
-</eslint-code-block>
-
 ### `{ case: 'kebab-case' }`
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">

From 924570aaddb61276d045091b12adc1e448e691cf Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:05:09 -0700
Subject: [PATCH 11/14] remove case option

---
 docs/rules/match-component-import-name.md     | 59 ++-------------
 lib/rules/match-component-import-name.js      | 42 +++++++----
 .../lib/rules/match-component-import-name.js  | 75 ++++---------------
 3 files changed, 46 insertions(+), 130 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index ff1b5d509..24d58fc3b 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -4,22 +4,15 @@ sidebarDepth: 0
 title: vue/match-component-import-name
 description: require the registered component name to match the imported component name
 ---
-
 # vue/match-component-import-name
 
 > require the registered component name to match the imported component name
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
-
-This rule reports if the name of a registered component does not match its imported name.
-
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 
 ## :book: Rule Details
 
-By default, this rule will validate that the imported name is the same casing, but it can be configured to enforce kebab-case or PascalCase. An optional prefix can be provided that must be prepended to all imports.
-
-If you are not registering components, this rule will be ignored.
+By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule `component-definition-name-casing`.
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
 
@@ -29,6 +22,7 @@ export default {
   components: {
     /* ✓ GOOD */
     AppButton,
+    AppButton: AppButton,
 
     /* ✗ BAD */
     SomeOtherName: AppButton,
@@ -47,34 +41,13 @@ export default {
   "vue/match-component-import-name": [
     "error",
     {
-      "prefix": "prefix-",
-      "case": "kebab-case"
+      "prefix": "prefix-"
     }
   ]
 }
 ```
 
 - `"prefix": ""` ... required prefix for registered component names. Default is set to an empty string (no prefix).
-- `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
-
-### `{ case: 'kebab-case' }`
-
-<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">
-
-```vue
-<script>
-export default {
-  components: {
-    /* ✓ GOOD */
-    'app-button': AppButton,
-    
-    /* ✗ BAD */
-    SomeOtherName: AppButton,
-    AppButton
-  }
-}
-</script>
-```
 
 </eslint-code-block>
 
@@ -88,32 +61,12 @@ export default {
   components: {
     /* ✓ GOOD */
     PrefixAppButton: AppButton,
+    'Prefix-app-button': AppButton,
     
     /* ✗ BAD */
+    AppButton,
     SomeOtherName: AppButton,
     'app-button': AppButton,
-    'prefix-app-button': PrefixAppButton
-  }
-}
-</script>
-```
-
-</eslint-code-block>
-
-### `{ case: 'kebab-case', prefix: 'prefix-' }`
-
-<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case', prefix: 'prefix-' }]}">
-
-```vue
-<script>
-export default {
-  components: {
-    /* ✓ GOOD */
-    'prefix-app-button': AppButton,
-    
-    /* ✗ BAD */
-    SomeOtherName: AppButton,
-    AppButton
   }
 }
 </script>
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 907a7c449..343daa4a8 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -14,7 +14,7 @@ module.exports = {
       description:
         'require the registered component name to match the imported component name',
       categories: undefined,
-      url: ''
+      url: 'https://eslint.vuejs.org/rules/match-component-import-name.html'
     },
     fixable: null,
     schema: [
@@ -23,9 +23,6 @@ module.exports = {
         properties: {
           prefix: {
             type: 'string'
-          },
-          casing: {
-            type: 'string'
           }
         },
         additionalProperties: false
@@ -33,7 +30,9 @@ module.exports = {
     ],
     messages: {
       unexpected:
-        'component alias {{importedName}} should match {{expectedName}}'
+        'Component alias {{importedName}} should be one of: {{expectedName}}.',
+      prefix:
+        'Component alias {{propertyName}} should have the prefix {{prefix}}.'
     }
   },
   /**
@@ -54,7 +53,9 @@ module.exports = {
 
       const componentProperty = node.declaration.properties
         .filter(utils.isProperty)
-        .find((property) => utils.getStaticPropertyName(property) === 'components')
+        .find(
+          (property) => utils.getStaticPropertyName(property) === 'components'
+        )
 
       if (
         !componentProperty ||
@@ -76,6 +77,18 @@ module.exports = {
       return name ? name.startsWith(options.prefix) : false
     }
 
+    /**
+     * @param {Identifier} identifier
+     * @param {String} prefix
+     * @return {Array<String>}
+     */
+    function getExpectedNames(identifier, prefix) {
+      return [
+        `${prefix}${casing.pascalCase(identifier.name)}`,
+        `${prefix}${casing.kebabCase(identifier.name)}`
+      ]
+    }
+
     return {
       ExportDefaultDeclaration(node) {
         const components = getComponents(node)
@@ -90,9 +103,11 @@ module.exports = {
             if (!propertyStartsWithPrefix(property)) {
               context.report({
                 node: property,
-                message: `component alias ${utils.getStaticPropertyName(
-                  property
-                )} should have the prefix ${options.prefix}`
+                messageId: 'prefix',
+                data: {
+                  propertyName: utils.getStaticPropertyName(property) || '',
+                  prefix: options.prefix
+                }
               })
             }
 
@@ -102,17 +117,14 @@ module.exports = {
 
             const prefix = options.prefix || ''
             const importedName = utils.getStaticPropertyName(property) || ''
-            const expectedName =
-              options.casing === 'kebab-case'
-                ? prefix + casing.kebabCase(property.value.name)
-                : prefix + casing.pascalCase(property.value.name)
-            if (importedName !== expectedName) {
+            const expectedNames = getExpectedNames(property.value, prefix)
+            if (!expectedNames.includes(importedName)) {
               context.report({
                 node: property,
                 messageId: 'unexpected',
                 data: {
                   importedName,
-                  expectedName
+                  expectedName: expectedNames.join(', ')
                 }
               })
             }
diff --git a/tests/lib/rules/match-component-import-name.js b/tests/lib/rules/match-component-import-name.js
index 592744309..20c8ba7d0 100644
--- a/tests/lib/rules/match-component-import-name.js
+++ b/tests/lib/rules/match-component-import-name.js
@@ -23,60 +23,37 @@ tester.run('match-component-import-name', rule, {
       <script> export default { components: { ValidImport } } </script>
       `
     },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { ValidImport } } </script>
-      `,
-      options: [{ casing: 'camel' }]
-    },
     {
       filename: 'test.vue',
       code: `
       <script> export default { components: { 'valid-import': ValidImport } } </script>
-      `,
-      options: [{ casing: 'kebab-case' }]
+      `
     },
     {
       filename: 'test.vue',
       code: `
       <script> export default { components: { ValidImport, ...SpreadImport } } </script>
-      `,
-      options: [{ casing: 'camel' }]
+      `
     },
     {
       filename: 'test.vue',
       code: `
       <script> export default { components: { 'valid-import': ValidImport, ...SpreadImport } } </script>
-      `,
-      options: [{ casing: 'kebab-case' }]
+      `
     },
     {
       filename: 'test.vue',
       code: `
       <script> export default { components: { PrefixValidImport: ValidImport } } </script>
       `,
-      options: [{ casing: 'camel', prefix: 'Prefix' }]
+      options: [{ prefix: 'Prefix' }]
     },
     {
       filename: 'test.vue',
       code: `
       <script> export default { components: { 'prefix-valid-import': ValidImport } } </script>
       `,
-      options: [{ casing: 'kebab-case', prefix: 'prefix-' }]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { PrefixValidImport: ValidImport } } </script>
-      `,
-      options: [{ prefix: 'Prefix' }]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { name: "test" } </script>
-      `
+      options: [{ prefix: 'prefix-' }]
     }
   ],
   invalid: [
@@ -87,34 +64,8 @@ tester.run('match-component-import-name', rule, {
       `,
       errors: [
         {
-          message: 'component alias InvalidExport should match SomeRandomName',
-          line: 2,
-          column: 47
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { 'invalid-export': InvalidExport } } </script>
-      `,
-      errors: [
-        {
-          message: 'component alias invalid-export should match InvalidExport',
-          line: 2,
-          column: 47
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { InvalidImport } } </script>
-      `,
-      options: [{ casing: 'kebab-case' }],
-      errors: [
-        {
-          message: 'component alias InvalidImport should match invalid-import',
+          message:
+            'Component alias InvalidExport should be one of: SomeRandomName, some-random-name.',
           line: 2,
           column: 47
         }
@@ -125,17 +76,17 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'invalid-import': InvalidImport } }
       `,
-      options: [{ casing: 'kebab-case', prefix: 'prefix-' }],
+      options: [{ prefix: 'prefix-' }],
       errors: [
         {
           message:
-            'component alias invalid-import should have the prefix prefix-',
+            'Component alias invalid-import should have the prefix prefix-.',
           line: 2,
           column: 47
         },
         {
           message:
-            'component alias invalid-import should match prefix-invalid-import',
+            'Component alias invalid-import should be one of: prefix-InvalidImport, prefix-invalid-import.',
           line: 2,
           column: 47
         }
@@ -146,17 +97,17 @@ tester.run('match-component-import-name', rule, {
       code: `
       <script> export default { components: { 'invalid-import': InvalidImport } } </script>
       `,
-      options: [{ casing: 'camel', prefix: 'Prefix' }],
+      options: [{ prefix: 'Prefix' }],
       errors: [
         {
           message:
-            'component alias invalid-import should have the prefix Prefix',
+            'Component alias invalid-import should have the prefix Prefix.',
           line: 2,
           column: 47
         },
         {
           message:
-            'component alias invalid-import should match PrefixInvalidImport',
+            'Component alias invalid-import should be one of: PrefixInvalidImport, Prefixinvalid-import.',
           line: 2,
           column: 47
         }

From b7c2750cfb586f1c919e2245666ceb71f7678cf4 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:06:05 -0700
Subject: [PATCH 12/14] remove stray newline

---
 docs/rules/README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 9a57bdce1..3d2d113d7 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -12,7 +12,6 @@ sidebarDepth: 0
   :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
-
 ## Base Rules (Enabling Correct ESLint Parsing)
 
 Enforce all the rules in this category, as well as all higher priority rules, with:

From ccbfd9a021d9392858dd6cd9dbac757a0fb760e3 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Mon, 11 Apr 2022 20:00:41 -0700
Subject: [PATCH 13/14] Remove prefix; handle computed properties

---
 docs/rules/match-component-import-name.md     |  45 +-----
 lib/rules/match-component-import-name.js      | 132 +++++-------------
 .../lib/rules/match-component-import-name.js  |  58 +-------
 3 files changed, 49 insertions(+), 186 deletions(-)

diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
index 24d58fc3b..083f6b326 100644
--- a/docs/rules/match-component-import-name.md
+++ b/docs/rules/match-component-import-name.md
@@ -12,7 +12,7 @@ description: require the registered component name to match the imported compone
 
 ## :book: Rule Details
 
-By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule `component-definition-name-casing`.
+By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule [vue/component-definition-name-casing](./component-definition-name-casing.md).
 
 <eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
 
@@ -23,10 +23,11 @@ export default {
     /* ✓ GOOD */
     AppButton,
     AppButton: AppButton,
+    'app-button': AppButton,
 
     /* ✗ BAD */
     SomeOtherName: AppButton,
-    'app-button': AppButton
+    'some-other-name': AppButton
   }
 }
 </script>
@@ -34,45 +35,9 @@ export default {
 
 </eslint-code-block>
 
-## :wrench: Options
-
-```json
-{
-  "vue/match-component-import-name": [
-    "error",
-    {
-      "prefix": "prefix-"
-    }
-  ]
-}
-```
-
-- `"prefix": ""` ... required prefix for registered component names. Default is set to an empty string (no prefix).
-
-</eslint-code-block>
-
-### `{ prefix: 'Prefix' }`
-
-<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
-
-```vue
-<script>
-export default {
-  components: {
-    /* ✓ GOOD */
-    PrefixAppButton: AppButton,
-    'Prefix-app-button': AppButton,
-    
-    /* ✗ BAD */
-    AppButton,
-    SomeOtherName: AppButton,
-    'app-button': AppButton,
-  }
-}
-</script>
-```
+## :couple: Related Rules
 
-</eslint-code-block>
+- [vue/component-definition-name-casing](./component-definition-name-casing.md)
 
 ## :mag: Implementation
 
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 343daa4a8..4ab34b84f 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -17,22 +17,9 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/match-component-import-name.html'
     },
     fixable: null,
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          prefix: {
-            type: 'string'
-          }
-        },
-        additionalProperties: false
-      }
-    ],
     messages: {
       unexpected:
-        'Component alias {{importedName}} should be one of: {{expectedName}}.',
-      prefix:
-        'Component alias {{propertyName}} should have the prefix {{prefix}}.'
+        'Component alias {{importedName}} should be one of: {{expectedName}}.'
     }
   },
   /**
@@ -40,97 +27,52 @@ module.exports = {
    * @returns {RuleListener}
    */
   create(context) {
-    const options = context.options[0] || {}
-
-    /**
-     * @param {ExportDefaultDeclaration} node
-     * @return {Array<Property>}
-     */
-    function getComponents(node) {
-      if (node.declaration.type !== 'ObjectExpression') {
-        return []
-      }
-
-      const componentProperty = node.declaration.properties
-        .filter(utils.isProperty)
-        .find(
-          (property) => utils.getStaticPropertyName(property) === 'components'
-        )
-
-      if (
-        !componentProperty ||
-        componentProperty.value.type !== 'ObjectExpression'
-      ) {
-        return []
-      }
-
-      return componentProperty.value.properties.filter(utils.isProperty)
-    }
-
-    /** @param {Property} property */
-    function propertyStartsWithPrefix(property) {
-      if (!options.prefix) {
-        return true
-      }
-
-      const name = utils.getStaticPropertyName(property)
-      return name ? name.startsWith(options.prefix) : false
-    }
-
     /**
      * @param {Identifier} identifier
-     * @param {String} prefix
      * @return {Array<String>}
      */
-    function getExpectedNames(identifier, prefix) {
+    function getExpectedNames(identifier) {
       return [
-        `${prefix}${casing.pascalCase(identifier.name)}`,
-        `${prefix}${casing.kebabCase(identifier.name)}`
+        casing.pascalCase(identifier.name),
+        casing.kebabCase(identifier.name)
       ]
     }
 
-    return {
-      ExportDefaultDeclaration(node) {
-        const components = getComponents(node)
-
-        if (!components) {
-          return
-        }
-
-        components.forEach(
-          /** @param {Property} property */
-          (property) => {
-            if (!propertyStartsWithPrefix(property)) {
-              context.report({
-                node: property,
-                messageId: 'prefix',
-                data: {
-                  propertyName: utils.getStaticPropertyName(property) || '',
-                  prefix: options.prefix
-                }
-              })
-            }
+    return utils.executeOnVueComponent(context, (obj) => {
+      const components = utils.findProperty(obj, 'components')
+      if (
+        !components ||
+        !components.value ||
+        components.value.type !== 'ObjectExpression'
+      ) {
+        return
+      }
 
-            if (property.value.type !== 'Identifier') {
-              return
-            }
+      components.value.properties.forEach(
+        /** @param {Property | SpreadElement} property */
+        (property) => {
+          if (
+            property.type === 'SpreadElement' ||
+            property.value.type !== 'Identifier' ||
+            property.computed === true
+          ) {
+            return
+          }
 
-            const prefix = options.prefix || ''
-            const importedName = utils.getStaticPropertyName(property) || ''
-            const expectedNames = getExpectedNames(property.value, prefix)
-            if (!expectedNames.includes(importedName)) {
-              context.report({
-                node: property,
-                messageId: 'unexpected',
-                data: {
-                  importedName,
-                  expectedName: expectedNames.join(', ')
-                }
-              })
-            }
+          const importedName = utils.getStaticPropertyName(property) || ''
+          const expectedNames = getExpectedNames(property.value)
+          if (!expectedNames.includes(importedName)) {
+            context.report({
+              node: property,
+              messageId: 'unexpected',
+              data: {
+                importedName,
+                expectedName: expectedNames.join(', ')
+              }
+            })
           }
-        )
-      }
-    }
+        }
+      )
+    })
   }
 }
diff --git a/tests/lib/rules/match-component-import-name.js b/tests/lib/rules/match-component-import-name.js
index 20c8ba7d0..a05bfec1a 100644
--- a/tests/lib/rules/match-component-import-name.js
+++ b/tests/lib/rules/match-component-import-name.js
@@ -26,34 +26,32 @@ tester.run('match-component-import-name', rule, {
     {
       filename: 'test.vue',
       code: `
-      <script> export default { components: { 'valid-import': ValidImport } } </script>
+      <script> export default { components: { ValidImport: ValidImport } } </script>
       `
     },
     {
       filename: 'test.vue',
       code: `
-      <script> export default { components: { ValidImport, ...SpreadImport } } </script>
+      <script> export default { components: { 'valid-import': ValidImport } } </script>
       `
     },
     {
       filename: 'test.vue',
       code: `
-      <script> export default { components: { 'valid-import': ValidImport, ...SpreadImport } } </script>
+      <script> export default { components: { ValidImport, ...SpreadImport } } </script>
       `
     },
     {
       filename: 'test.vue',
       code: `
-      <script> export default { components: { PrefixValidImport: ValidImport } } </script>
-      `,
-      options: [{ prefix: 'Prefix' }]
+      <script> export default { components: { 'valid-import': ValidImport, [computedImport]: ComputedImport } } </script>
+      `
     },
     {
       filename: 'test.vue',
       code: `
-      <script> export default { components: { 'prefix-valid-import': ValidImport } } </script>
-      `,
-      options: [{ prefix: 'prefix-' }]
+      <script> export default { components: { ValidImport, [differentComputedImport]: ComputedImport } } </script>
+      `
     }
   ],
   invalid: [
@@ -70,48 +68,6 @@ tester.run('match-component-import-name', rule, {
           column: 47
         }
       ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { 'invalid-import': InvalidImport } }
-      `,
-      options: [{ prefix: 'prefix-' }],
-      errors: [
-        {
-          message:
-            'Component alias invalid-import should have the prefix prefix-.',
-          line: 2,
-          column: 47
-        },
-        {
-          message:
-            'Component alias invalid-import should be one of: prefix-InvalidImport, prefix-invalid-import.',
-          line: 2,
-          column: 47
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script> export default { components: { 'invalid-import': InvalidImport } } </script>
-      `,
-      options: [{ prefix: 'Prefix' }],
-      errors: [
-        {
-          message:
-            'Component alias invalid-import should have the prefix Prefix.',
-          line: 2,
-          column: 47
-        },
-        {
-          message:
-            'Component alias invalid-import should be one of: PrefixInvalidImport, Prefixinvalid-import.',
-          line: 2,
-          column: 47
-        }
-      ]
     }
   ]
 })

From 5e0f07253a704ddc185e030e25a277aa35c98829 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Mon, 11 Apr 2022 21:27:24 -0700
Subject: [PATCH 14/14] but who lints the linters

---
 lib/rules/match-component-import-name.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
index 4ab34b84f..5babc8dc2 100644
--- a/lib/rules/match-component-import-name.js
+++ b/lib/rules/match-component-import-name.js
@@ -10,6 +10,7 @@ const casing = require('../utils/casing')
 module.exports = {
   meta: {
     type: 'problem',
+    schema: [],
     docs: {
       description:
         'require the registered component name to match the imported component name',