create-houdini 1.2.9

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/README.md

@@ -0,0 +1,8 @@
+# create-houdini
+
+A CLI for creating new [Houdini](https://houdinigraphql.com/) projects. 
+
+```bash
+npm create houdini@latest hello-houdini
+```
+

package/bin.js

@@ -0,0 +1,355 @@
+#!/usr/bin/env node
+import * as p from '@clack/prompts'
+import * as graphql from 'graphql'
+import { bold, cyan, gray, green, grey, italic, white } from 'kleur/colors'
+import fs, { readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import { exit } from 'node:process'
+import { fileURLToPath } from 'node:url'
+
+// the first argument is the name of the project
+let projectDir = process.argv[2]
+let projectName = projectDir
+
+// log the version of create-houdini that this was run with by looking at the packge's package.json
+const { version } = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf-8'))
+console.log(`${grey(`create-houdini version ${version}`)}\n`)
+
+// prepare options
+const templatesDir = sourcePath(`./templates`)
+const options = fs.readdirSync(templatesDir).map((templateDir) => {
+	// in .meta.json you can find:
+	/** @type {{label?: string, hint?: string, apiUrl?: string}} */
+	let data = {}
+	const metaPath = path.join(templatesDir, templateDir, '.meta.json')
+	if (fs.existsSync(metaPath)) {
+		data = JSON.parse(readFileSync(metaPath, 'utf-8'))
+	}
+	return { ...data, value: templateDir }
+})
+
+p.intro('🎩 Welcome to Houdini!')
+
+// if we weren't given a directory, then we should ask
+if (!projectDir) {
+	const dir = await p.text({
+		message: `Where should we create your project?`,
+		placeholder: '  (press Enter to use the current directory)',
+	})
+
+	if (p.isCancel(dir)) {
+		process.exit(1)
+	}
+
+	if (dir) {
+		projectDir = dir
+		projectName = 'hello-houdini'
+	} else {
+		projectDir = '.'
+	}
+}
+
+// if we were told to use the current directory then we need
+// a more appropriate name for the project
+if (projectDir === '.') {
+	projectName = 'hello-houdini'
+}
+let dirToCreate = true
+
+// project location emtpy?
+if (fs.existsSync(projectDir)) {
+	if (fs.readdirSync(projectDir).length > 0) {
+		const force = await p.confirm({
+			message:
+				'Target directory is not empty. Continue anyway? This might overwrite existing files.',
+			initialValue: false,
+		})
+		dirToCreate = false
+
+		// bail if `force` is `false` or the user cancelled with Ctrl-C
+		if (force !== true) {
+			process.exit(1)
+		}
+	}
+}
+
+const template = await p.select({
+	message: 'Which template do you want to use?',
+	initialValue: 'react-typescript',
+	options,
+})
+if (p.isCancel(template)) {
+	process.exit(1)
+}
+const templateMeta = options.find((option) => option.value === template)
+if (!templateMeta) {
+	// this will never happen, but it helps to types later
+	exit(1)
+}
+const templateDir = sourcePath(path.join(templatesDir, template))
+
+let apiUrl = templateMeta.apiUrl ?? ''
+let pullSchema_content = ''
+if (apiUrl === '') {
+	const { apiUrl: apiUrlCli, pullSchema_content: pullSchema_content_cli } = await pullSchemaCli()
+	apiUrl = apiUrlCli
+	if (pullSchema_content_cli === null) {
+		pCancel('We could not pull the schema. Please try again.')
+	} else {
+		pullSchema_content = pullSchema_content_cli
+	}
+} else {
+	const pullSchema_content_local = await pullSchema(apiUrl, {})
+	if (pullSchema_content_local === null) {
+		pCancel('We could not pull the schema. Please report this on Discord.')
+	} else {
+		pullSchema_content = pullSchema_content_local
+	}
+}
+
+// create the project directory if necessary
+if (dirToCreate) {
+	fs.mkdirSync(projectDir)
+}
+writeFileSync(path.join(projectDir, 'schema.graphql'), pullSchema_content)
+
+copy(
+	templateDir,
+	projectDir,
+	{
+		API_URL: apiUrl,
+		PROJECT_NAME: projectName,
+		HOUDINI_VERSION: version,
+	},
+	['.meta.json']
+)
+
+// If anything goes wrong, we don't want to block the user
+let sponsor_msg = ''
+try {
+	const selected = await getSponsors()
+	sponsor_msg = `🙏 Special thanks to the ${bold(white(selected))} for supporting Houdini!`
+} catch (error) {}
+
+p.outro(`🎉 Everything is ready!
+
+👉 Next Steps
+0️⃣  Go to your project     :  ${green(`cd ${projectDir}`)}
+1️⃣  Install dependencies   :  ${green(`npm i`)}       | ${gray(`pnpm i`)}   | ${gray(`yarn`)}
+2️⃣  Start your application :  ${green(`npm run dev`)} | ${gray(`pnpm dev`)} | ${gray(`yarn dev`)}`)
+
+console.log(
+	gray(
+		italic(
+			`${bold('❔ More help')} ` +
+				`at ${cyan('https://houdinigraphql.com')} ` +
+				`(📄 Docs, ⭐ Github, 📣 Discord, ...) ` +
+				`${sponsor_msg ? `\n${sponsor_msg}` : ``}\n`
+		)
+	)
+)
+
+// Function to copy files recursively
+function copy(
+	/** @type {string} */ sourceDir,
+	/** @type {string} */ destDir,
+	/** @type {Record<string, string>} */ transformMap,
+	/** @type {string[]} */ ignoreList
+) {
+	if (!fs.existsSync(destDir)) {
+		fs.mkdirSync(destDir)
+	}
+
+	const files = fs.readdirSync(sourceDir)
+	for (const file of files) {
+		const sourceFilePath = path.join(sourceDir, file)
+		const sourceRelative = path.relative(templateDir, sourceFilePath)
+		// skip the ignore list
+		if (!ignoreList.includes(sourceRelative)) {
+			const destFilePath = path.join(destDir, file)
+
+			const stats = fs.statSync(sourceFilePath)
+
+			// files need to be copied and potentially transformed
+			if (stats.isFile()) {
+				// read the source file
+				const source = fs.readFileSync(sourceFilePath)
+
+				// apply any transformations if necessary
+				const transformed = Object.entries(transformMap).reduce(
+					(prev, [pattern, value]) => {
+						return prev.replaceAll(pattern, value)
+					},
+					source.toString()
+				)
+
+				// write the result
+				fs.writeFileSync(destFilePath, transformed)
+			}
+			// if we run into a directory then we should keep going
+			else if (stats.isDirectory()) {
+				copy(sourceFilePath, destFilePath, transformMap, ignoreList)
+			}
+		}
+	}
+}
+
+function sourcePath(/** @type {string} */ path) {
+	return fileURLToPath(new URL(path, import.meta.url).href)
+}
+
+async function pullSchemaCli() {
+	let number_of_round = 0
+	let url_and_headers = ''
+	let apiUrl = ''
+	let pullSchema_content = null
+	while (pullSchema_content === null && number_of_round < 10) {
+		number_of_round++
+		const answer = await p.group(
+			{
+				url_and_headers: async () =>
+					p.text({
+						defaultValue: 'http://localhost:4000/graphql',
+						message: `What's the URL for your api? ${
+							number_of_round === 1 ? '' : `(attempt ${number_of_round}/10)`
+						}`,
+						placeholder: `http://localhost:4000/graphql ${
+							number_of_round === 1 ? '' : 'Authorization=Bearer MyToken'
+						}`,
+						// initialValue: url_and_headers,
+						validate: (value) => {
+							// If empty, let's assume the placeholder value
+							if (value === '') {
+								value = 'http://localhost:4000/graphql'
+							}
+
+							if (!value.startsWith('http')) {
+								return 'Please enter a valid URL'
+							}
+						},
+					}),
+			},
+			{
+				onCancel: () => pCancel(),
+			}
+		)
+
+		url_and_headers = answer.url_and_headers
+		const value_splited = url_and_headers.split(' ')
+		const apiUrl = value_splited[0]
+
+		const local_headers =
+			value_splited.length > 1
+				? // remove the url and app all the headers
+				  extractHeadersStr(value_splited.slice(1).join(' '))
+				: {}
+
+		pullSchema_content = await pullSchema(apiUrl, local_headers)
+
+		if (pullSchema_content === null) {
+			const msg = `If you need to pass headers, add them after the URL (eg: '${`${apiUrl} Authorization=Bearer MyToken`}')`
+			p.log.error(msg)
+		}
+	}
+
+	// if we are here... it means that we have tried x times to pull the schema and it failed
+	if (pullSchema_content === null) {
+		pCancel("We couldn't pull the schema. Please check your URL/headers and try again.")
+	}
+
+	return { apiUrl, pullSchema_content }
+}
+
+async function pullSchema(
+	/** @type {string} */ url,
+	/** @type {Record<string, string>} */ headers
+) {
+	let content = ''
+	const spinnerPullSchema = p.spinner()
+	spinnerPullSchema.start('Pulling your schema...')
+	let fileData = null
+	try {
+		// send the request
+		const resp = await fetch(url, {
+			method: 'POST',
+			body: JSON.stringify({
+				query: graphql.getIntrospectionQuery(),
+			}),
+			headers: { 'Content-Type': 'application/json', ...headers },
+		})
+		content = await resp.text()
+
+		const jsonSchema = JSON.parse(content).data
+		const schema = graphql.buildClientSchema(jsonSchema)
+		fileData = graphql.printSchema(graphql.lexicographicSortSchema(schema))
+	} catch (/** @type {any} */ e) {
+		if (content) {
+			console.warn(
+				`⚠️  Couldn't pull your schema.
+${'   Reponse:'} ${content}
+${'   Error  :'} ${e.message}`
+			)
+		} else {
+			console.warn(`⚠️  Couldn't pull your schema: ${e.message}`)
+		}
+	}
+	spinnerPullSchema.stop(fileData ? 'Schema pulled 🪄' : 'Failed to pull schema!')
+	return fileData
+}
+
+function extractHeadersStr(/** @type {string} */ str) {
+	const regex = /(\w+)=("[^"]*"|[^ ]*)/g
+	const /** @type {Record<string, string>} */ obj = {}
+
+	let match
+	while ((match = regex.exec(str ?? '')) !== null) {
+		obj[match[1]] = match[2].replaceAll('"', '')
+	}
+
+	return obj
+}
+
+function pCancel(cancelText = 'Operation cancelled.') {
+	p.cancel(cancelText)
+	process.exit(1)
+}
+
+async function getSponsors() {
+	const res = await fetch(
+		'https://raw.githubusercontent.com/HoudiniGraphql/sponsors/main/generated/sponsors.json'
+	)
+	const /**@type {any[]} */ jsonData = await res.json()
+
+	/** @returns {[number, string]} */
+	function getTier(/**@type {number}*/ value) {
+		if (value >= 1500) {
+			return [10, 'Wizard']
+		}
+		if (value >= 500) {
+			return [5, 'Mage']
+		}
+		if (value >= 25) {
+			return [2, "Magician's Apprentice"]
+		}
+		if (value >= 10) {
+			return [1, 'Supportive Muggle']
+		}
+		// don't display the past sponsors
+		return [0, 'Past Sponsors']
+	}
+
+	const list = jsonData.flatMap(
+		(/** @type {{sponsor: {name: string}, monthlyDollars: number}} */ c) => {
+			const [coef, title] = getTier(c.monthlyDollars)
+			const names = []
+			for (let i = 0; i < coef; i++) {
+				names.push(`${title}, ${c.sponsor.name}`)
+			}
+			return names
+		}
+	)
+
+	const selected_to_display = list[Math.floor(Math.random() * list.length)]
+
+	return selected_to_display
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "create-houdini",
+  "version": "1.2.9",
+  "description": "A CLI for creating new Houdini projects",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HoudiniGraphQL/houdini",
+    "directory": "packages/create-houdini"
+  },
+  "license": "MIT",
+  "homepage": "https://houdinigraphql.com/",
+  "bin": "./bin.js",
+  "dependencies": {
+    "@clack/prompts": "^0.6.3",
+    "kleur": "^4.1.5",
+    "graphql": "16.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.23",
+    "prettier": "^2.8.3"
+  },
+  "files": [
+    "templates",
+    "bin.js"
+  ],
+  "types": "types/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "node bin.js",
+    "build:": "cd ../../ && ((pnpm run build && cd -) || (cd - && exit 1))",
+    "build:dev": "pnpm build: && pnpm dev",
+    "check": "tsc",
+    "lint": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore --plugin prettier-plugin-svelte --plugin-search-dir=.",
+    "format": "pnpm lint --write"
+  }
+}

