Refactor PocketBase client initialization, update HTML template for favicon handling, and remove redundant text in main components for improved clarity and performance in SvelteKit project.

2026-02-17 15:30:31 -06:00
parent 7269444163
commit 27f297f9ec
6 changed files with 28 additions and 8 deletions
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='4' fill='%231e293b'/><text x='16' y='22' font-size='18' font-family='system-ui' fill='%2394a3b8' text-anchor='middle'>S</text></svg>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
@@ -2,4 +2,24 @@ import PocketBase from "pocketbase";

 const POCKETBASE_URL = "https://pocketbase.ccllc.pro";

-export const pb = new PocketBase(POCKETBASE_URL);
+/** Base URL for API/file URLs; safe to use during SSR. */
+export const POCKETBASE_BASE_URL = POCKETBASE_URL;
+
+let _pb: PocketBase | null = null;
+
+/** PocketBase client — only created in the browser to avoid fetch during SSR. */
+export function getPb(): PocketBase {
+  if (typeof window === "undefined") {
+    throw new Error("PocketBase client is only available in the browser. Use load/actions for server data.");
+  }
+  if (!_pb) _pb = new PocketBase(POCKETBASE_URL);
+  return _pb;
+}
+
+/** Lazy client proxy: baseUrl is safe during SSR; other access creates the client in the browser only. */
+export const pb = new Proxy({} as PocketBase, {
+  get(_, prop) {
+    if (prop === "baseUrl") return POCKETBASE_BASE_URL;
+    return (getPb() as Record<string, unknown>)[prop as string];
+  },
+});
@@ -1,6 +1,8 @@
 <script lang="ts">
  import { browser } from "$app/environment";
  import { Button } from "$lib/components/ui/button";
+
+  let { data }: { data: { itemsForParent: { id: string; Item: string; SKU: string }[] } } = $props();
 </script>

 {#if browser}
@@ -14,7 +16,6 @@
 {:else}
  <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
    <h1 class="text-2xl font-semibold">Stackq</h1>
-    <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
    <div class="flex w-full max-w-xs flex-col gap-2">
      <a href="/items" class="block">
        <Button class="w-full">Items table</Button>
@@ -21,7 +21,6 @@

 <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
  <h1 class="text-2xl font-semibold">Stackq</h1>
-  <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
  <div class="flex w-full max-w-xs flex-col gap-2">
    <a href="/items" class="block">
      <Button class="w-full">Items table</Button>
@@ -4,13 +4,13 @@
  import { Label } from "$lib/components/ui/label";
  import { enhance } from "$app/forms";
  import { Camera, X } from "@lucide/svelte";
-  import { pb } from "$lib/pocketbase";
+  import { POCKETBASE_BASE_URL } from "$lib/pocketbase";
  import { UOM_OPTIONS, CATAGORY_OPTIONS, SUB_CATAGORY_OPTIONS } from "$lib/constants/items";
  import type { StackqItem } from "$lib/types/items";

  const COLLECTION = "Stackq_Items";
  function itemImageUrl(recordId: string, filename: string): string {
-    return `${pb.baseUrl}/api/files/${COLLECTION}/${recordId}/${filename}`;
+    return `${POCKETBASE_BASE_URL}/api/files/${COLLECTION}/${recordId}/${filename}`;
  }

  let {