houdini-svelte 0.17.0-next.0

package/src/plugin/codegen/routes/kit.test.ts

@@ -0,0 +1,276 @@
+import { parseJS, fs, path } from 'houdini'
+import { testConfig } from 'houdini/test'
+import { test, expect } from 'vitest'
+
+import generate from '..'
+import { type_route_dir } from '../../kit'
+
+const config = testConfig()
+const plugin_root = config.pluginDirectory('test-plugin')
+
+test('generates types for inline queries', async function () {
+	// create the mock filesystem
+	await fs.mock({
+		[config.routesDir]: {
+			myProfile: {
+				'+page.svelte': `
+<script>
+    import { query, graphql } from '$houdini'
+
+    const result = query(graphql\`query MyInlineQuery { viewer { id } } \`)
+</script>
+`,
+			},
+		},
+	})
+
+	// execute the generator
+	await generate({ config, documents: [], framework: 'kit', plugin_root })
+
+	// load the contents of the file
+	const queryContents = await fs.readFile(
+		path.join(path.join(type_route_dir(config), 'myProfile', '$houdini.d.ts'))
+	)
+	expect(queryContents).toBeTruthy()
+
+	const parsedQuery = (await parseJS(queryContents!))?.script
+	// verify contents
+	expect(parsedQuery).toMatchInlineSnapshot(`
+		import type * as Kit from "@sveltejs/kit";
+		import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction } from "../../../../plugins/houdini-svelte/runtime/types";
+		import type { PageLoadEvent, PageData as KitPageData } from "./$types";
+		import { MyInlineQuery$result, MyInlineQuery$input } from "../../../../artifacts/MyInlineQuery";
+		import { MyInlineQueryStore } from "../../../../stores/MyInlineQuery";
+		type PageParams = PageLoadEvent["params"];
+
+		export type PageData = {
+		    MyInlineQuery: MyInlineQueryStore
+		};
+	`)
+})
+
+test('generates types for page queries', async function () {
+	// create the mock filesystem
+	await fs.mock({
+		[config.routesDir]: {
+			myProfile: {
+				'+page.gql': `
+query MyPageQuery {
+    viewer {
+        id
+    }
+}
+`,
+			},
+		},
+	})
+
+	// execute the generator
+	await generate({ config, documents: [], framework: 'kit', plugin_root })
+
+	// load the contents of the file
+	const queryContents = await fs.readFile(
+		path.join(path.join(type_route_dir(config), 'myProfile', '$houdini.d.ts'))
+	)
+	expect(queryContents).toBeTruthy()
+
+	const parsedQuery = (await parseJS(queryContents!))?.script
+	// verify contents
+	expect(parsedQuery).toMatchInlineSnapshot(`
+		import type * as Kit from "@sveltejs/kit";
+		import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction } from "../../../../plugins/houdini-svelte/runtime/types";
+		import type { PageLoadEvent, PageData as KitPageData } from "./$types";
+		import { MyPageQuery$result, MyPageQuery$input } from "../../../../artifacts/MyPageQuery";
+		import { MyPageQueryStore } from "../../../../stores/MyPageQuery";
+		type PageParams = PageLoadEvent["params"];
+
+		export type PageData = {
+		    MyPageQuery: MyPageQueryStore
+		};
+	`)
+})
+
+test('generates types for layout queries', async function () {
+	// create the mock filesystem
+	await fs.mock({
+		[config.routesDir]: {
+			myProfile: {
+				'+layout.gql': `
+query MyLayoutQuery { 
+    viewer { 
+        id
+    }
+}
+`,
+			},
+		},
+	})
+
+	// execute the generator
+	await generate({ config, documents: [], framework: 'kit', plugin_root })
+
+	// load the contents of the file
+	const queryContents = await fs.readFile(
+		path.join(path.join(type_route_dir(config), 'myProfile', '$houdini.d.ts'))
+	)
+	expect(queryContents).toBeTruthy()
+
+	const parsedQuery = (await parseJS(queryContents!))?.script
+	// verify contents
+	expect(parsedQuery).toMatchInlineSnapshot(`
+		import type * as Kit from "@sveltejs/kit";
+		import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction } from "../../../../plugins/houdini-svelte/runtime/types";
+		import type { LayoutLoadEvent, LayoutData as KitPageData } from "./$types";
+		import { MyLayoutQuery$result, MyLayoutQuery$input } from "../../../../artifacts/MyLayoutQuery";
+		import { MyLayoutQueryStore } from "../../../../stores/MyLayoutQuery";
+		type LayoutParams = LayoutLoadEvent["params"];
+
+		export type LayoutData = {
+		    MyLayoutQuery: MyLayoutQueryStore
+		};
+	`)
+})
+
+test('generates types for after load', async function () {
+	// create the mock filesystem
+	await fs.mock({
+		[config.routesDir]: {
+			myProfile: {
+				'+page.js': `
+                    import { graphql } from '$houdini'
+
+                    const store1 = graphql\`query MyPageLoad1Query($id: ID!) {
+                        viewer(id: $id) {
+                            id
+                        }
+                    }\`
+
+                    const store2 = graphql\`query MyPageLoad2Query {
+                        viewer {
+                            id
+                        }
+                    }\`
+
+                    export const houdini_load = [ store1, store2 ]
+
+                    export function afterLoad() {
+                        return {
+                            hello: 'world'
+                        }
+                    }
+                `,
+			},
+		},
+	})
+
+	// execute the generator
+	await generate({ config, documents: [], framework: 'kit', plugin_root })
+
+	// load the contents of the file
+	const queryContents = await fs.readFile(
+		path.join(type_route_dir(config), 'myProfile', '$houdini.d.ts')
+	)
+	expect(queryContents).toBeTruthy()
+
+	// verify contents
+	expect((await parseJS(queryContents!))?.script).toMatchInlineSnapshot(`
+		import type * as Kit from "@sveltejs/kit";
+		import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction } from "../../../../plugins/houdini-svelte/runtime/types";
+		import type { PageLoadEvent, PageData as KitPageData } from "./$types";
+		import { MyPageLoad1Query$result, MyPageLoad1Query$input } from "../../../../artifacts/MyPageLoad1Query";
+		import { MyPageLoad1QueryStore } from "../../../../stores/MyPageLoad1Query";
+		import { MyPageLoad2Query$result, MyPageLoad2Query$input } from "../../../../artifacts/MyPageLoad2Query";
+		import { MyPageLoad2QueryStore } from "../../../../stores/MyPageLoad2Query";
+		type PageParams = PageLoadEvent["params"];
+		export type MyPageLoad1QueryVariables = VariableFunction<PageParams, MyPageLoad1Query$input>;
+		type AfterLoadReturn = ReturnType<typeof import("./+page").afterLoad>;
+
+		type AfterLoadData = {
+		    MyPageLoad1Query: MyPageLoad1Query$result
+		    MyPageLoad2Query: MyPageLoad2Query$result
+		};
+
+		type LoadInput = {
+		    MyPageLoad1Query: MyPageLoad1Query$input
+		};
+
+		export type AfterLoadEvent = {
+		    event: PageLoadEvent
+		    data: AfterLoadData
+		    input: LoadInput
+		};
+
+		export type PageData = {
+		    MyPageLoad1Query: MyPageLoad1QueryStore
+		    MyPageLoad2Query: MyPageLoad2QueryStore
+		} & AfterLoadReturn;
+	`)
+})
+
+test('generates types for onError', async function () {
+	// create the mock filesystem
+	await fs.mock({
+		[config.routesDir]: {
+			myProfile: {
+				'+page.js': `
+                    import { graphql } from '$houdini'
+
+                    const store1 = graphql\`query MyPageLoad1Query($id: ID!) {
+                        viewer(id: $id) {
+                            id
+                        }
+                    }\`
+
+                    const store2 = graphql\`query MyPageLoad2Query {
+                        viewer {
+                            id
+                        }
+                    }\`
+
+                    export const houdini_load = [ store1, store2 ]
+
+                    export function onError() {
+                        return {
+                            hello: 'world'
+                        }
+                    }
+                `,
+			},
+		},
+	})
+
+	// execute the generator
+	await generate({ config, documents: [], framework: 'kit', plugin_root })
+
+	// load the contents of the file
+	const queryContents = await fs.readFile(
+		path.join(type_route_dir(config), 'myProfile', '$houdini.d.ts')
+	)
+	expect(queryContents).toBeTruthy()
+
+	// verify contents
+	expect((await parseJS(queryContents!))?.script).toMatchInlineSnapshot(`
+		import type * as Kit from "@sveltejs/kit";
+		import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction } from "../../../../plugins/houdini-svelte/runtime/types";
+		import type { PageLoadEvent, PageData as KitPageData } from "./$types";
+		import { MyPageLoad1Query$result, MyPageLoad1Query$input } from "../../../../artifacts/MyPageLoad1Query";
+		import { MyPageLoad1QueryStore } from "../../../../stores/MyPageLoad1Query";
+		import { MyPageLoad2Query$result, MyPageLoad2Query$input } from "../../../../artifacts/MyPageLoad2Query";
+		import { MyPageLoad2QueryStore } from "../../../../stores/MyPageLoad2Query";
+		type PageParams = PageLoadEvent["params"];
+		export type MyPageLoad1QueryVariables = VariableFunction<PageParams, MyPageLoad1Query$input>;
+
+		export type OnErrorEvent = {
+		    event: LoadEvent
+		    input: LoadInput
+		    error: Error | Error[]
+		};
+
+		type OnErrorReturn = ReturnType<typeof import("./+page").onError>;
+
+		export type PageData = {
+		    MyPageLoad1Query: MyPageLoad1QueryStore
+		    MyPageLoad2Query: MyPageLoad2QueryStore
+		} & OnErrorReturn;
+	`)
+})

