fix(transformer/top-level-statements): should not inject statements after non-import statement

Author: Dunqing

crates/oxc_transformer/src/common/top_level_statements.rs

@@ -74,12 +74,12 @@ impl<'a> TopLevelStatementsStore<'a> {
             return;
         }
 
-        // Insert statements after any existing `import` statements
+        // Insert statements before the first non-import statement.
         let index = program
             .body
             .iter()
-            .rposition(|stmt| matches!(stmt, Statement::ImportDeclaration(_)))
-            .map_or(0, |i| i + 1);
+            .position(|stmt| !matches!(stmt, Statement::ImportDeclaration(_)))
+            .unwrap_or(program.body.len());
 
         program.body.splice(index..index, stmts.drain(..));
     }

tasks/coverage/snapshots/semantic_typescript.snap

@@ -19242,7 +19242,7 @@ rebuilt        : []
 semantic Error: tasks/coverage/typescript/tests/cases/compiler/jsxPartialSpread.tsx
 Symbol reference IDs mismatch for "Select":
 after transform: SymbolId(0): [ReferenceId(2), ReferenceId(3)]
-rebuilt        : SymbolId(0): [ReferenceId(3)]
+rebuilt        : SymbolId(3): [ReferenceId(3)]
 Unresolved references mismatch:
 after transform: ["Parameters", "Partial"]
 rebuilt        : []

tasks/transform_conformance/overrides/babel-plugin-transform-react-jsx/test/fixtures/autoImport/after-polyfills-2/output.mjs

@@ -0,0 +1,12 @@
+// The reason to override this test case:
+// We generate the import statements before the first non-import statement,
+// while the original test case expects them to be after all import statements.
+
+import { jsx as _jsx } from "react/jsx-runtime";
+ReactDOM.render(
+	/* @__PURE__ */ _jsx("p", { children: "Hello, World!" }),
+	document.getElementById("root"),
+);
+import "react-app-polyfill/ie11";
+import "react-app-polyfill/stable";
+import ReactDOM from "react-dom";

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,6 +1,6 @@
 commit: 1d4546bc
 
-Passed: 180/299
+Passed: 180/300
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -502,7 +502,17 @@ after transform: [ReferenceId(0), ReferenceId(1), ReferenceId(4), ReferenceId(9)
 rebuilt        : [ReferenceId(5)]
 
 
-# babel-plugin-transform-react-jsx (44/46)
+# babel-plugin-transform-react-jsx (44/47)
+* refresh/import-after-component/input.js
+Missing ScopeId
+Missing ReferenceId: "useFoo"
+Scope children mismatch:
+after transform: ScopeId(0): [ScopeId(1), ScopeId(2)]
+rebuilt        : ScopeId(0): [ScopeId(1), ScopeId(2), ScopeId(3)]
+Symbol reference IDs mismatch for "useFoo":
+after transform: SymbolId(1): [ReferenceId(1), ReferenceId(7)]
+rebuilt        : SymbolId(1): [ReferenceId(6), ReferenceId(11), ReferenceId(12)]
+
 * refresh/react-refresh/includes-custom-hooks-into-the-signatures-when-commonjs-target-is-used/input.jsx
 x Output mismatch
 

tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/refresh/import-after-component/input.js

@@ -0,0 +1,14 @@
+import { observer } from "mobx-react-lite";
+import { useFoo } from "./useFoo";
+
+export const BazComponent = observer(function BazComponent_() {
+	const foo = useFoo();
+	return (
+		<>
+			{foo}
+			{bar}
+		</>
+	);
+});
+
+import { bar } from "./bar";

tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/refresh/import-after-component/output.js

@@ -0,0 +1,21 @@
+import { observer } from "mobx-react-lite";
+import { useFoo } from "./useFoo";
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var _s = $RefreshSig$();
+
+export const BazComponent = _s(observer(_c = _s(function BazComponent_() {
+  _s();
+  const foo = useFoo();
+  return /* @__PURE__ */ _jsxs(_Fragment, { children: [foo, bar] });
+}, "useFoo{foo}", false, function() {
+  return [useFoo];
+})), "useFoo{foo}", false, function() {
+  return [useFoo];
+});
+_c2 = BazComponent;
+
+import { bar } from "./bar";
+
+var _c, _c2;
+$RefreshReg$(_c, "BazComponent$observer");
+$RefreshReg$(_c2, "BazComponent");