svelte 5 migration

src/lib/components/code-input.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let code: string;
+  interface Props {
+    code: string;
+  }
+
+  let { code = $bindable() }: Props = $props();
 </script>
 
 <textarea bind:value={code}></textarea>

src/lib/components/editor.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
-  import { pane as navStore, type Pane } from '$lib/stores/nav';
+  import { type Snippet } from 'svelte';
 
-  export let pane: Pane;
+  import { pane as navStore, type Pane } from '$lib/stores/nav.js';
 
-  export let testid: string | undefined = undefined;
+  interface Props {
+    pane: Pane;
+    testid?: string;
+    children?: Snippet;
+  }
+
+  let { pane, testid, children }: Props = $props();
 
   // don't show pane if we're not the current pane
-  let hidden: boolean;
-  $: hidden = pane !== $navStore;
+  let hidden: boolean = $derived(pane !== $navStore);
 </script>
 
 <div id={`pane-${pane}`} data-testid={testid} role="tabpanel" class:hidden>
-  <slot />
+  {@render children?.()}
 </div>
 
 <style lang="less">

src/lib/components/headline.svelte

@@ -1,5 +1,15 @@
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
 <header>
-  <h1><slot /></h1>
+  <h1>{@render children()}</h1>
 </header>
 
 <style lang="less">

src/lib/components/nav-item.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-  import { pane, type Pane } from '$lib/stores/nav';
+  import { type Snippet } from 'svelte';
 
-  export let destination: Pane;
+  import { pane, type Pane } from '$lib/stores/nav.js';
 
-  let selected: boolean;
-  $: selected = destination === $pane;
+  interface Props {
+    destination: Pane;
+    children: Snippet;
+  }
+
+  let { destination, children }: Props = $props();
+
+  let selected: boolean = $derived(destination === $pane);
 
   function handleKey({ key }: KeyboardEvent) {
     if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
@@ -23,10 +29,10 @@
   role="tab"
   tabindex="0"
   class:selected
-  on:click={navigate}
-  on:keyup={handleKey}
+  onclick={navigate}
+  onkeyup={handleKey}
 >
-  <slot />
+  {@render children()}
 </li>
 
 <style lang="less">

src/lib/components/nav-toggle.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  export let navOpen: boolean;
+  interface Props {
+    navOpen: boolean;
+  }
+
+  let { navOpen = $bindable() }: Props = $props();
 
   // if nav is open, we should "hide" it on press. if not, we should "show" it.
-  let action: string;
-  $: action = navOpen ? 'hide' : 'show';
+  let action: string = $derived(navOpen ? 'hide' : 'show');
 
   function toggle() {
     navOpen = !navOpen;
   }
 </script>
 
-<button on:click={toggle}>{action} navigation</button>
+<button onclick={toggle}>{action} navigation</button>
 
 <style lang="less">
   button {

src/lib/components/nav-tree.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
 
   import NavToggle from './nav-toggle.svelte';
 
-  export let mobile: boolean = true;
+  interface Props {
+    mobile?: boolean;
+    children: Snippet;
+  }
 
-  let open: boolean = false;
+  let { mobile = true, children }: Props = $props();
+
+  let open: boolean = $state(false);
 </script>
 
 <nav>
@@ -14,7 +20,7 @@
   {/if}
   {#if open || !mobile}
     <ul role="tablist" transition:slide={{ duration: 300 }}>
-      <slot />
+      {@render children()}
     </ul>
   {/if}
 </nav>

src/lib/components/preview.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import { pane } from '$lib/stores/nav';
+  import { pane } from '$lib/stores/nav.js';
 
-  export let mobile: boolean;
+  interface Props {
+    mobile?: boolean;
+    markdown: string;
+    stylesheet: string;
+  }
 
-  let hidden: boolean;
-  $: hidden = mobile ? $pane !== 'preview' : true;
+  let { mobile = true, markdown, stylesheet }: Props = $props();
 
-  export let markdown: string;
-  export let stylesheet: string;
+  let hidden: boolean = $derived(mobile ? $pane !== 'preview' : true);
 </script>
 
 <main class:hidden class:mobile data-testid="preview-pane">

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.server.ts

@@ -1,6 +1,8 @@
+import { type RequestEvent } from '@sveltejs/kit';
+
 import { UAParser } from 'ua-parser-js';
 
-export async function load({ request }) {
+export async function load({ request }: RequestEvent) {
   const ua = request.headers.get('user-agent');
 
   if (!ua) {

src/routes/+layout.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
+
   import '../app.less';
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children()}

src/routes/+page.svelte

@@ -2,6 +2,8 @@
   import { onMount } from 'svelte';
   import { get } from 'svelte/store';
 
+  import type { PageData } from './$types';
+
   import { pane } from '$lib/stores/nav.js';
 
   import CodeInput from '$lib/components/code-input.svelte';
@@ -11,9 +13,13 @@
   import NavTree from '$lib/components/nav-tree.svelte';
   import Preview from '$lib/components/preview.svelte';
 
-  export let data;
+  interface Props {
+    data: PageData;
+  }
 
-  let mobile: boolean = data.mobile;
+  let { data }: Props = $props();
+
+  let mobile: boolean = $state(data.mobile);
 
   function checkIsDesktop() {
     // TODO: figure out how to remove hard-coded value here
@@ -34,8 +40,8 @@
     };
   });
 
-  let markdown: string = '';
-  let stylesheet: string = '';
+  let markdown: string = $state('');
+  let stylesheet: string = $state('');
 </script>
 
 <svelte:head>