/
component-tags-order.js
119 lines (110 loc) · 3.2 KB
/
component-tags-order.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
* @author Yosuke Ota
* issue https://github.com/vuejs/eslint-plugin-vue/issues/140
*/
'use strict'
// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------
const utils = require('../utils')
const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'enforce order of component top-level elements',
categories: ['vue3-recommended', 'recommended'],
url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
},
fixable: null,
schema: [
{
type: 'object',
properties: {
order: {
type: 'array',
items: {
anyOf: [
{ type: 'string' },
{ type: 'array', items: { type: 'string' }, uniqueItems: true }
]
},
uniqueItems: true,
additionalItems: false
}
}
}
],
messages: {
unexpected:
'The <{{name}}> should be above the <{{firstUnorderedName}}> on line {{line}}.'
}
},
create(context) {
/** @type {Map<string, number} */
const orderMap = new Map()
;(
(context.options[0] && context.options[0].order) ||
DEFAULT_ORDER
).forEach((nameOrNames, index) => {
if (Array.isArray(nameOrNames)) {
for (const name of nameOrNames) {
orderMap.set(name, index)
}
} else {
orderMap.set(nameOrNames, index)
}
})
const documentFragment =
context.parserServices.getDocumentFragment &&
context.parserServices.getDocumentFragment()
function getTopLevelHTMLElements() {
if (documentFragment) {
return documentFragment.children.filter((e) => e.type === 'VElement')
}
return []
}
function report(element, firstUnorderedElement) {
context.report({
node: element,
loc: element.loc,
messageId: 'unexpected',
data: {
name: element.name,
firstUnorderedName: firstUnorderedElement.name,
line: firstUnorderedElement.loc.start.line
}
})
}
return utils.defineTemplateBodyVisitor(
context,
{},
{
Program(node) {
if (utils.hasInvalidEOF(node)) {
return
}
const elements = getTopLevelHTMLElements()
elements.forEach((element, index) => {
const expectedIndex = orderMap.get(element.name)
if (expectedIndex < 0) {
return
}
const firstUnordered = elements
.slice(0, index)
.filter((e) => expectedIndex < orderMap.get(e.name))
.sort(
(e1, e2) => orderMap.get(e1.name) - orderMap.get(e2.name)
)[0]
if (firstUnordered) {
report(element, firstUnordered)
}
})
}
}
)
}
}