create-houdini 1.2.56 → 1.2.58

package/fragments/localSchema/react/src/api/+schema.js

@@ -8,7 +8,7 @@ export default createSchema({
 	`,
 	resolvers: {
 		Query: {
-			hello: () => 'world',
+			hello: () => 'Greetings from your local api 👋',
 		},
 	},
 })

package/fragments/localSchema/react/src/routes/+page.gql

@@ -0,0 +1,3 @@
+query HelloHoudini {
+	hello
+}

package/fragments/localSchema/react/src/routes/+page.jsx

@@ -0,0 +1,9 @@
+export default function ({ Hello }) {
+	return (
+		<div className="flex flex-col gap-8">
+			<h2>Home</h2>
+
+			<p>{Hello.message}</p>
+		</div>
+	)
+}

package/fragments/localSchema/react-typescript/src/api/+schema.ts

@@ -8,7 +8,7 @@ export default createSchema({
 	`,
 	resolvers: {
 		Query: {
-			hello: () => 'world',
+			hello: () => 'Greetings from your local api 👋',
 		},
 	},
 })

package/fragments/localSchema/react-typescript/src/routes/+page.gql

@@ -0,0 +1,3 @@
+query HelloHoudini {
+	hello
+}

package/fragments/localSchema/react-typescript/src/routes/+page.tsx

@@ -0,0 +1,11 @@
+import { PageProps } from './$types'
+
+export default function ({ Hello }: PageProps) {
+	return (
+		<div className="flex flex-col gap-8">
+			<h2>Home</h2>
+
+			<p>{Hello.message}</p>
+		</div>
+	)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-houdini",
-  "version": "1.2.56",
+  "version": "1.2.58",
   "description": "A CLI for creating new Houdini projects",
   "repository": {
     "type": "git",

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

@@ -1,6 +1,6 @@
 export default function () {
 	return (
-		<div>
+		<div className="flex flex-col gap-8">
 			<h2>Home</h2>
 
 			<p>

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

@@ -2,7 +2,7 @@ import type { PageProps } from './$types'
 
 export default function ({}: PageProps) {
 	return (
-		<div>
+		<div className="flex flex-col gap-8">
 			<h2>Home</h2>
 
 			<p>

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

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

package/templates/sveltekit-demo/.eslintignore

@@ -1,13 +0,0 @@
-.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

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

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

@@ -1,11 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-
-$houdini

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

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

package/templates/sveltekit-demo/.prettierignore

@@ -1,15 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-{
-	"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

@@ -1,14 +0,0 @@
-# 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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,38 +0,0 @@
-{
-	"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.30.0",
-		"@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": "^1.6.0"
-	},
-	"type": "module"
-}

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

@@ -1,12 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-<!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

@@ -1,16 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

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

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

@@ -1,23 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

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

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

@@ -1,47 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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 Houdini 🎩' })).toBeVisible();
-});

package/templates/sveltekit-demo/tsconfig.json

@@ -1,14 +0,0 @@
-{
-	"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

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