feat(component-api-style): add scriptSetupVapor option

.changeset/wild-symbols-grow.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': minor
+---
+
+[`vue/component-api-style`](https://eslint.vuejs.org/rules/component-api-style.html) now supports Vue 3.6+ Vapor mode style with the new `script-setup-vapor` option

docs/rules/component-api-style.md

@@ -14,7 +14,7 @@ since: v7.18.0
 
 This rule aims to make the API style you use to define Vue components consistent in your project.
 
-For example, if you want to allow only `<script setup>` and Composition API.  
+For example, if you want to allow only `<script setup>` and Composition API.
 (This is the default for this rule.)
 
 <eslint-code-block :rules="{'vue/component-api-style': ['error']}">
@@ -74,17 +74,44 @@ export default {
 ```json
 {
   "vue/component-api-style": ["error",
-    ["script-setup", "composition"] // "script-setup", "composition", "composition-vue2", or "options"
+    ["script-setup", "composition"] // "script-setup", "script-setup-vapor", "composition", "composition-vue2", or "options"
   ]
 }
 ```
 
 - Array options ... Defines the API styles you want to allow. Default is `["script-setup", "composition"]`. You can use the following values.
   - `"script-setup"` ... If set, allows [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html).
+  - `"script-setup-vapor"` ... If set, allows [`<script setup vapor>`](https://vuejs.org/api/sfc-script-setup.html) (Vue 3.6+).
   - `"composition"` ... If set, allows [Composition API](https://vuejs.org/api/#composition-api) (not `<script setup>`).
   - `"composition-vue2"` ... If set, allows [Composition API for Vue 2](https://github.com/vuejs/composition-api) (not `<script setup>`). In particular, it allows `render`, `renderTracked` and `renderTriggered` alongside `setup`.
   - `"options"` ... If set, allows Options API.
 
+### `["script-setup-vapor"]`
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error', ['script-setup-vapor']]}">
+
+```vue
+<!-- ✓ GOOD -->
+<script setup vapor>
+import { ref } from 'vue'
+const msg = ref('Hello World!')
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/component-api-style': ['error', ['script-setup-vapor']]}">
+
+```vue
+<!-- ✗ BAD -->
+<script setup>
+import { ref } from 'vue'
+const msg = ref('Hello World!')
+</script>
+```
+
+</eslint-code-block>
+
 ### `["options"]`
 
 <eslint-code-block :rules="{'vue/component-api-style': ['error', ['options']]}">

lib/rules/component-api-style.js

@@ -7,13 +7,14 @@
 const utils = require('../utils')
 
 /**
- * @typedef { 'script-setup' | 'composition' | 'composition-vue2' | 'options' } PreferOption
+ * @typedef { 'script-setup' | 'script-setup-vapor' | 'composition' | 'composition-vue2' | 'options' } PreferOption
  *
  * @typedef {PreferOption[]} UserPreferOption
  *
  * @typedef {object} NormalizeOptions
  * @property {object} allowsSFC
  * @property {boolean} [allowsSFC.scriptSetup]
+ * @property {boolean} [allowsSFC.scriptSetupVapor]
  * @property {boolean} [allowsSFC.composition]
  * @property {boolean} [allowsSFC.compositionVue2]
  * @property {boolean} [allowsSFC.options]
@@ -26,6 +27,7 @@ const utils = require('../utils')
 /** @type {PreferOption[]} */
 const STYLE_OPTIONS = [
   'script-setup',
+  'script-setup-vapor',
   'composition',
   'composition-vue2',
   'options'
@@ -48,6 +50,10 @@ function parseOptions(options) {
         opts.allowsSFC.scriptSetup = true
         break
       }
+      case 'script-setup-vapor': {
+        opts.allowsSFC.scriptSetupVapor = true
+        break
+      }
       case 'composition': {
         opts.allowsSFC.composition = true
         opts.allowsOther.composition = true
@@ -143,6 +149,7 @@ const LIFECYCLE_HOOK_OPTIONS = new Set([
 /**
  * @param {object} allowsOpt
  * @param {boolean} [allowsOpt.scriptSetup]
+ * @param {boolean} [allowsOpt.scriptSetupVapor]
  * @param {boolean} [allowsOpt.composition]
  * @param {boolean} [allowsOpt.compositionVue2]
  * @param {boolean} [allowsOpt.options]
@@ -152,6 +159,9 @@ function buildAllowedPhrase(allowsOpt) {
   if (allowsOpt.scriptSetup) {
     phrases.push('`<script setup>`')
   }
+  if (allowsOpt.scriptSetupVapor) {
+    phrases.push('`<script setup vapor>`')
+  }
   if (allowsOpt.composition) {
     phrases.push('Composition API')
   }
@@ -169,13 +179,36 @@ function buildAllowedPhrase(allowsOpt) {
 /**
  * @param {object} allowsOpt
  * @param {boolean} [allowsOpt.scriptSetup]
+ * @param {boolean} [allowsOpt.scriptSetupVapor]
  * @param {boolean} [allowsOpt.composition]
  * @param {boolean} [allowsOpt.compositionVue2]
  * @param {boolean} [allowsOpt.options]
  */
 function isPreferScriptSetup(allowsOpt) {
   if (
     !allowsOpt.scriptSetup ||
+    allowsOpt.scriptSetupVapor ||
+    allowsOpt.composition ||
+    allowsOpt.compositionVue2 ||
+    allowsOpt.options
+  ) {
+    return false
+  }
+  return true
+}
+
+/**
+ * @param {object} allowsOpt
+ * @param {boolean} [allowsOpt.scriptSetup]
+ * @param {boolean} [allowsOpt.scriptSetupVapor]
+ * @param {boolean} [allowsOpt.composition]
+ * @param {boolean} [allowsOpt.compositionVue2]
+ * @param {boolean} [allowsOpt.options]
+ */
+function isPreferScriptSetupVapor(allowsOpt) {
+  if (
+    !allowsOpt.scriptSetupVapor ||
+    allowsOpt.scriptSetup ||
     allowsOpt.composition ||
     allowsOpt.compositionVue2 ||
     allowsOpt.options
@@ -219,10 +252,14 @@ module.exports = {
     messages: {
       disallowScriptSetup:
         '`<script setup>` is not allowed in your project. Use {{allowedApis}} instead.',
+      disallowScriptSetupVapor:
+        '`<script setup vapor>` 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.'
+        '{{disallowedApi}} is not allowed in your project. Use `<script setup>` instead.',
+      disallowComponentOptionPreferScriptSetupVapor:
+        '{{disallowedApi}} is not allowed in your project. Use `<script setup vapor>` instead.'
     }
   },
   /** @param {RuleContext} context */
@@ -232,13 +269,35 @@ module.exports = {
     return utils.compositingVisitors(
       {
         Program() {
-          if (options.allowsSFC.scriptSetup) {
+          const { scriptSetup, scriptSetupVapor } = options.allowsSFC
+          if (scriptSetup && scriptSetupVapor) {
+            return
+          }
+          const scriptSetupElement = utils.getScriptSetupElement(context)
+          if (!scriptSetupElement) {
+            return
+          }
+
+          const hasVapor = utils.hasAttribute(scriptSetupElement, 'vapor')
+
+          // <script setup vapor>
+          if (hasVapor) {
+            if (!scriptSetupVapor) {
+              context.report({
+                node: scriptSetupElement.startTag,
+                messageId: 'disallowScriptSetupVapor',
+                data: {
+                  allowedApis: buildAllowedPhrase(options.allowsSFC)
+                }
+              })
+            }
             return
           }
-          const scriptSetup = utils.getScriptSetupElement(context)
-          if (scriptSetup) {
+
+          // <script setup>
+          if (!scriptSetup) {
             context.report({
-              node: scriptSetup.startTag,
+              node: scriptSetupElement.startTag,
               messageId: 'disallowScriptSetup',
               data: {
                 allowedApis: buildAllowedPhrase(options.allowsSFC)
@@ -290,9 +349,11 @@ module.exports = {
             if (disallowApi) {
               context.report({
                 node: prop.key,
-                messageId: isPreferScriptSetup(allows)
-                  ? 'disallowComponentOptionPreferScriptSetup'
-                  : 'disallowComponentOption',
+                messageId: isPreferScriptSetupVapor(allows)
+                  ? 'disallowComponentOptionPreferScriptSetupVapor'
+                  : isPreferScriptSetup(allows)
+                    ? 'disallowComponentOptionPreferScriptSetup'
+                    : 'disallowComponentOption',
                 data: {
                   disallowedApi: disallowApi.apiName,
                   optionPhrase: buildOptionPhrase(name),

tests/lib/rules/component-api-style.js

@@ -103,6 +103,36 @@ tester.run('component-api-style', rule, {
       `,
       options: [['script-setup']]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup vapor>
+      import { ref } from 'vue'
+      const msg = ref('Hello World!')
+      </script>
+      `,
+      options: [['script-setup-vapor']]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup vapor>
+      import { ref } from 'vue'
+      const msg = ref('Hello World!')
+      </script>
+      `,
+      options: [['script-setup', 'script-setup-vapor']]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref } from 'vue'
+      const msg = ref('Hello World!')
+      </script>
+      `,
+      options: [['script-setup', 'script-setup-vapor']]
+    },
     {
       filename: 'test.js',
       code: `
@@ -845,6 +875,96 @@ tester.run('component-api-style', rule, {
           column: 9
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref } from 'vue'
+      const msg = ref('Hello World!')
+      </script>
+      `,
+      options: [['script-setup-vapor']],
+      errors: [
+        {
+          message:
+            '`<script setup>` is not allowed in your project. Use `<script setup vapor>` instead.',
+          line: 2,
+          column: 7,
+          endLine: 2,
+          endColumn: 21
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup vapor>
+      import { ref } from 'vue'
+      const msg = ref('Hello World!')
+      </script>
+      `,
+      options: [['script-setup']],
+      errors: [
+        {
+          message:
+            '`<script setup vapor>` is not allowed in your project. Use `<script setup>` instead.',
+          line: 2,
+          column: 7,
+          endLine: 2,
+          endColumn: 27
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Hello World!'
+          }
+        }
+      }
+      </script>
+      `,
+      options: [['script-setup-vapor']],
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. Use `<script setup vapor>` instead.',
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 13
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Hello World!'
+          }
+        }
+      }
+      </script>
+      `,
+      options: [['script-setup-vapor', 'script-setup']],
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>` or `<script setup vapor>` instead.',
+          line: 4,
+          column: 9,
+          endLine: 4,
+          endColumn: 13
+        }
+      ]
     }
   ]
 })