no-unsupported-features.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. /**
  2. * @author Yosuke Ota
  3. * See LICENSE file in root directory for full license.
  4. */
  5. 'use strict'
  6. const semver = require('semver')
  7. const utils = require('../utils')
  8. /**
  9. * @typedef {object} SyntaxRule
  10. * @property {string} supported
  11. * @property { (context: RuleContext) => TemplateListener } [createTemplateBodyVisitor]
  12. * @property { (context: RuleContext) => RuleListener } [createScriptVisitor]
  13. */
  14. const FEATURES = {
  15. // Vue.js 2.5.0+
  16. 'slot-scope-attribute': require('./syntaxes/slot-scope-attribute'),
  17. // Vue.js 2.6.0+
  18. 'dynamic-directive-arguments': require('./syntaxes/dynamic-directive-arguments'),
  19. 'v-slot': require('./syntaxes/v-slot'),
  20. // Vue.js 3.0.0+
  21. 'v-model-argument': require('./syntaxes/v-model-argument'),
  22. 'v-model-custom-modifiers': require('./syntaxes/v-model-custom-modifiers'),
  23. 'v-is': require('./syntaxes/v-is'),
  24. 'script-setup': require('./syntaxes/script-setup'),
  25. 'style-css-vars-injection': require('./syntaxes/style-css-vars-injection'),
  26. // Vue.js 3.1.0+
  27. 'is-attribute-with-vue-prefix': require('./syntaxes/is-attribute-with-vue-prefix'),
  28. // Vue.js 3.2.0+
  29. 'v-memo': require('./syntaxes/v-memo'),
  30. 'v-bind-prop-modifier-shorthand': require('./syntaxes/v-bind-prop-modifier-shorthand'),
  31. 'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier')
  32. }
  33. const SYNTAX_NAMES = /** @type {(keyof FEATURES)[]} */ (Object.keys(FEATURES))
  34. const cache = new Map()
  35. /**
  36. * Get the `semver.Range` object of a given range text.
  37. * @param {string} x The text expression for a semver range.
  38. * @returns {semver.Range} The range object of a given range text.
  39. * It's null if the `x` is not a valid range text.
  40. */
  41. function getSemverRange(x) {
  42. const s = String(x)
  43. let ret = cache.get(s) || null
  44. if (!ret) {
  45. try {
  46. ret = new semver.Range(s)
  47. } catch (_error) {
  48. // Ignore parsing error.
  49. }
  50. cache.set(s, ret)
  51. }
  52. return ret
  53. }
  54. module.exports = {
  55. meta: {
  56. type: 'suggestion',
  57. docs: {
  58. description:
  59. 'disallow unsupported Vue.js syntax on the specified version',
  60. categories: undefined,
  61. url: 'https://eslint.vuejs.org/rules/no-unsupported-features.html'
  62. },
  63. fixable: 'code',
  64. schema: [
  65. {
  66. type: 'object',
  67. properties: {
  68. version: {
  69. type: 'string'
  70. },
  71. ignores: {
  72. type: 'array',
  73. items: {
  74. enum: SYNTAX_NAMES
  75. },
  76. uniqueItems: true
  77. }
  78. },
  79. additionalProperties: false
  80. }
  81. ],
  82. messages: {
  83. // Vue.js 2.5.0+
  84. forbiddenSlotScopeAttribute:
  85. '`slot-scope` are not supported except Vue.js ">=2.5.0 <3.0.0".',
  86. // Vue.js 2.6.0+
  87. forbiddenDynamicDirectiveArguments:
  88. 'Dynamic arguments are not supported until Vue.js "2.6.0".',
  89. forbiddenVSlot: '`v-slot` are not supported until Vue.js "2.6.0".',
  90. // Vue.js 3.0.0+
  91. forbiddenVModelArgument:
  92. 'Argument on `v-model` is not supported until Vue.js "3.0.0".',
  93. forbiddenVModelCustomModifiers:
  94. 'Custom modifiers on `v-model` are not supported until Vue.js "3.0.0".',
  95. forbiddenVIs: '`v-is` are not supported until Vue.js "3.0.0".',
  96. forbiddenScriptSetup:
  97. '`<script setup>` are not supported until Vue.js "3.0.0".',
  98. forbiddenStyleCssVarsInjection:
  99. 'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
  100. // Vue.js 3.1.0+
  101. forbiddenIsAttributeWithVuePrefix:
  102. '`is="vue:"` are not supported until Vue.js "3.1.0".',
  103. // Vue.js 3.2.0+
  104. forbiddenVMemo: '`v-memo` are not supported until Vue.js "3.2.0".',
  105. forbiddenVBindPropModifierShorthand:
  106. '`.prop` shorthand are not supported until Vue.js "3.2.0".',
  107. forbiddenVBindAttrModifier:
  108. '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".'
  109. }
  110. },
  111. /** @param {RuleContext} context */
  112. create(context) {
  113. const { version, ignores } = Object.assign(
  114. {
  115. version: null,
  116. ignores: []
  117. },
  118. context.options[0] || {}
  119. )
  120. if (!version) {
  121. // version is not set.
  122. return {}
  123. }
  124. const versionRange = getSemverRange(version)
  125. /**
  126. * Check whether a given case object is full-supported on the configured node version.
  127. * @param {SyntaxRule} aCase The case object to check.
  128. * @returns {boolean} `true` if it's supporting.
  129. */
  130. function isNotSupportingVersion(aCase) {
  131. return !semverSubset(versionRange, getSemverRange(aCase.supported))
  132. }
  133. /** @type {TemplateListener} */
  134. let templateBodyVisitor = {}
  135. /** @type {RuleListener} */
  136. let scriptVisitor = {}
  137. for (const syntaxName of SYNTAX_NAMES) {
  138. /** @type {SyntaxRule} */
  139. const syntax = FEATURES[syntaxName]
  140. if (ignores.includes(syntaxName) || !isNotSupportingVersion(syntax)) {
  141. continue
  142. }
  143. if (syntax.createTemplateBodyVisitor) {
  144. const visitor = syntax.createTemplateBodyVisitor(context)
  145. templateBodyVisitor = utils.compositingVisitors(
  146. templateBodyVisitor,
  147. visitor
  148. )
  149. }
  150. if (syntax.createScriptVisitor) {
  151. const visitor = syntax.createScriptVisitor(context)
  152. scriptVisitor = utils.compositingVisitors(scriptVisitor, visitor)
  153. }
  154. }
  155. return utils.defineTemplateBodyVisitor(
  156. context,
  157. templateBodyVisitor,
  158. scriptVisitor
  159. )
  160. }
  161. }
  162. // TODO replace semver.subset() in the major version.
  163. /**
  164. * semver.subset()
  165. *
  166. * We need to use a copy of the semver source code until a major version upgrade.
  167. *
  168. * @see https://github.com/npm/node-semver/blob/e79ac3a450e8bb504e78b8159e3efc70895699b8/ranges/subset.js#L43
  169. * @license ISC at Isaac Z. Schlueter and Contributors
  170. * https://github.com/npm/node-semver/blob/master/LICENSE
  171. *
  172. * @param {semver.Range} sub
  173. * @param {semver.Range} dom
  174. */
  175. function semverSubset(sub, dom) {
  176. if (sub === dom) return true
  177. sub = new semver.Range(sub)
  178. dom = new semver.Range(dom)
  179. let sawNonNull = false
  180. // eslint-disable-next-line no-labels
  181. OUTER: for (const simpleSub of sub.set) {
  182. for (const simpleDom of dom.set) {
  183. const isSub = simpleSubset(simpleSub, simpleDom)
  184. sawNonNull = sawNonNull || isSub !== null
  185. // eslint-disable-next-line no-labels
  186. if (isSub) continue OUTER
  187. }
  188. if (sawNonNull) return false
  189. }
  190. return true
  191. }
  192. /**
  193. * @license ISC at Isaac Z. Schlueter and Contributors
  194. * https://github.com/npm/node-semver/blob/master/LICENSE
  195. * @param {readonly semver.Comparator[]} sub
  196. * @param {readonly semver.Comparator[]} dom
  197. */
  198. function simpleSubset(sub, dom) {
  199. if (sub === dom) return true
  200. /**
  201. * @param {semver.Comparator} c
  202. */
  203. function isAny(c) {
  204. return Object.keys(c.semver).length === 0
  205. }
  206. if (sub.length === 1 && isAny(sub[0])) {
  207. if (dom.length === 1 && isAny(dom[0])) return true
  208. else sub = [new semver.Comparator('>=0.0.0')]
  209. }
  210. if (dom.length === 1 && isAny(dom[0])) {
  211. dom = [new semver.Comparator('>=0.0.0')]
  212. }
  213. const eqSet = new Set()
  214. let gt, lt
  215. for (const c of sub) {
  216. if (c.operator === '>' || c.operator === '>=') gt = higherGT(gt, c)
  217. else if (c.operator === '<' || c.operator === '<=') lt = lowerLT(lt, c)
  218. else eqSet.add(c.semver)
  219. }
  220. if (eqSet.size > 1) return null
  221. let gtltComp
  222. if (gt && lt) {
  223. gtltComp = semver.compare(gt.semver, lt.semver)
  224. if (gtltComp > 0) return null
  225. else if (gtltComp === 0 && (gt.operator !== '>=' || lt.operator !== '<='))
  226. return null
  227. }
  228. // will iterate one or zero times
  229. for (const eq of eqSet) {
  230. if (gt && !semver.satisfies(eq, String(gt))) return null
  231. if (lt && !semver.satisfies(eq, String(lt))) return null
  232. for (const c of dom) {
  233. if (!semver.satisfies(eq, String(c))) return false
  234. }
  235. return true
  236. }
  237. let higher, lower
  238. let hasDomLT, hasDomGT
  239. // if the subset has a prerelease, we need a comparator in the superset
  240. // with the same tuple and a prerelease, or it's not a subset
  241. let needDomLTPre = lt && lt.semver.prerelease.length ? lt.semver : false
  242. let needDomGTPre = gt && gt.semver.prerelease.length ? gt.semver : false
  243. // exception: <1.2.3-0 is the same as <1.2.3
  244. if (
  245. needDomLTPre &&
  246. needDomLTPre.prerelease.length === 1 &&
  247. lt &&
  248. lt.operator === '<' &&
  249. needDomLTPre.prerelease[0] === 0
  250. ) {
  251. needDomLTPre = false
  252. }
  253. for (const c of dom) {
  254. hasDomGT = hasDomGT || c.operator === '>' || c.operator === '>='
  255. hasDomLT = hasDomLT || c.operator === '<' || c.operator === '<='
  256. if (gt) {
  257. if (needDomGTPre) {
  258. if (
  259. c.semver.prerelease &&
  260. c.semver.prerelease.length &&
  261. c.semver.major === needDomGTPre.major &&
  262. c.semver.minor === needDomGTPre.minor &&
  263. c.semver.patch === needDomGTPre.patch
  264. ) {
  265. needDomGTPre = false
  266. }
  267. }
  268. if (c.operator === '>' || c.operator === '>=') {
  269. higher = higherGT(gt, c)
  270. if (higher === c && higher !== gt) return false
  271. } else if (
  272. gt.operator === '>=' &&
  273. !semver.satisfies(gt.semver, String(c))
  274. )
  275. return false
  276. }
  277. if (lt) {
  278. if (needDomLTPre) {
  279. if (
  280. c.semver.prerelease &&
  281. c.semver.prerelease.length &&
  282. c.semver.major === needDomLTPre.major &&
  283. c.semver.minor === needDomLTPre.minor &&
  284. c.semver.patch === needDomLTPre.patch
  285. ) {
  286. needDomLTPre = false
  287. }
  288. }
  289. if (c.operator === '<' || c.operator === '<=') {
  290. lower = lowerLT(lt, c)
  291. if (lower === c && lower !== lt) return false
  292. } else if (
  293. lt.operator === '<=' &&
  294. !semver.satisfies(lt.semver, String(c))
  295. )
  296. return false
  297. }
  298. if (!c.operator && (lt || gt) && gtltComp !== 0) return false
  299. }
  300. // if there was a < or >, and nothing in the dom, then must be false
  301. // UNLESS it was limited by another range in the other direction.
  302. // Eg, >1.0.0 <1.0.1 is still a subset of <2.0.0
  303. if (gt && hasDomLT && !lt && gtltComp !== 0) return false
  304. if (lt && hasDomGT && !gt && gtltComp !== 0) return false
  305. // we needed a prerelease range in a specific tuple, but didn't get one
  306. // then this isn't a subset. eg >=1.2.3-pre is not a subset of >=1.0.0,
  307. // because it includes prereleases in the 1.2.3 tuple
  308. if (needDomGTPre || needDomLTPre) return false
  309. return true
  310. }
  311. /**
  312. * @license ISC at Isaac Z. Schlueter and Contributors
  313. * https://github.com/npm/node-semver/blob/master/LICENSE
  314. * @param {semver.Comparator | void} a
  315. * @param {semver.Comparator} b
  316. */
  317. const higherGT = (a, b) => {
  318. if (!a) return b
  319. const comp = semver.compare(a.semver, b.semver)
  320. return comp > 0
  321. ? a
  322. : comp < 0
  323. ? b
  324. : b.operator === '>' && a.operator === '>='
  325. ? b
  326. : a
  327. }
  328. /**
  329. * @license ISC at Isaac Z. Schlueter and Contributors
  330. * https://github.com/npm/node-semver/blob/master/LICENSE
  331. * @param {semver.Comparator | void} a
  332. * @param {semver.Comparator} b
  333. */
  334. const lowerLT = (a, b) => {
  335. if (!a) return b
  336. const comp = semver.compare(a.semver, b.semver)
  337. return comp < 0
  338. ? a
  339. : comp > 0
  340. ? b
  341. : b.operator === '<' && a.operator === '<='
  342. ? b
  343. : a
  344. }