Fix to keep directives before import statement

Author: wooorm

lib/index.js

@@ -216,7 +216,19 @@ export function buildJsx(tree, options) {
         }
 
         if (specifiers.length > 0) {
-          node.body.unshift({
+          let injectIndex = 0
+
+          while (injectIndex < node.body.length) {
+            const child = node.body[injectIndex]
+
+            if ('directive' in child && child.directive) {
+              injectIndex++
+            } else {
+              break
+            }
+          }
+
+          node.body.splice(injectIndex, 0, {
             type: 'ImportDeclaration',
             specifiers,
             source: {

test.js

@@ -1647,6 +1647,17 @@ test('estree-util-build-jsx', async function (t) {
       assert.equal(generate(tree), 'React.createElement("a");\n')
     }
   )
+
+  await t.test('should keep directives first', function () {
+    const tree = parse('"use client"\nconst x = <a/>')
+
+    buildJsx(tree, {runtime: 'automatic'})
+
+    assert.equal(
+      generate(tree),
+      '"use client";\nimport {jsx as _jsx} from "react/jsx-runtime";\nconst x = _jsx("a", {});\n'
+    )
+  })
 })
 
 /**