eslint-plugin-vuetify 2.4.0 → 2.5.1

package/README.md

@@ -15,7 +15,7 @@ This package is for migrating from Vuetify v2 to v3, use [eslint-plugin-vuetify@
 
 ## 💿 Install
 
-You should have [`eslint`](https://eslint.org/docs/user-guide/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
+You should have [`eslint`](https://eslint.org/docs/latest/use/getting-started) and [`eslint-plugin-vue`](https://eslint.vuejs.org/user-guide/#installation) set up first.
 
 ```bash
 yarn add eslint-plugin-vuetify -D
@@ -23,6 +23,19 @@ yarn add eslint-plugin-vuetify -D
 npm install eslint-plugin-vuetify --save-dev
 ```
 
+```js
+// eslint.config.js
+import vue from 'eslint-plugin-vue'
+import vuetify from 'eslint-plugin-vuetify'
+
+export default [
+  ...vue.configs['flat/base'],
+  ...vuetify.configs['flat/base'],
+]
+```
+
+Eslint 8 can alternatively use the older configuration format:
+
 ```js
 // .eslintrc.js
 module.exports = {
@@ -40,7 +53,7 @@ module.exports = {
 
 ### Deprecations
 
-These rules will help you avoid deprecated components, props, and classes. They are included in the `plugin:vuetify/base` preset.
+These rules will help you avoid deprecated components, props, and classes. They are included in the `base` preset.
 
 - Prevent the use of components that have been removed from Vuetify ([`no-deprecated-components`])
 - Prevent the use of props that have been removed from Vuetify ([`no-deprecated-props`])
@@ -52,7 +65,7 @@ These rules will help you avoid deprecated components, props, and classes. They
 
 ### Grid system
 
-These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `plugin:vuetify/recommended` preset.
+These rules are designed to help migrate to the new grid system in Vuetify v2. They are included in the `recommended` preset.
 
 - Warn about unknown attributes not being converted to classes on new grid components ([`grid-unknown-attributes`])
 

package/lib/configs/flat/base.js

@@ -0,0 +1,11 @@
+"use strict";
+
+module.exports = [{
+  plugins: {
+    vue: require('eslint-plugin-vue'),
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../base').rules
+}];

package/lib/configs/flat/recommended.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = [...require('./base'), {
+  plugins: {
+    get vuetify() {
+      return require('../../index');
+    }
+  },
+  rules: require('../recommended').rules
+}];

package/lib/index.js

@@ -3,6 +3,11 @@
 const path = require('path');
 const requireindex = require('requireindex');
 module.exports = {
-  configs: requireindex(path.join(__dirname, './configs')),
+  configs: {
+    base: require('./configs/base'),
+    recommended: require('./configs/recommended'),
+    'flat/base': require('./configs/flat/base'),
+    'flat/recommended': require('./configs/flat/recommended')
+  },
   rules: requireindex(path.join(__dirname, './rules'))
 };

package/lib/rules/grid-unknown-attributes.js

@@ -3,7 +3,8 @@
 const {
   hyphenate,
   classify,
-  getAttributes
+  getAttributes,
+  isVueTemplate
 } = require('../util/helpers');
 const {
   isGridAttribute
@@ -39,7 +40,8 @@ module.exports = {
     schema: []
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(element) {
         const tag = classify(element.rawName);
         if (!Object.keys(tags).includes(tag)) return;

package/lib/rules/icon-button-variant.js

@@ -2,7 +2,8 @@
 
 const {
   classify,
-  getAttributes
+  getAttributes,
+  isVueTemplate
 } = require('../util/helpers');
 
 // ------------------------------------------------------------------------------
@@ -24,7 +25,8 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(element) {
         const tag = classify(element.rawName);
         if (tag !== 'VBtn') return;

package/lib/rules/no-deprecated-classes.js

@@ -1,5 +1,9 @@
 'use strict';
 
+const {
+  isVueTemplate
+} = require('../util/helpers');
+
 /** @type {Map<RegExp, ((args: string[]) => string | false) | false> | Map<string, string | false>} */
 const replacements = new Map([[/^rounded-(r|l|tr|tl|br|bl)(-.*)?$/, ([side, rest]) => {
   side = {
@@ -30,11 +34,11 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name="class"]'(node) {
         if (!node.value || !node.value.value) return;
         const classes = node.value.value.split(/\s+/).filter(s => !!s);
-        const source = context.getSourceCode();
         const changed = [];
         classes.forEach(className => {
           for (const replacer of replacements) {
@@ -58,8 +62,8 @@ module.exports = {
           const idx = node.value.value.indexOf(change[0]) + 1;
           const range = [node.value.range[0] + idx, node.value.range[0] + idx + change[0].length];
           const loc = {
-            start: source.getLocFromIndex(range[0]),
-            end: source.getLocFromIndex(range[1])
+            start: context.sourceCode.getLocFromIndex(range[0]),
+            end: context.sourceCode.getLocFromIndex(range[1])
           };
           if (change[1]) {
             context.report({

package/lib/rules/no-deprecated-colors.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const {
+  isVueTemplate
+} = require('../util/helpers');
 const cssColors = ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'blue-grey', 'grey', 'black', 'white', 'transparent'];
 const cssTextColors = cssColors.map(v => `${v}--text`);
 const variants = ['lighten-1', 'lighten-2', 'lighten-3', 'lighten-4', 'lighten-5', 'darken-1', 'darken-2', 'darken-3', 'darken-4', 'accent-1', 'accent-2', 'accent-3', 'accent-4'];
@@ -33,6 +36,7 @@ module.exports = {
     }
   },
   create(context) {
+    if (!isVueTemplate(context)) return {};
     const themeColors = ['primary', 'secondary', 'accent', 'error', 'warning', 'info', 'success', ...(context.options[0]?.themeColors || [])];
     const themeTextColors = themeColors.map(v => `${v}--text`);
     function findColor(classes) {
@@ -45,7 +49,7 @@ module.exports = {
       const variant = classes.findIndex(t => textVariants.includes(t));
       return [base, variant];
     }
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       'VAttribute[key.name="color"]'(node) {
         if (!node.value || !node.value.value) return;
         const color = node.value.value.split(/\s+/).filter(s => !!s);

package/lib/rules/no-deprecated-components.js

@@ -2,7 +2,8 @@
 
 const {
   hyphenate,
-  classify
+  classify,
+  isVueTemplate
 } = require('../util/helpers');
 const replacements = {
   VListTile: 'v-list-item',
@@ -38,8 +39,7 @@ const replacements = {
   VSimpleTable: 'v-table',
   VTabsSlider: false,
   VTabsItems: false,
-  VTabItem: false,
-  VTimePicker: false
+  VTabItem: false
 };
 
 // ------------------------------------------------------------------------------
@@ -61,10 +61,11 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(element) {
         const tag = classify(element.rawName);
-        const tokens = context.parserServices.getTemplateBodyTokenStore();
+        const tokens = context.sourceCode.parserServices.getTemplateBodyTokenStore();
         if (Object.prototype.hasOwnProperty.call(replacements, tag)) {
           const replacement = replacements[tag];
           if (typeof replacement === 'object' && 'custom' in replacement) {

package/lib/rules/no-deprecated-events.js

@@ -2,7 +2,8 @@
 
 const {
   hyphenate,
-  classify
+  classify,
+  isVueTemplate
 } = require('../util/helpers');
 const model = {
   input: 'update:modelValue'
@@ -156,7 +157,8 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VAttribute(attr) {
         if (!(attr.directive && attr.key.name.name === 'on' && attr.key.argument?.type === 'VIdentifier')) return;
         const tag = classify(attr.parent.parent.rawName);

package/lib/rules/no-deprecated-props.js

@@ -2,7 +2,8 @@
 
 const {
   hyphenate,
-  classify
+  classify,
+  isVueTemplate
 } = require('../util/helpers');
 const size = {
   maxHeight: false,
@@ -539,7 +540,8 @@ const replacements = {
     ...size
   },
   VForm: {
-    value: 'model-value'
+    value: 'model-value',
+    lazyValidation: false
   },
   VHover: {
     value: 'model-value'
@@ -937,7 +939,8 @@ module.exports = {
     }
   },
   create(context) {
-    return context.parserServices.defineTemplateBodyVisitor({
+    if (!isVueTemplate(context)) return {};
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VStartTag(tag) {
         const attrGroups = {};
         tag.attributes.forEach(attr => {
@@ -993,7 +996,7 @@ module.exports = {
                 }
               });
             } else if (typeof replace === 'object' && 'name' in replace && 'value' in replace) {
-              const oldValue = attr.directive ? context.getSourceCode().getText(attr.value.expression) : attr.value?.value;
+              const oldValue = attr.directive ? context.sourceCode.getText(attr.value.expression) : attr.value?.value;
               const value = typeof replace.value === 'function' ? replace.value(oldValue) : replace.value;
               if (value == null || value === oldValue) return;
               context.report({
@@ -1011,7 +1014,7 @@ module.exports = {
                       }
                       return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${value}"`)];
                     } else {
-                      const expression = context.getSourceCode().getText(attr.value.expression);
+                      const expression = context.sourceCode.getText(attr.value.expression);
                       return [fixer.replaceText(propNameNode, replace.name), fixer.replaceText(attr.value, `"${expression} ? '${value}' : undefined"`)];
                     }
                   } else {

package/lib/rules/no-deprecated-slots.js

@@ -2,7 +2,8 @@
 
 const {
   classify,
-  getAttributes
+  getAttributes,
+  isVueTemplate
 } = require('../util/helpers');
 const groups = [{
   components: ['VDialog', 'VMenu', 'VTooltip'],
@@ -96,7 +97,7 @@ const groups = [{
                 yield fixer.replaceText(ref.id.parent.parent, `v-bind="props"`);
               }
               if (boundVariables.attrs) {
-                const template = context.parserServices.getTemplateBodyTokenStore();
+                const template = context.sourceCode.parserServices.getTemplateBodyTokenStore();
                 const ref = boundVariables.attrs;
                 const isLast = ref.prop === param.properties.at(-1);
                 if (isLast) {
@@ -187,8 +188,9 @@ module.exports = {
     }
   },
   create(context) {
+    if (!isVueTemplate(context)) return {};
     let scopeStack;
-    return context.parserServices.defineTemplateBodyVisitor({
+    return context.sourceCode.parserServices.defineTemplateBodyVisitor({
       VElement(node) {
         scopeStack = {
           parent: scopeStack,

package/lib/util/fixers.js

@@ -10,11 +10,11 @@ function addClass(context, fixer, element, className) {
     return fixer.insertTextAfter(classNode, `="${className}"`);
   } else {
     // nothing
-    return fixer.insertTextAfter(context.parserServices.getTemplateBodyTokenStore().getFirstToken(element.startTag), ` class="${className}"`);
+    return fixer.insertTextAfter(context.sourceCode.parserServices.getTemplateBodyTokenStore().getFirstToken(element.startTag), ` class="${className}"`);
   }
 }
 function removeAttr(context, fixer, node) {
-  const source = context.getSourceCode().text;
+  const source = context.sourceCode.text;
   let [start, end] = node.range;
   // Remove extra whitespace before attributes
   start -= /\s*$/g.exec(source.substring(0, start))[0].length;

package/lib/util/helpers.js

@@ -1,6 +1,7 @@
 'use strict';
 
-function hyphenate( /* istanbul ignore next */
+const path = require('node:path');
+function hyphenate(/* istanbul ignore next */
 str = '') {
   return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 }
@@ -41,11 +42,18 @@ function mergeDeep(source, target) {
   }
   return source;
 }
+function isVueTemplate(context) {
+  if (context.sourceCode.parserServices.defineTemplateBodyVisitor == null) {
+    return path.extname(context.getFilename()) === '.vue';
+  }
+  return true;
+}
 module.exports = {
   hyphenate,
   classify,
   isBuiltinAttribute,
   getAttributes,
   isObject,
-  mergeDeep
+  mergeDeep,
+  isVueTemplate
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuetify",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "An eslint plugin for Vuetify",
   "main": "lib/index.js",
   "author": "Kael Watts-Deuchar <kaelwd@gmail.com>",
@@ -9,6 +9,7 @@
   "scripts": {
     "build": "rimraf lib && babel src --out-dir lib",
     "test": "mocha tests --recursive --reporter dot",
+    "test:8": "ESLINT8=true mocha tests --recursive --reporter dot",
     "test:coverage": "nyc mocha tests --recursive --reporter dot",
     "test:ci": "nyc --reporter=lcov mocha tests --recursive --reporter dot",
     "lint": "eslint src tests",
@@ -26,23 +27,24 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.6",
     "@babel/preset-env": "^7.19.4",
+    "@stylistic/eslint-plugin": "^2.10.1",
     "conventional-changelog-cli": "^2.2.2",
     "conventional-changelog-vuetify": "^1.1.0",
     "conventional-github-releaser": "^3.1.5",
-    "eslint": "^8.26.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-n": "^15.3.0",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^9.14.0",
+    "eslint8": "npm:eslint@8.57.1",
     "husky": "^8.0.1",
     "mocha": "^10.1.0",
+    "neostandard": "^0.11.8",
     "nyc": "^15.1.0",
     "rimraf": "^3.0.2",
-    "vue": "^3.2.41",
-    "vuetify": "^3.0.0"
+    "vue": "^3.5.12",
+    "vue-eslint-parser": "^9.4.3",
+    "vuetify": "^3.7.4"
   },
   "peerDependencies": {
-    "eslint": "^8.0.0",
+    "eslint": "^8.0.0 || ^9.0.0",
     "vuetify": "^3.0.0"
-  }
+  },
+  "packageManager": "pnpm@9.13.2"
 }