barebones docker | pocketbase | hono | svelte

frontend/src/app.d.ts

@@ -1,9 +1,14 @@
+import { PocketBase } from 'pocketbase';
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
+
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			pb: PocketBase;
+		}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

frontend/src/lib/pocketbase.ts

@@ -0,0 +1,5 @@
+import PocketBase from 'pocketbase';
+import { SERVER_IP, PB_PORT } from '../../../config.ts';
+
+const url = `http://${SERVER_IP}:${PB_PORT}`;
+export const pb: PocketBase = new PocketBase(url);

frontend/src/routes/debug/+page.server.ts

@@ -0,0 +1,6 @@
+import { DEBUG_RECORD_ID } from '../../../../config';
+export async function load({ locals }) {
+	return {
+		recordId: DEBUG_RECORD_ID
+	};
+}

frontend/src/routes/debug/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { pb } from "$lib/pocketbase";
+	let { data } = $props();
+	let records = $state(null);
+	$effect(async () => {
+		records = await pb.collection('debug').getOne(data.recordId);
+		return await pb.collection('debug').subscribe(data.recordId, ({ action, record }) => {
+		  records = record
+        // if (action === 'create') {
+        // 		todos = [...todos, record];
+        //  	}
+
+        //  	if (action === 'update') {
+        // 		todos = todos.map((t) =>
+        //  			t.id === record.id ? record : t
+        // 		);
+        //  	}
+
+        //  	if (action === 'delete') {
+        // 		todos = todos.filter((t) =>
+        //  			t.id !== record.id
+        // 		);
+        //  	}
+        });
+	});
+
+	async function incrementHono() {
+	    try {
+  		const response = await fetch('/api/increment-hono', { method: 'POST' });
+  		const data = await response.json();
+  		console.log(data);
+		} catch (error) {
+		console.error(error);
+		}
+	}
+</script>
+
+<h1>Debug Dashboard</h1>
+
+<div class="counters">
+	<div class="card">
+		<h2>Hono</h2>
+		{#if records}
+		<p class="value">{records.hono_count}</p>
+		{/if}
+		<button onclick={incrementHono}>+1 Hono</button>
+	</div>
+
+
+</div>
+
+<style>
+	h1 {
+		text-align: center;
+		margin: 2rem 0;
+	}
+	.counters {
+		display: flex;
+		gap: 2rem;
+		justify-content: center;
+	}
+	.card {
+		border: 1px solid #ccc;
+		border-radius: 8px;
+		padding: 2rem;
+		text-align: center;
+		min-width: 200px;
+	}
+	.value {
+		font-size: 3rem;
+		font-weight: bold;
+		margin: 1rem 0;
+	}
+	button {
+		padding: 0.5rem 1.5rem;
+		font-size: 1rem;
+		cursor: pointer;
+	}
+</style>