v-slot-style.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. /**
  2. * @author Toru Nagashima
  3. * See LICENSE file in root directory for full license.
  4. */
  5. 'use strict'
  6. const { pascalCase } = require('../utils/casing')
  7. const utils = require('../utils')
  8. /**
  9. * @typedef {Object} Options
  10. * @property {"shorthand" | "longform" | "v-slot"} atComponent The style for the default slot at a custom component directly.
  11. * @property {"shorthand" | "longform" | "v-slot"} default The style for the default slot at a template wrapper.
  12. * @property {"shorthand" | "longform"} named The style for named slots at a template wrapper.
  13. */
  14. /**
  15. * Normalize options.
  16. * @param {any} options The raw options to normalize.
  17. * @returns {Options} The normalized options.
  18. */
  19. function normalizeOptions(options) {
  20. /** @type {Options} */
  21. const normalized = {
  22. atComponent: 'v-slot',
  23. default: 'shorthand',
  24. named: 'shorthand'
  25. }
  26. if (typeof options === 'string') {
  27. normalized.atComponent = normalized.default = normalized.named = /** @type {"shorthand" | "longform"} */ (options)
  28. } else if (options != null) {
  29. /** @type {(keyof Options)[]} */
  30. const keys = ['atComponent', 'default', 'named']
  31. for (const key of keys) {
  32. if (options[key] != null) {
  33. normalized[key] = options[key]
  34. }
  35. }
  36. }
  37. return normalized
  38. }
  39. /**
  40. * Get the expected style.
  41. * @param {Options} options The options that defined expected types.
  42. * @param {VDirective} node The `v-slot` node to check.
  43. * @returns {"shorthand" | "longform" | "v-slot"} The expected style.
  44. */
  45. function getExpectedStyle(options, node) {
  46. const { argument } = node.key
  47. if (
  48. argument == null ||
  49. (argument.type === 'VIdentifier' && argument.name === 'default')
  50. ) {
  51. const element = node.parent.parent
  52. return element.name === 'template' ? options.default : options.atComponent
  53. }
  54. return options.named
  55. }
  56. /**
  57. * Get the expected style.
  58. * @param {VDirective} node The `v-slot` node to check.
  59. * @returns {"shorthand" | "longform" | "v-slot"} The expected style.
  60. */
  61. function getActualStyle(node) {
  62. const { name, argument } = node.key
  63. if (name.rawName === '#') {
  64. return 'shorthand'
  65. }
  66. if (argument != null) {
  67. return 'longform'
  68. }
  69. return 'v-slot'
  70. }
  71. module.exports = {
  72. meta: {
  73. type: 'suggestion',
  74. docs: {
  75. description: 'enforce `v-slot` directive style',
  76. categories: ['vue3-strongly-recommended', 'strongly-recommended'],
  77. url: 'https://eslint.vuejs.org/rules/v-slot-style.html'
  78. },
  79. fixable: 'code',
  80. schema: [
  81. {
  82. anyOf: [
  83. { enum: ['shorthand', 'longform'] },
  84. {
  85. type: 'object',
  86. properties: {
  87. atComponent: { enum: ['shorthand', 'longform', 'v-slot'] },
  88. default: { enum: ['shorthand', 'longform', 'v-slot'] },
  89. named: { enum: ['shorthand', 'longform'] }
  90. },
  91. additionalProperties: false
  92. }
  93. ]
  94. }
  95. ],
  96. messages: {
  97. expectedShorthand: "Expected '#{{argument}}' instead of '{{actual}}'.",
  98. expectedLongform:
  99. "Expected 'v-slot:{{argument}}' instead of '{{actual}}'.",
  100. expectedVSlot: "Expected 'v-slot' instead of '{{actual}}'."
  101. }
  102. },
  103. /** @param {RuleContext} context */
  104. create(context) {
  105. const sourceCode = context.getSourceCode()
  106. const options = normalizeOptions(context.options[0])
  107. return utils.defineTemplateBodyVisitor(context, {
  108. /** @param {VDirective} node */
  109. "VAttribute[directive=true][key.name.name='slot']"(node) {
  110. const expected = getExpectedStyle(options, node)
  111. const actual = getActualStyle(node)
  112. if (actual === expected) {
  113. return
  114. }
  115. const { name, argument } = node.key
  116. /** @type {Range} */
  117. const range = [name.range[0], (argument || name).range[1]]
  118. const argumentText = argument ? sourceCode.getText(argument) : 'default'
  119. context.report({
  120. node,
  121. messageId: `expected${pascalCase(expected)}`,
  122. data: {
  123. actual: sourceCode.text.slice(range[0], range[1]),
  124. argument: argumentText
  125. },
  126. fix(fixer) {
  127. switch (expected) {
  128. case 'shorthand':
  129. return fixer.replaceTextRange(range, `#${argumentText}`)
  130. case 'longform':
  131. return fixer.replaceTextRange(range, `v-slot:${argumentText}`)
  132. case 'v-slot':
  133. return fixer.replaceTextRange(range, 'v-slot')
  134. default:
  135. return null
  136. }
  137. }
  138. })
  139. }
  140. })
  141. }
  142. }