fix(swc-plugin): preserve top level directives

Author: valkum

packages/presets/swc-plugin/src/lib.rs

@@ -4,10 +4,10 @@ use serde::Deserialize;
 use std::path::{Path, PathBuf};
 use swc_core::{
     atoms::Atom,
-    common::Span,
+    common::{util::take::Take, Span},
     ecma::{
         ast::*,
-        utils::quote_ident,
+        utils::{prepend_stmts, quote_ident},
         visit::{visit_mut_pass, VisitMut, VisitMutWith},
     },
     plugin::{
@@ -183,12 +183,14 @@ impl VisitMut for GraphQLVisitor {
 
         let platform_specific_path: Atom = self.get_relative_import_path("graphql").into();
 
-        for module_item in &self.graphql_operations_or_fragments_to_import {
-            module.body.insert(
-                0,
-                module_item.as_module_item(platform_specific_path.clone()),
-            );
-        }
+        let mut items = module.body.take();
+        prepend_stmts(
+            &mut items,
+            self.graphql_operations_or_fragments_to_import
+                .iter()
+                .map(|module_item| module_item.as_module_item(platform_specific_path.clone())),
+        );
+        module.body = items;
     }
 }
 

packages/presets/swc-plugin/src/tests.rs

@@ -84,3 +84,20 @@ test!(
     const looseToArray = (input)=>[].slice.call(input);
     const targetTag = document.querySelector(`style[data-n-href="${href}"]`);"#
 );
+
+test!(
+    Default::default(),
+    |_| visit_mut_pass(get_test_code_visitor()),
+    top_level_directives_are_preserved,
+    r#""use client";
+    //@ts-ignore
+    import gql from "gql-tag";
+
+    //@ts-ignore
+    const A = gql(/* GraphQL */ `
+    query A {
+        a
+    }
+    `);
+"#
+);

packages/presets/swc-plugin/tests/__swc_snapshots__/src/tests.rs/top_level_directives_are_preserved.js

@@ -0,0 +1,6 @@
+"use client";
+import { ADocument } from "./src/gql/graphql";
+//@ts-ignore
+import gql from "gql-tag";
+//@ts-ignore
+const A = ADocument;

packages/presets/swc-plugin/tests/fixtures/simple-uppercase-operation-name.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */ //@ts-ignore
-import { CFragmentDoc } from "./graphql";
-import { BDocument } from "./graphql";
 import { ADocument } from "./graphql";
+import { BDocument } from "./graphql";
+import { CFragmentDoc } from "./graphql";
 import gql from "gql-tag";
 //@ts-ignore
 const A = ADocument;

packages/presets/swc-plugin/tests/fixtures/simple-uppercase-operation-name.other-dir.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */ //@ts-ignore
-import { CFragmentDoc } from "./../graphql";
-import { BDocument } from "./../graphql";
 import { ADocument } from "./../graphql";
+import { BDocument } from "./../graphql";
+import { CFragmentDoc } from "./../graphql";
 import gql from "gql-tag";
 //@ts-ignore
 const A = ADocument;