package/templates/react/.meta.json

@@ -0,0 +1,3 @@
+{
+	"label": "React"
+}

package/templates/react/houdini.config.js

@@ -0,0 +1,13 @@
+/// <references types="houdini-react">
+/// <references types="houdini-router">
+/** @type {import('houdini').ConfigFile} */
+const config = {
+	watchSchema: {
+		url: 'API_URL',
+	},
+	plugins: {
+		'houdini-react': {},
+	},
+}
+
+export default config

package/templates/react/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "PROJECT_NAME",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"houdini": "^HOUDINI_VERSION",
+		"houdini-react": "^HOUDINI_VERSION",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-streaming": "^0.3.14"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-react": "^3.1.0",
+		"vite": "^4.1.0"
+	}
+}

package/templates/react/src/+client.jsx

@@ -0,0 +1,6 @@
+import { HoudiniClient } from '$houdini'
+
+// Export the Houdini client
+export default new HoudiniClient({
+	url: 'API_URL',
+})

package/templates/react/src/+index.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+export default function App({ children }) {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+          rel="icon"
+          type="image/png"
+          href="https://houdinigraphql.com/images/logo.png"
+        />
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"
+        />
+        <title>Houdini • React</title>
+      </head>
+      <body>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </body>
+    </html>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error("ErrorBoundary caught an error:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+    return this.props.children;
+  }
+}

