houdini-svelte 0.17.0-next.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# houdini-svelte
+
+## 0.17.0-next.0
+
+### ⚠️ Breaking Changes
+
+-   [#593](https://github.com/HoudiniGraphql/houdini/pull/593) [`c1363fe`](https://github.com/HoudiniGraphql/houdini/commit/c1363fe938ab94281272cad8939b892fd705a803) Thanks [@AlecAivazis](https://github.com/AlecAivazis)! - Split houdini into two packages: `houdini` and `houdini-svelte`
+
+### ✨ Features
+
+-   [#593](https://github.com/HoudiniGraphql/houdini/pull/593) [`c1363fe`](https://github.com/HoudiniGraphql/houdini/commit/c1363fe938ab94281272cad8939b892fd705a803) Thanks [@AlecAivazis](https://github.com/AlecAivazis)! - Adding layout.gql special file
+
+-   [#610](https://github.com/HoudiniGraphql/houdini/pull/610) [`3168f7d`](https://github.com/HoudiniGraphql/houdini/commit/3168f7dffd06f5074d08652d2d2c459377bc73d6) Thanks [@AlecAivazis](https://github.com/AlecAivazis)! - Generate variable function definitions for non-route queries
+
+### 🐛 Fixes
+
+-   [#613](https://github.com/HoudiniGraphql/houdini/pull/613) [`eb3ffe1`](https://github.com/HoudiniGraphql/houdini/commit/eb3ffe1fbf14180210464863cb7e2ca29892a1fe) Thanks [@AlecAivazis](https://github.com/AlecAivazis)! - Avoid unnecessary data prop being added to route

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alec Aivazis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "houdini-svelte",
+  "version": "0.17.0-next.0",
+  "description": "The svelte plugin for houdini",
+  "type": "module",
+  "dependencies": {
+    "@kitql/helper": "^0.5.0",
+    "@sveltejs/kit": "1.0.0-next.505",
+    "ast-types": "^0.15.1",
+    "estree-walker": "^3.0.1",
+    "graphql": "^16.6.0",
+    "houdini": "^0.17.0-next.0",
+    "scripts": "^1.0.0",
+    "minimatch": "^5.1.0",
+    "recast": "^0.21.5",
+    "svelte": "^3.52.0"
+  },
+  "devDependencies": {
+    "@types/minimatch": "^5.1.2",
+    "vitest": "^0.23.4"
+  },
+  "peerDependencies": {
+    "graphql": "^0.13.0 || ^14.0.0 || ^15.0.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./build/plugin-esm/index.js",
+      "require": "./build/plugin-cjs/index.js"
+    },
+    "./preprocess": {
+      "import": "./build/preprocess-esm/index.js",
+      "require": "./build/preprocess-cjs/index.js"
+    },
+    "./test": {
+      "import": "./build/test-esm/index.js",
+      "require": "./build/test-cjs/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "preprocess": [
+        "build/preprocess/index.d.ts"
+      ],
+      "test": [
+        "build/test/index.d.ts"
+      ]
+    }
+  },
+  "main": "./build/plugin-cjs/index.js",
+  "types": "./build/plugin/index.d.ts",
+  "scripts": {
+    "tests": "vitest",
+    "compile": "scripts build --plugin",
+    "typedefs": "scripts typedefs --plugin"
+  }
+}

package/src/plugin/codegen/adapter.ts

@@ -0,0 +1,45 @@
+import { fs, path } from 'houdini'
+
+import { PluginGenerateInput } from '.'
+
+export default async function generateAdapter({ config, framework }: PluginGenerateInput) {
+	// we only need to generate an adapter for kit (the default one is fine for vanilla svelte)
+	if (framework !== 'kit') {
+		return
+	}
+
+	// the location of the adapter
+	const adapterLocation = path.join(config.pluginRuntimeDirectory('houdini-svelte'), 'adapter.js')
+
+	// figure out which adapter we need to lay down
+	const adapter = {
+		kit: sveltekitAdapter,
+	}[framework]
+
+	// write the index file that exports the runtime
+	await fs.mkdirp(path.dirname(adapterLocation))
+	await fs.writeFile(adapterLocation, adapter)
+}
+
+const sveltekitAdapter = `import { goto as go } from '$app/navigation'
+import { get } from 'svelte/store';
+import { browser, prerendering } from '$app/environment'
+import { page } from '$app/stores'
+import { error as svelteKitError } from '@sveltejs/kit'
+
+export function goTo(location, options) {
+    go(location, options)
+}
+
+export const isBrowser = browser
+
+export let clientStarted = false;
+
+export function setClientStarted() {
+	clientStarted = true
+}
+
+export const isPrerender = prerendering
+
+export const error = svelteKitError
+`

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

@@ -0,0 +1,149 @@
+import { ArtifactKind, Config, fs, GenerateHookInput, path } from 'houdini'
+
+import { Framework } from '../../kit'
+
+export default async function componentTypesGenerator(
+	framework: Framework,
+	{ config, documents }: GenerateHookInput
+) {
+	// if we treat the documents as the source of truth for files that match
+	// we can just filter out the ones that don't apply:t
+	// - in kit, exclude the route directory
+	// - group the files by directory
+	// - generate ./$houdini in the typeroot directory at the correct spot
+
+	// there could be many queries in a given component so we can't just think about filepaths
+	const queries: Record<string, { name: string; query: string }[]> = {}
+	for (const document of documents) {
+		if (document.kind !== ArtifactKind.Query) {
+			continue
+		}
+
+		queries[document.filename] = (queries[document.filename] ?? []).concat({
+			name: document.name,
+			query: document.originalString,
+		})
+	}
+	let matches = Object.keys(queries).filter((filepath) => filepath.endsWith('.svelte'))
+
+	// if we are in kit, don't consider the source directory
+	if (framework === 'kit') {
+		matches = matches.filter((match) => !match.startsWith(config.routesDir))
+	}
+
+	// group the files by directory
+	const files: ProjectDirs = {
+		dirs: {},
+		files: [],
+	}
+
+	// put every file we found in the right place
+	for (let file of matches) {
+		// only worry about things relative to the project root
+		file = path.relative(config.projectRoot, file)
+
+		// walk down the path
+		let target = files
+		const parts = file.split('/')
+		for (const [i, part] of parts.entries()) {
+			// if we are at the end of the path, we are looking at a file
+			if (i === parts.length - 1) {
+				target.files.push(part)
+				continue
+			}
+
+			// we are on a file
+			if (!target.dirs[part]) {
+				target.dirs[part] = {
+					dirs: {},
+					files: [],
+				}
+			}
+
+			// there is guaranteed to be an entry for this particular filepath part
+			// focus on it and move onto the next one
+			target = target.dirs[part]
+		}
+	}
+
+	// now that we've grouped together all of the files together, we can just walk down the
+	// structure and generate the necessary types at the right place.
+	await walk_project(config, files, queries, config.projectRoot)
+}
+
+async function walk_project(
+	config: Config,
+	dirs: ProjectDirs,
+	queries: Record<string, { name: string; query: string }[]>,
+	root: string
+) {
+	// process every child directory
+	await Promise.all(
+		Object.entries(dirs.dirs).map(async ([path_part, child]) => {
+			// keep going with the new root
+			return walk_project(config, child, queries, path.join(root, path_part))
+		})
+	)
+
+	// if we don't have any files at this spot we're done
+	if (dirs.files.length === 0) {
+		return
+	}
+
+	// every query in this directory needs an entry in the file
+	let typeFile = "import type { ComponentProps } from 'svelte'"
+	for (const file of dirs.files) {
+		const no_ext = path.parse(file).name
+		const prop_type = no_ext + 'Props'
+
+		// figure out the full file path
+		const filepath = path.join(root, file)
+
+		// we need to figure out the props for this component
+		const contents = await fs.readFile(filepath)
+		// make typescript happy
+		if (!contents) {
+			continue
+		}
+
+		// define the prop types for the component
+		typeFile =
+			`
+import ${no_ext} from './${file}'
+		` +
+			typeFile +
+			`
+type ${prop_type} = ComponentProps<${no_ext}>
+`
+
+		// a file can contain multiple queries
+		for (const query of queries[filepath]) {
+			// we can't generate actual type defs for props so let's just export a
+			// generic typedefinition
+			typeFile =
+				`
+import type { ${query.name}$input } from '${path
+					.relative(filepath, path.join(config.artifactDirectory, query.name))
+					.replace('/$houdini', '')}'
+                    ` +
+				typeFile +
+				`
+export type ${config.variableFunctionName(
+					query.name
+				)} = <_Props = ${prop_type}>(args: { props: _Props }) => FragmentQueryVars$input
+        `
+		}
+	}
+
+	// we need to write this file in the correct location in the type root dir
+	const relative = path.join(config.typeRootDir, path.relative(config.projectRoot, root))
+
+	// write the file
+	await fs.mkdirp(relative)
+	await fs.writeFile(path.join(relative, '$houdini.d.ts'), typeFile)
+}
+
+type ProjectDirs = {
+	dirs: Record<string, ProjectDirs>
+	files: string[]
+}

package/src/plugin/codegen/index.ts

@@ -0,0 +1,28 @@
+import { GenerateHookInput, fs, Config } from 'houdini'
+
+import { stores_directory, type_route_dir } from '../kit'
+import adapter from './adapter'
+import components from './components'
+import kit from './routes'
+import stores from './stores'
+
+export default async function (input: PluginGenerateInput) {
+	// create the static directories
+	await Promise.all([
+		fs.mkdirp(type_route_dir(input.config)),
+		fs.mkdirp(stores_directory(input.plugin_root)),
+	])
+
+	// generate the files
+	await Promise.all([
+		adapter(input),
+		kit(input.framework, input),
+		stores(input),
+		components(input.framework, input),
+	])
+}
+
+export type PluginGenerateInput = Omit<GenerateHookInput, 'config'> & {
+	config: Config
+	framework: 'kit' | 'svelte'
+}

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

@@ -0,0 +1,307 @@
+import { OperationDefinitionNode } from 'graphql'
+import { Config, fs, GenerateHookInput, path } from 'houdini'
+
+import { extract_load_function } from '../../extractLoadFunction'
+import {
+	type_route_dir,
+	walk_routes,
+	stores_directory_name,
+	store_suffix,
+	Framework,
+} from '../../kit'
+
+export default async function svelteKitGenerator(
+	framework: Framework,
+	{ config }: GenerateHookInput
+) {
+	// this generator creates the locally imported type definitions.
+	// the component type generator will handle
+	if (framework !== 'kit') {
+		return
+	}
+
+	// we need to walk down their route directory and create any variable definitions we need
+	await walk_routes(config, framework, {
+		async route({
+			dirpath,
+			pageScript,
+			layoutScript,
+			routePageQuery,
+			routeLayoutQuery,
+			inlineLayoutQueries,
+			inlineQueries,
+		}) {
+			// in order to create the variable definition we need to know every query that is being
+			// used in a specific route so we can generate versions of the variable functions with
+			// the Params type from './$types' provided by the sveltekit rootDir
+
+			let scriptPageExports: string[] = []
+			let scriptLayoutExports: string[] = []
+
+			const pageQueries = inlineQueries.concat(routePageQuery ?? [])
+			const layoutQueries = inlineLayoutQueries.concat(routeLayoutQuery ?? [])
+
+			// pageScript need to be imported so we can figure out if there is a houdini_load
+			// and what's inside.
+			if (pageScript) {
+				// import the houdini_load function
+				const { houdini_load, exports } = await extract_load_function(config, pageScript)
+
+				// add every load to the list
+				pageQueries.push(...(houdini_load ?? []))
+				scriptPageExports = exports
+			}
+
+			// pageScript need to be imported so we can figure out if there is a houdini_load
+			// and what's inside.
+			if (layoutScript) {
+				// import the houdini_load function
+				const { houdini_load, exports } = await extract_load_function(config, layoutScript)
+
+				// add every load to the list
+				layoutQueries.push(...(houdini_load ?? []))
+				scriptLayoutExports = exports
+			}
+
+			// if we have no queries, there's nothing to do
+			if (pageQueries.length === 0 && layoutQueries.length === 0) {
+				return
+			}
+
+			// we need to write the type defs to the same route path relative to the type root
+			// const targetPath = path.join(config.typeRouteDir,
+			const relativePath = path.relative(config.routesDir, dirpath)
+			const target = path.join(type_route_dir(config), relativePath, config.typeRootFile)
+
+			// we can't import from $houdini so we need to compute the relative path from the import
+			const houdiniRelative = path.relative(target, config.typeRootDir)
+
+			// the unique set of query names
+			const queryNames: string[] = []
+			const uniqueQueries: OperationDefinitionNode[] = []
+			for (const query of pageQueries) {
+				if (!queryNames.includes(query.name!.value)) {
+					queryNames.push(query.name!.value)
+					uniqueQueries.push(query)
+				}
+			}
+
+			const layoutNames: string[] = []
+			const uniqueLayoutQueries: OperationDefinitionNode[] = []
+			for (const layout of layoutQueries) {
+				if (!layoutNames.includes(layout.name!.value)) {
+					layoutNames.push(layout.name!.value)
+					uniqueLayoutQueries.push(layout)
+				}
+			}
+
+			// we need to create a typescript file that has a definition of the variable and hook functions
+			const typeDefs = getTypeDefs(
+				houdiniRelative,
+				config,
+				uniqueQueries,
+				pageQueries,
+				uniqueLayoutQueries,
+				layoutQueries,
+				scriptPageExports,
+				scriptLayoutExports
+			)
+
+			// make sure we have a home for the directory
+			await fs.mkdirp(path.dirname(target))
+
+			// write the file
+			await fs.writeFile(target, typeDefs)
+		},
+	})
+}
+
+function getTypeDefs(
+	houdiniRelative: string,
+	config: Config,
+	uniqueQueries: OperationDefinitionNode[],
+	pageQueries: OperationDefinitionNode[],
+	uniqueLayoutQueries: OperationDefinitionNode[],
+	layoutQueries: OperationDefinitionNode[],
+	scriptPageExports: string[],
+	scriptLayoutExports: string[]
+) {
+	const afterPageLoad = scriptPageExports.includes('afterLoad')
+	const beforePageLoad = scriptPageExports.includes('beforeLoad')
+	const onPageError = scriptPageExports.includes('onError')
+
+	const afterLayoutLoad = scriptLayoutExports.includes('afterLoad')
+	const beforeLayoutLoad = scriptLayoutExports.includes('beforeLoad')
+	const onLayoutError = scriptLayoutExports.includes('onError')
+
+	return `import type * as Kit from '@sveltejs/kit';
+import type { VariableFunction, AfterLoadFunction, BeforeLoadFunction }  from '${houdiniRelative}/plugins/houdini-svelte/runtime/types'
+${
+	pageQueries.length > 0
+		? `import type { PageLoadEvent, PageData as KitPageData } from './$types'`
+		: ``
+}
+${
+	layoutQueries.length > 0
+		? `import type { LayoutLoadEvent, LayoutData as KitPageData } from './$types'`
+		: ``
+}
+
+${append_Store(houdiniRelative, config, uniqueQueries)}
+${append_Store(houdiniRelative, config, uniqueLayoutQueries)}
+
+${pageQueries.length > 0 ? `type PageParams = PageLoadEvent['params']` : ``}
+${layoutQueries.length > 0 ? `type LayoutParams = LayoutLoadEvent['params']` : ``}
+
+${append_VariablesFunction('Page', config, uniqueQueries)}
+${append_VariablesFunction('Layout', config, uniqueLayoutQueries)}
+
+${append_afterLoad('Page', afterPageLoad, pageQueries)}
+${append_beforeLoad(beforePageLoad)}
+${append_onError(onPageError)}
+${append_afterLoad('Layout', afterLayoutLoad, layoutQueries)}
+${append_beforeLoad(beforeLayoutLoad)}
+${append_onError(onLayoutError)}
+
+${append_TypeData(
+	config,
+	layoutQueries,
+	'Layout',
+	beforeLayoutLoad,
+	afterLayoutLoad,
+	onLayoutError
+)}
+${append_TypeData(config, pageQueries, 'Page', beforePageLoad, afterPageLoad, onPageError)}
+`
+}
+
+function append_Store(houdiniRelative: string, config: Config, queries: OperationDefinitionNode[]) {
+	return queries
+		.map((query) => {
+			const name = query.name!.value
+
+			return `import { ${name}$result, ${name}$input } from '${houdiniRelative}/${
+				config.artifactDirectoryName
+			}/${name}'
+	import { ${name}Store } from '${houdiniRelative}/${stores_directory_name()}/${name}'`
+		})
+		.join('\n')
+}
+
+function append_VariablesFunction(
+	type: `Page` | `Layout`,
+	config: Config,
+	queries: OperationDefinitionNode[]
+) {
+	return queries
+		.map((query) => {
+			const name = query.name!.value
+			// if the query does not have any variables, don't include anything
+			if (!query.variableDefinitions?.length) {
+				return ''
+			}
+
+			return `export type ${config.variableFunctionName(
+				name
+			)} = VariableFunction<${type}Params, ${name}$input>`
+		})
+		.join('\n')
+}
+
+function append_afterLoad(
+	type: `Page` | `Layout`,
+	afterLoad: boolean,
+	queries: OperationDefinitionNode[]
+) {
+	return afterLoad
+		? `
+	type AfterLoadReturn = ReturnType<typeof import('./+${type.toLowerCase()}').afterLoad>;
+
+	type AfterLoadData = {
+		${internal_append_afterLoad(queries)}
+	}
+
+	type LoadInput = {
+		${internal_append_afterLoadInput(queries)}
+	}
+
+	export type AfterLoadEvent = {
+		event: PageLoadEvent
+		data: AfterLoadData
+		input: LoadInput
+	}
+	`
+		: ''
+}
+
+function internal_append_afterLoad(queries: OperationDefinitionNode[]) {
+	return `${queries
+		.map((query) => {
+			// if the query does not have any variables, don't include anything
+			const name = query.name!.value
+
+			return [name, name + '$result'].join(': ')
+		})
+		.join(', \n')}`
+}
+
+function internal_append_afterLoadInput(queries: OperationDefinitionNode[]) {
+	return `${queries
+		.filter((query) => query.variableDefinitions?.length)
+		.map((query) => {
+			// if the query does not have any variables, don't include anything
+			const name = query.name!.value
+
+			return [name, name + '$input'].join(': ')
+		})
+		.join(', \n')}`
+}
+
+function append_beforeLoad(beforeLoad: boolean) {
+	return beforeLoad
+		? `
+export type BeforeLoadEvent = PageLoadEvent
+
+type BeforeLoadReturn = ReturnType<typeof import('./+page').beforeLoad>;
+`
+		: ''
+}
+
+function append_onError(onError: boolean) {
+	return onError
+		? `
+export type OnErrorEvent =  { event: LoadEvent, input: LoadInput, error: Error | Error[] }
+
+type OnErrorReturn = ReturnType<typeof import('./+page').onError>;
+`
+		: ''
+}
+
+function append_TypeData(
+	config: Config,
+	queries: OperationDefinitionNode[],
+	type: `Page` | `Layout`,
+	beforeLoad: boolean,
+	afterLoad: boolean,
+	onError: boolean
+) {
+	if (queries.length === 0) {
+		return ''
+	}
+
+	return `export type ${type}Data = {
+		${queries
+			.map((query) => {
+				const name = query.name!.value
+
+				return [name, name + store_suffix(config)].join(': ')
+			})
+			.join(', \n')}
+} ${internal_append_TypeDataExtra(beforeLoad, afterLoad, onError)}`
+}
+
+function internal_append_TypeDataExtra(beforeLoad: boolean, afterLoad: boolean, onError: boolean) {
+	return `${beforeLoad ? '& BeforeLoadReturn ' : ''} ${afterLoad ? '& AfterLoadReturn ' : ''}  ${
+		onError ? '& OnErrorReturn ' : ''
+	}`
+}