From 7796cb5dda0b99a5a558ab637b03738f702bef8c Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Thu, 11 Nov 2021 00:49:33 +0100
Subject: [PATCH 1/3] Add `composition-vue2` api style

---
 docs/rules/component-api-style.md      |   7 +-
 lib/rules/component-api-style.js       |  84 ++++++---
 tests/lib/rules/component-api-style.js | 247 +++++++++++++++++++++++++
 3 files changed, 312 insertions(+), 26 deletions(-)

diff --git a/docs/rules/component-api-style.md b/docs/rules/component-api-style.md
index d20dc9fe3..af29316e3 100644
--- a/docs/rules/component-api-style.md
+++ b/docs/rules/component-api-style.md
@@ -73,14 +73,15 @@ export default {
 ```json
 {
   "vue/component-api-style": ["error",
-    ["script-setup", "composition"] // "script-setup", "composition", or "options"
+    ["script-setup", "composition"] // "script-setup", "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>`.
-  - `"composition"` ... If set, allows Composition API (not `<script setup>`).
+  - `"script-setup"` ... If set, allows [`<script setup>`](https://v3.vuejs.org/api/sfc-script-setup.html).
+  - `"composition"` ... If set, allows [Composition API](https://v3.vuejs.org/api/composition-api.html) (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.
 
 ### `["options"]`
diff --git a/lib/rules/component-api-style.js b/lib/rules/component-api-style.js
index 4cec3b1ab..54928e066 100644
--- a/lib/rules/component-api-style.js
+++ b/lib/rules/component-api-style.js
@@ -7,7 +7,7 @@
 const utils = require('../utils')
 
 /**
- * @typedef { 'script-setup' | 'composition' | 'options' } PreferOption
+ * @typedef { 'script-setup' | 'composition' | 'composition-vue2' | 'options' } PreferOption
  *
  * @typedef {PreferOption[]} UserPreferOption
  *
@@ -15,14 +15,21 @@ const utils = require('../utils')
  * @property {object} allowsSFC
  * @property {boolean} [allowsSFC.scriptSetup]
  * @property {boolean} [allowsSFC.composition]
+ * @property {boolean} [allowsSFC.compositionVue2]
  * @property {boolean} [allowsSFC.options]
  * @property {object} allowsOther
  * @property {boolean} [allowsOther.composition]
+ * @property {boolean} [allowsOther.compositionVue2]
  * @property {boolean} [allowsOther.options]
  */
 
 /** @type {PreferOption[]} */
-const STYLE_OPTIONS = ['script-setup', 'composition', 'options']
+const STYLE_OPTIONS = [
+  'script-setup',
+  'composition',
+  'composition-vue2',
+  'options'
+]
 
 /**
  * Normalize options.
@@ -41,14 +48,22 @@ function parseOptions(options) {
     } else if (prefer === 'composition') {
       opts.allowsSFC.composition = true
       opts.allowsOther.composition = true
+    } else if (prefer === 'composition-vue2') {
+      opts.allowsSFC.compositionVue2 = true
+      opts.allowsOther.compositionVue2 = true
     } else if (prefer === 'options') {
       opts.allowsSFC.options = true
       opts.allowsOther.options = true
     }
   }
 
-  if (!opts.allowsOther.composition && !opts.allowsOther.options) {
+  if (
+    !opts.allowsOther.composition &&
+    !opts.allowsOther.compositionVue2 &&
+    !opts.allowsOther.options
+  ) {
     opts.allowsOther.composition = true
+    opts.allowsOther.compositionVue2 = true
     opts.allowsOther.options = true
   }
 
@@ -87,6 +102,8 @@ const OPTIONS_API_OPTIONS = new Set([
 ])
 const COMPOSITION_API_OPTIONS = new Set(['setup'])
 
+const COMPOSITION_API_VUE2_OPTIONS = new Set(['setup', 'render'])
+
 const LIFECYCLE_HOOK_OPTIONS = new Set([
   'beforeCreate',
   'created',
@@ -113,6 +130,7 @@ const LIFECYCLE_HOOK_OPTIONS = new Set([
  * @param {object} allowsOpt
  * @param {boolean} [allowsOpt.scriptSetup]
  * @param {boolean} [allowsOpt.composition]
+ * @param {boolean} [allowsOpt.compositionVue2]
  * @param {boolean} [allowsOpt.options]
  */
 function buildAllowedPhrase(allowsOpt) {
@@ -123,6 +141,9 @@ function buildAllowedPhrase(allowsOpt) {
   if (allowsOpt.composition) {
     phrases.push('Composition API')
   }
+  if (allowsOpt.compositionVue2) {
+    phrases.push('Composition API (Vue 2)')
+  }
   if (allowsOpt.options) {
     phrases.push('Options API')
   }
@@ -135,10 +156,16 @@ function buildAllowedPhrase(allowsOpt) {
  * @param {object} allowsOpt
  * @param {boolean} [allowsOpt.scriptSetup]
  * @param {boolean} [allowsOpt.composition]
+ * @param {boolean} [allowsOpt.compositionVue2]
  * @param {boolean} [allowsOpt.options]
  */
 function isPreferScriptSetup(allowsOpt) {
-  if (!allowsOpt.scriptSetup || allowsOpt.composition || allowsOpt.options) {
+  if (
+    !allowsOpt.scriptSetup ||
+    allowsOpt.composition ||
+    allowsOpt.compositionVue2 ||
+    allowsOpt.options
+  ) {
     return false
   }
   return true
@@ -211,21 +238,29 @@ module.exports = {
           const allows = utils.isSFCObject(context, node)
             ? options.allowsSFC
             : options.allowsOther
-          if (allows.composition && allows.options) {
+          if (
+            (allows.composition || allows.compositionVue2) &&
+            allows.options
+          ) {
             return
           }
-          const disallows = [
+          const apis = [
             {
               allow: allows.composition,
               options: COMPOSITION_API_OPTIONS,
-              api: 'Composition API'
+              apiName: 'Composition API'
             },
             {
               allow: allows.options,
               options: OPTIONS_API_OPTIONS,
-              api: 'Options API'
+              apiName: 'Options API'
+            },
+            {
+              allow: allows.compositionVue2,
+              options: COMPOSITION_API_VUE2_OPTIONS,
+              apiName: 'Composition API (Vue 2)'
             }
-          ].filter(({ allow }) => !allow)
+          ]
           for (const prop of node.properties) {
             if (prop.type !== 'Property') {
               continue
@@ -234,20 +269,23 @@ module.exports = {
             if (!name) {
               continue
             }
-            for (const { options, api } of disallows) {
-              if (options.has(name)) {
-                context.report({
-                  node: prop.key,
-                  messageId: isPreferScriptSetup(allows)
-                    ? 'disallowComponentOptionPreferScriptSetup'
-                    : 'disallowComponentOption',
-                  data: {
-                    disallowedApi: api,
-                    optionPhrase: buildOptionPhrase(name),
-                    allowedApis: buildAllowedPhrase(allows)
-                  }
-                })
-              }
+            const propAllowed = apis.some(
+              (api) => api.allow && api.options.has(name)
+            )
+            if (!propAllowed) {
+              context.report({
+                node: prop.key,
+                messageId: isPreferScriptSetup(allows)
+                  ? 'disallowComponentOptionPreferScriptSetup'
+                  : 'disallowComponentOption',
+                data: {
+                  disallowedApi: apis.filter(
+                    (api) => !api.allow && api.options.has(name)
+                  )[0].apiName,
+                  optionPhrase: buildOptionPhrase(name),
+                  allowedApis: buildAllowedPhrase(allows)
+                }
+              })
             }
           }
         }
diff --git a/tests/lib/rules/component-api-style.js b/tests/lib/rules/component-api-style.js
index aca48bb3c..67b71dd51 100644
--- a/tests/lib/rules/component-api-style.js
+++ b/tests/lib/rules/component-api-style.js
@@ -159,6 +159,28 @@ tester.run('component-api-style', rule, {
       }
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      options: [['composition-vue2']],
+      code: `
+      <script>
+      import { ref } from 'vue'
+      export default {
+        setup() {
+          const msg = ref('Hello World!')
+          // ...
+          return {
+            msg,
+            // ...
+          }
+        },
+        render(h) {
+          return h('foo', this.msg)
+        }
+      }
+      </script>
+      `
     }
   ],
   invalid: [
@@ -561,6 +583,231 @@ tester.run('component-api-style', rule, {
           column: 9
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      </script>
+      `,
+      options: [['composition-vue2']],
+      errors: [
+        {
+          message:
+            '`<script setup>` is not allowed in your project. Use Composition API (Vue 2) instead.',
+          line: 2,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      options: [['composition-vue2']],
+      code: `
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Hello World!',
+            // ...
+          }
+        },
+        // ...
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 4,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      options: [['composition-vue2']],
+      code: `
+      <script>
+      export default {
+        mixins: [],
+        extends: {},
+        // state
+        data () { return {} },
+        computed: {},
+        methods: {},
+        watch: {},
+        provide: {},
+        inject: {},
+        // lifecycle
+        beforeCreate() {},
+        created() {},
+        beforeMount() {},
+        mounted() {},
+        beforeUpdate() {},
+        updated() {},
+        activated() {},
+        deactivated() {},
+        beforeDestroy() {},
+        beforeUnmount() {},
+        destroyed() {},
+        unmounted() {},
+        render() {}, // allowed
+        renderTracked() {},
+        renderTriggered() {},
+        errorCaptured() {},
+        // public API
+        expose: [],
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'Options API is not allowed in your project. `mixins` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 4,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `extends` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 5,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 7,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `computed` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 8,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `methods` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 9,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `watch` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 10,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `provide` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 11,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `inject` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 12,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `beforeCreate` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 14,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `created` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 15,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `beforeMount` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 16,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `mounted` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 17,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 18,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `updated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 19,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `activated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 20,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `deactivated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 21,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 22,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 23,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `destroyed` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 24,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `unmounted` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 25,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `renderTracked` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 27,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 28,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `errorCaptured` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 29,
+          column: 9
+        },
+        {
+          message:
+            'Options API is not allowed in your project. `expose` option is the API of Options API. Use Composition API (Vue 2) instead.',
+          line: 31,
+          column: 9
+        }
+      ]
     }
   ]
 })

From e02e3bb281ee25d7cbf9f03c77538bf12d8fe9af Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Thu, 11 Nov 2021 00:51:24 +0100
Subject: [PATCH 2/3] Improve error message

---
 lib/rules/component-api-style.js       |   2 +-
 tests/lib/rules/component-api-style.js | 110 ++++++++++++-------------
 2 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/lib/rules/component-api-style.js b/lib/rules/component-api-style.js
index 54928e066..af48d175f 100644
--- a/lib/rules/component-api-style.js
+++ b/lib/rules/component-api-style.js
@@ -206,7 +206,7 @@ module.exports = {
       disallowScriptSetup:
         '`<script setup>` is not allowed in your project. Use {{allowedApis}} instead.',
       disallowComponentOption:
-        '{{disallowedApi}} is not allowed in your project. {{optionPhrase}} is the API of {{disallowedApi}}. Use {{allowedApis}} instead.',
+        '{{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.'
     }
diff --git a/tests/lib/rules/component-api-style.js b/tests/lib/rules/component-api-style.js
index 67b71dd51..b76985560 100644
--- a/tests/lib/rules/component-api-style.js
+++ b/tests/lib/rules/component-api-style.js
@@ -202,7 +202,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use `<script setup>` or Composition API instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>` or Composition API instead.',
           line: 4,
           column: 9
         }
@@ -247,7 +247,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Composition API is not allowed in your project. `setup` function is the API of Composition API. Use Options API instead.',
+            'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
           line: 5,
           column: 9
         }
@@ -270,7 +270,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 4,
           column: 9
         }
@@ -295,7 +295,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Composition API is not allowed in your project. `setup` function is the API of Composition API. Use Options API instead.',
+            'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
           line: 4,
           column: 9
         }
@@ -388,7 +388,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 4,
           column: 9
         }
@@ -434,151 +434,151 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `mixins` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API instead.',
           line: 4,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `extends` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API instead.',
           line: 5,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
           line: 7,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `computed` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API instead.',
           line: 8,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `methods` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API instead.',
           line: 9,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `watch` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API instead.',
           line: 10,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `provide` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API instead.',
           line: 11,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `inject` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API instead.',
           line: 12,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeCreate` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 14,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `created` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 15,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeMount` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 16,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `mounted` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 17,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 18,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `updated` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 19,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `activated` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 20,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `deactivated` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 21,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 22,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 23,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `destroyed` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 24,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `unmounted` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 25,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `render` function is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `render` function is part of the Options API. Use Composition API instead.',
           line: 26,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `renderTracked` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `renderTracked` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 27,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 28,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `errorCaptured` lifecycle hook is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API instead.',
           line: 29,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `expose` option is the API of Options API. Use Composition API instead.',
+            'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API instead.',
           line: 31,
           column: 9
         }
@@ -619,7 +619,7 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 4,
           column: 9
         }
@@ -665,145 +665,145 @@ tester.run('component-api-style', rule, {
       errors: [
         {
           message:
-            'Options API is not allowed in your project. `mixins` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 4,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `extends` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 5,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `data` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 7,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `computed` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 8,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `methods` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 9,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `watch` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 10,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `provide` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 11,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `inject` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 12,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeCreate` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 14,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `created` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 15,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeMount` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 16,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `mounted` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 17,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 18,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `updated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 19,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `activated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 20,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `deactivated` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 21,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 22,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 23,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `destroyed` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 24,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `unmounted` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 25,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `renderTracked` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `renderTracked` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 27,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 28,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `errorCaptured` lifecycle hook is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 29,
           column: 9
         },
         {
           message:
-            'Options API is not allowed in your project. `expose` option is the API of Options API. Use Composition API (Vue 2) instead.',
+            'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API (Vue 2) instead.',
           line: 31,
           column: 9
         }

From 7803189b808eae64ed07d07a77888862d1c7b028 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <florian-edelmann@online.de>
Date: Thu, 11 Nov 2021 01:02:06 +0100
Subject: [PATCH 3/3] Also allow `renderTracked` and `renderTriggered`

---
 lib/rules/component-api-style.js       |  7 ++++++-
 tests/lib/rules/component-api-style.js | 16 ++--------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/lib/rules/component-api-style.js b/lib/rules/component-api-style.js
index af48d175f..4d4b9f52e 100644
--- a/lib/rules/component-api-style.js
+++ b/lib/rules/component-api-style.js
@@ -102,7 +102,12 @@ const OPTIONS_API_OPTIONS = new Set([
 ])
 const COMPOSITION_API_OPTIONS = new Set(['setup'])
 
-const COMPOSITION_API_VUE2_OPTIONS = new Set(['setup', 'render'])
+const COMPOSITION_API_VUE2_OPTIONS = new Set([
+  'setup',
+  'render', // https://github.com/vuejs/composition-api#template-refs
+  'renderTracked', // https://github.com/vuejs/composition-api#missing-apis
+  'renderTriggered' // https://github.com/vuejs/composition-api#missing-apis
+])
 
 const LIFECYCLE_HOOK_OPTIONS = new Set([
   'beforeCreate',
diff --git a/tests/lib/rules/component-api-style.js b/tests/lib/rules/component-api-style.js
index b76985560..8c119fda7 100644
--- a/tests/lib/rules/component-api-style.js
+++ b/tests/lib/rules/component-api-style.js
@@ -654,8 +654,8 @@ tester.run('component-api-style', rule, {
         destroyed() {},
         unmounted() {},
         render() {}, // allowed
-        renderTracked() {},
-        renderTriggered() {},
+        renderTracked() {}, // allowed
+        renderTriggered() {}, // allowed
         errorCaptured() {},
         // public API
         expose: [],
@@ -783,18 +783,6 @@ tester.run('component-api-style', rule, {
           line: 25,
           column: 9
         },
-        {
-          message:
-            'Options API is not allowed in your project. `renderTracked` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
-          line: 27,
-          column: 9
-        },
-        {
-          message:
-            'Options API is not allowed in your project. `renderTriggered` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
-          line: 28,
-          column: 9
-        },
         {
           message:
             'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',