React QoL Improvements and Bug Fixes (#1275)

.changeset/sharp-pigs-rescue.md

@@ -0,0 +1,5 @@
+---
+'houdini-react': patch
+---
+
+Always generate route component types even if the file hasn't been saved yet

.changeset/weak-spiders-heal.md

@@ -0,0 +1,5 @@
+---
+'houdini-react': patch
+---
+
+Fix corruption of image files on deployment

packages/houdini-react/package.json

@@ -74,4 +74,4 @@
     },
     "main": "./build/plugin-cjs/index.js",
     "types": "./build/plugin/index.d.ts"
-}
+}

packages/houdini-react/src/plugin/codegen/typeRoot.test.ts

@@ -30,8 +30,8 @@ test('generates type files for pages', async function () {
 	// make sure we generated the right thing
 	expect(fs.snapshot(config.typeRootDir)).toMatchInlineSnapshot(`
 		{
-		    "/src/routes/(subRoute)/$types.d.ts": "\\nimport { DocumentHandle } from '../../../../plugins/houdini-react/runtime'\\nimport React from 'react'\\n\\nimport type { LayoutQuery$result, LayoutQuery$artifact, LayoutQuery$input } from '../../../../artifacts/LayoutQuery'\\nimport type { RootQuery$result, RootQuery$artifact, RootQuery$input } from '../../../../artifacts/RootQuery'\\nimport type { FinalQuery$result, FinalQuery$artifact, FinalQuery$input } from '../../../../artifacts/FinalQuery'\\n\\n\\nexport type PageProps = {\\n    LayoutQuery: LayoutQuery$result,\\n    LayoutQuery$handle: DocumentHandle<LayoutQuery$artifact, LayoutQuery$result, LayoutQuery$input>,\\n    RootQuery: RootQuery$result,\\n    RootQuery$handle: DocumentHandle<RootQuery$artifact, RootQuery$result, RootQuery$input>,\\n    FinalQuery: FinalQuery$result,\\n    FinalQuery$handle: DocumentHandle<FinalQuery$artifact, FinalQuery$result, FinalQuery$input>,\\n}\\n\\n\\n\\n",
-		    "/src/routes/$types.d.ts": "\\nimport { DocumentHandle } from '../../../plugins/houdini-react/runtime'\\nimport React from 'react'\\n\\nimport type { LayoutQuery$result, LayoutQuery$artifact, LayoutQuery$input } from '../../../artifacts/LayoutQuery'\\n\\n\\nexport type PageProps = {\\n    LayoutQuery: LayoutQuery$result,\\n    LayoutQuery$handle: DocumentHandle<LayoutQuery$artifact, LayoutQuery$result, LayoutQuery$input>,\\n}\\n\\n\\n\\n"
+		    "/src/routes/(subRoute)/$types.d.ts": "\\nimport { DocumentHandle } from '../../../../plugins/houdini-react/runtime'\\nimport React from 'react'\\n\\nimport type { LayoutQuery$result, LayoutQuery$artifact, LayoutQuery$input } from '../../../../artifacts/LayoutQuery'\\nimport type { RootQuery$result, RootQuery$artifact, RootQuery$input } from '../../../../artifacts/RootQuery'\\nimport type { FinalQuery$result, FinalQuery$artifact, FinalQuery$input } from '../../../../artifacts/FinalQuery'\\n\\n\\nexport type PageProps = {\\n    LayoutQuery: LayoutQuery$result,\\n    LayoutQuery$handle: DocumentHandle<LayoutQuery$artifact, LayoutQuery$result, LayoutQuery$input>,\\n    RootQuery: RootQuery$result,\\n    RootQuery$handle: DocumentHandle<RootQuery$artifact, RootQuery$result, RootQuery$input>,\\n    FinalQuery: FinalQuery$result,\\n    FinalQuery$handle: DocumentHandle<FinalQuery$artifact, FinalQuery$result, FinalQuery$input>,\\n}\\n\\n\\n\\nexport type LayoutProps = {\\n\\tchildren: React.ReactNode,\\n\\n}\\n\\n",
+		    "/src/routes/$types.d.ts": "\\nimport { DocumentHandle } from '../../../plugins/houdini-react/runtime'\\nimport React from 'react'\\n\\nimport type { LayoutQuery$result, LayoutQuery$artifact, LayoutQuery$input } from '../../../artifacts/LayoutQuery'\\n\\n\\nexport type PageProps = {\\n    LayoutQuery: LayoutQuery$result,\\n    LayoutQuery$handle: DocumentHandle<LayoutQuery$artifact, LayoutQuery$result, LayoutQuery$input>,\\n}\\n\\n\\n\\nexport type LayoutProps = {\\n\\tchildren: React.ReactNode,\\n\\n}\\n\\n"
 		}
 	`)
 })

packages/houdini-react/src/plugin/codegen/typeRoot.ts

@@ -69,35 +69,39 @@ ${
 
 ${
 	/* if there is a page, then we need to define the props object */
+	`
+export type PageProps = {
+${
 	!page
 		? ''
-		: `
-export type PageProps = {
-${page.query_options
-	.map(
-		(query) =>
-			`    ${query}: ${query}$result,
+		: page.query_options
+				.map(
+					(query) =>
+						`    ${query}: ${query}$result,
     ${query}$handle: DocumentHandle<${query}$artifact, ${query}$result, ${query}$input>,`
-	)
-	.join('\n')}
+				)
+				.join('\n')
+}
 }
 `
 }
 
 ${
 	/* if there is a layout, then we need to define the props object */
-	!layout
-		? ''
-		: `
+	`
 export type LayoutProps = {
 	children: React.ReactNode,
-${layout.query_options
-	.map(
-		(query) =>
-			`    ${query}: ${query}$result,
+${
+	!layout
+		? ''
+		: layout.query_options
+				.map(
+					(query) =>
+						`    ${query}: ${query}$result,
     ${query}$handle: DocumentHandle<${query}$artifact, ${query}$result, ${query}$input>,`
-	)
-	.join('\n')}
+				)
+				.join('\n')
+}
 }
 `
 }

packages/houdini/src/lib/fs.ts

@@ -54,14 +54,17 @@ export async function copyFile(src: string, dest: string): Promise<void | null>
 	return null
 }
 
-export async function readFile(filepath: string): Promise<string | null> {
+export async function readFile(
+	filepath: string,
+	encoding?: BufferEncoding
+): Promise<string | null> {
 	if (houdini_mode.is_testing) {
 		try {
 			if (filepath.includes('build/runtime')) {
-				return await fs.readFile(filepath, 'utf-8')
+				return await fs.readFile(filepath, encoding ?? 'utf-8')
 			}
 
-			return memfs.readFileSync(filepath, 'utf-8')!.toString()
+			return memfs.readFileSync(filepath, encoding ?? 'utf-8')!.toString()
 		} catch (e) {
 			return null
 		}
@@ -286,13 +289,16 @@ export async function recursiveCopy(
 				else {
 					const targetPath = path.join(parentDir, child)
 
-					// we might have to transform the value before copying it
-					let original = (await readFile(childPath)) || ''
+					// if we have a transform, read the file and then write it
 					if (transforms?.[childPath]) {
-						original = await transforms[childPath](original, childPath)
+						let original = (await readFile(childPath)) || ''
+						await writeFile(
+							targetPath,
+							await transforms[childPath](original, childPath)
+						)
+					} else {
+						await copyFile(childPath, targetPath)
 					}
-
-					await writeFile(targetPath, original)
 				}
 			})
 		)