You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
7.8 KiB
308 lines
7.8 KiB
/**
|
|
* @author Yosuke Ota <https://github.com/ota-meshi>
|
|
* See LICENSE file in root directory for full license.
|
|
*/
|
|
'use strict'
|
|
|
|
const utils = require('../utils')
|
|
|
|
/**
|
|
* @typedef { 'script-setup' | 'composition' | 'composition-vue2' | 'options' } PreferOption
|
|
*
|
|
* @typedef {PreferOption[]} UserPreferOption
|
|
*
|
|
* @typedef {object} NormalizeOptions
|
|
* @property {object} allowsSFC
|
|
* @property {boolean} [allowsSFC.scriptSetup]
|
|
* @property {boolean} [allowsSFC.composition]
|
|
* @property {boolean} [allowsSFC.compositionVue2]
|
|
* @property {boolean} [allowsSFC.options]
|
|
* @property {object} allowsOther
|
|
* @property {boolean} [allowsOther.composition]
|
|
* @property {boolean} [allowsOther.compositionVue2]
|
|
* @property {boolean} [allowsOther.options]
|
|
*/
|
|
|
|
/** @type {PreferOption[]} */
|
|
const STYLE_OPTIONS = [
|
|
'script-setup',
|
|
'composition',
|
|
'composition-vue2',
|
|
'options'
|
|
]
|
|
|
|
/**
|
|
* Normalize options.
|
|
* @param {any[]} options The options user configured.
|
|
* @returns {NormalizeOptions} The normalized options.
|
|
*/
|
|
function parseOptions(options) {
|
|
/** @type {NormalizeOptions} */
|
|
const opts = { allowsSFC: {}, allowsOther: {} }
|
|
|
|
/** @type {UserPreferOption} */
|
|
const preferOptions = options[0] || ['script-setup', 'composition']
|
|
for (const prefer of preferOptions) {
|
|
switch (prefer) {
|
|
case 'script-setup': {
|
|
opts.allowsSFC.scriptSetup = true
|
|
break
|
|
}
|
|
case 'composition': {
|
|
opts.allowsSFC.composition = true
|
|
opts.allowsOther.composition = true
|
|
break
|
|
}
|
|
case 'composition-vue2': {
|
|
opts.allowsSFC.compositionVue2 = true
|
|
opts.allowsOther.compositionVue2 = true
|
|
break
|
|
}
|
|
case 'options': {
|
|
opts.allowsSFC.options = true
|
|
opts.allowsOther.options = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (
|
|
!opts.allowsOther.composition &&
|
|
!opts.allowsOther.compositionVue2 &&
|
|
!opts.allowsOther.options
|
|
) {
|
|
opts.allowsOther.composition = true
|
|
opts.allowsOther.compositionVue2 = true
|
|
opts.allowsOther.options = true
|
|
}
|
|
|
|
return opts
|
|
}
|
|
|
|
const OPTIONS_API_OPTIONS = new Set([
|
|
'mixins',
|
|
'extends',
|
|
// state
|
|
'data',
|
|
'computed',
|
|
'methods',
|
|
'watch',
|
|
'provide',
|
|
'inject',
|
|
// lifecycle
|
|
'beforeCreate',
|
|
'created',
|
|
'beforeMount',
|
|
'mounted',
|
|
'beforeUpdate',
|
|
'updated',
|
|
'activated',
|
|
'deactivated',
|
|
'beforeDestroy',
|
|
'beforeUnmount',
|
|
'destroyed',
|
|
'unmounted',
|
|
'render',
|
|
'renderTracked',
|
|
'renderTriggered',
|
|
'errorCaptured',
|
|
// public API
|
|
'expose'
|
|
])
|
|
const COMPOSITION_API_OPTIONS = new Set(['setup'])
|
|
|
|
const COMPOSITION_API_VUE2_OPTIONS = new Set([
|
|
'setup',
|
|
'render', // https://github.com/vuejs/composition-api#template-refs
|
|
'renderTracked', // https://github.com/vuejs/composition-api#missing-apis
|
|
'renderTriggered' // https://github.com/vuejs/composition-api#missing-apis
|
|
])
|
|
|
|
const LIFECYCLE_HOOK_OPTIONS = new Set([
|
|
'beforeCreate',
|
|
'created',
|
|
'beforeMount',
|
|
'mounted',
|
|
'beforeUpdate',
|
|
'updated',
|
|
'activated',
|
|
'deactivated',
|
|
'beforeDestroy',
|
|
'beforeUnmount',
|
|
'destroyed',
|
|
'unmounted',
|
|
'renderTracked',
|
|
'renderTriggered',
|
|
'errorCaptured'
|
|
])
|
|
|
|
/**
|
|
* @typedef { 'script-setup' | 'composition' | 'options' } ApiStyle
|
|
*/
|
|
|
|
/**
|
|
* @param {object} allowsOpt
|
|
* @param {boolean} [allowsOpt.scriptSetup]
|
|
* @param {boolean} [allowsOpt.composition]
|
|
* @param {boolean} [allowsOpt.compositionVue2]
|
|
* @param {boolean} [allowsOpt.options]
|
|
*/
|
|
function buildAllowedPhrase(allowsOpt) {
|
|
const phrases = []
|
|
if (allowsOpt.scriptSetup) {
|
|
phrases.push('`<script setup>`')
|
|
}
|
|
if (allowsOpt.composition) {
|
|
phrases.push('Composition API')
|
|
}
|
|
if (allowsOpt.compositionVue2) {
|
|
phrases.push('Composition API (Vue 2)')
|
|
}
|
|
if (allowsOpt.options) {
|
|
phrases.push('Options API')
|
|
}
|
|
return phrases.length > 2
|
|
? `${phrases.slice(0, -1).join(', ')} or ${phrases.slice(-1)[0]}`
|
|
: phrases.join(' or ')
|
|
}
|
|
|
|
/**
|
|
* @param {object} allowsOpt
|
|
* @param {boolean} [allowsOpt.scriptSetup]
|
|
* @param {boolean} [allowsOpt.composition]
|
|
* @param {boolean} [allowsOpt.compositionVue2]
|
|
* @param {boolean} [allowsOpt.options]
|
|
*/
|
|
function isPreferScriptSetup(allowsOpt) {
|
|
if (
|
|
!allowsOpt.scriptSetup ||
|
|
allowsOpt.composition ||
|
|
allowsOpt.compositionVue2 ||
|
|
allowsOpt.options
|
|
) {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
*/
|
|
function buildOptionPhrase(name) {
|
|
if (LIFECYCLE_HOOK_OPTIONS.has(name)) return `\`${name}\` lifecycle hook`
|
|
|
|
return name === 'setup' || name === 'render'
|
|
? `\`${name}\` function`
|
|
: `\`${name}\` option`
|
|
}
|
|
|
|
module.exports = {
|
|
meta: {
|
|
type: 'suggestion',
|
|
docs: {
|
|
description: 'enforce component API style',
|
|
categories: undefined,
|
|
url: 'https://eslint.vuejs.org/rules/component-api-style.html'
|
|
},
|
|
fixable: null,
|
|
schema: [
|
|
{
|
|
type: 'array',
|
|
items: {
|
|
enum: STYLE_OPTIONS,
|
|
uniqueItems: true,
|
|
additionalItems: false
|
|
},
|
|
minItems: 1
|
|
}
|
|
],
|
|
messages: {
|
|
disallowScriptSetup:
|
|
'`<script setup>` is not allowed in your project. Use {{allowedApis}} instead.',
|
|
disallowComponentOption:
|
|
'{{disallowedApi}} is not allowed in your project. {{optionPhrase}} is part of the {{disallowedApi}}. Use {{allowedApis}} instead.',
|
|
disallowComponentOptionPreferScriptSetup:
|
|
'{{disallowedApi}} is not allowed in your project. Use `<script setup>` instead.'
|
|
}
|
|
},
|
|
/** @param {RuleContext} context */
|
|
create(context) {
|
|
const options = parseOptions(context.options)
|
|
|
|
return utils.compositingVisitors(
|
|
{
|
|
Program() {
|
|
if (options.allowsSFC.scriptSetup) {
|
|
return
|
|
}
|
|
const scriptSetup = utils.getScriptSetupElement(context)
|
|
if (scriptSetup) {
|
|
context.report({
|
|
node: scriptSetup.startTag,
|
|
messageId: 'disallowScriptSetup',
|
|
data: {
|
|
allowedApis: buildAllowedPhrase(options.allowsSFC)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
utils.defineVueVisitor(context, {
|
|
onVueObjectEnter(node) {
|
|
const allows = utils.isSFCObject(context, node)
|
|
? options.allowsSFC
|
|
: options.allowsOther
|
|
if (
|
|
(allows.composition || allows.compositionVue2) &&
|
|
allows.options
|
|
) {
|
|
return
|
|
}
|
|
const apis = [
|
|
{
|
|
allow: allows.composition,
|
|
options: COMPOSITION_API_OPTIONS,
|
|
apiName: 'Composition API'
|
|
},
|
|
{
|
|
allow: allows.options,
|
|
options: OPTIONS_API_OPTIONS,
|
|
apiName: 'Options API'
|
|
},
|
|
{
|
|
allow: allows.compositionVue2,
|
|
options: COMPOSITION_API_VUE2_OPTIONS,
|
|
apiName: 'Composition API (Vue 2)'
|
|
}
|
|
]
|
|
for (const prop of node.properties) {
|
|
if (prop.type !== 'Property') {
|
|
continue
|
|
}
|
|
const name = utils.getStaticPropertyName(prop)
|
|
if (!name) {
|
|
continue
|
|
}
|
|
const disallowApi =
|
|
!apis.some((api) => api.allow && api.options.has(name)) &&
|
|
apis.find((api) => !api.allow && api.options.has(name))
|
|
|
|
if (disallowApi) {
|
|
context.report({
|
|
node: prop.key,
|
|
messageId: isPreferScriptSetup(allows)
|
|
? 'disallowComponentOptionPreferScriptSetup'
|
|
: 'disallowComponentOption',
|
|
data: {
|
|
disallowedApi: disallowApi.apiName,
|
|
optionPhrase: buildOptionPhrase(name),
|
|
allowedApis: buildAllowedPhrase(allows)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
)
|
|
}
|
|
}
|
|
|