houdini-svelte 0.17.0-next.0

package/src/plugin/transforms/kit/session.test.ts

@@ -0,0 +1,268 @@
+import { test, expect } from 'vitest'
+
+import { test_transform_js, test_transform_svelte } from '../../../test'
+
+test('modifies root +layout.svelte with data prop', async function () {
+	// run the test
+	const result = await test_transform_svelte(
+		'src/routes/+layout.svelte',
+		`
+			<script>
+				export let data
+			</script>
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { page } from "$app/stores";
+		import { extractSession, setClientSession } from "$houdini/plugins/houdini-svelte/runtime/session";
+		import { onMount } from "svelte";
+		import { setClientStarted } from "$houdini/plugins/houdini-svelte/runtime/adapter";
+		export let data;
+		onMount(() => setClientStarted());
+
+		page.subscribe(val => {
+		    setClientSession(extractSession(val.data));
+		});
+	`)
+})
+
+test('modifies root +layout.svelte without data prop', async function () {
+	// run the test
+	const result = await test_transform_svelte('src/routes/+layout.svelte', ``)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { page } from "$app/stores";
+		import { extractSession, setClientSession } from "$houdini/plugins/houdini-svelte/runtime/session";
+		import { onMount } from "svelte";
+		import { setClientStarted } from "$houdini/plugins/houdini-svelte/runtime/adapter";
+		onMount(() => setClientStarted());
+
+		page.subscribe(val => {
+		    setClientSession(extractSession(val.data));
+		});
+	`)
+})
+
+test('adds load to +layout.server.js', async function () {
+	const result = await test_transform_js('src/routes/+layout.server.js', ``)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export async function load(event) {
+		    const __houdini__vite__plugin__return__value__ = {};
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		}
+	`)
+})
+
+test('modifies existing load +layout.server.js', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export async function load() {
+				"some random stuff that's valid javascript"
+				return {
+					hello: "world",
+				}
+
+			}
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export async function load(event) {
+		    "some random stuff that's valid javascript";
+		    const __houdini__vite__plugin__return__value__ = {
+		        hello: "world"
+		    };
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		}
+	`)
+})
+
+test('modifies existing load +layout.server.js - no return', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export async function load() {
+				"some random stuff that's valid javascript"
+			}
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export async function load(event) {
+		    "some random stuff that's valid javascript";
+		    const __houdini__vite__plugin__return__value__ = {};
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		}
+	`)
+})
+
+test('modifies existing load +layout.server.js - rest params', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export async function load({ foo, bar, ...baz }) {
+				console.log(foo)
+				return {
+					some: 'value'
+				}
+			}
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export async function load(event) {
+		    let {
+		        foo,
+		        bar,
+		        ...baz
+		    } = event;
+
+		    console.log(foo);
+
+		    const __houdini__vite__plugin__return__value__ = {
+		        some: "value"
+		    };
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		}
+	`)
+})
+
+test('modifies existing load +layout.server.js - const arrow function', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export const load = ({ foo, bar, ...baz }) => {
+				console.log(foo)
+				return {
+					some: 'value'
+				}
+			}
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export const load = event => {
+		    let {
+		        foo,
+		        bar,
+		        ...baz
+		    } = event;
+
+		    console.log(foo);
+
+		    const __houdini__vite__plugin__return__value__ = {
+		        some: "value"
+		    };
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		};
+	`)
+})
+
+test('modifies existing load +layout.server.js - const function', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export const load = function({ foo, bar, ...baz }) {
+				console.log(foo)
+				return {
+					some: 'value'
+				}
+			}
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export const load = function(event) {
+		    let {
+		        foo,
+		        bar,
+		        ...baz
+		    } = event;
+
+		    console.log(foo);
+
+		    const __houdini__vite__plugin__return__value__ = {
+		        some: "value"
+		    };
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		};
+	`)
+})
+
+test('modifies existing load +layout.server.js - implicit return', async function () {
+	const result = await test_transform_js(
+		'src/routes/+layout.server.js',
+		`
+			export const load = () => ({ hello: 'world'})
+		`
+	)
+
+	expect(result).toMatchInlineSnapshot(`
+		import { buildSessionObject } from "$houdini/plugins/houdini-svelte/runtime/session";
+
+		export const load = event => {
+		    const __houdini__vite__plugin__return__value__ = ({
+		        hello: "world"
+		    });
+
+		    return {
+		        ...buildSessionObject(event),
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		};
+	`)
+})
+
+test('passes session from root client-side layout', async function () {
+	const result = await test_transform_js('src/routes/+layout.js', ``)
+
+	expect(result).toMatchInlineSnapshot(`
+		export async function load(event) {
+		    const __houdini__vite__plugin__return__value__ = {};
+
+		    return {
+		        ...event.data,
+		        ...__houdini__vite__plugin__return__value__
+		    };
+		}
+	`)
+})

package/src/plugin/transforms/kit/session.ts

@@ -0,0 +1,161 @@
+import { find_exported_fn, find_insert_index } from 'houdini/vite'
+import { ensure_imports } from 'houdini/vite'
+import * as recast from 'recast'
+
+import { is_root_layout_script, is_root_layout_server } from '../../kit'
+import { SvelteTransformPage } from '../types'
+
+const AST = recast.types.builders
+
+type ReturnStatement = recast.types.namedTypes.ReturnStatement
+type BlockStatement = recast.types.namedTypes.BlockStatement
+type Identifier = recast.types.namedTypes.Identifier
+type ObjectExpression = recast.types.namedTypes.ObjectExpression
+
+export default function (page: SvelteTransformPage) {
+	if (is_root_layout_server(page.config, page.filepath)) {
+		process_root_layout_server(page)
+	} else if (is_root_layout_script(page.config, page.filepath)) {
+		process_root_layout_script(page)
+	}
+}
+
+// the root layout server file (src/routes/+layout.server.js) needs to define a load that's accessible
+// to all routes that adds the session set in the application's hook file along with any existing values
+// This is done in three steps:
+// - define a load if there isn't one
+// - set the current return value to some internal name
+// - add a new return statement that includes the session data from event.locals
+function process_root_layout_server(page: SvelteTransformPage) {
+	const build_session_object = ensure_imports({
+		script: page.script,
+		config: page.config,
+		import: ['buildSessionObject'],
+		sourceModule: '$houdini/plugins/houdini-svelte/runtime/session',
+	}).ids[0]
+
+	add_load_return(page, (event_id) => [
+		AST.spreadElement(AST.callExpression(build_session_object, [event_id])),
+	])
+}
+
+// all we need to do is make sure the session gets passed down by
+// threading the value through the return
+function process_root_layout_script(page: SvelteTransformPage) {
+	add_load_return(page, (event_id) => [
+		AST.spreadElement(AST.memberExpression(event_id, AST.identifier('data'))),
+	])
+}
+
+function add_load_return(
+	page: SvelteTransformPage,
+	properties: (id: Identifier) => ObjectExpression['properties']
+) {
+	modify_load(page, (body, event_id) => {
+		// we have a load function and `event` is guaranteed to resolve correctly
+
+		// now we need to find the return statement and replace it with a local variable
+		// that we will use later
+		let return_statement_index = body.body.findIndex(
+			(statement) => statement.type === 'ReturnStatement'
+		)
+		let return_statement: ReturnStatement
+		if (return_statement_index !== -1) {
+			return_statement = body.body[return_statement_index] as ReturnStatement
+		}
+		// there was no return statement so its safe to just push one at the end that sets an empty
+		// object
+		else {
+			return_statement = AST.returnStatement(AST.objectExpression([]))
+			body.body.push(return_statement)
+			return_statement_index = body.body.length - 1
+		}
+
+		// replace the return statement with the variable declaration
+		const local_return_var = AST.identifier('__houdini__vite__plugin__return__value__')
+		body.body[return_statement_index] = AST.variableDeclaration('const', [
+			AST.variableDeclarator(local_return_var, return_statement.argument),
+		])
+
+		// its safe to insert a return statement after the declaration that references event
+		body.body.splice(
+			return_statement_index + 1,
+			0,
+			AST.returnStatement(
+				AST.objectExpression([...properties(event_id), AST.spreadElement(local_return_var)])
+			)
+		)
+	})
+}
+
+function modify_load(
+	page: SvelteTransformPage,
+	cb: (body: BlockStatement, event_id: Identifier) => void
+) {
+	// before we do anything, we need to find the load function
+	let load_fn = find_exported_fn(page.script.body, 'load')
+	let event_id = AST.identifier('event')
+
+	// lets get a reference to the body of the function
+	let body: BlockStatement = AST.blockStatement([])
+	if (load_fn?.type === 'ArrowFunctionExpression') {
+		if (load_fn.body.type === 'BlockStatement') {
+			body = load_fn.body
+		} else {
+			body = AST.blockStatement([AST.returnStatement(load_fn.body)])
+			load_fn.body = body
+		}
+	} else if (load_fn) {
+		body = load_fn.body
+	}
+
+	// if there is no load function, then we have to add one
+	if (!load_fn) {
+		load_fn = AST.functionDeclaration(
+			AST.identifier('load'),
+			[event_id],
+			AST.blockStatement([])
+		)
+		load_fn.async = true
+		page.script.body.splice(
+			find_insert_index(page.script),
+			0,
+			AST.exportNamedDeclaration(load_fn)
+		)
+		body = load_fn.body
+	}
+	// there is a load function, we need the event
+	else {
+		// if there are no identifiers, we need to add one
+		if (load_fn.params.length === 0) {
+			load_fn.params.push(event_id)
+		}
+		// if the first parameter of the function declaration is an identifier, we're in business
+		else if (load_fn.params[0]?.type === 'Identifier') {
+			event_id = load_fn.params[0]
+		}
+		// the first parameter is not an identifier so it's almost certainly an object pattern pulling parameters out
+		else if (load_fn.params[0].type === 'ObjectPattern') {
+			// hold onto the pattern so we can re-use it as the first
+			const pattern = load_fn.params[0]
+
+			// overwrite the parameter as event
+			load_fn.params[0] = event_id
+
+			// redefine the variables as let in the first statement of the function
+			body.body.unshift(
+				AST.variableDeclaration('let', [AST.variableDeclarator(pattern, event_id)])
+			)
+		}
+		// we can't work with this
+		else {
+			throw new Error(
+				'Could not inject session data into load. Please open a ticket with the contents of ' +
+					page.filepath
+			)
+		}
+	}
+
+	// modify the body
+	cb(body, event_id)
+}

package/src/plugin/transforms/query.test.ts

@@ -0,0 +1,99 @@
+import { test, expect } from 'vitest'
+
+import { component_test } from '../../test'
+
+test('no variables', async function () {
+	const route = await component_test(
+		`
+            const value = graphql\`
+                query TestQuery {
+                    viewer {
+                        id
+                    }
+                }
+            \`
+		`
+	)
+
+	// make sure we added the right stuff
+	expect(route).toMatchInlineSnapshot(`
+		import { TestQueryStore } from "$houdini/plugins/houdini-svelte/stores/TestQuery";
+		import { isBrowser } from "$houdini/plugins/houdini-svelte/runtime/adapter";
+		import { RequestContext } from "$houdini/plugins/houdini-svelte/runtime/session";
+		import { marshalInputs } from "$houdini/runtime/lib/scalars";
+		const _houdini_TestQuery = new TestQueryStore();
+
+		$:
+		value = _houdini_TestQuery;
+
+		$:
+		marshalInputs({
+		    artifact: _houdini_TestQuery.artifact,
+		    input: {}
+		}).then(_TestQuery_Input => isBrowser && _houdini_TestQuery.fetch({
+		    variables: _TestQuery_Input
+		}));
+	`)
+})
+
+test('with variables', async function () {
+	const route = await component_test(
+		`
+            export function TestQueryVariables() {
+                return {
+                    hello: 'world'
+                }
+            }
+
+            export let prop1 = 'hello'
+            export const prop2 = 'goodbye'
+            export let prop3, prop4
+
+            const result = graphql\`
+                query TestQuery($test: String!) {
+                    users(stringValue: $test) {
+                        id
+                    }
+                }
+            \`
+		`
+	)
+
+	// make sure we added the right stuff
+	expect(route).toMatchInlineSnapshot(`
+		import { TestQueryStore } from "$houdini/plugins/houdini-svelte/stores/TestQuery";
+		import { isBrowser } from "$houdini/plugins/houdini-svelte/runtime/adapter";
+		import { RequestContext } from "$houdini/plugins/houdini-svelte/runtime/session";
+		import { marshalInputs } from "$houdini/runtime/lib/scalars";
+		const _houdini_TestQuery = new TestQueryStore();
+
+		export function TestQueryVariables() {
+		    return {
+		        hello: "world"
+		    };
+		}
+
+		export let prop1 = "hello";
+		export const prop2 = "goodbye";
+		export let prop3, prop4;
+
+		$:
+		result = _houdini_TestQuery;
+
+		$:
+		marshalInputs({
+		    artifact: _houdini_TestQuery.artifact,
+
+		    input: TestQueryVariables.call(new RequestContext(), {
+		        props: {
+		            prop1: prop1,
+		            prop2: prop2,
+		            prop3: prop3,
+		            prop4: prop4
+		        }
+		    })
+		}).then(_TestQuery_Input => isBrowser && _houdini_TestQuery.fetch({
+		    variables: _TestQuery_Input
+		}));
+	`)
+})