Skip to content

Commit 58b41d0

Browse files
LaurentTreguierLaurentTreguier
committed
Fully switch to runes
1 parent 22e470e commit 58b41d0

11 files changed

+220
-215
lines changed

‎src/lib/components/current-destination.svelte

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import { onMount } from 'svelte';
3+
import { derived as derivedStore } from 'svelte/store';
4+
import { page } from '$app/stores';
5+
import { allDestinations, Destination } from '$lib/destinations';
6+
7+
interface Props {
8+
destination: Destination;
9+
}
10+
11+
let { destination = $bindable() }: Props = $props();
12+
13+
const currentDestination = derivedStore(
14+
page,
15+
($page) => allDestinations.find((d) => d.route === $page.url.pathname) ?? Destination.Feed
16+
);
17+
18+
onMount(() => currentDestination.subscribe((value) => (destination = value)));
19+
</script>

‎src/lib/components/saved-value.svelte

+25-9
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
11
<script lang="ts" generics="N extends keyof SavedValueKeys, T extends SavedValueKeys[N]">
22
import { onMount } from 'svelte';
3-
import type { Writable } from 'svelte/store';
43
import { getStoredItem, setStoredItem } from '$lib/storage';
54
import { StorageChange } from '$lib/events';
65
import EventListener from './event-listener.svelte';
76
87
interface Props {
98
name: N;
10-
store: Writable<T | null>;
9+
value?: T;
1110
}
1211
13-
let { name, store }: Props = $props();
12+
let { name, value = $bindable() }: Props = $props();
13+
14+
let skip = $state(true);
15+
16+
$effect(() => {
17+
if (!skip && value !== undefined) {
18+
setStoredItem(name, value);
19+
}
20+
});
1421
1522
onMount(() => {
16-
$store = getStoredItem<T>(name) ?? $store;
17-
return store.subscribe((value) => setStoredItem(name, value));
23+
const existingValue = getStoredItem<T>(name);
24+
25+
if (existingValue !== undefined) {
26+
value = existingValue;
27+
}
28+
29+
skip = false;
1830
});
1931
2032
function onExternalStorageEvent(event: StorageEvent) {
2133
if (event.key === name) {
22-
$store = JSON.parse(event.newValue || 'null');
34+
const newValue = event.newValue !== null ? JSON.parse(event.newValue) : null;
35+
36+
if (newValue !== value) {
37+
value = newValue;
38+
}
2339
}
2440
}
2541
2642
function onInternalStorageChange(change: StorageChange) {
2743
if (change.key === name) {
28-
const value = getStoredItem<T>(name);
44+
const newValue = getStoredItem<T>(name);
2945
30-
if (value !== $store) {
31-
$store = value;
46+
if (newValue !== value) {
47+
value = newValue;
3248
}
3349
}
3450
}

‎src/lib/destinations.ts

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { derived } from 'svelte/store';
2-
import { page } from '$app/stores';
1+
import type { Component } from 'svelte';
32
import { goto } from '$app/navigation';
43
import BellIcon from '$lib/components/icons/bell.svelte';
54
import DocumentIcon from '$lib/components/icons/document.svelte';
@@ -17,7 +16,7 @@ export function useFakeNavigation() {
1716
export interface Destination {
1817
route: string;
1918
titleKey: string;
20-
icon?: any;
19+
icon?: Component;
2120
parent?: Destination;
2221
requiresAuthentication: boolean;
2322
}
@@ -88,14 +87,6 @@ export const topLevelDestinations = Object.values(Destination).filter((d) => d.i
8887

8988
export const essentialDestinations = allDestinations.filter((destination) => !destination.parent);
9089

91-
export const currentDestination = derived(page, ($page) =>
92-
findDestinationByRoute($page.url.pathname)
93-
);
94-
95-
export function findDestinationByRoute(route: string | null) {
96-
return allDestinations.find((d) => d.route === route) ?? Destination.Feed;
97-
}
98-
9990
export async function navigate(destination: Destination) {
10091
if (!fakeNavigation) {
10192
const url = new URL(location.href);

‎src/lib/storage.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import { eventBus, StorageChange } from './events';
22

33
export function getStoredItem<T>(key: string) {
4-
return JSON.parse(localStorage.getItem(key) ?? 'null') as T | null;
4+
const value = localStorage.getItem(key);
5+
return value ? (JSON.parse(value) as T) : undefined;
56
}
67

78
export function setStoredItem<T>(key: string, value: T) {
8-
localStorage.setItem(key, JSON.stringify(value));
9-
eventBus.publish(new StorageChange(key));
9+
const stringValue = JSON.stringify(value);
10+
11+
if (stringValue !== localStorage.getItem(key)) {
12+
localStorage.setItem(key, JSON.stringify(value));
13+
eventBus.publish(new StorageChange(key));
14+
}
1015
}

‎src/routes/+layout.svelte

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
22
import { onMount, type Snippet } from 'svelte';
3-
import { writable } from 'svelte/store';
43
import { t } from 'i18next';
5-
import { currentDestination, navigate, Destination } from '$lib/destinations';
4+
import { navigate, Destination } from '$lib/destinations';
65
import { DisplayableError } from '$lib/events';
76
import SavedValue from '$lib/components/saved-value.svelte';
87
import EventListener from '$lib/components/event-listener.svelte';
8+
import CurrentDestination from '$lib/components/current-destination.svelte';
99
import Navigation from './navigation.svelte';
1010
import TopBar from './top-bar.svelte';
1111
import Dialog from './dialog.svelte';
@@ -16,17 +16,16 @@
1616
1717
let { children }: Props = $props();
1818
19-
const token = writable<string | null>(null);
20-
let errors: DisplayableError[] = $state([]);
21-
let currentError: DisplayableError | undefined = $state();
19+
let token = $state<string>();
20+
let currentDestination = $state(Destination.Feed);
21+
let errors = $state<DisplayableError[]>([]);
22+
let currentError = $state<DisplayableError>();
2223
23-
onMount(() =>
24-
token.subscribe(async ($token) => {
25-
if (!$token && $currentDestination.requiresAuthentication) {
26-
await navigate(Destination.Settings);
27-
}
28-
})
29-
);
24+
$effect(() => {
25+
if (!token && currentDestination.requiresAuthentication) {
26+
navigate(Destination.Settings);
27+
}
28+
});
3029
3130
function addError(error: DisplayableError) {
3231
errors = [...errors, error];
@@ -42,11 +41,12 @@
4241
}
4342
</script>
4443

45-
<SavedValue name="connection.token" store={token} />
44+
<SavedValue name="connection.token" bind:value={token} />
4645
<EventListener type={DisplayableError} listener={(event) => addError(event.detail)} />
46+
<CurrentDestination bind:destination={currentDestination} />
4747

4848
<svelte:head>
49-
<title>{t($currentDestination.titleKey)} | {t('app.name')}</title>
49+
<title>{t(currentDestination.titleKey)} | {t('app.name')}</title>
5050
</svelte:head>
5151

5252
<div class="layout">

‎src/routes/link.svelte

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
2-
import { derived, writable } from 'svelte/store';
32
import { t } from 'i18next';
4-
import { currentDestination, topLevelDestinations, Destination } from '$lib/destinations';
3+
import { topLevelDestinations, Destination } from '$lib/destinations';
54
import SavedValue from '$lib/components/saved-value.svelte';
5+
import CurrentDestination from '$lib/components/current-destination.svelte';
66
import Icon from '$lib/components/icon.svelte';
77
88
interface Props {
@@ -12,25 +12,31 @@
1212
1313
let { destination, sideNavigation = false }: Props = $props();
1414
15-
const token = writable<string | null>(null);
16-
const selected = derived(currentDestination, ($currentDestination) => {
17-
const isExactDestination = $currentDestination === destination;
18-
const isChildDestination = $currentDestination?.parent === destination;
19-
const isTopLevel = topLevelDestinations.includes($currentDestination);
20-
return isExactDestination || (isChildDestination && !(isTopLevel && sideNavigation));
21-
});
22-
const disabled = derived(token, ($token) => destination.requiresAuthentication && !$token);
15+
let token = $state<string>();
16+
let currentDestination = $state(Destination.Feed);
17+
18+
const isExactDestination = $derived(currentDestination.route === destination.route);
19+
const isChildDestination = $derived(currentDestination?.parent?.route === destination.route);
20+
const isTopLevel = $derived(
21+
currentDestination &&
22+
topLevelDestinations.map((d) => d.route).includes(currentDestination.route)
23+
);
24+
const selected = $derived(
25+
isExactDestination || (isChildDestination && !(isTopLevel && sideNavigation))
26+
);
27+
const disabled = $derived(destination.requiresAuthentication && !token);
2328
</script>
2429

25-
<SavedValue name="connection.token" store={token} />
30+
<SavedValue name="connection.token" bind:value={token} />
31+
<CurrentDestination bind:destination={currentDestination} />
2632

2733
<a
2834
href={destination.route}
2935
data-sveltekit-replacestate
3036
class="link"
3137
class:side-navigation={sideNavigation}
32-
class:selected={$selected}
33-
aria-disabled={$disabled}
38+
class:selected
39+
aria-disabled={disabled}
3440
>
3541
<Icon><destination.icon /></Icon>
3642
{t(destination.titleKey)}

‎src/routes/login/+page.svelte

+33-43
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import { onMount } from 'svelte';
3-
import { derived, writable } from 'svelte/store';
43
import { t } from 'i18next';
54
import { navigate, Destination } from '$lib/destinations';
65
import { DisplayableError } from '$lib/events';
@@ -10,48 +9,39 @@
109
import Button from '$lib/components/inputs/button.svelte';
1110
import TextField from '$lib/components/inputs/text-field.svelte';
1211
13-
const identifier = writable('');
14-
const randomCode = writable('');
15-
const isWaitingForRandomCode = writable(false);
16-
const token = writable<string | null>(null);
12+
let identifier = $state('');
13+
let randomCode = $state('');
14+
let isWaitingForRandomCode = $state(false);
15+
let token = $state<string>();
1716
let isLoading = $state(false);
1817
19-
const isIdentifierValid = derived(
20-
identifier,
21-
($identifier) => $identifier.length >= 3 && $identifier.length <= 254
22-
);
23-
const isRandomCodeValid = derived(randomCode, ($randomCode) => $randomCode.length >= 8);
24-
const canSubmit = derived(
25-
[isIdentifierValid, isRandomCodeValid, isWaitingForRandomCode],
26-
([$isIdentifierValid, $isRandomCodeValid, $isWaitingForRandomCode]) =>
27-
$isWaitingForRandomCode ? $isRandomCodeValid : $isIdentifierValid
28-
);
18+
const isIdentifierValid = $derived(identifier.length >= 3 && identifier.length <= 254);
19+
const isRandomCodeValid = $derived(randomCode.length >= 8);
20+
const canSubmit = $derived(isWaitingForRandomCode ? isRandomCodeValid : isIdentifierValid);
2921
30-
onMount(() => {
31-
const unsubscribe = token.subscribe(async ($token) => {
32-
if ($token) {
33-
await navigate(Destination.Settings);
34-
}
35-
});
22+
$effect(() => {
23+
if (token) {
24+
navigate(Destination.Settings);
25+
}
26+
});
3627
37-
if (window.location.hash && $isWaitingForRandomCode) {
38-
$randomCode = window.location.hash.replace('#', '');
28+
onMount(() => {
29+
if (window.location.hash && isWaitingForRandomCode) {
30+
randomCode = window.location.hash.replace('#', '');
3931
window.location.hash = '';
4032
createToken();
4133
}
42-
43-
return unsubscribe;
4434
});
4535
4636
function cancel() {
47-
$isWaitingForRandomCode = false;
48-
$randomCode = '';
37+
isWaitingForRandomCode = false;
38+
randomCode = '';
4939
}
5040
5141
async function submit() {
52-
if (!$canSubmit) {
42+
if (!canSubmit) {
5343
return;
54-
} else if ($isWaitingForRandomCode) {
44+
} else if (isWaitingForRandomCode) {
5545
await createToken();
5646
} else {
5747
await sendEmail();
@@ -64,8 +54,8 @@
6454
try {
6555
isLoading = true;
6656
const client = await getTokensClient();
67-
await client.createNewToken({ identifier: $identifier });
68-
$isWaitingForRandomCode = true;
57+
await client.createNewToken({ identifier });
58+
isWaitingForRandomCode = true;
6959
} finally {
7060
isLoading = false;
7161
}
@@ -75,7 +65,7 @@
7565
case 400:
7666
return new DisplayableError('errors.400');
7767
case 403:
78-
$isWaitingForRandomCode = true;
68+
isWaitingForRandomCode = true;
7969
return new DisplayableError('login.errors.403');
8070
case 404:
8171
return new DisplayableError('login.errors.404');
@@ -92,8 +82,8 @@
9282
try {
9383
isLoading = true;
9484
const client = await getTokensClient();
95-
$token = await client.createToken({ identifier: $identifier, secret: $randomCode });
96-
$isWaitingForRandomCode = false;
85+
token = await client.createToken({ identifier, secret: randomCode });
86+
isWaitingForRandomCode = false;
9787
} finally {
9888
isLoading = false;
9989
}
@@ -112,9 +102,9 @@
112102
}
113103
</script>
114104

115-
<SavedValue name="account.identifier" store={identifier} />
116-
<SavedValue name="account.isWaitingForRandomCode" store={isWaitingForRandomCode} />
117-
<SavedValue name="connection.token" store={token} />
105+
<SavedValue name="account.identifier" bind:value={identifier} />
106+
<SavedValue name="account.isWaitingForRandomCode" bind:value={isWaitingForRandomCode} />
107+
<SavedValue name="connection.token" bind:value={token} />
118108

119109
<form class="destination">
120110
<Logo />
@@ -124,25 +114,25 @@
124114
name="username"
125115
placeholder={t('login.identifier.placeholder')}
126116
autofocus
127-
disabled={$isWaitingForRandomCode}
128-
bind:value={$identifier}
117+
disabled={isWaitingForRandomCode}
118+
bind:value={identifier}
129119
/>
130-
{#if $isWaitingForRandomCode}
120+
{#if isWaitingForRandomCode}
131121
<TextField
132122
label={t('account.randomCode.label')}
133123
name="one-time-code"
134124
placeholder={t('account.randomCode.placeholder')}
135125
autofocus
136-
bind:value={$randomCode}
126+
bind:value={randomCode}
137127
/>
138128
<div class="help">{t('account.help.randomCode')}</div>
139129
{/if}
140130
</div>
141131
<div class="buttons">
142-
<Button type="button" disabled={!$isWaitingForRandomCode || isLoading} onClick={cancel}>
132+
<Button type="button" disabled={!isWaitingForRandomCode || isLoading} onClick={cancel}>
143133
{t('cancel')}
144134
</Button>
145-
<Button type="submit" primary disabled={!$canSubmit} loading={isLoading} onClick={submit}>
135+
<Button type="submit" primary disabled={!canSubmit} loading={isLoading} onClick={submit}>
146136
{t('destinations.login')}
147137
</Button>
148138
</div>

0 commit comments

Comments
 (0)