schoolbox web extension :)
refactor: tidy up svelte 5 migration
+20
-47
+1
-1
src/entrypoints/popup/App.svelte
+1
-1
src/entrypoints/popup/App.svelte
···
85
85
<a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a>
86
86
<a href="#/snippets" class="navbutton-right" use:active={{ className: "active" }}>Snippets</a>
87
87
</nav>
88
-
<Banner visible={refresh} on:click={onBannerClick} />
88
+
<Banner visible={refresh} onclick={onBannerClick} />
89
89
<Router {routes} />
90
90
</main>
+1
-1
src/entrypoints/popup/app.css
+1
-1
src/entrypoints/popup/app.css
+3
-21
src/entrypoints/popup/components/Banner.svelte
+3
-21
src/entrypoints/popup/components/Banner.svelte
···
1
1
<script lang="ts">
2
-
import { run } from 'svelte/legacy';
2
+
let { visible = false, onclick } = $props();
3
3
4
4
import { Info } from "lucide-svelte";
5
-
import { writable } from "svelte/store";
6
-
import { createEventDispatcher } from "svelte";
7
-
8
-
interface Props {
9
-
visible?: boolean; // Use a prop to control visibility
10
-
}
11
-
12
-
let { visible = false }: Props = $props();
13
-
const bannerVisible = writable(visible);
14
-
// Watch for changes in the prop and update the store
15
-
run(() => {
16
-
bannerVisible.set(visible);
17
-
});
18
-
19
-
const dispatch = createEventDispatcher();
20
-
function handleClick() {
21
-
dispatch("click");
22
-
}
23
5
</script>
24
6
25
-
{#if $bannerVisible}
7
+
{#if visible}
26
8
<button
27
9
class="banner bg-ctp-blue text-ctp-crust rounded-lg mb-4 flex items-center justify-center p-4 w-full"
28
-
onclick={handleClick}>
10
+
{onclick}>
29
11
<Info class="w-8 mr-2" />
30
12
<p>Click here to apply changes</p>
31
13
</button>
+10
-20
src/entrypoints/popup/components/Modal.svelte
+10
-20
src/entrypoints/popup/components/Modal.svelte
···
1
1
<script lang="ts">
2
-
import { run, self, createBubbler, stopPropagation } from 'svelte/legacy';
3
-
4
-
const bubble = createBubbler();
2
+
let { showModal = $bindable(), header, children } = $props();
5
3
import { X } from "lucide-svelte";
6
4
7
-
interface Props {
8
-
showModal: boolean;
9
-
header?: import('svelte').Snippet<[any]>;
10
-
children?: import('svelte').Snippet;
11
-
}
5
+
let dialog: HTMLDialogElement | undefined = $state();
12
6
13
-
let { showModal = $bindable(), header, children }: Props = $props();
14
-
15
-
let dialog: HTMLDialogElement = $state();
16
-
17
-
run(() => {
18
-
if (dialog && showModal) dialog.showModal();
7
+
$effect(() => {
8
+
if (showModal) dialog?.showModal();
19
9
});
20
10
</script>
21
11
22
-
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
23
12
<dialog
24
13
bind:this={dialog}
25
14
onclose={() => (showModal = false)}
26
-
onclick={self(() => dialog.close())}
15
+
onclick={(e) => {
16
+
if (e.target === dialog) dialog.close();
17
+
}}
27
18
class="bg-ctp-base text-ctp-text relative">
28
19
<!-- svelte-ignore a11y_autofocus -->
29
-
<button autofocus onclick={() => dialog.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2"
20
+
<button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2"
30
21
><X /></button>
31
22
32
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
33
-
<div onclick={stopPropagation(bubble('click'))} class="p-4">
34
-
{@render header?.({ class: "py-5", })}
23
+
<div class="p-4">
24
+
{@render header?.({ class: "py-5" })}
35
25
{@render children?.()}
36
26
</div>
37
27
</dialog>
+5
-4
src/entrypoints/popup/routes/Themes.svelte
+5
-4
src/entrypoints/popup/routes/Themes.svelte
···
55
55
56
56
<Modal bind:showModal>
57
57
{#snippet header()}
58
-
<h2 class="mb-4 text-xl">Choose an icon</h2>
58
+
<h2 class="mb-4 text-xl">Choose an icon</h2>
59
59
{/snippet}
60
60
61
61
<div class="grid grid-cols-3 gap-4">
62
-
{#each Object.entries(logos) as [logoId, logo]}
62
+
{#each Object.entries(logos) as [logoId, logo] (logoId)}
63
63
<button
64
64
onclick={() => logoClicked(logoId)}
65
65
class:highlight={settings.themeLogo === logoId}
···
81
81
<Title title="Themes" bind:checked={settings.themes} on:change={handleToggleChange} />
82
82
83
83
<div id="flavours" class="flex my-6 py-2 rounded-xl text-ctp-text">
84
-
{#each flavours as flavour}
84
+
{#each flavours as flavour (flavour)}
85
85
<button
86
86
class:active={settings.themeFlavour === flavour}
87
87
class:navbutton-left={flavour === "latte"}
···
92
92
</div>
93
93
94
94
<div id="palette">
95
-
{#each accents as accent}
95
+
{#each accents as accent (accent)}
96
96
<button
97
97
class="bg-ctp-{accent}"
98
98
class:current={settings.themeAccent === accent}
99
99
title={accent}
100
+
aria-label={accent}
100
101
onclick={() => accentClicked(accent)}></button>
101
102
{/each}
102
103
</div>