Add support for defineOptions and defineSlots to vue/no-unsupported-features rule (#2163)

Author: ota-meshi

Diff for: docs/rules/no-unsupported-features.md

@@ -29,6 +29,9 @@ This rule reports unsupported Vue.js syntax on the specified version.
 - `version` ... The `version` option accepts [the valid version range of `node-semver`](https://github.com/npm/node-semver#range-grammar). Set the version of Vue.js you are using. This option is required.
 - `ignores` ... You can use this `ignores` option to ignore the given features.
 The `"ignores"` option accepts an array of the following strings.
+  - Vue.js 3.3.0+
+    - `"define-slots"` ... `defineSlots()` macro.
+    - `"define-options"` ... `defineOptions()` macro.
   - Vue.js 3.2.0+
     - `"v-memo"` ... [v-memo](https://vuejs.org/api/built-in-directives.html#v-memo) directive.
     - `"v-bind-prop-modifier-shorthand"` ... `v-bind` with `.prop` modifier shorthand.
@@ -100,6 +103,8 @@ The `"ignores"` option accepts an array of the following strings.
 
 ## :books: Further Reading
 
+- [API - defineOptions()](https://vuejs.org/api/sfc-script-setup.html#defineoptions)
+- [API - defineSlots()](https://vuejs.org/api/sfc-script-setup.html#defineslots)
 - [API - v-memo](https://vuejs.org/api/built-in-directives.html#v-memo)
 - [API - v-is](https://v3.vuejs.org/api/directives.html#v-is)
 - [API - v-is (Old)](https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)

Diff for: lib/rules/no-unsupported-features.js

@@ -32,7 +32,10 @@ const FEATURES = {
   // Vue.js 3.2.0+
   'v-memo': require('./syntaxes/v-memo'),
   'v-bind-prop-modifier-shorthand': require('./syntaxes/v-bind-prop-modifier-shorthand'),
-  'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier')
+  'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier'),
+  // Vue.js 3.3.0+
+  'define-options': require('./syntaxes/define-options'),
+  'define-slots': require('./syntaxes/define-slots')
 }
 
 const SYNTAX_NAMES = /** @type {(keyof FEATURES)[]} */ (Object.keys(FEATURES))
@@ -115,7 +118,12 @@ module.exports = {
       forbiddenVBindPropModifierShorthand:
         '`.prop` shorthand are not supported until Vue.js "3.2.0".',
       forbiddenVBindAttrModifier:
-        '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".'
+        '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".',
+      // Vue.js 3.3.0+
+      forbiddenDefineOptions:
+        '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+      forbiddenDefineSlots:
+        '`defineSlots()` macros are not supported until Vue.js "3.3.0".'
     }
   },
   /** @param {RuleContext} context */

Diff for: lib/rules/syntaxes/define-options.js

@@ -0,0 +1,74 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+  supported: '>=3.3.0',
+  /** @param {RuleContext} context @returns {RuleListener} */
+  createScriptVisitor(context) {
+    const sourceCode = context.getSourceCode()
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineOptionsEnter(node) {
+        context.report({
+          node,
+          messageId: 'forbiddenDefineOptions',
+          fix(fixer) {
+            return fix(fixer, node)
+          }
+        })
+      }
+    })
+
+    /**
+     * @param {RuleFixer} fixer
+     * @param {CallExpression} node defineOptions() node
+     */
+    function fix(fixer, node) {
+      if (node.arguments.length === 0) return null
+      const scriptSetup = utils.getScriptSetupElement(context)
+      if (!scriptSetup) return null
+      if (
+        scriptSetup.parent.children
+          .filter(utils.isVElement)
+          .some(
+            (node) =>
+              node.name === 'script' && !utils.hasAttribute(node, 'setup')
+          )
+      ) {
+        // has `<script>`
+        return null
+      }
+
+      // Find defineOptions statement
+      /** @type {ASTNode} */
+      let statement = node
+      while (statement.parent && statement.parent.type !== 'Program') {
+        statement = statement.parent
+      }
+      // Calc remove range
+      /** @type {Range} */
+      const removeRange = [...statement.range]
+      if (
+        sourceCode.lines[statement.loc.start.line - 1]
+          .slice(0, statement.loc.start.column)
+          .trim() === ''
+      ) {
+        removeRange[0] -= statement.loc.start.column
+      }
+
+      return [
+        fixer.insertTextBefore(
+          scriptSetup,
+          `<script>\nexport default ${sourceCode.getText(
+            node.arguments[0]
+          )}\n</script>\n`
+        ),
+        fixer.removeRange(removeRange)
+      ]
+    }
+  }
+}

Diff for: lib/rules/syntaxes/define-slots.js

@@ -0,0 +1,22 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+  supported: '>=3.3.0',
+  /** @param {RuleContext} context @returns {RuleListener} */
+  createScriptVisitor(context) {
+    return utils.defineScriptSetupVisitor(context, {
+      onDefineSlotsEnter(node) {
+        context.report({
+          node,
+          messageId: 'forbiddenDefineSlots'
+        })
+      }
+    })
+  }
+}

Diff for: tests/lib/rules/no-unsupported-features/define-options.js

@@ -0,0 +1,88 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('define-options', '^3.2.0')
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-unsupported-features/define-options', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+        defineOptions({})
+      </script>`,
+      options: buildOptions({ version: '^3.3.0' })
+    },
+    {
+      code: `
+      <script setup>
+        defineProps({})
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script setup>
+        defineOptions({})
+      </script>`,
+      options: buildOptions({ version: '^3.0.0', ignores: ['define-options'] })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+        defineOptions({ name: 'Foo' })
+      </script>`,
+      options: buildOptions(),
+      output: `
+      <script>
+export default { name: 'Foo' }
+</script>
+<script setup>
+
+      </script>`,
+      errors: [
+        {
+          message:
+            '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <script setup>
+        defineOptions({});
+      </script>`,
+      options: buildOptions(),
+      output: `
+      <script>
+export default {}
+</script>
+<script setup>
+
+      </script>`,
+      errors: [
+        {
+          message:
+            '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})

Diff for: tests/lib/rules/no-unsupported-features/define-slots.js

@@ -0,0 +1,59 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('define-slots', '^3.2.0')
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2019
+  }
+})
+
+tester.run('no-unsupported-features/define-slots', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions({ version: '^3.3.0' })
+    },
+    {
+      code: `
+      <script setup>
+        defineProps({})
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions({ version: '^3.0.0', ignores: ['define-slots'] })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+        const slots = defineSlots()
+      </script>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`defineSlots()` macros are not supported until Vue.js "3.3.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})