Add REST API and server-load example

package.json

@@ -12,18 +12,21 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "sass": "^1.71.0",
-    "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
     "svelte-language-server": "^0.16.3",
-    "typescript": "^5.0.0",
     "typescript-language-server": "^4.3.3",
     "vite": "^5.0.3"
   },
+  "dependencies": {
+    "@sveltejs/kit": "^2.5.1",
+    "lowdb": "^7.0.1",
+    "svelte": "^4.2.7",
+    "typescript": "^5.0.0"
+  },
   "prettier": {
     "printWidth": 100,
     "plugins": [

src/lib/db.ts

@@ -0,0 +1,12 @@
+import { JSONFilePreset } from "lowdb/node";
+
+// DatabaseSchema is the type describing the database schema.
+type DatabaseSchema = {
+  candies: number;
+};
+
+const db = await JSONFilePreset<DatabaseSchema>("db.json", {
+  candies: 0,
+});
+
+export default db;

src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+// SvelteKit allows us to define a separate file for the server-side logic of
+// a page. This file is executed on the server and is used to fetch data that
+// will be passed to the page for rendering.
+//
+// Using this file lets us skip implementing an endpoint in the API, and
+// instead fetch the data directly from the database.
+// Such feature is the "full-stack" part of SvelteKit.
+//
+// IMPORTANT: your editor will likely mark this file as having errors even though
+// you've not made any changes. To fix this, run `npm run dev`.
+
+import type { PageServerLoad } from "./$types";
+import db from "$lib/db";
+
+export const load: PageServerLoad = async () => {
+  const candies = db.data.candies;
+  return { candies };
+};

src/routes/+page.svelte

@@ -1,5 +1,22 @@
-<script>
-  import { candies } from "$lib/stores";
+<script lang="ts">
+  import type { PageData } from "./$types";
+
+  export let data: PageData; // populated by Svelte via +page.server.ts!
+  let candies = data.candies; // grab the initial value from the server
+  let pending = 0; // number of pending requests
+
+  async function addCandy() {
+    // Update count locally.
+    candies++;
+
+    // Update count on the server.
+    pending++;
+    await fetch("/api/candies", {
+      method: "POST",
+      body: JSON.stringify({ candies: 1 }),
+    });
+    pending--;
+  }
 </script>
 
 <svelte:head>
@@ -14,10 +31,11 @@
     <h4>🍭 Candy Shop</h4>
   </header>
 
-  <main>
-    <button class:odd={$candies % 2} on:click={() => ($candies += 1)}> Click me </button>
-    <p>🍬 Candies: {$candies}</p>
-  </main>
+  <div>
+    <button class:odd={candies % 2} on:click={() => addCandy()}> Click me </button>
+    <p>🍬 Candies: {candies}</p>
+    <p>⌛ Pending requests: {pending}</p>
+  </div>
 </article>
 
 <hr />
@@ -27,13 +45,18 @@
 </footer>
 
 <style lang="scss">
-  .candies main {
+  .candies div {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: space-between;
     gap: var(--pico-spacing);
 
+    @media (max-width: 400px) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
     p {
       margin: 0;
     }

src/routes/api/candies/+server.ts

@@ -0,0 +1,28 @@
+// SvelteKit also allows us to implement a full REST API server if we wish to. Here,
+// we implement a simple GET/POST API for the candies resource.
+//
+// IMPORTANT: your editor will likely mark this file as having errors even though
+// you've not made any changes. To fix this, run `npm run dev`.
+
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+import db from "$lib/db";
+
+export const GET: RequestHandler = async () => {
+  return json({
+    candies: db.data.candies,
+  });
+};
+
+export type AddCookiesRequest = {
+  candies: number;
+};
+
+export const POST: RequestHandler = async ({ request }) => {
+  const data = (await request.json()) as AddCookiesRequest;
+  db.data.candies += data.candies;
+
+  return json({
+    candies: db.data.candies,
+  });
+};

tsconfig.json

@@ -8,8 +8,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler"
+    "strict": true
   }
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   //