package/templates/react/src/routes/+page.jsx

@@ -0,0 +1,14 @@
+// import type { PageProps } from "./$types";
+
+// export default function ({}: PageProps) {
+export default function () {
+	return (
+		<div>
+			<h2>Home</h2>
+
+			<p>
+				Visit <a href="https://houdinigraphql.com/">Houdini Graphql</a> to read the doc.
+			</p>
+		</div>
+	)
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react'
+import houdini from 'houdini/vite'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [houdini(), react({ fastRefresh: false })],
+})

package/templates/react-typescript/.meta.json

@@ -0,0 +1,3 @@
+{
+	"label": "React w/ TypeScript"
+}

package/templates/react-typescript/houdini.config.js

@@ -0,0 +1,13 @@
+/// <references types="houdini-react">
+/// <references types="houdini-router">
+/** @type {import('houdini').ConfigFile} */
+const config = {
+	watchSchema: {
+		url: 'API_URL',
+	},
+	plugins: {
+		'houdini-react': {},
+	},
+}
+
+export default config

package/templates/react-typescript/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "PROJECT_NAME",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"houdini": "^HOUDINI_VERSION",
+		"houdini-react": "^HOUDINI_VERSION",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-streaming": "^0.3.14"
+	},
+	"devDependencies": {
+		"@types/react": "^18.0.27",
+		"@types/react-dom": "^18.0.10",
+		"@vitejs/plugin-react": "^3.1.0",
+		"typescript": "^4.9.3",
+		"vite": "^4.1.0"
+	}
+}

