no-child-content.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /**
  2. * @author Flo Edelmann
  3. * See LICENSE file in root directory for full license.
  4. */
  5. 'use strict'
  6. const { defineTemplateBodyVisitor } = require('../utils')
  7. /**
  8. * @typedef {object} RuleOption
  9. * @property {string[]} additionalDirectives
  10. */
  11. /**
  12. * @param {VNode | Token} node
  13. * @returns {boolean}
  14. */
  15. function isWhiteSpaceTextNode(node) {
  16. return node.type === 'VText' && node.value.trim() === ''
  17. }
  18. /**
  19. * @param {Position} pos1
  20. * @param {Position} pos2
  21. * @returns {'less' | 'equal' | 'greater'}
  22. */
  23. function comparePositions(pos1, pos2) {
  24. if (
  25. pos1.line < pos2.line ||
  26. (pos1.line === pos2.line && pos1.column < pos2.column)
  27. ) {
  28. return 'less'
  29. }
  30. if (
  31. pos1.line > pos2.line ||
  32. (pos1.line === pos2.line && pos1.column > pos2.column)
  33. ) {
  34. return 'greater'
  35. }
  36. return 'equal'
  37. }
  38. /**
  39. * @param {(VNode | Token)[]} nodes
  40. * @returns {SourceLocation | undefined}
  41. */
  42. function getLocationRange(nodes) {
  43. /** @type {Position | undefined} */
  44. let start
  45. /** @type {Position | undefined} */
  46. let end
  47. for (const node of nodes) {
  48. if (!start || comparePositions(node.loc.start, start) === 'less') {
  49. start = node.loc.start
  50. }
  51. if (!end || comparePositions(node.loc.end, end) === 'greater') {
  52. end = node.loc.end
  53. }
  54. }
  55. if (start === undefined || end === undefined) {
  56. return undefined
  57. }
  58. return { start, end }
  59. }
  60. module.exports = {
  61. meta: {
  62. type: 'problem',
  63. docs: {
  64. description:
  65. "disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`",
  66. categories: ['vue3-essential', 'vue2-essential'],
  67. url: 'https://eslint.vuejs.org/rules/no-child-content.html'
  68. },
  69. fixable: null,
  70. hasSuggestions: true,
  71. schema: [
  72. {
  73. type: 'object',
  74. additionalProperties: false,
  75. properties: {
  76. additionalDirectives: {
  77. type: 'array',
  78. uniqueItems: true,
  79. minItems: 1,
  80. items: {
  81. type: 'string'
  82. }
  83. }
  84. },
  85. required: ['additionalDirectives']
  86. }
  87. ],
  88. messages: {
  89. disallowedChildContent:
  90. 'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
  91. removeChildContent: 'Remove child content.'
  92. }
  93. },
  94. /** @param {RuleContext} context */
  95. create(context) {
  96. const directives = new Set(['html', 'text'])
  97. /** @type {RuleOption | undefined} */
  98. const option = context.options[0]
  99. if (option !== undefined) {
  100. for (const directive of option.additionalDirectives) {
  101. directives.add(directive)
  102. }
  103. }
  104. return defineTemplateBodyVisitor(context, {
  105. /** @param {VDirective} directiveNode */
  106. 'VAttribute[directive=true]'(directiveNode) {
  107. const directiveName = directiveNode.key.name.name
  108. const elementNode = directiveNode.parent.parent
  109. if (elementNode.endTag === null) {
  110. return
  111. }
  112. const sourceCode = context.getSourceCode()
  113. const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
  114. const elementComments = tokenStore.getTokensBetween(
  115. elementNode.startTag,
  116. elementNode.endTag,
  117. {
  118. includeComments: true,
  119. filter: (token) => token.type === 'HTMLComment'
  120. }
  121. )
  122. const childNodes = [...elementNode.children, ...elementComments]
  123. if (
  124. directives.has(directiveName) &&
  125. childNodes.some((childNode) => !isWhiteSpaceTextNode(childNode))
  126. ) {
  127. context.report({
  128. node: elementNode,
  129. loc: getLocationRange(childNodes),
  130. messageId: 'disallowedChildContent',
  131. data: { directiveName },
  132. suggest: [
  133. {
  134. messageId: 'removeChildContent',
  135. *fix(fixer) {
  136. for (const childNode of childNodes) {
  137. yield fixer.remove(childNode)
  138. }
  139. }
  140. }
  141. ]
  142. })
  143. }
  144. }
  145. })
  146. }
  147. }