custom-event-name-casing.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. /**
  2. * @author Yosuke Ota
  3. * See LICENSE file in root directory for full license.
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const { findVariable } = require('eslint-utils')
  10. const utils = require('../utils')
  11. const casing = require('../utils/casing')
  12. const { toRegExp } = require('../utils/regexp')
  13. /**
  14. * @typedef {import('../utils').VueObjectData} VueObjectData
  15. */
  16. // ------------------------------------------------------------------------------
  17. // Helpers
  18. // ------------------------------------------------------------------------------
  19. const ALLOWED_CASE_OPTIONS = ['kebab-case', 'camelCase']
  20. const DEFAULT_CASE = 'kebab-case'
  21. /**
  22. * Get the name param node from the given CallExpression
  23. * @param {CallExpression} node CallExpression
  24. * @returns { Literal & { value: string } | null }
  25. */
  26. function getNameParamNode(node) {
  27. const nameLiteralNode = node.arguments[0]
  28. if (
  29. !nameLiteralNode ||
  30. nameLiteralNode.type !== 'Literal' ||
  31. typeof nameLiteralNode.value !== 'string'
  32. ) {
  33. // cannot check
  34. return null
  35. }
  36. return /** @type {Literal & { value: string }} */ (nameLiteralNode)
  37. }
  38. /**
  39. * Get the callee member node from the given CallExpression
  40. * @param {CallExpression} node CallExpression
  41. */
  42. function getCalleeMemberNode(node) {
  43. const callee = utils.skipChainExpression(node.callee)
  44. if (callee.type === 'MemberExpression') {
  45. const name = utils.getStaticPropertyName(callee)
  46. if (name) {
  47. return { name, member: callee }
  48. }
  49. }
  50. return null
  51. }
  52. // ------------------------------------------------------------------------------
  53. // Rule Definition
  54. // ------------------------------------------------------------------------------
  55. const OBJECT_OPTION_SCHEMA = {
  56. type: 'object',
  57. properties: {
  58. ignores: {
  59. type: 'array',
  60. items: { type: 'string' },
  61. uniqueItems: true,
  62. additionalItems: false
  63. }
  64. },
  65. additionalProperties: false
  66. }
  67. module.exports = {
  68. meta: {
  69. type: 'suggestion',
  70. docs: {
  71. description: 'enforce specific casing for custom event name',
  72. categories: undefined,
  73. url: 'https://eslint.vuejs.org/rules/custom-event-name-casing.html'
  74. },
  75. fixable: null,
  76. schema: {
  77. anyOf: [
  78. {
  79. type: 'array',
  80. items: [
  81. {
  82. enum: ALLOWED_CASE_OPTIONS
  83. },
  84. OBJECT_OPTION_SCHEMA
  85. ]
  86. },
  87. // For backward compatibility
  88. {
  89. type: 'array',
  90. items: [OBJECT_OPTION_SCHEMA]
  91. }
  92. ]
  93. },
  94. messages: {
  95. unexpected: "Custom event name '{{name}}' must be {{caseType}}."
  96. }
  97. },
  98. /** @param {RuleContext} context */
  99. create(context) {
  100. /** @type {Map<ObjectExpression|Program, {contextReferenceIds:Set<Identifier>,emitReferenceIds:Set<Identifier>}>} */
  101. const setupContexts = new Map()
  102. const options =
  103. context.options.length === 1 && typeof context.options[0] !== 'string'
  104. ? // For backward compatibility
  105. [undefined, context.options[0]]
  106. : context.options
  107. const caseType = options[0] || DEFAULT_CASE
  108. const objectOption = options[1] || {}
  109. const caseChecker = casing.getChecker(caseType)
  110. /** @type {RegExp[]} */
  111. const ignores = (objectOption.ignores || []).map(toRegExp)
  112. /**
  113. * Check whether the given event name is valid.
  114. * @param {string} name The name to check.
  115. * @returns {boolean} `true` if the given event name is valid.
  116. */
  117. function isValidEventName(name) {
  118. return caseChecker(name) || name.startsWith('update:')
  119. }
  120. /**
  121. * @param { Literal & { value: string } } nameLiteralNode
  122. */
  123. function verify(nameLiteralNode) {
  124. const name = nameLiteralNode.value
  125. if (isValidEventName(name) || ignores.some((re) => re.test(name))) {
  126. return
  127. }
  128. context.report({
  129. node: nameLiteralNode,
  130. messageId: 'unexpected',
  131. data: {
  132. name,
  133. caseType
  134. }
  135. })
  136. }
  137. const programNode = context.getSourceCode().ast
  138. const callVisitor = {
  139. /**
  140. * @param {CallExpression} node
  141. * @param {VueObjectData} [info]
  142. */
  143. CallExpression(node, info) {
  144. const nameLiteralNode = getNameParamNode(node)
  145. if (!nameLiteralNode) {
  146. // cannot check
  147. return
  148. }
  149. // verify setup context
  150. const setupContext = setupContexts.get(info ? info.node : programNode)
  151. if (setupContext) {
  152. const { contextReferenceIds, emitReferenceIds } = setupContext
  153. if (
  154. node.callee.type === 'Identifier' &&
  155. emitReferenceIds.has(node.callee)
  156. ) {
  157. // verify setup(props,{emit}) {emit()}
  158. verify(nameLiteralNode)
  159. } else {
  160. const emit = getCalleeMemberNode(node)
  161. if (
  162. emit &&
  163. emit.name === 'emit' &&
  164. emit.member.object.type === 'Identifier' &&
  165. contextReferenceIds.has(emit.member.object)
  166. ) {
  167. // verify setup(props,context) {context.emit()}
  168. verify(nameLiteralNode)
  169. }
  170. }
  171. }
  172. }
  173. }
  174. return utils.defineTemplateBodyVisitor(
  175. context,
  176. {
  177. CallExpression(node) {
  178. const callee = node.callee
  179. const nameLiteralNode = getNameParamNode(node)
  180. if (!nameLiteralNode) {
  181. // cannot check
  182. return
  183. }
  184. if (callee.type === 'Identifier' && callee.name === '$emit') {
  185. verify(nameLiteralNode)
  186. }
  187. }
  188. },
  189. utils.compositingVisitors(
  190. utils.defineScriptSetupVisitor(context, {
  191. onDefineEmitsEnter(node) {
  192. if (
  193. !node.parent ||
  194. node.parent.type !== 'VariableDeclarator' ||
  195. node.parent.init !== node
  196. ) {
  197. return
  198. }
  199. const emitParam = node.parent.id
  200. if (emitParam.type !== 'Identifier') {
  201. return
  202. }
  203. // const emit = defineEmits()
  204. const variable = findVariable(context.getScope(), emitParam)
  205. if (!variable) {
  206. return
  207. }
  208. const emitReferenceIds = new Set()
  209. for (const reference of variable.references) {
  210. emitReferenceIds.add(reference.identifier)
  211. }
  212. setupContexts.set(programNode, {
  213. contextReferenceIds: new Set(),
  214. emitReferenceIds
  215. })
  216. },
  217. ...callVisitor
  218. }),
  219. utils.defineVueVisitor(context, {
  220. onSetupFunctionEnter(node, { node: vueNode }) {
  221. const contextParam = utils.skipDefaultParamValue(node.params[1])
  222. if (!contextParam) {
  223. // no arguments
  224. return
  225. }
  226. if (
  227. contextParam.type === 'RestElement' ||
  228. contextParam.type === 'ArrayPattern'
  229. ) {
  230. // cannot check
  231. return
  232. }
  233. const contextReferenceIds = new Set()
  234. const emitReferenceIds = new Set()
  235. if (contextParam.type === 'ObjectPattern') {
  236. const emitProperty = utils.findAssignmentProperty(
  237. contextParam,
  238. 'emit'
  239. )
  240. if (!emitProperty || emitProperty.value.type !== 'Identifier') {
  241. return
  242. }
  243. const emitParam = emitProperty.value
  244. // `setup(props, {emit})`
  245. const variable = findVariable(context.getScope(), emitParam)
  246. if (!variable) {
  247. return
  248. }
  249. for (const reference of variable.references) {
  250. emitReferenceIds.add(reference.identifier)
  251. }
  252. } else {
  253. // `setup(props, context)`
  254. const variable = findVariable(context.getScope(), contextParam)
  255. if (!variable) {
  256. return
  257. }
  258. for (const reference of variable.references) {
  259. contextReferenceIds.add(reference.identifier)
  260. }
  261. }
  262. setupContexts.set(vueNode, {
  263. contextReferenceIds,
  264. emitReferenceIds
  265. })
  266. },
  267. ...callVisitor,
  268. onVueObjectExit(node) {
  269. setupContexts.delete(node)
  270. }
  271. }),
  272. {
  273. CallExpression(node) {
  274. const nameLiteralNode = getNameParamNode(node)
  275. if (!nameLiteralNode) {
  276. // cannot check
  277. return
  278. }
  279. const emit = getCalleeMemberNode(node)
  280. // verify $emit
  281. if (emit && emit.name === '$emit') {
  282. // verify this.$emit()
  283. verify(nameLiteralNode)
  284. }
  285. }
  286. }
  287. )
  288. )
  289. }
  290. }