package/src/plugin/codegen/stores/fragment.ts

@@ -0,0 +1,83 @@
+import { CollectedGraphQLDocument, fs, GenerateHookInput, path } from 'houdini'
+
+import { global_store_name, stores_directory, store_name } from '../../kit'
+
+export async function generateFragmentStore(
+	{ config, plugin_root }: GenerateHookInput,
+	doc: CollectedGraphQLDocument
+) {
+	const fileName = doc.name
+	const artifactName = `${doc.name}`
+	const storeName = store_name({ config, name: doc.name })
+	const globalStoreName = global_store_name({ config, name: doc.name })
+
+	const paginationMethod = doc.refetch?.method
+
+	// in order to build the store, we need to know what class we're going to import from
+	let queryClass = 'FragmentStore'
+	if (paginationMethod === 'cursor') {
+		queryClass =
+			doc.refetch?.direction === 'forward'
+				? 'FragmentStoreForwardCursor'
+				: 'FragmentStoreBackwardCursor'
+	} else if (paginationMethod === 'offset') {
+		queryClass = 'FragmentStoreOffset'
+	}
+
+	// store definition
+	const storeContent = `import { ${queryClass} } from '../runtime/stores'
+import artifact from '$houdini/artifacts/${artifactName}'
+${
+	paginationMethod
+		? `import _PaginationArtifact from '${config.artifactImportPath(
+				config.paginationQueryName(doc.name)
+		  )}'`
+		: ''
+}
+
+// create the query store
+
+export class ${storeName} extends ${queryClass} {
+    constructor() {
+        super({
+			artifact,
+			storeName: ${JSON.stringify(storeName)},
+			variables: ${JSON.stringify(true)},
+			${paginationMethod ? 'paginationArtifact: _PaginationArtifact,' : ''}
+		})
+	}
+}
+
+export const ${globalStoreName} = new ${storeName}()
+
+export default ${globalStoreName}
+`
+
+	const _data = `${artifactName}$data`
+
+	// the type definitions for the store
+	const typeDefs = `import type { ${_data}, ${queryClass}, QueryStoreFetchParams} from '$houdini'
+
+export declare class ${storeName} extends ${queryClass}<${_data}, {}> {
+	constructor() {
+		// @ts-ignore
+		super({})
+	}
+}
+
+export const ${globalStoreName}: ${storeName}
+
+export declare const load_${artifactName}: (params: QueryStoreFetchParams<${_data}, {}>) => Promise<${storeName}>
+
+export default ${storeName}
+`
+
+	// write the store contents to disk
+	await Promise.all([
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.d.ts`), typeDefs),
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.js`), storeContent),
+	])
+
+	// return the store name to the generator so the index file can be created
+	return fileName
+}

package/src/plugin/codegen/stores/index.ts

@@ -0,0 +1,55 @@
+import { cleanupFiles, fs, ArtifactKind, GenerateHookInput, path } from 'houdini'
+
+import { stores_directory } from '../../kit'
+import { generateFragmentStore } from './fragment'
+import { generateIndividualStoreMutation } from './mutation'
+import { generateIndividualStoreQuery } from './query'
+import { generateSubscriptionStore } from './subscription'
+
+export default async function storesGenerator(input: GenerateHookInput) {
+	const { config, documents } = input
+
+	const listOfStores: (string | null)[] = []
+
+	await Promise.all(
+		documents.map(async (doc) => {
+			// if the doc is not meant to be generated, skip it
+			if (!doc.generateStore) {
+				return
+			}
+
+			if (doc.kind === ArtifactKind.Query) {
+				listOfStores.push(await generateIndividualStoreQuery(input, doc))
+			} else if (doc.kind === ArtifactKind.Mutation) {
+				listOfStores.push(await generateIndividualStoreMutation(input, doc))
+			} else if (doc.kind === ArtifactKind.Subscription) {
+				listOfStores.push(await generateSubscriptionStore(input, doc))
+			} else if (doc.kind === ArtifactKind.Fragment) {
+				listOfStores.push(await generateFragmentStore(input, doc))
+			}
+		})
+	)
+
+	const listOfStoresOrdered = listOfStores
+		.filter((c) => c !== null)
+		.sort((a, b) => (a + '').localeCompare(b + '')) as string[]
+	const dataIndex = listOfStoresOrdered.map((c) => `export * from './${c}'`).join(`\n`)
+	await fs.writeFile(path.join(stores_directory(input.plugin_root), `index.js`), dataIndex)
+
+	const dataIndexDTs = `import type { DataSource } from '$houdini/runtime'
+
+export type Result<DataType> = {
+	isFetching: boolean
+	partial: boolean
+	source?: DataSource | null
+	data?: DataType | null
+	error?: Error | null
+}`
+
+	const storePath = stores_directory(input.plugin_root)
+
+	await fs.writeFile(path.join(storePath, `index.d.ts`), dataIndexDTs + `\n` + dataIndex)
+
+	// cleanup files that are no more necessary!
+	await cleanupFiles(storePath, listOfStoresOrdered)
+}

package/src/plugin/codegen/stores/mutation.ts

@@ -0,0 +1,56 @@
+import { CollectedGraphQLDocument, fs, path, GenerateHookInput } from 'houdini'
+
+import { global_store_name, stores_directory, store_name } from '../../kit'
+
+export async function generateIndividualStoreMutation(
+	{ config, plugin_root }: GenerateHookInput,
+	doc: CollectedGraphQLDocument
+) {
+	const fileName = doc.name
+	const storeName = store_name({ config, name: doc.name })
+	const globalStoreName = global_store_name({ config, name: doc.name })
+	const artifactName = `${doc.name}`
+
+	// store content
+	const storeData = `import artifact from '$houdini/artifacts/${artifactName}'
+import { MutationStore } from '../runtime/stores'
+
+export class ${storeName} extends MutationStore {
+	constructor() {
+		super({
+			artifact,
+		})
+	}
+}
+
+export const ${globalStoreName} = new ${storeName}()
+
+export default ${globalStoreName}
+`
+
+	const _input = `${artifactName}$input`
+	const _data = `${artifactName}$result`
+	const _optimistic = `${artifactName}$optimistic`
+
+	// the type definitions for the store
+	const typeDefs = `import type { ${_input}, ${_data}, ${_optimistic}, MutationStore } from '$houdini'
+
+export declare class ${storeName} extends MutationStore<${_data} | undefined, ${_input}, ${_optimistic}>{
+	constructor() {
+		// @ts-ignore
+		super({})
+	}
+}
+
+export const ${globalStoreName}: ${storeName}
+
+export default ${storeName}
+  `
+
+	await Promise.all([
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.js`), storeData),
+		fs.writeFile(path.join(stores_directory(plugin_root), `${fileName}.d.ts`), typeDefs),
+	])
+
+	return fileName
+}