Improve auto-fix for vue/define-macros-order rule (#1863)

* vue/define-macros-order improvements

* vue/define-macros-order improvements

* Add test for corner case

Author: edikdeisling

lib/rules/define-macros-order.js

@@ -232,13 +232,12 @@ function create(context) {
     const targetComment = sourceCode.getTokenAfter(beforeTargetToken, {
       includeComments: true
     })
-    const textSpace = getTextBetweenTokens(beforeTargetToken, targetComment)
     // make insert text: comments + node + space before target
     const textNode = sourceCode.getText(
       node,
       node.range[0] - nodeComment.range[0]
     )
-    const insertText = textNode + textSpace
+    const insertText = getInsertText(textNode, target)
 
     return [
       fixer.insertTextBefore(targetComment, insertText),
@@ -247,17 +246,28 @@ function create(context) {
   }
 
   /**
-   * @param {ASTNode} tokenBefore
-   * @param {ASTNode} tokenAfter
+   * Get result text to insert
+   * @param {string} textNode
+   * @param {ASTNode} target
    */
-  function getTextBetweenTokens(tokenBefore, tokenAfter) {
-    return sourceCode.text.slice(tokenBefore.range[1], tokenAfter.range[0])
+  function getInsertText(textNode, target) {
+    const afterTargetComment = sourceCode.getTokenAfter(target, {
+      includeComments: true
+    })
+    const afterText = sourceCode.text.slice(
+      target.range[1],
+      afterTargetComment.range[0]
+    )
+    // handle case when a();b() -> b()a();
+    const invalidResult = !textNode.endsWith(';') && !afterText.includes('\n')
+
+    return textNode + afterText + (invalidResult ? ';' : '')
   }
 
   /**
    * Get position of the beginning of the token's line(or prevToken end if no line)
-   * @param {ASTNode} token
-   * @param {ASTNode} prevToken
+   * @param {ASTNode|Token} token
+   * @param {ASTNode|Token} prevToken
    */
   function getLineStartIndex(token, prevToken) {
     // if we have next token on the same line - get index right before that token

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

@@ -155,9 +155,7 @@ tester.run('define-macros-order', rule, {
           defineProps({
             test: Boolean
           })
-
           defineEmits(['update:test'])
-
           console.log('test1')
           console.log('test2')
           console.log('test3')
@@ -192,7 +190,6 @@ tester.run('define-macros-order', rule, {
           defineProps({
             test: Boolean
           })
-
           defineEmits(['update:test'])
           console.log('test1')
         </script>
@@ -261,7 +258,6 @@ tester.run('define-macros-order', rule, {
           }
 
           const emit = defineEmits<{(e: 'update:test'): void}>()
-
           const props = withDefaults(defineProps<Props>(), {
             msg: 'hello',
             labels: () => ['one', 'two']
@@ -377,8 +373,7 @@ tester.run('define-macros-order', rule, {
       `,
       output: `
         <script setup>
-          defineEmits(['update:test'])
-          const props = defineProps({ test: Boolean });        </script>
+          defineEmits(['update:test']);const props = defineProps({ test: Boolean });        </script>
       `,
       options: optionsEmitsFirst,
       errors: [
@@ -413,7 +408,6 @@ tester.run('define-macros-order', rule, {
           import 'test'
 
           const props = defineProps({ test: Boolean });
-
           defineEmits(['update:test'])
         </script>
       `,
@@ -423,6 +417,21 @@ tester.run('define-macros-order', rule, {
           line: 11
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>defineEmits(['update:test']);defineProps({ test: Boolean })</script>
+      `,
+      output: `
+        <script setup>defineProps({ test: Boolean });defineEmits(['update:test']);</script>
+      `,
+      errors: [
+        {
+          message: message('defineProps'),
+          line: 2
+        }
+      ]
     }
   ]
 })