migrate to svelte 5

idleberg · Dec 1, 2024 · f97ee95 · f97ee95
1 parent de99763
commit f97ee95
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 38 deletions.
diff --git a/src/components/Tags.svelte b/src/components/Tags.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
     import { Tag } from "carbon-components-svelte";
 
-    export let font;
+    let { font } = $props();
 </script>
 
 <div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,6 +9,11 @@
     import { Grid } from "carbon-components-svelte";
     import Header from '$components/Header.svelte';
     import Footer from '$components/Footer.svelte';
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
     
     onMount(() => {
         store.set(sortByKey(page.content).filter(item => item.public));
@@ -18,7 +23,7 @@
 <Grid fullWidth>
     <Header />
 
-    <slot></slot>
+    {@render children?.()}
 
     <Footer />
 </Grid>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,11 +8,12 @@
     import Tags from '$components/Tags.svelte';
     import View from "carbon-icons-svelte/lib/View.svelte";
 
-    let searchValue: string = '';
-    let showCustomText: boolean = false;
-    $: customText = '';
-    let isLoading = true;
-    let publicFonts: Record<string, any>[] = [];
+    let searchValue: string = $state('');
+    let showCustomText: boolean = $state(false);
+    let customText = $state('');
+    
+    let isLoading = $state(true);
+    let publicFonts: Record<string, any>[] = $state([]);
     let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
     let numbers = "0123456789".split("")
 

diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
@@ -14,9 +14,11 @@
 <Column padding>
     <Accordion>
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>Where are these fonts taken from?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>Where are these fonts taken from?</strong>
+
+              {/snippet}
 
             <p>
                 All included fonts where hand-drawn from Toshi Omagari's magnificent book
@@ -26,9 +28,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>Who are these fonts for?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>Who are these fonts for?</strong>
+
+              {/snippet}
 
             <p>
                 The fonts have created with Panic's
@@ -38,9 +42,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>When is a font tagged as incomplete?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>When is a font tagged as incomplete?</strong>
+
+              {/snippet}
 
             <p>
                 Fonts are tagged as incomplete, when they lack one or more characters in their supported character range. So when a font supports uppercase letters,
@@ -50,9 +56,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>Why are some fonts incomplete?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>Why are some fonts incomplete?</strong>
+
+              {/snippet}
 
             <p>
                 This question can only be answered by the original designers of these fonts. Drawing only the characters used by a game, saving diskspace,
@@ -62,9 +70,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>Why are some fonts missing?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>Why are some fonts missing?</strong>
+
+              {/snippet}
 
             <p>
                 If you know the book these fonts were taken from, you might wonder why some fonts are missing entirely. That's mostly the case when a font makes
@@ -75,9 +85,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>What's an unused font?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>What's an unused font?</strong>
+
+              {/snippet}
 
             <p>
                 A font considered for a game that didn't make it into the final product. Presumably, they ended
@@ -88,9 +100,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>How are these fonts licensed?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>How are these fonts licensed?</strong>
+
+              {/snippet}
 
             <p>
                 All included fonts are part of the public domain and as such they are available under the terms of the
@@ -100,9 +114,11 @@
         </AccordionItem>
 
         <AccordionItem open={isDev}>
-            <svelte:fragment slot="title">
-              <strong>Can I use these fonts for x?</strong>
-            </svelte:fragment>
+            {#snippet title()}
+
+                <strong>Can I use these fonts for x?</strong>
+
+              {/snippet}
 
             <p>
                 If you want to use these fonts into non-Playdate projects, you might be interested in

diff --git a/src/routes/try/[font]/+page.svelte b/src/routes/try/[font]/+page.svelte
@@ -11,18 +11,18 @@
 
     let defaultText = 'SPHINX OF BLACK QUARTZ JUDGE MY VOW';
 
-    let previewArea: HTMLElement;
-    let previewArea2x: HTMLElement;
-    let previewArea4x: HTMLElement;
+    let previewArea: HTMLElement = $state();
+    let previewArea2x: HTMLElement = $state();
+    let previewArea4x: HTMLElement = $state();
 
     const font = page.content.find(font => font.name === $pageStore.params.font);    
     const isUppercase = !font?.features.lowercase && font?.features.uppercase;
 
-    let transformCasing = {
+    let transformCasing = $state({
         checked: !(font?.features.lowercase && font?.features.uppercase),
         label: `Convert ${isUppercase ? ' lowercase' : 'uppercase'} characters ${isUppercase ? ' to uppercase' : ' to lowercase'}`
-    }
-    let textArea: string = isUppercase ? defaultText : defaultText.toLowerCase();
+    })
+    let textArea: string = $state(isUppercase ? defaultText : defaultText.toLowerCase());
 
     onMount(() => {
         handleChange();