back to enums

src/lib/components/MultiCodeContextless.svelte

@@ -22,10 +22,10 @@
         }
     });
 
-    const CopyStatus = {
+  const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
 
     let copyText = CopyStatus.Copy;
     async function handleCopy() {

src/markdoc/nodes/Fence.svelte

@@ -31,10 +31,10 @@
     const insideMultiCode = hasContext('multi-code');
     const selected = insideMultiCode ? getContext<CodeContext>('multi-code').selected : null;
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
 
     let copyText = $state(CopyStatus.Copy);
     async function handleCopy() {

src/markdoc/tags/MultiCode.svelte

@@ -48,11 +48,10 @@
         }
     });
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
-
     let copyText = $state(CopyStatus.Copy);
 
     async function handleCopy() {

src/routes/changelog/entry/[entry]/+page.svelte

@@ -21,10 +21,10 @@
 
     const sharingOptions = socialSharingOptions.filter((option) => option.label !== 'YCombinator');
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
 
     let copyText = CopyStatus.Copy;
     async function handleCopy() {

src/routes/products/auth/(components)/MultiFrameworkCode.svelte

@@ -22,10 +22,10 @@
         }
     });
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
 
     let copyText = CopyStatus.Copy;
     async function handleCopy() {

src/routes/products/functions/(components)/MultiFrameworkCode.svelte

@@ -22,10 +22,10 @@
         }
     });
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
 
     let copyText = CopyStatus.Copy;
     async function handleCopy() {

src/routes/threads/[id]/CodeRenderer.svelte

@@ -1,32 +1,28 @@
 <script lang="ts">
-    import { Tooltip } from '$lib/components';
-    import { getCodeHtml, type Language } from '$lib/utils/code';
-    import { copy } from '$lib/utils/copy';
-    import { platformMap } from '$lib/utils/references';
     import '$scss/hljs.css';
+    import { getCodeHtml, type Language } from '$lib/utils/code';
     import { getContext, hasContext } from 'svelte';
+    import { platformMap } from '$lib/utils/references';
+    import { Tooltip } from '$lib/components';
+    import { copy } from '$lib/utils/copy';
 
-    import type { CodeContext } from '$markdoc/tags/MultiCode.svelte';
     import { melt } from '@melt-ui/svelte';
+    import type { CodeContext } from '$markdoc/tags/MultiCode.svelte';
 
-    interface Props {
+    export let text: string;
-        text: string;
+    export let language: Language = 'typescript';
-        language?: Language;
+    export let process = true;
-        process?: boolean;
+    export let withLineNumbers = true;
-        withLineNumbers?: boolean;
-    }
-
-    let { text, language = 'typescript', process = true, withLineNumbers = true }: Props = $props();
 
     const insideMultiCode = hasContext('multi-code');
     const selected = insideMultiCode ? getContext<CodeContext>('multi-code').selected : null;
 
-    const CopyStatus = {
+    const enum CopyStatus {
-        Copy: 'Copy',
+        Copy = 'Copy',
-        Copied: 'Copied!'
+        Copied = 'Copied!'
-    };
+    }
-
+    
-    let copyText = $state(CopyStatus.Copy);
+    let copyText = CopyStatus.Copy;
     async function handleCopy() {
         await copy(text);
 
@@ -52,15 +48,13 @@
         });
     }
 
-    let result = $derived(
+    $: result = process
-        process
+        ? getCodeHtml({
-            ? getCodeHtml({
+              content: text,
-                  content: text,
+              language: language ?? 'sh',
-                  language: language ?? 'sh',
+              withLineNumbers
-                  withLineNumbers
+          })
-              })
+        : text;
-            : text
-    );
 </script>
 
 {#if insideMultiCode}
@@ -84,19 +78,19 @@
                 <ul class="buttons-list flex gap-2">
                     <li class="buttons-list-item ps-5">
                         <Tooltip>
-                            {#snippet asChild({ trigger })}
+                            <button
-                                <button
+                                slot="asChild"
-                                    use:melt={trigger}
+                                let:trigger
-                                    onclick={handleCopy}
+                                use:melt={trigger}
-                                    class="web-icon-button"
+                                on:click={handleCopy}
-                                    aria-label="copy code from code-snippet"
+                                class="web-icon-button"
-                                >
+                                aria-label="copy code from code-snippet"
-                                    <span class="web-icon-copy" aria-hidden="true"></span>
+                            >
-                                </button>
+                                <span class="web-icon-copy" aria-hidden="true"></span>
-                            {/snippet}
+                            </button>
-                            {#snippet tooltip()}
+                            <svelte:fragment slot="tooltip">
                                 {copyText}
-                            {/snippet}
+                            </svelte:fragment>
                         </Tooltip>
                     </li>
                 </ul>

svelte.config.js

@@ -10,7 +10,7 @@ const config = {
     // Consult https://kit.svelte.dev/docs/integrations#preprocessors
     // for more information about preprocessors
     preprocess: sequence([
-        vitePreprocess({ script: true}),
+        vitePreprocess(),
         markdoc({
             generateSchema: true,
             nodes: absolute('./src/markdoc/nodes/_Module.svelte'),