package/templates/react-typescript/src/+client.tsx

@@ -0,0 +1,6 @@
+import { HoudiniClient } from '$houdini'
+
+// Export the Houdini client
+export default new HoudiniClient({
+	url: 'API_URL',
+})

package/templates/react-typescript/src/+index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+export default function App({ children }) {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+          rel="icon"
+          type="image/png"
+          href="https://houdinigraphql.com/images/logo.png"
+        />
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"
+        />
+        <title>Houdini • React</title>
+      </head>
+      <body>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </body>
+    </html>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error("ErrorBoundary caught an error:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+    return this.props.children;
+  }
+}

package/templates/react-typescript/src/routes/+page.tsx

@@ -0,0 +1,14 @@
+// import type { PageProps } from "./$types";
+
+// export default function ({}: PageProps) {
+export default function () {
+	return (
+		<div>
+			<h2>Home</h2>
+
+			<p>
+				Visit <a href="https://houdinigraphql.com/">Houdini Graphql</a> to read the doc.
+			</p>
+		</div>
+	)
+}

package/templates/react-typescript/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "./$houdini/tsconfig.json"
+}

package/templates/react-typescript/vite.config.ts

@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react'
+import houdini from 'houdini/vite'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [houdini(), react({ fastRefresh: false })],
+})

package/templates/sveltekit-demo/.env.local

@@ -0,0 +1 @@
+PUBLIC_GRAPHQL_ENDPOINT = 'API_URL'

package/templates/sveltekit-demo/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/templates/sveltekit-demo/.graphqlrc.yaml

@@ -0,0 +1,9 @@
+projects:
+  default:
+    schema:
+      - ./schema.graphql
+      - ./$houdini/graphql/schema.graphql
+    documents:
+      - '**/*.gql'
+      - '**/*.svelte'
+      - ./$houdini/graphql/documents.gql

package/templates/sveltekit-demo/.meta.json

@@ -0,0 +1,5 @@
+{
+	"label": "SvelteKit - Demo",
+	"hint": "Light demo with a few pages, layout, queries. TypeScript",
+	"apiUrl": "https://houdinigraphql.com/graphql"
+}

