149 lines
4.3 KiB
JavaScript
149 lines
4.3 KiB
JavaScript
|
/**
|
||
|
* @author Toru Nagashima
|
||
|
* See LICENSE file in root directory for full license.
|
||
|
*/
|
||
|
'use strict'
|
||
|
|
||
|
const { pascalCase } = require('../utils/casing')
|
||
|
const utils = require('../utils')
|
||
|
|
||
|
/**
|
||
|
* @typedef {Object} Options
|
||
|
* @property {"shorthand" | "longform" | "v-slot"} atComponent The style for the default slot at a custom component directly.
|
||
|
* @property {"shorthand" | "longform" | "v-slot"} default The style for the default slot at a template wrapper.
|
||
|
* @property {"shorthand" | "longform"} named The style for named slots at a template wrapper.
|
||
|
*/
|
||
|
|
||
|
/**
|
||
|
* Normalize options.
|
||
|
* @param {any} options The raw options to normalize.
|
||
|
* @returns {Options} The normalized options.
|
||
|
*/
|
||
|
function normalizeOptions (options) {
|
||
|
const normalized = {
|
||
|
atComponent: 'v-slot',
|
||
|
default: 'shorthand',
|
||
|
named: 'shorthand'
|
||
|
}
|
||
|
|
||
|
if (typeof options === 'string') {
|
||
|
normalized.atComponent = normalized.default = normalized.named = options
|
||
|
} else if (options != null) {
|
||
|
for (const key of ['atComponent', 'default', 'named']) {
|
||
|
if (options[key] != null) {
|
||
|
normalized[key] = options[key]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return normalized
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get the expected style.
|
||
|
* @param {Options} options The options that defined expected types.
|
||
|
* @param {VAttribute} node The `v-slot` node to check.
|
||
|
* @returns {"shorthand" | "longform" | "v-slot"} The expected style.
|
||
|
*/
|
||
|
function getExpectedStyle (options, node) {
|
||
|
const { argument } = node.key
|
||
|
|
||
|
if (argument == null || (argument.type === 'VIdentifier' && argument.name === 'default')) {
|
||
|
const element = node.parent.parent
|
||
|
return element.name === 'template' ? options.default : options.atComponent
|
||
|
}
|
||
|
return options.named
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get the expected style.
|
||
|
* @param {VAttribute} node The `v-slot` node to check.
|
||
|
* @returns {"shorthand" | "longform" | "v-slot"} The expected style.
|
||
|
*/
|
||
|
function getActualStyle (node) {
|
||
|
const { name, argument } = node.key
|
||
|
|
||
|
if (name.rawName === '#') {
|
||
|
return 'shorthand'
|
||
|
}
|
||
|
if (argument != null) {
|
||
|
return 'longform'
|
||
|
}
|
||
|
return 'v-slot'
|
||
|
}
|
||
|
|
||
|
module.exports = {
|
||
|
meta: {
|
||
|
type: 'suggestion',
|
||
|
docs: {
|
||
|
description: 'enforce `v-slot` directive style',
|
||
|
category: undefined, // strongly-recommended
|
||
|
// TODO Change with major version.
|
||
|
// category: 'strongly-recommended',
|
||
|
url: 'https://eslint.vuejs.org/rules/v-slot-style.html'
|
||
|
},
|
||
|
fixable: 'code',
|
||
|
schema: [
|
||
|
{
|
||
|
anyOf: [
|
||
|
{ enum: ['shorthand', 'longform'] },
|
||
|
{
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
atComponent: { enum: ['shorthand', 'longform', 'v-slot'] },
|
||
|
default: { enum: ['shorthand', 'longform', 'v-slot'] },
|
||
|
named: { enum: ['shorthand', 'longform'] }
|
||
|
},
|
||
|
additionalProperties: false
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
],
|
||
|
messages: {
|
||
|
expectedShorthand: "Expected '#{{argument}}' instead of '{{actual}}'.",
|
||
|
expectedLongform: "Expected 'v-slot:{{argument}}' instead of '{{actual}}'.",
|
||
|
expectedVSlot: "Expected 'v-slot' instead of '{{actual}}'."
|
||
|
}
|
||
|
},
|
||
|
|
||
|
create (context) {
|
||
|
const sourceCode = context.getSourceCode()
|
||
|
const options = normalizeOptions(context.options[0])
|
||
|
|
||
|
return utils.defineTemplateBodyVisitor(context, {
|
||
|
"VAttribute[directive=true][key.name.name='slot']" (node) {
|
||
|
const expected = getExpectedStyle(options, node)
|
||
|
const actual = getActualStyle(node)
|
||
|
if (actual === expected) {
|
||
|
return
|
||
|
}
|
||
|
|
||
|
const { name, argument } = node.key
|
||
|
const range = [name.range[0], (argument || name).range[1]]
|
||
|
const argumentText = argument ? sourceCode.getText(argument) : 'default'
|
||
|
context.report({
|
||
|
node,
|
||
|
messageId: `expected${pascalCase(expected)}`,
|
||
|
data: {
|
||
|
actual: sourceCode.text.slice(range[0], range[1]),
|
||
|
argument: argumentText
|
||
|
},
|
||
|
|
||
|
fix (fixer) {
|
||
|
switch (expected) {
|
||
|
case 'shorthand':
|
||
|
return fixer.replaceTextRange(range, `#${argumentText}`)
|
||
|
case 'longform':
|
||
|
return fixer.replaceTextRange(range, `v-slot:${argumentText}`)
|
||
|
case 'v-slot':
|
||
|
return fixer.replaceTextRange(range, 'v-slot')
|
||
|
default:
|
||
|
return null
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|