svelte5: code snippet components and optimize markup

Author: TorstenDittmann

src/lib/components/MultiCodeContextless.svelte

@@ -3,7 +3,7 @@
     import { getCodeHtml, type Language } from '$lib/utils/code';
     import { copy } from '$lib/utils/copy';
     import { platformMap } from '$lib/utils/references';
-    import { writable } from 'svelte/store';
+    import { SvelteSet } from 'svelte/reactivity';
 
     interface Props {
         selected?: Language;
@@ -14,18 +14,26 @@
 
     let { selected = $bindable('js'), data = [], width = null, height = null }: Props = $props();
 
-    let snippets = $derived(writable(new Set(data.map((d) => d.language))));
-    const getSnippets = () => {
-        return snippets;
-    };
-
-    let content = $derived(data.find((d) => d.language === selected)?.content ?? '');
-
-    let platform = $derived(data.find((d) => d.language === selected)?.platform ?? '');
+    const snippets = $derived(new SvelteSet(data.map((d) => d.language)));
+    const content = $derived(data.find((d) => d.language === selected)?.content ?? '');
+    const platform = $derived(data.find((d) => d.language === selected)?.platform ?? '');
+    const result = $derived(
+        getCodeHtml({
+            content,
+            language: selected ?? 'sh',
+            withLineNumbers: true
+        })
+    );
+    const options = $derived(
+        Array.from(snippets).map((language) => ({
+            value: language,
+            label: platformMap[language]
+        }))
+    );
 
-    getSnippets().subscribe((n) => {
-        if (selected === null && n.size > 0) {
-            selected = Array.from(n)[0] as Language;
+    $effect(() => {
+        if (selected === null && snippets.size > 0) {
+            selected = Array.from(snippets)[0] as Language;
         }
     });
 
@@ -35,9 +43,7 @@
     } as const;
     type CopyStatusType = keyof typeof CopyStatus;
     type CopyStatusValue = (typeof CopyStatus)[CopyStatusType];
-
-    let copyText = $state<CopyStatusValue>(CopyStatus.Copy);
-
+    let copyText: CopyStatusValue = $state(CopyStatus.Copy);
     async function handleCopy() {
         await copy(content);
 
@@ -46,28 +52,13 @@
             copyText = CopyStatus.Copy;
         }, 1000);
     }
-
-    let result = $derived(
-        getCodeHtml({
-            content,
-            language: selected ?? 'sh',
-            withLineNumbers: true
-        })
-    );
-    let options = $derived(
-        Array.from($snippets).map((language) => ({
-            value: language,
-            label: platformMap[language]
-        }))
-    );
 </script>
 
 <section
-    class="dark web-code-snippet mx-auto w-full lg:!max-w-[90vw]"
+    class="dark web-code-snippet mx-auto lg:!max-w-[90vw]"
     aria-label="code-snippet panel"
-    style={`width: ${width ? width / 16 + 'rem' : 'inherit'}; height: ${
-        height ? height / 16 + 'rem' : 'inherit'
-    }`}
+    style:width={width ? width / 16 + 'rem' : 'inherit'}
+    style:height={height ? height / 16 + 'rem' : 'inherit'}
 >
     <header class="web-code-snippet-header">
         <div class="web-code-snippet-header-start">
@@ -79,9 +70,9 @@
         </div>
         <div class="web-code-snippet-header-end">
             <ul class="buttons-list flex gap-3">
-                {#if $snippets.entries.length}
+                {#if snippets.size}
                     <li class="buttons-list-item flex self-center">
-                        <Select bind:value={selected} bind:options />
+                        <Select bind:value={selected} {options} />
                     </li>
                 {/if}
                 <li class="buttons-list-item" style="padding-inline-start: 13px">
@@ -104,7 +95,7 @@
     </header>
     <div
         class="web-code-snippet-content overflow-auto"
-        style={`height: ${height ? height / 16 + 'rem' : 'inherit'}`}
+        style:height={height ? height / 16 + 'rem' : 'inherit'}
     >
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
         {@html result}

src/lib/components/shared/dialog.svelte

@@ -27,14 +27,9 @@
         {@render children()}
     </div>
 {:else}
-    <button
-        class="contents cursor-pointer"
-        onclick={() => {
-            if (browser && window) window.open(url, '_blank');
-        }}
-    >
+    <a href={url} target="_blank" rel="noopener noreferrer" class="contents cursor-pointer">
         {@render children()}
-    </button>
+    </a>
 {/if}
 
 {#if $open}