no-unregistered-components.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /**
  2. * @fileoverview Report used components that are not registered
  3. * @author Jesús Ángel González Novez
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. const casing = require('../utils/casing')
  11. // ------------------------------------------------------------------------------
  12. // Rule helpers
  13. // ------------------------------------------------------------------------------
  14. /**
  15. * Check whether the given node is a built-in component or not.
  16. *
  17. * Includes `suspense` and `teleport` from Vue 3.
  18. *
  19. * @param {VElement} node The start tag node to check.
  20. * @returns {boolean} `true` if the node is a built-in component.
  21. */
  22. const isBuiltInComponent = (node) => {
  23. const rawName = node && casing.kebabCase(node.rawName)
  24. return (
  25. utils.isHtmlElementNode(node) &&
  26. !utils.isHtmlWellKnownElementName(node.rawName) &&
  27. utils.isBuiltInComponentName(rawName)
  28. )
  29. }
  30. // ------------------------------------------------------------------------------
  31. // Rule Definition
  32. // ------------------------------------------------------------------------------
  33. module.exports = {
  34. meta: {
  35. type: 'suggestion',
  36. docs: {
  37. description:
  38. 'disallow using components that are not registered inside templates',
  39. categories: null,
  40. recommended: false,
  41. url: 'https://eslint.vuejs.org/rules/no-unregistered-components.html'
  42. },
  43. deprecated: true,
  44. replacedBy: ['no-undef-components'],
  45. fixable: null,
  46. schema: [
  47. {
  48. type: 'object',
  49. properties: {
  50. ignorePatterns: {
  51. type: 'array'
  52. }
  53. },
  54. additionalProperties: false
  55. }
  56. ]
  57. },
  58. /** @param {RuleContext} context */
  59. create(context) {
  60. if (utils.isScriptSetup(context)) {
  61. return {}
  62. }
  63. const options = context.options[0] || {}
  64. /** @type {string[]} */
  65. const ignorePatterns = options.ignorePatterns || []
  66. /** @type { { node: VElement | VDirective | VAttribute, name: string }[] } */
  67. const usedComponentNodes = []
  68. /** @type { { node: Property, name: string }[] } */
  69. const registeredComponents = []
  70. return utils.defineTemplateBodyVisitor(
  71. context,
  72. {
  73. /** @param {VElement} node */
  74. VElement(node) {
  75. if (
  76. (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
  77. utils.isHtmlWellKnownElementName(node.rawName) ||
  78. utils.isSvgWellKnownElementName(node.rawName) ||
  79. isBuiltInComponent(node)
  80. ) {
  81. return
  82. }
  83. usedComponentNodes.push({ node, name: node.rawName })
  84. },
  85. /** @param {VDirective} node */
  86. "VAttribute[directive=true][key.name.name='bind'][key.argument.name='is'], VAttribute[directive=true][key.name.name='is']"(
  87. node
  88. ) {
  89. if (
  90. !node.value ||
  91. node.value.type !== 'VExpressionContainer' ||
  92. !node.value.expression
  93. )
  94. return
  95. if (node.value.expression.type === 'Literal') {
  96. if (
  97. utils.isHtmlWellKnownElementName(`${node.value.expression.value}`)
  98. )
  99. return
  100. usedComponentNodes.push({
  101. node,
  102. name: `${node.value.expression.value}`
  103. })
  104. }
  105. },
  106. /** @param {VAttribute} node */
  107. "VAttribute[directive=false][key.name='is']"(node) {
  108. if (
  109. !node.value // `<component is />`
  110. )
  111. return
  112. const value = node.value.value.startsWith('vue:') // Usage on native elements 3.1+
  113. ? node.value.value.slice(4)
  114. : node.value.value
  115. if (utils.isHtmlWellKnownElementName(value)) return
  116. usedComponentNodes.push({ node, name: value })
  117. },
  118. "VElement[name='template'][parent.type='VDocumentFragment']:exit"() {
  119. // All registered components, transformed to kebab-case
  120. const registeredComponentNames = registeredComponents.map(
  121. ({ name }) => casing.kebabCase(name)
  122. )
  123. // All registered components using kebab-case syntax
  124. const componentsRegisteredAsKebabCase = registeredComponents
  125. .filter(({ name }) => name === casing.kebabCase(name))
  126. .map(({ name }) => name)
  127. usedComponentNodes
  128. .filter(({ name }) => {
  129. const kebabCaseName = casing.kebabCase(name)
  130. // Check ignored patterns in first place
  131. if (
  132. ignorePatterns.find((pattern) => {
  133. const regExp = new RegExp(pattern)
  134. return (
  135. regExp.test(kebabCaseName) ||
  136. regExp.test(casing.pascalCase(name)) ||
  137. regExp.test(casing.camelCase(name)) ||
  138. regExp.test(casing.snakeCase(name)) ||
  139. regExp.test(name)
  140. )
  141. })
  142. )
  143. return false
  144. // Component registered as `foo-bar` cannot be used as `FooBar`
  145. if (
  146. casing.isPascalCase(name) &&
  147. componentsRegisteredAsKebabCase.indexOf(kebabCaseName) !== -1
  148. ) {
  149. return true
  150. }
  151. // Otherwise
  152. return registeredComponentNames.indexOf(kebabCaseName) === -1
  153. })
  154. .forEach(({ node, name }) =>
  155. context.report({
  156. node,
  157. message:
  158. 'The "{{name}}" component has been used but not registered.',
  159. data: {
  160. name
  161. }
  162. })
  163. )
  164. }
  165. },
  166. utils.executeOnVue(context, (obj) => {
  167. registeredComponents.push(...utils.getRegisteredComponents(obj))
  168. const nameProperty = utils.findProperty(obj, 'name')
  169. if (nameProperty) {
  170. if (nameProperty.value.type === 'Literal') {
  171. registeredComponents.push({
  172. node: nameProperty,
  173. name: `${nameProperty.value.value}`
  174. })
  175. }
  176. }
  177. })
  178. )
  179. }
  180. }