valid-v-is.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. /**
  2. * @fileoverview enforce valid `v-is` directives
  3. * @author Yosuke Ota
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Requirements
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. // ------------------------------------------------------------------------------
  11. // Helpers
  12. // ------------------------------------------------------------------------------
  13. /**
  14. * Check whether the given node is valid or not.
  15. * @param {VElement} node The element node to check.
  16. * @returns {boolean} `true` if the node is valid.
  17. */
  18. function isValidElement(node) {
  19. if (
  20. utils.isHtmlElementNode(node) &&
  21. !utils.isHtmlWellKnownElementName(node.rawName)
  22. ) {
  23. // Vue-component
  24. return false
  25. }
  26. return true
  27. }
  28. // ------------------------------------------------------------------------------
  29. // Rule Definition
  30. // ------------------------------------------------------------------------------
  31. module.exports = {
  32. meta: {
  33. type: 'problem',
  34. docs: {
  35. description: 'enforce valid `v-is` directives',
  36. // TODO Switch to `undefined` in the major version.
  37. // categories: undefined,
  38. categories: ['vue3-essential'],
  39. url: 'https://eslint.vuejs.org/rules/valid-v-is.html'
  40. },
  41. fixable: null,
  42. schema: [],
  43. messages: {
  44. unexpectedArgument: "'v-is' directives require no argument.",
  45. unexpectedModifier: "'v-is' directives require no modifier.",
  46. expectedValue: "'v-is' directives require that attribute value.",
  47. ownerMustBeHTMLElement:
  48. "'v-is' directive must be owned by a native HTML element, but '{{name}}' is not."
  49. }
  50. },
  51. /** @param {RuleContext} context */
  52. create(context) {
  53. return utils.defineTemplateBodyVisitor(context, {
  54. "VAttribute[directive=true][key.name.name='is']"(node) {
  55. if (node.key.argument) {
  56. context.report({
  57. node: node.key.argument,
  58. messageId: 'unexpectedArgument'
  59. })
  60. }
  61. if (node.key.modifiers.length > 0) {
  62. context.report({
  63. node,
  64. loc: {
  65. start: node.key.modifiers[0].loc.start,
  66. end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
  67. },
  68. messageId: 'unexpectedModifier'
  69. })
  70. }
  71. if (!node.value || utils.isEmptyValueDirective(node, context)) {
  72. context.report({
  73. node,
  74. messageId: 'expectedValue'
  75. })
  76. }
  77. const element = node.parent.parent
  78. if (!isValidElement(element)) {
  79. const name = element.name
  80. context.report({
  81. node,
  82. messageId: 'ownerMustBeHTMLElement',
  83. data: { name }
  84. })
  85. }
  86. }
  87. })
  88. }
  89. }