Sourcemaps (#895)

* first pass threading sourcemaps

* ensure +layout.svelte exists

* stablize hash

* better behavior for fspatch

* update snapshots

* changelog

.changeset/sharp-kangaroos-admire.md

@@ -0,0 +1,5 @@
+---
+'houdini-svelte': patch
+---
+
+Fix sourcemaps

packages/houdini-svelte/package.json

@@ -35,6 +35,7 @@
         "graphql": "^15.8.0",
         "houdini": "workspace:^",
         "recast": "^0.23.1",
+        "rollup": "^3.7.4",
         "svelte": "^3.55.1",
         "vite": "^4.0.4"
     },

packages/houdini-svelte/src/plugin/fsPatch.ts

@@ -2,6 +2,7 @@ import type { PluginHooks } from 'houdini'
 import { fs, path } from 'houdini'
 import type { PathLike } from 'node:fs'
 import filesystem, { Dirent } from 'node:fs'
+import filesystemPromises from 'node:fs/promises'
 
 import { _config } from '.'
 import type { Framework } from './kit'
@@ -217,6 +218,31 @@ Object.defineProperty(globalThis, 'fs', {
 	value: filesystem,
 })
 
+// patch the promise util to detect a mocked layout
+const _readFile = filesystemPromises.readFile
+
+filesystemPromises.readFile = async (path, options): Promise<any> => {
+	// this is +layout.svelte because source map validations are by file name
+	// make sure there is always a +layout.svelte
+	if (path.toString().endsWith('+layout.svelte')) {
+		try {
+			return await _readFile(path, options)
+		} catch {
+			return typeof options === 'string' || options?.encoding
+				? empty_layout
+				: Buffer.from(empty_layout)
+		}
+	}
+
+	return _readFile(path, options)
+}
+
+Object.defineProperty(globalThis, 'fs/promises', {
+	configurable: true,
+	enumerable: true,
+	value: filesystemPromises,
+})
+
 function virtual_file(name: string, options: Parameters<typeof filesystem.readdirSync>[1]) {
 	return !options?.withFileTypes
 		? name

packages/houdini-svelte/src/plugin/transforms/index.ts

@@ -1,6 +1,7 @@
 import { parseJS, runPipeline, formatErrors } from 'houdini'
 import type { TransformPage } from 'houdini/vite'
 import * as recast from 'recast'
+import type { SourceMapInput } from 'rollup'
 
 import type { ParsedFile } from '../extract'
 import { parseSvelte } from '../extract'
@@ -17,7 +18,7 @@ const pipeline = [kit, query, tags]
 export default async function apply_transforms(
 	framework: Framework,
 	page: TransformPage
-): Promise<{ code: string }> {
+): Promise<{ code: string; map?: SourceMapInput }> {
 	// a single transform might need to do different things to the module and
 	// instance scripts so we're going to pull them out, push them through separately,
 	// and then join them back together
@@ -30,7 +31,7 @@ export default async function apply_transforms(
 			script = await parseJS(page.content)
 		}
 	} catch (e) {
-		return { code: page.content }
+		return { code: page.content, map: page.map }
 	}
 
 	// if the route script is nill we can just use an empty program
@@ -63,13 +64,17 @@ export default async function apply_transforms(
 	}
 
 	// print the result
-	const printedScript = recast.print(result.script).code
+	const { code, map } = recast.print(result.script, {
+		// @ts-ignore
+		inputSourceMap: page.map,
+	})
 
 	return {
 		// if we're transforming a svelte file, we need to replace the script's inner contents
 		code: !page.filepath.endsWith('.svelte')
-			? printedScript
-			: replace_tag_content(page.content, script.start, script.end, printedScript),
+			? code
+			: replace_tag_content(page.content, script.start, script.end, code),
+		map,
 	}
 }