Adding SvelteKit Example

.graphqlrc.yaml

@@ -0,0 +1,41 @@
+# File for extension: vscode-graphql & CodeGen!
+projects:
+  nextjs:
+    overwrite: true
+    schema: "./graphql/schema/schema.graphql"
+    documents:
+      - "examples/nextjs/**/*.tsx"
+      - "!examples/nextjs/gql/**/*"
+    extensions:
+      codegen:
+        generates:
+          ./examples/nextjs/gql/:
+            preset: gql-tag-operations-preset
+        hooks:
+          afterOneFileWrite:
+            - prettier --write
+
+  sveltekit:
+    schema: "./graphql/schema/schema.graphql"
+    documents:
+      - "examples/sveltekit/**/*.gql"
+      - "examples/sveltekit/src/**/*.svelte"
+      - "!examples/sveltekit/src/lib/graphql/_kitql/gql/**/*"
+    extensions:
+      codegen:
+        generates:
+          ./examples/sveltekit/src/lib/graphql/_kitql/graphqlTypes.ts:
+            plugins:
+              - typescript
+              - typescript-operations
+              - typed-document-node
+              - typescript-document-nodes
+          # ./examples/sveltekit/src/lib/graphql/_kitql/gql/:
+          #   preset: gql-tag-operations-preset
+          ./examples/sveltekit/src/lib/graphql/_kitql/graphqlStores.ts:
+            plugins:
+              - "@kitql/graphql-codegen"
+            config:
+              importBaseTypesFrom: $lib/graphql/_kitql/graphqlTypes
+        config:
+          useTypeImports: true

.vscode/settings.json

@@ -1,4 +1,8 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "explorer.experimental.fileNesting.enabled": true,
+  "explorer.experimental.fileNesting.patterns": {
+    "*.svelte": "${capture}*.gql"
+  }
 }

README.md