package/templates/sveltekit-demo/.prettierignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+$houdini

package/templates/sveltekit-demo/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/templates/sveltekit-demo/README.md

@@ -0,0 +1,14 @@
+# create-houdini
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+You will lean the rest on the Home page of the demo app.
+
+More info on: https://github.com/HoudiniGraphql/houdini

package/templates/sveltekit-demo/houdini.config.js

@@ -0,0 +1,13 @@
+/// <references types="houdini-svelte">
+
+/** @type {import('houdini').ConfigFile} */
+const config = {
+	watchSchema: {
+		url: 'env:PUBLIC_GRAPHQL_ENDPOINT'
+	},
+	plugins: {
+		'houdini-svelte': {}
+	}
+};
+
+export default config;

package/templates/sveltekit-demo/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "PROJECT_NAME",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"houdini": "^HOUDINI_VERSION",
+		"houdini-svelte": "^HOUDINI_VERSION",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"vitest": "^0.32.2"
+	},
+	"type": "module"
+}

package/templates/sveltekit-demo/playwright.config.ts

@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;

package/templates/sveltekit-demo/schema.graphql

@@ -0,0 +1,23 @@
+type Link {
+	name: String
+	url: String
+}
+
+type Mutation {
+	hello(name: String!): String!
+}
+
+type Query {
+	giveMeAnError: String
+	links(delai: Int): [Link!]!
+	sponsors: [Sponsor!]!
+	welcome: String!
+}
+
+type Sponsor {
+	avatarUrl: String!
+	login: String!
+	name: String!
+	tiersTitle: String!
+	websiteUrl: String
+}

package/templates/sveltekit-demo/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/templates/sveltekit-demo/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/templates/sveltekit-demo/src/client.ts

@@ -0,0 +1,16 @@
+import { PUBLIC_GRAPHQL_ENDPOINT } from '$env/static/public';
+import { HoudiniClient } from '$houdini';
+
+export default new HoudiniClient({
+	url: PUBLIC_GRAPHQL_ENDPOINT
+
+	// uncomment this to configure the network call (for things like authentication)
+	// for more information, please visit here: https://www.houdinigraphql.com/guides/authentication
+	// fetchParams({ session }) {
+	//     return {
+	//         headers: {
+	//             Authentication: `Bearer ${session.token}`,
+	//         }
+	//     }
+	// }
+});

package/templates/sveltekit-demo/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

package/templates/sveltekit-demo/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/templates/sveltekit-demo/src/routes/+layout.gql

@@ -0,0 +1,3 @@
+query Layout {
+	welcome
+}

package/templates/sveltekit-demo/src/routes/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { PageData } from './$houdini';
+
+	export let data: PageData;
+
+	$: ({ Layout } = data);
+</script>
+
+<svelte:head>
+	<title>Houdini • demo</title>
+	<link rel="icon" type="image/png" href="https://houdinigraphql.com/images/logo.png" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css" />
+</svelte:head>
+
+<h1>{$Layout.data?.welcome}</h1>
+
+<a href="/">Home</a> |
+<a href="/links">Links</a> |
+<a href="/sponsors">Sponsors</a>
+
+<hr />
+
+<slot />

package/templates/sveltekit-demo/src/routes/+page.svelte

@@ -0,0 +1,26 @@
+<p>First of all, thank you for using Houdini 🎉!</p>
+<p>
+	You will find here a very small app to show you a few featues like
+	<span class="code">+page.gql</span>, <span class="code">+layout.gql</span>,
+	<span class="code">fragment</span>, <span class="code">data masking</span>,
+	<span class="code">@loading</span>
+</p>
+<p>To reset this demo and make it yours:</p>
+<ol>
+	<li>Remove all files in <span class="code">routes</span> folder.</li>
+	<li>
+		Update <span class="code">.env.local</span> so that
+		<span class="code">PUBLIC_GRAPHQL_ENDPOINT</span> targets your endpoint.
+	</li>
+	<li>Restart the app.</li>
+</ol>
+
+<p><i>//Enjoy 🥳🥳🥳</i></p>
+
+<style>
+	.code {
+		background-color: black;
+		padding: 0.25rem;
+		margin: 0.15rem;
+	}
+</style>

package/templates/sveltekit-demo/src/routes/links/+page.gql

