svelte codegen

web/codegen.ts

@@ -4,7 +4,7 @@ import type { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   overwrite: true,
   schema: "http://localhost:8080/graphql",
-  documents: "./src/**/*.graphql",
+  documents: "./src/**/*.svelte",
   generates: {
     "src/gql/": {
       preset: "client",

web/package-lock.json

@@ -18,6 +18,7 @@
         "postcss": "^8.4.49",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
+        "svelte2tsx": "^0.7.33",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.2",
         "vite": "^6.0.5"
@@ -4114,6 +4115,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -7193,6 +7201,21 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/svelte2tsx": {
+      "version": "0.7.33",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.33.tgz",
+      "integrity": "sha512-geogGkzfciwteiKvlbaDBnKOitWuh6e1n2f5KLBBXEfZgui9gy5yRlOBYtNEkdwciO4MC9fTM/EyltsiQrOPNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
     "node_modules/swap-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz",

web/package.json

@@ -11,6 +11,8 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.5.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.20",
@@ -19,10 +21,9 @@
     "postcss": "^8.4.49",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",
+    "svelte2tsx": "^0.7.33",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
-    "vite": "^6.0.5",
-    "@graphql-codegen/cli": "5.0.3",
-    "@graphql-codegen/client-preset": "4.5.1"
+    "vite": "^6.0.5"
   }
 }

web/src/pages/Game.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-    import { gql, request } from "graphql-request"
+    import { request } from "graphql-request";
+    import { graphql } from "./../gql";
 
-    const doc = gql`
-    query{
+    const doc = graphql(`
+        query hello {
             game(id: "1") {
                 score
             }
         }
-    `
+    `);
 
-    request('http://localhost:5173/graphql', doc).then((e) => {
-        console.log(e)
-    })
+    request("http://localhost:5173/graphql", doc).then((e) => {
+        console.log(e.game?.score);
+    });
 
     let game = {
         id: "myid",
@@ -25,17 +26,16 @@
         team1player1: "T1P1",
     };
 
-    let scoreTeam0 = (game.score > 0) ? game.score : 0
-    let scoreTeam1 = (game.score < 0) ? game.score : 0
+    let scoreTeam0 = game.score > 0 ? game.score : 0;
+    let scoreTeam1 = game.score < 0 ? game.score : 0;
 </script>
 
 <h1 class="text-2xl">Game</h1>
 
-Played at: {game.added} <br>
-Added by: {game.author} <br> 
-Overtime: {game.overtime} <br>
-
-Team 1: {scoreTeam0} Team2: {scoreTeam1} <br> 
-{game.team0player0} | {game.team1player0} <br>
-{game.team0player1} | {game.team1player1} <br>
+Played at: {game.added} <br />
+Added by: {game.author} <br />
+Overtime: {game.overtime} <br />
 
+Team 1: {scoreTeam0} Team2: {scoreTeam1} <br />
+{game.team0player0} | {game.team1player0} <br />
+{game.team0player1} | {game.team1player1} <br />