vue/define-macros-order bug

lib/rules/define-macros-order.js

@@ -19,6 +19,17 @@ const MACROS_PROPS = 'defineProps'
 const ORDER = [MACROS_EMITS, MACROS_PROPS]
 const DEFAULT_ORDER = [MACROS_PROPS, MACROS_EMITS]
 
+/**
+ * @param {VElement} scriptSetup
+ * @param {ASTNode} node
+ */
+function inScriptSetup(scriptSetup, node) {
+  return (
+    scriptSetup.range[0] <= node.range[0] &&
+    node.range[1] <= scriptSetup.range[1]
+  )
+}
+
 /**
  * @param {ASTNode} node
  */
@@ -33,9 +44,10 @@ function isUseStrictStatement(node) {
 /**
  * Get an index of the first statement after imports and interfaces in order
  * to place defineEmits and defineProps before this statement
+ * @param {VElement} scriptSetup
  * @param {Program} program
  */
-function getTargetStatementPosition(program) {
+function getTargetStatementPosition(scriptSetup, program) {
   const skipStatements = new Set([
     'ImportDeclaration',
     'TSInterfaceDeclaration',
@@ -45,7 +57,11 @@ function getTargetStatementPosition(program) {
   ])
 
   for (const [index, item] of program.body.entries()) {
-    if (!skipStatements.has(item.type) && !isUseStrictStatement(item)) {
+    if (
+      inScriptSetup(scriptSetup, item) &&
+      !skipStatements.has(item.type) &&
+      !isUseStrictStatement(item)
+    ) {
       return index
     }
   }
@@ -104,7 +120,10 @@ function create(context) {
       'Program:exit'(program) {
         const shouldFirstNode = macrosNodes.get(order[0])
         const shouldSecondNode = macrosNodes.get(order[1])
-        const firstStatementIndex = getTargetStatementPosition(program)
+        const firstStatementIndex = getTargetStatementPosition(
+          scriptSetup,
+          program
+        )
         const firstStatement = program.body[firstStatementIndex]
 
         // have both defineEmits and defineProps
@@ -213,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),
@@ -228,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(';') && !/[\n;]/.test(afterText)
+
+    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: [
@@ -387,6 +382,41 @@ tester.run('define-macros-order', rule, {
           line: 3
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          import 'test2'
+          export default { inheritAttrs: false };
+        </script>
+
+        <script setup>
+          import 'test'
+
+          defineEmits(['update:test'])
+          const props = defineProps({ test: Boolean });
+        </script>
+      `,
+      output: `
+        <script>
+          import 'test2'
+          export default { inheritAttrs: false };
+        </script>
+
+        <script setup>
+          import 'test'
+
+          const props = defineProps({ test: Boolean });
+          defineEmits(['update:test'])
+        </script>
+      `,
+      errors: [
+        {
+          message: message('defineProps'),
+          line: 11
+        }
+      ]
     }
   ]
 })