fix: keep sourcemaps intact when injecting fragments

Signed-off-by: Frederik Bußmann <frederik@bussmann.io>

Author: freb97

package.json

@@ -104,6 +104,7 @@
     "graphql": "^16.14.2",
     "h3": "^1.15.11",
     "lru-cache": "^11.5.2",
+    "magic-string": "^0.30.21",
     "minimatch": "^10.2.5",
     "nitropack": "^2.13.4",
     "ohash": "^2.0.11",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
 import type { FragmentRegistry } from './registry'
 
+import MagicString from 'magic-string'
+
 import { collectSpreads, scanDefinitions } from '../../runtime/utils/graphql/scanner'
 import { findGraphqlLiterals } from './literals'
 import { resolveFragments } from './registry'
@@ -16,23 +18,13 @@ export interface GraphqlTransformOptions {
   resolveRegistry: (file: string) => FragmentRegistry | undefined
 }
 
-function applyInsertions(source: string, insertions: Insertion[]) {
-  let result = source
-
-  for (const insertion of [...insertions].sort((left, right) => right.at - left.at)) {
-    result = result.slice(0, insertion.at) + insertion.text + result.slice(insertion.at)
-  }
-
-  return result
-}
-
-export function transformGraphqlLiterals(code: string, file: string, options: GraphqlTransformOptions) {
+function collectFragmentInsertions(code: string, file: string, options: GraphqlTransformOptions) {
   const registry = options.resolveRegistry(file)
 
-  if (!registry) return
-
   const insertions: Insertion[] = []
 
+  if (!registry) return insertions
+
   for (const literal of findGraphqlLiterals(code)) {
     const definitions = scanDefinitions(literal.content)
     const definesOperation = definitions.some(definition => definition.kind === 'operation')
@@ -62,25 +54,42 @@ export function transformGraphqlLiterals(code: string, file: string, options: Gr
     })
   }
 
+  return insertions
+}
+
+function rewrite(code: string, file: string, options: GraphqlTransformOptions) {
+  const insertions = collectFragmentInsertions(code, file, options)
+
   if (!insertions.length) return
 
-  return applyInsertions(code, insertions)
+  const source = new MagicString(code)
+
+  for (const insertion of insertions) source.appendLeft(insertion.at, insertion.text)
+
+  return source
+}
+
+export function transformGraphqlLiterals(code: string, file: string, options: GraphqlTransformOptions) {
+  return rewrite(code, file, options)?.toString()
 }
 
 export function createGraphqlTransformPlugin(options: GraphqlTransformOptions) {
   return {
     name: 'nuxt-shopify:graphql',
-    enforce: 'pre' as const,
+    enforce: 'post' as const,
 
     transform(code: string, id: string) {
       if (!TRANSFORMABLE.test(id) || !code.includes('#graphql')) return
 
       const file = id.split('?')[0]!
-      const transformed = transformGraphqlLiterals(code, file, options)
+      const transformed = rewrite(code, file, options)
 
       if (!transformed) return
 
-      return { code: transformed, map: null }
+      return {
+        code: transformed.toString(),
+        map: transformed.generateMap({ source: file, includeContent: true, hires: true }),
+      }
     },
   }
 }

src/utils/graphql/transform.ts

@@ -6,7 +6,7 @@ import { findGraphqlLiterals } from '../../src/utils/graphql/literals'
 import { normalizeOperation } from '../../src/runtime/utils/graphql/normalize'
 import { scanDefinitions } from '../../src/runtime/utils/graphql/scanner'
 import { touchesFragments } from '../../src/setup/graphql-transform'
-import { transformGraphqlLiterals } from '../../src/utils/graphql/transform'
+import { createGraphqlTransformPlugin, transformGraphqlLiterals } from '../../src/utils/graphql/transform'
 
 const IMAGE = `fragment ImageFields on Image {
     url
@@ -171,6 +171,39 @@ describe('fragment injection', () => {
   })
 })
 
+describe('transform plugin', () => {
+  const plugin = createGraphqlTransformPlugin({ resolveRegistry: () => registry() })
+
+  const code = 'const q = `#graphql\n  query FetchProduct {\n    product { ...ProductFields }\n  }\n`'
+
+  const run = (id: string) => plugin.transform(code, id)
+
+  it('transforms a plain script module', () => {
+    expect(run('/project/app/composables/product.ts')?.code).toContain('fragment ProductFields')
+  })
+
+  it('transforms a single file component', () => {
+    expect(run('/project/app/pages/product.vue')?.code).toContain('fragment ProductFields')
+  })
+
+  it('transforms the script block of a single file component', () => {
+    const id = '/project/app/pages/product.vue?vue&type=script&setup=true&lang.ts'
+
+    expect(run(id)?.code).toContain('fragment ProductFields')
+  })
+
+  it('runs after the vue plugin so it never rewrites the source content of a component', () => {
+    expect(plugin.enforce).toBe('post')
+  })
+
+  it('emits a source map pointing back at the untransformed file', () => {
+    const result = run('/project/app/composables/product.ts')!
+
+    expect(result.map?.sources).toStrictEqual(['/project/app/composables/product.ts'])
+    expect(result.map?.sourcesContent).toStrictEqual([code])
+  })
+})
+
 describe('fragment watching', () => {
   const dirs = ['/project/graphql']
   const srcDir = '/project/app'