🛠️ Upgrade main +layout, +page.ts & +layout from /directory to Svelte 5 syntax

Author: pheralb

src/routes/+layout.svelte

@@ -1,23 +1,18 @@
 <script lang="ts">
   import type { LayoutServerData } from './$types';
-  export let data: LayoutServerData;
+  import type { Snippet } from 'svelte';
+  import { page } from '$app/state';
 
   // Global styles:
-  import '../app.css';
+  import '@/styles/globals.css';
   import { cn } from '@/utils/cn';
   import { ModeWatcher, mode } from 'mode-watcher';
+
   import { sidebarCategoryCountStyles } from '@/ui/styles';
   import { sidebarItemStyles } from '@/ui/styles';
 
   // Get categories:
   import { svgs } from '@/data/svgs';
-  const categories = getCategories();
-
-  // Get category counts:
-  let categoryCounts: Record<string, number> = {};
-  categories.forEach((category) => {
-    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
-  });
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -29,10 +24,25 @@
   // Layout:
   import Navbar from '@/components/navbar.svelte';
   import { getCategories } from '@/data';
+
+  interface Props {
+    data: LayoutServerData;
+    children?: Snippet;
+  }
+
+  const categories = getCategories();
+
+  // Get category counts:
+  let categoryCounts: Record<string, number> = $state({});
+  categories.forEach((category) => {
+    categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
+  });
+
+  let { children }: Props = $props();
 </script>
 
 <ModeWatcher />
-<Navbar currentPath={data.pathname} />
+<Navbar currentPath={page.url.pathname} />
 <main>
   <aside
     class={cn(
@@ -51,7 +61,7 @@
           href="/"
           class={cn(
             sidebarItemStyles,
-            data.pathname === '/'
+            page.url.pathname === '/'
               ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
               : ''
           )}
@@ -64,7 +74,7 @@
             data-sveltekit-preload-data
             class={cn(
               sidebarItemStyles,
-              data.pathname === `/directory/${category.toLowerCase()}`
+              page.url.pathname === `/directory/${category.toLowerCase()}`
                 ? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
                 : ''
             )}
@@ -73,7 +83,7 @@
             <span
               class={cn(
                 sidebarCategoryCountStyles,
-                data.pathname === `/directory/${category.toLowerCase()}`
+                page.url.pathname === `/directory/${category.toLowerCase()}`
                   ? 'border-neutral-300 dark:border-neutral-700'
                   : '',
                 'hidden font-mono text-xs md:inline'
@@ -86,8 +96,8 @@
   </aside>
   <div class="ml-0 pb-6 md:ml-56">
     <Warning />
-    <Transition pathname={data.pathname}>
-      <slot />
+    <Transition pathname={page.url.pathname}>
+      {@render children?.()}
     </Transition>
     <Toaster
       position="bottom-right"

src/routes/api/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import { cn } from '@/utils/cn';
-  export let data;
+  /** @type {{data: any}} */
+  let { data } = $props();
 </script>
 
 <svelte:head>
@@ -23,7 +24,7 @@
       <span class="relative inline-block overflow-hidden rounded-full p-[1px] shadow-sm">
         <span
           class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
-        />
+        ></span>
         <div
           class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full border border-neutral-100 bg-neutral-100 px-3 py-1 font-mono text-xs font-medium backdrop-blur-3xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
         >
@@ -45,5 +46,5 @@
     'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
   )}
 >
-  <svelte:component this={data.content} />
+  <data.content />
 </article>

src/routes/api/+page.ts

@@ -9,6 +9,6 @@ export async function load() {
       meta: post.metadata
     };
   } catch (e) {
-    throw error(404, `Could not find this page`);
+    throw error(404, `⚠️ +page.ts: Could not find this page -  ${e}`);
   }
 }

src/routes/directory/[slug]/+layout.svelte

@@ -1,16 +1,24 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Container from '@/components/container.svelte';
   import { ArrowLeft } from 'lucide-svelte';
+
+  interface LayoutProps {
+    children?: Snippet;
+  }
+
+  let { children }: LayoutProps = $props();
 </script>
 
 <Container>
   <a href="/">
     <div
-      class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white group md:mt-2"
+      class="group flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white md:mt-2"
     >
       <ArrowLeft size={20} class="group-hover:-translate-x-[2px] group-hover:duration-200" />
       <span>View all</span>
     </div>
   </a>
 </Container>
-<slot />
+{@render children?.()}