Fix 1786

docs/rules/match-component-import-name.md

@@ -0,0 +1,95 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/match-component-import-name
+description: xxx
+---
+
+# 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>
+
+## :book: Rule Details
+
+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`)
+
+An optional prefix can be provided that must be prepended to all imports.
+
+If you are not registering components, this rule will be ignored.
+
+<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
+
+```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`.

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'),

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}`
+              })
+            }
+          }
+        )
+      }
+    })
+  }
+}

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