@@ -0,0 +1,8 @@
+query PageHome {
+	links(
+		# The delai here is just to simulate a slow response from the server
+		delai: 3000
+	) @loading(count: 5) {
+		...LinkInfo
+	}
+}

package/templates/sveltekit-demo/src/routes/links/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { PageData } from './$houdini';
+	import Link from './Link.svelte';
+
+	export let data: PageData;
+
+	$: ({ PageHome } = data);
+</script>
+
+<h2>Links</h2>
+<ul>
+	{#each $PageHome.data?.links ?? [] as link}
+		<li>
+			<Link {link} />
+		</li>
+	{/each}
+</ul>

package/templates/sveltekit-demo/src/routes/links/Link.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { PendingValue, fragment, graphql } from '$houdini';
+	import type { LinkInfo } from '$houdini';
+
+	export let link: LinkInfo;
+	$: data = fragment(
+		link,
+		graphql(`
+			fragment LinkInfo on Link {
+				name @loading
+				url
+			}
+		`)
+	);
+</script>
+
+{#if $data.name === PendingValue}
+	<div class="skeleton" />
+{:else}
+	<a href={$data.url} target="_blank">{$data.name}</a>
+{/if}
+
+<style>
+	.skeleton {
+		animation: skeleton-loading 0.5s linear infinite alternate;
+		width: 10rem;
+		height: 1rem;
+		border-radius: 0.25rem;
+	}
+
+	@keyframes skeleton-loading {
+		0% {
+			background-color: hsl(200, 20%, 80%);
+		}
+		100% {
+			background-color: hsl(200, 20%, 95%);
+		}
+	}
+</style>

package/templates/sveltekit-demo/src/routes/sponsors/+page.gql

@@ -0,0 +1,6 @@
+query PageSponsors {
+	sponsors {
+		...SponsorInfo
+		tiersTitle
+	}
+}

package/templates/sveltekit-demo/src/routes/sponsors/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { SponsorInfo } from '$houdini';
+	import type { PageData } from './$houdini';
+	import Sponsors from './Sponsors.svelte';
+
+	export let data: PageData;
+
+	$: ({ PageSponsors } = data);
+
+	$: grouped =
+		$PageSponsors.data?.sponsors.reduce((acc: Record<string, SponsorInfo[]>, sponsor) => {
+			acc[sponsor.tiersTitle] = acc[sponsor.tiersTitle] || [];
+			acc[sponsor.tiersTitle].push(sponsor);
+			return acc;
+		}, {}) ?? {};
+</script>
+
+<h2>Sponsors</h2>
+<center>
+	{#if $PageSponsors.fetching}
+		Loading...
+	{:else if $PageSponsors.errors}
+		{#each $PageSponsors.errors as error}
+			{error.message}
+		{/each}
+	{:else}
+		{#each Object.entries(grouped) as [key, sponsors], i}
+			{@const size = 0.8 + (Object.entries(grouped).length - i) / 5}
+			<h3 style="font-size: {size}rem;">{key}</h3>
+			<div class="list">
+				{#each sponsors as sponsor}
+					<Sponsors {sponsor} {size} />
+				{/each}
+			</div>
+		{/each}
+	{/if}
+</center>
+
+<style>
+	.list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-evenly;
+		gap: 1rem;
+		margin-bottom: 3rem;
+	}
+</style>

package/templates/sveltekit-demo/src/routes/sponsors/Sponsors.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { fragment, graphql } from '$houdini';
+	import type { SponsorInfo } from '$houdini';
+
+	export let sponsor: SponsorInfo;
+	export let size: number = 1;
+	$: data = fragment(
+		sponsor,
+		graphql(`
+			fragment SponsorInfo on Sponsor {
+				login
+				name
+				avatarUrl
+			}
+		`)
+	);
+</script>
+
+<a href="https://github.com/{$data.login}" target="_blank" style="font-size: {size}rem;">
+	<img src={$data.avatarUrl} alt={$data.name} width={size * 50} />
+	<span>{$data.name}</span>
+</a>
+
+<style>
+	img {
+		border-radius: 30%;
+	}
+
+	a {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+</style>

package/templates/sveltekit-demo/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter(),
+		alias: {
+			$houdini: './$houdini'
+		}
+	}
+};
+
+export default config;

package/templates/sveltekit-demo/tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

package/templates/sveltekit-demo/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"rootDirs": [".", "./.svelte-kit/types", "./$houdini/types"]
+	}
+}

package/templates/sveltekit-demo/vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import houdini from 'houdini/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [houdini(), sveltekit()]
+});