@@ -19,7 +19,9 @@ A basic HackerNews-like clone where posts can be submitted with url links and th
 - [Postgres Triggers](https://supabase.com/blog/2021/07/30/supabase-functions-updates) and [Postgres Functions](https://supabase.com/docs/guides/database/functions) - When votes are in, use triggers to invoke a Postgres function that calculates a post score to rank the feed
 - [Postgres Enumerated Types](https://www.postgresql.org/docs/14/datatype-enum.html) - Enums help defined the direction of a vote: UP or DOWN.
 
-### Frontend
+### Frontends
+
+#### Next.js
 
 - [Next.js](https://nextjs.org) - React Framework
 - [TypeScript](https://www.typescriptlang.org) - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
@@ -28,6 +30,14 @@ A basic HackerNews-like clone where posts can be submitted with url links and th
 - [urql](https://formidable.com/open-source/urql/) - A highly customizable and versatile GraphQL client
 - [Gravatar](https://en.gravatar.com) - Default avatar profile images from Gravatar
 
+#### SvelteKit
+
+- [SvelteKit](https://kit.svelte.dev/) - THE FASTEST WAY TO BUILD SVELTE APPS
+- [TypeScript](https://www.typescriptlang.org) - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+- [graphql-code-generator](https://www.graphql-code-generator.com) - Generate code from your GraphQL schema and operations with a simple CLI
+- [KitQL](https://github.com/jycouet/kitql) - A set of tools, helping you building efficient apps in a fast way. >> SvelteKit & GraphQL <<
+- [Gravatar](https://en.gravatar.com) - Default avatar profile images from Gravatar
+
 ### Functionality
 
 - Registration
@@ -45,25 +55,31 @@ A basic HackerNews-like clone where posts can be submitted with url links and th
 
 ### Setup env vars
 
-- `cp app/.env.example app/.env`
+- nextjs or sveltekit
+  - `cp examples/nextjs/.env.example examples/nextjs/.env`
+  - `cp examples/sveltekit/.env.example examples/sveltekit/.env`
 - Fill in your url and anon key from the Supabase Dashboard: https://app.supabase.io/project/_/settings/api
 
-### Install dependencies, GraphQL codegen, run app
+### Install dependencies, GraphQL codegen, run
 
 ```bash
 yarn
 yarn codegen
-yarn workspace app dev
+
+# For nextjs
+yarn workspace nextjs dev
+# For sveltekit
+yarn workspace sveltekit dev
 ```
 
 ### Deploy to Vercel
 
 Provide the following settings to deploy a production build to Vercel:
 
-- BUILD COMMAND: `yarn codegen && yarn workspace app build`
-- OUTPUT DIRECTORY: `./app/.next`
+- BUILD COMMAND: `yarn codegen && yarn workspace nextjs build`
+- OUTPUT DIRECTORY: `./examples/nextjs/.next`
 - INSTALL COMMAND: `yarn`
-- DEVELOPMENT COMMAND: `yarn codegen && yarn workspace app dev --port $PORT`
+- DEVELOPMENT COMMAND: `yarn codegen && yarn workspace nextjs dev --port $PORT`
 
 ## Development
 
@@ -82,7 +98,7 @@ yarn codegen:watch
 3. Run server
 
 ```bash
-yarn workspace app dev
+yarn workspace nextjs dev
 ```
 
 ### Synchronize the GraphQL schema

app/package.json → examples/nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "nextjs",
   "version": "0.1.0",
   "private": true,
   "scripts": {

examples/sveltekit/.env.exemple

@@ -0,0 +1,2 @@
+VITE_PUBLIC_SUPABASE_URL=
+VITE_PUBLIC_SUPABASE_ANON_KEY=

examples/sveltekit/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

examples/sveltekit/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+!.env.example
+_kitql

examples/sveltekit/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/sveltekit/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

examples/sveltekit/README.md

@@ -0,0 +1,3 @@
+# pg-graphql-example & sveltekit
+
+Using [KitQL](https://github.com/jycouet/kitql) A set of tools, helping you building efficient apps in a fast way. >> SvelteKit & GraphQL <<

examples/sveltekit/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "sveltekit",
+	"version": "0.0.1",
+	"license": "MIT",
+	"scripts": {
+		"dev": "env-cmd svelte-kit dev --port 3001",
+		"build": "svelte-kit build",
+		"package": "svelte-kit package",
+		"preview": "env-cmd svelte-kit preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@typescript-eslint/eslint-plugin": "^5.10.1",
+		"@typescript-eslint/parser": "^5.10.1",
+		"autoprefixer": "^10.4.2",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^3.2.1",
+		"postcss": "^8.4.5",
+		"postcss-load-config": "^3.1.1",
+		"prettier": "^2.5.1",
+		"prettier-plugin-svelte": "^2.5.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.10.1",
+		"tailwindcss": "^3.0.12",
+		"tslib": "^2.3.1",
+		"typescript": "~4.6.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@graphql-yoga/common": "2.0.0",
+		"@iconify/json": "2.1.22",
+		"@kitql/all-in": "0.6.3",
+		"@svitejs/svelte-preprocess-svg": "1.0.2",
+		"@tailwindcss/forms": "0.5.0",
+		"cookie": "0.4.2",
+		"env-cmd": "10.1.0",
+		"javascript-time-ago": "2.3.13",
+		"jsonwebtoken": "8.5.1",
+		"unplugin-icons": "0.14.1"
+	}
+}

examples/sveltekit/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

examples/sveltekit/src/app.css

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/sveltekit/src/app.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#the-app-namespace
+// for information about these interfaces
+declare namespace App {
+	// interface Locals {}
+	// interface Platform {}
+	// interface Session {}
+	// interface Stuff {}
+}
+
+declare module '~icons/*' {
+	export { SvelteComponentDev as default } from 'svelte/internal';
+}

examples/sveltekit/src/app.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="" />
+		<link rel="icon" href="%svelte.assets%/favicon.ico" />
+		<meta name="description" content="Everything you need to develop a GraphQL app." />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div>%svelte.body%</div>
+	</body>
+</html>

examples/sveltekit/src/hooks/handleAuthCookie.ts

@@ -0,0 +1,22 @@
+import { kitQLClient } from '$lib/graphql/kitQLClient';
+import type { RequestEvent } from '@sveltejs/kit/types/internal';
+import { parse } from 'cookie';
+import * as jwt from 'jsonwebtoken';
+
+export async function handleAuthCookie({ event, resolve }: { event: RequestEvent; resolve: any }) {
+	const cookies = parse(event.request.headers.get('cookie') || '');
+	if (cookies.supa_id) {
+		var userInfo: any = jwt.verify(cookies.supa_id, 'HELLO_YOU');
+
+		event.locals = {
+			user: userInfo.user,
+			access_token: userInfo.access_token
+		};
+	} else {
+		event.locals = { user: null };
+	}
+
+	const response = await resolve(event);
+
+	return response;
+}

examples/sveltekit/src/hooks/index.ts

@@ -0,0 +1,10 @@
+import type { RequestEvent } from '@sveltejs/kit/types/internal';
+import { sequence } from '@sveltejs/kit/hooks';
+import { handleAuthCookie } from './handleAuthCookie';
+
+export const handle = sequence(handleAuthCookie);
+
+export function getSession(event: RequestEvent) {
+	// Give all locals to the session
+	return event.locals;
+}

examples/sveltekit/src/lib/components/hackernews/comment/CommentItem.FRAG.gql

@@ -0,0 +1,14 @@
+fragment CommentItem_CommentFragment on Comment {
+	id
+	message
+	createdAt
+	post {
+		id
+		title
+	}
+	profile {
+		id
+		username
+		avatarUrl
+	}
+}

examples/sveltekit/src/lib/components/hackernews/comment/CommentItem.MUTATION.gql

@@ -0,0 +1,5 @@
+mutation CommentItem_DeleteComment($commentId: BigInt!) {
+	deleteFromCommentCollection(atMost: 1, filter: { id: { eq: $commentId } }) {
+		affectedCount
+	}
+}