feat: add prefer-define-component rule

Author: thesheppard

lib/rules/prefer-define-component.js

@@ -0,0 +1,114 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// @ts-nocheck
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require components to be defined using `defineComponent`',
+      categories: ['vue3-recommended', 'vue2-recommended'],
+      url: 'https://eslint.vuejs.org/rules/prefer-define-component.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      'prefer-define-component': 'Use `defineComponent` to define a component.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const filePath = context.getFilename()
+    if (!utils.isVueFile(filePath)) return {}
+
+    const sourceCode = context.getSourceCode()
+    const documentFragment = sourceCode.parserServices.getDocumentFragment?.()
+
+    // Check if there's a non-setup script tag
+    const hasNormalScript =
+      documentFragment &&
+      documentFragment.children.some(
+        (e) =>
+          utils.isVElement(e) &&
+          e.name === 'script' &&
+          (!e.startTag.attributes ||
+            !e.startTag.attributes.some((attr) => attr.key.name === 'setup'))
+      )
+
+    // If no regular script tag, we don't need to check
+    if (!hasNormalScript) return {}
+
+    // Skip checking if there's only a setup script (no normal script)
+    if (utils.isScriptSetup(context) && !hasNormalScript) return {}
+
+    let hasDefineComponent = false
+    /** @type {ExportDefaultDeclaration | null} */
+    let exportDefaultNode = null
+    let hasVueExtend = false
+
+    return utils.compositingVisitors(utils.defineVueVisitor(context, {}), {
+      /** @param {ExportDefaultDeclaration} node */
+      'Program > ExportDefaultDeclaration'(node) {
+        exportDefaultNode = node
+      },
+
+      /** @param {CallExpression} node */
+      'Program > ExportDefaultDeclaration > CallExpression'(node) {
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'defineComponent'
+        ) {
+          hasDefineComponent = true
+          return
+        }
+
+        // Support aliased imports
+        if (node.callee.type === 'Identifier') {
+          const variable = utils.findVariableByIdentifier(context, node.callee)
+          if (
+            variable &&
+            variable.defs &&
+            variable.defs.length > 0 &&
+            variable.defs[0].node.type === 'ImportSpecifier' &&
+            variable.defs[0].node.imported &&
+            variable.defs[0].node.imported.name === 'defineComponent'
+          ) {
+            hasDefineComponent = true
+            return
+          }
+        }
+
+        // Check for Vue.extend case
+        if (
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object &&
+          node.callee.object.type === 'Identifier' &&
+          node.callee.object.name === 'Vue' &&
+          node.callee.property &&
+          node.callee.property.type === 'Identifier' &&
+          node.callee.property.name === 'extend'
+        ) {
+          hasVueExtend = true
+        }
+      },
+
+      'Program > ExportDefaultDeclaration > ObjectExpression'() {
+        hasDefineComponent = false
+      },
+
+      'Program:exit'() {
+        if (exportDefaultNode && (hasVueExtend || !hasDefineComponent)) {
+          context.report({
+            node: exportDefaultNode,
+            messageId: 'prefer-define-component'
+          })
+        }
+      }
+    })
+  }
+}

tests/lib/rules/prefer-define-component.js

@@ -0,0 +1,229 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/prefer-define-component')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('prefer-define-component', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default defineComponent({
+        name: 'Test',
+      })
+      </script> 
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineComponent } from 'vue'
+      export default defineComponent({
+        name: 'Test',
+        inheritAttrs: false
+      })
+      </script>
+      <script setup>
+      import { ref } from 'vue'
+      const count = ref(0)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      import { defineComponent } from 'vue'
+      export default defineComponent({
+        name: 'Test',
+        inheritAttrs: false,
+        props: {
+          message: {
+            type: String,
+            required: true
+          }
+        }
+      })
+      </script>
+      <script setup lang="ts">
+      import { ref, computed } from 'vue'
+      const count = ref<number>(0)
+      const doubled = computed<number>(() => count.value * 2)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineComponent as createComponent } from 'vue'
+      export default createComponent({
+        name: 'Test',
+      })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default defineComponent({
+        name: 'GloballyAvailable',
+        setup(props) {
+          return {
+            message: 'Hello World'
+          }
+        }
+      })
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default Vue.extend({
+        name: 'Test',
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Test',
+        inheritAttrs: false
+      }
+      </script>
+      <script setup>
+      import { ref } from 'vue'
+      const count = ref(0)
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const obj = { foo: 'bar' }
+      export const helpers = { 
+        method() { return 'helper' } 
+      }
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 7,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default Vue.extend({
+        name: 'Test',
+        data() {
+          return { count: 0 }
+        }
+      })
+      </script>
+      <script setup>
+      import { computed } from 'vue'
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    }
+  ]
+})