feat(define-macros-order): add defineExposeLast option

Author: waynzh

lib/rules/define-macros-order.js

@@ -95,8 +95,12 @@ function create(context) {
   const options = context.options
   /** @type {[string, string]} */
   const order = (options[0] && options[0].order) || DEFAULT_ORDER
+  /** @type {boolean} */
+  const defineExposeLast = (options[0] && options[0].defineExposeLast) || false
   /** @type {Map<string, ASTNode>} */
   const macrosNodes = new Map()
+  /** @type {ASTNode} */
+  let defineExposeNode
 
   return utils.compositingVisitors(
     utils.defineScriptSetupVisitor(context, {
@@ -111,6 +115,9 @@ function create(context) {
       },
       onDefineSlotsExit(node) {
         macrosNodes.set(MACROS_SLOTS, getDefineMacrosStatement(node))
+      },
+      onDefineExposeExit(node) {
+        defineExposeNode = getDefineMacrosStatement(node)
       }
     }),
     {
@@ -131,6 +138,14 @@ function create(context) {
             (data) => utils.isDef(data.node)
           )
 
+        // check last node
+        if (defineExposeLast) {
+          const lastNode = program.body[program.body.length - 1]
+          if (defineExposeNode && lastNode !== defineExposeNode) {
+            reportExposeNotOnBottom(defineExposeNode, lastNode)
+          }
+        }
+
         for (const [index, should] of orderedList.entries()) {
           const targetStatement = program.body[firstStatementIndex + index]
 
@@ -172,6 +187,58 @@ function create(context) {
     })
   }
 
+  /**
+   * @param {ASTNode} node
+   * @param {ASTNode} lastNode
+   */
+  function reportExposeNotOnBottom(node, lastNode) {
+    context.report({
+      node,
+      loc: node.loc,
+      messageId: 'defineExposeNotTheLast',
+      fix(fixer) {
+        return moveNodeToLast(fixer, node, lastNode)
+      }
+    })
+  }
+
+  /**
+   * Move all lines of "node" with its comments to after the "target"
+   * @param {RuleFixer} fixer
+   * @param {ASTNode} node
+   * @param {ASTNode} target
+   */
+  function moveNodeToLast(fixer, node, target) {
+    // get comments under tokens(if any)
+    const beforeNodeToken = sourceCode.getTokenBefore(node)
+    const nodeComment = sourceCode.getTokenAfter(beforeNodeToken, {
+      includeComments: true
+    })
+    const nextNodeComment = sourceCode.getTokenAfter(node, {
+      includeComments: true
+    })
+
+    // remove position: node (and comments) to next node (and comments)
+    const cutStart = getLineStartIndex(nodeComment, beforeNodeToken)
+    const cutEnd = getLineStartIndex(nextNodeComment, node)
+
+    // insert text: comment + node
+    const textNode = sourceCode.getText(
+      node,
+      node.range[0] - beforeNodeToken.range[1]
+    )
+
+    // insert position:  after target and comments (if any)
+    const afterTargetComment = sourceCode.getTokenAfter(target, {
+      includeComments: true
+    })
+
+    return [
+      fixer.insertTextAfter(afterTargetComment, textNode),
+      fixer.removeRange([cutStart, cutEnd])
+    ]
+  }
+
   /**
    * Move all lines of "node" with its comments to before the "target"
    * @param {RuleFixer} fixer
@@ -266,14 +333,19 @@ module.exports = {
             },
             uniqueItems: true,
             additionalItems: false
+          },
+          defineExposeLast: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
       }
     ],
     messages: {
       macrosNotOnTop:
-        '{{macro}} should be the first statement in `<script setup>` (after any potential import statements or type definitions).'
+        '{{macro}} should be the first statement in `<script setup>` (after any potential import statements or type definitions).',
+      defineExposeNotTheLast:
+        '`defineExpose` should be the last statement in `<script setup>`.'
     }
   },
   create

lib/utils/index.js

@@ -1314,6 +1314,8 @@ module.exports = {
    * - `onDefineOptionsExit` ... Event when defineOptions visit ends.
    * - `onDefineSlotsEnter` ... Event when defineSlots is found.
    * - `onDefineSlotsExit` ... Event when defineSlots visit ends.
+   * - `onDefineExposeEnter` ... Event when defineExpose is found.
+   * - `onDefineExposeExit` ... Event when defineExpose visit ends.
    *
    * @param {RuleContext} context The ESLint rule context object.
    * @param {ScriptSetupVisitor} visitor The visitor to traverse the AST nodes.
@@ -1401,6 +1403,13 @@ module.exports = {
         'onDefineSlotsExit',
         (candidateMacro, node) => candidateMacro === node,
         () => undefined
+      ),
+      new MacroListener(
+        'defineExpose',
+        'onDefineExposeEnter',
+        'onDefineExposeExit',
+        (candidateMacro, node) => candidateMacro === node,
+        () => undefined
       )
     ].filter((m) => m.hasListener)
     if (macroListenerList.length > 0) {

tests/lib/rules/define-macros-order.js

@@ -27,10 +27,19 @@ const optionsPropsFirst = [
   }
 ]
 
+const optionsExposeLast = [
+  {
+    defineExposeLast: true
+  }
+]
+
 function message(macro) {
   return `${macro} should be the first statement in \`<script setup>\` (after any potential import statements or type definitions).`
 }
 
+const defineExposeNotTheLast =
+  '`defineExpose` should be the last statement in `<script setup>`.'
+
 tester.run('define-macros-order', rule, {
   valid: [
     {
@@ -170,6 +179,21 @@ tester.run('define-macros-order', rule, {
           order: ['defineOptions', 'defineEmits', 'defineProps', 'defineSlots']
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          defineProps({
+            test: Boolean
+          })
+          console.log('test')
+          defineExpose({
+            a: 1
+          })
+        </script>
+      `,
+      options: optionsExposeLast
     }
   ],
   invalid: [
@@ -622,6 +646,48 @@ tester.run('define-macros-order', rule, {
           line: 6
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+        defineProps({
+          test: Boolean
+        })
+
+        // expose
+        defineExpose({
+          a: 1
+        })
+
+        // console start
+        console.log('test')
+        // console end
+        </script>
+      `,
+      output: `
+        <script setup>
+        defineProps({
+          test: Boolean
+        })
+
+        // console start
+        console.log('test')
+        // console end
+
+        // expose
+        defineExpose({
+          a: 1
+        })
+        </script>
+      `,
+      options: optionsExposeLast,
+      errors: [
+        {
+          message: defineExposeNotTheLast,
+          line: 8
+        }
+      ]
     }
   ]
 })

typings/eslint-plugin-vue/util-types/utils.ts

@@ -44,6 +44,8 @@ export interface ScriptSetupVisitor extends ScriptSetupVisitorBase {
   onDefineOptionsExit?(node: CallExpression): void
   onDefineSlotsEnter?(node: CallExpression): void
   onDefineSlotsExit?(node: CallExpression): void
+  onDefineExposeEnter?(node: CallExpression): void
+  onDefineExposeExit?(node: CallExpression): void
   [query: string]:
     | ((node: VAST.ParamNode) => void)
     | ((node: CallExpression, props: ComponentProp[]) => void)