Add vue/no-undef-components rule and deprecate vue/no-unregistered-components rule

docs/rules/README.md

@@ -341,6 +341,7 @@ For example:
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
 | [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
 | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  |
+| [vue/no-undef-components-in-script-setup](./no-undef-components-in-script-setup.md) | disallow undefined components in `<template>` with `<script setup>` |  |
 | [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  |
 | [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates |  |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |

docs/rules/no-undef-components-in-script-setup.md

@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-undef-components-in-script-setup
+description: disallow undefined components in `<template>` with `<script setup>`
+---
+# vue/no-undef-components-in-script-setup
+
+> disallow undefined components in `<template>` with `<script setup>`
+
+- :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 warns that the component used in the `<template>` is not defined in `<script setup>`.  
+
+Undefined components in `<script setup>` will be resolved from the components registered in the global. However, if you are not using global components, you can use this rule to prevent run-time errors.
+
+<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error']}">
+
+```vue
+<script setup>
+import Foo from './Foo.vue'
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <Foo />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-undef-components-in-script-setup": ["error", {
+    "ignorePatterns": []
+  }]
+}
+```
+
+- `ignorePatterns` Suppresses all errors if component name matches one or more patterns.
+
+### `ignorePatterns: ['custom(\\-\\w+)+']`
+
+<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+
+```vue
+<script setup>
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <CustomComponent />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-unregistered-components](./no-unregistered-components.md)
+- [vue/no-undef-properties](./no-undef-properties.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-undef-components-in-script-setup.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-undef-components-in-script-setup.js)

lib/index.js

@@ -128,6 +128,7 @@ module.exports = {
     'no-template-target-blank': require('./rules/no-template-target-blank'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
     'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
+    'no-undef-components-in-script-setup': require('./rules/no-undef-components-in-script-setup'),
     'no-undef-properties': require('./rules/no-undef-properties'),
     'no-unregistered-components': require('./rules/no-unregistered-components'),
     'no-unsupported-features': require('./rules/no-unsupported-features'),

lib/rules/no-undef-components-in-script-setup.js

@@ -0,0 +1,144 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow undefined components in `<template>` with `<script setup>`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-undef-components-in-script-setup.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignorePatterns: {
+            type: 'array'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      undef:
+        "The '<{{name}}>' component has been used, but not defined in <script setup>."
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    if (!utils.isScriptSetup(context)) {
+      return {}
+    }
+    const options = context.options[0] || {}
+    /** @type {string[]} */
+    const ignorePatterns = options.ignorePatterns || []
+
+    /** @type {Set<string>} */
+    const scriptVariableNames = new Set()
+    const globalScope = context.getSourceCode().scopeManager.globalScope
+    if (globalScope) {
+      for (const variable of globalScope.variables) {
+        scriptVariableNames.add(variable.name)
+      }
+      const moduleScope = globalScope.childScopes.find(
+        (scope) => scope.type === 'module'
+      )
+      for (const variable of (moduleScope && moduleScope.variables) || []) {
+        scriptVariableNames.add(variable.name)
+      }
+    }
+    /**
+     * `casing.camelCase()` converts the beginning to lowercase,
+     * but does not convert the case of the beginning character when converting with Vue3.
+     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/shared/src/index.ts#L105
+     * @param {string} str
+     */
+    function camelize(str) {
+      return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+    }
+    /**
+     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
+     * @param {string} name
+     */
+    function existsSetupReference(name) {
+      if (scriptVariableNames.has(name)) {
+        return true
+      }
+      const camelName = camelize(name)
+      if (scriptVariableNames.has(camelName)) {
+        return true
+      }
+      const pascalName = casing.capitalize(camelName)
+      if (scriptVariableNames.has(pascalName)) {
+        return true
+      }
+      return false
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (
+          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+          (node.rawName === node.name &&
+            (utils.isHtmlWellKnownElementName(node.rawName) ||
+              utils.isSvgWellKnownElementName(node.rawName))) ||
+          utils.isBuiltInComponentName(node.rawName)
+        ) {
+          return
+        }
+        if (existsSetupReference(node.rawName)) {
+          return
+        }
+        // Check namespace
+        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
+        const dotIndex = node.rawName.indexOf('.')
+        if (dotIndex > 0) {
+          if (existsSetupReference(node.rawName.slice(0, dotIndex))) {
+            return
+          }
+        }
+
+        // Check ignored patterns
+        if (
+          ignorePatterns.some((pattern) => {
+            const regExp = new RegExp(pattern)
+            return (
+              regExp.test(node.rawName) ||
+              regExp.test(casing.kebabCase(node.rawName)) ||
+              regExp.test(casing.pascalCase(node.rawName)) ||
+              regExp.test(casing.camelCase(node.rawName)) ||
+              regExp.test(casing.snakeCase(node.rawName))
+            )
+          })
+        ) {
+          return
+        }
+
+        context.report({
+          node: node.startTag,
+          messageId: 'undef',
+          data: {
+            name: node.rawName
+          }
+        })
+      }
+    })
+  }
+}