Skip to content

Commit 23e405b

Browse files
dummdidummdummdidumm
committed
migrate to runes
1 parent 57a08b1 commit 23e405b

15 files changed

+243
-233
lines changed

‎src/routes/+layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import '@sveltejs/site-kit/styles/index.css';
99
import '../app.css';
1010
11-
export let data;
11+
let { data } = $props();
1212
</script>
1313

1414
<Shell>

‎src/routes/tutorial/[slug]/+page.svelte

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,29 @@
2020
solution
2121
} from './state.js';
2222
23-
export let data;
23+
let { data } = $props();
2424
2525
let path = data.exercise.path;
26-
let show_editor = false;
27-
let show_filetree = false;
28-
let paused = false;
29-
let w = 1000;
26+
let show_editor = $state(false);
27+
let show_filetree = $state(false);
28+
let paused = $state(false);
29+
let w = $state(1000);
3030
3131
/** @type {import('$lib/types').Stub[]} */
3232
let previous_files = [];
3333
34-
$: mobile = w < 800; // for the things we can't do with media queries
35-
$: files.set(Object.values(data.exercise.a));
36-
$: solution.set(data.exercise.b);
37-
$: selected_name.set(data.exercise.focus);
38-
$: completed = is_completed($files, data.exercise.b);
34+
let mobile = $derived(w < 800); // for the things we can't do with media queries
35+
let completed = $derived(is_completed($files, data.exercise.b));
36+
37+
// meh: I have to duplicate this because $effect.pre doesn't run on the server
38+
files.set(Object.values(data.exercise.a));
39+
solution.set(data.exercise.b);
40+
selected_name.set(data.exercise.focus);
41+
$effect.pre(() => {
42+
files.set(Object.values(data.exercise.a));
43+
solution.set(data.exercise.b);
44+
selected_name.set(data.exercise.focus);
45+
});
3946
4047
beforeNavigate(() => {
4148
previous_files = $files;

‎src/routes/tutorial/[slug]/Chrome.svelte

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
<script>
22
import { createEventDispatcher } from 'svelte';
33
4-
/** @type {string} */
5-
export let path;
6-
7-
/** @type {boolean} */
8-
export let loading;
9-
10-
/** @type {string | null} */
11-
export let href;
4+
/** @type {{path: string; loading: boolean; href: string | null;}}*/
5+
let { path, loading, href } = $props();
126
137
const dispatch = createEventDispatcher();
148
</script>
159

1610
<div class="chrome" class:loading>
17-
<button disabled={loading} class="reload icon" on:click={() => dispatch('refresh')} aria-label="reload" />
11+
<button
12+
disabled={loading}
13+
class="reload icon"
14+
on:click={() => dispatch('refresh')}
15+
aria-label="reload"
16+
/>
1817

1918
<input
2019
disabled={loading}
@@ -31,7 +30,13 @@
3130
}}
3231
/>
3332

34-
<a {href} class="new-tab icon" target="_blank" aria-label={href ? 'open in new tab' : undefined} tabindex="0" />
33+
<a
34+
{href}
35+
class="new-tab icon"
36+
target="_blank"
37+
aria-label={href ? 'open in new tab' : undefined}
38+
tabindex="0"
39+
/>
3540

3641
<button
3742
disabled={loading}
@@ -69,7 +74,8 @@
6974
border: 2px solid var(--sk-theme-3);
7075
}
7176
72-
.icon, .icon::after {
77+
.icon,
78+
.icon::after {
7379
position: relative;
7480
height: 100%;
7581
aspect-ratio: 1;

‎src/routes/tutorial/[slug]/Editor.svelte

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@
3030
/** @type {Map<string, import('@codemirror/state').EditorState>} */
3131
let editor_states = new Map();
3232
33-
/** @type {import('@codemirror/view').EditorView} */
34-
let editor_view;
33+
let editor_view = /** @type {import('@codemirror/view').EditorView} */ ($state());
3534
3635
const extensions = [
3736
basicSetup,
@@ -41,33 +40,39 @@
4140
svelteTheme
4241
];
4342
44-
$: reset($files);
45-
46-
$: select_state($selected_name);
47-
48-
$: if (editor_view) {
49-
if ($selected_name) {
50-
const current_warnings = $warnings[$selected_name];
43+
$effect.pre(() => {
44+
reset($files);
45+
});
5146
52-
if (current_warnings) {
53-
const diagnostics = current_warnings.map((warning) => {
54-
/** @type {import('@codemirror/lint').Diagnostic} */
55-
const diagnostic = {
56-
from: warning.start.character,
57-
to: warning.end.character,
58-
severity: 'warning',
59-
message: warning.message
60-
};
47+
$effect.pre(() => {
48+
select_state($selected_name);
49+
});
6150
62-
return diagnostic;
63-
});
51+
$effect.pre(() => {
52+
if (editor_view) {
53+
if ($selected_name) {
54+
const current_warnings = $warnings[$selected_name];
55+
56+
if (current_warnings) {
57+
const diagnostics = current_warnings.map((warning) => {
58+
/** @type {import('@codemirror/lint').Diagnostic} */
59+
const diagnostic = {
60+
from: warning.start.character,
61+
to: warning.end.character,
62+
severity: 'warning',
63+
message: warning.message
64+
};
65+
66+
return diagnostic;
67+
});
6468
65-
const transaction = setDiagnostics(editor_view.state, diagnostics);
69+
const transaction = setDiagnostics(editor_view.state, diagnostics);
6670
67-
editor_view.dispatch(transaction);
71+
editor_view.dispatch(transaction);
72+
}
6873
}
6974
}
70-
}
75+
});
7176
7277
let installed_vim = false;
7378

‎src/routes/tutorial/[slug]/ImageViewer.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
2-
/** @type {import('$lib/types').FileStub | null} */
3-
export let selected;
2+
/** @type {{selected: import('$lib/types').FileStub | null;}} */
3+
let { selected } = $props();
44
55
const image_types = new Map([
66
// TODO add more
@@ -11,9 +11,9 @@
1111
['.webp', 'image/webp']
1212
]);
1313
14-
$: ext = selected?.basename.slice(selected.basename.lastIndexOf('.'));
15-
$: image_type = ext && image_types.get(ext);
16-
$: image = image_type && selected;
14+
const ext = $derived(selected?.basename.slice(selected.basename.lastIndexOf('.')));
15+
const image_type = $derived(ext && image_types.get(ext));
16+
const image = $derived(image_type && selected);
1717
</script>
1818
1919
{#if image}

‎src/routes/tutorial/[slug]/Loading.svelte

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
<script>
2-
import { afterNavigate } from '$app/navigation';
32
import { page } from '$app/stores';
43
import { Icon } from '@sveltejs/site-kit/components';
54
6-
/** @type {boolean} */
7-
export let initial;
5+
/** @type {{initial: boolean; error: Error | null; progress: number; status: string}}*/
6+
let { initial, error, progress, status } = $props();
87
9-
/** @type {Error | null} */
10-
export let error;
11-
12-
/** @type {number} */
13-
export let progress;
14-
15-
/** @type {string} */
16-
export let status;
17-
18-
$: is_svelte = /Part (1|2)/.test($page.data.exercise.part.title);
8+
const is_svelte = $derived(/Part (1|2)/.test($page.data.exercise.part.title));
199
</script>
2010

2111
<div class="loading">

‎src/routes/tutorial/[slug]/Menu.svelte

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,24 @@
77
import { expoOut } from 'svelte/easing';
88
import { slide } from 'svelte/transition';
99
10-
/** @type {import('$lib/types').PartStub[]}*/
11-
export let index;
12-
13-
/** @type {import('$lib/types').Exercise} */
14-
export let current;
10+
/** @type {{index: import('$lib/types').PartStub[]; current: import('$lib/types').Exercise;}}*/
11+
let { index, current } = $props();
1512
1613
const is_mobile = mql('(max-width: 800px)');
1714
1815
const duration = $reduced_motion ? 0 : 200;
1916
20-
let is_open = false;
17+
let is_open = $state(false);
18+
19+
let expanded_part = $state(current.part.slug);
20+
$effect.pre(() => {
21+
expanded_part = current.part.slug;
22+
});
2123
22-
$: expanded_part = current.part.slug;
23-
$: expanded_chapter = current.chapter.slug;
24+
let expanded_chapter = $state(current.chapter.slug);
25+
$effect.pre(() => {
26+
expanded_chapter = current.chapter.slug;
27+
});
2428
</script>
2529

2630
<div

‎src/routes/tutorial/[slug]/Output.svelte

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,20 @@
77
import Loading from './Loading.svelte';
88
import { base, error, logs, progress, subscribe } from './adapter';
99
10-
/** @type {import('$lib/types').Exercise} */
11-
export let exercise;
10+
/** @type {{exercise: import('$lib/types').Exercise; paused: boolean;}}*/
11+
let { exercise, paused } = $props();
1212
13-
/** @type {boolean} */
14-
export let paused;
15-
16-
/** @type {HTMLIFrameElement} */
17-
let iframe;
18-
let loading = true;
13+
let iframe = /** @type {HTMLIFrameElement} */ ($state());
14+
let loading = $state(true);
1915
let initial = true;
20-
let terminal_visible = false;
16+
let terminal_visible = $state(false);
2117
2218
// reset `path` to `exercise.path` each time, but allow it to be controlled by the iframe
23-
let path = exercise.path;
19+
let path = $state(exercise.path);
2420
25-
$: if ($base) set_iframe_src($base + (path = exercise.path));
21+
$effect.pre(() => {
22+
if ($base) set_iframe_src($base + (path = exercise.path));
23+
});
2624
2725
onMount(() => {
2826
const unsubscribe = subscribe('reload', () => {
@@ -51,7 +49,7 @@
5149
} catch {}
5250
}
5351
54-
$: change_theme($theme);
52+
$effect.pre(() => change_theme($theme));
5553
5654
/** @type {any} */
5755
let timeout;

‎src/routes/tutorial/[slug]/ScreenToggle.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { createEventDispatcher } from 'svelte';
33
import ToggleButton from './ToggleButton.svelte';
44
5-
/** @type {boolean} */
6-
export let pressed = false;
5+
/** @type {{pressed: boolean}} */
6+
let { pressed = false } = $props();
77
88
const dispatch = createEventDispatcher();
99
</script>

‎src/routes/tutorial/[slug]/Sidebar.svelte

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,15 @@
33
import Modal from '$lib/components/Modal.svelte';
44
import Menu from './Menu.svelte';
55
6-
/** @type {import('$lib/types').PartStub[]} */
7-
export let index;
8-
9-
/** @type {import('$lib/types').Exercise} */
10-
export let exercise;
11-
12-
/** @type {HTMLElement} */
13-
export let sidebar;
6+
/** @type {{ index: import('$lib/types').PartStub[]; exercise: import('$lib/types').Exercise; sidebar: HTMLElement }}*/
7+
let { index, exercise, sidebar } = $props();
148
159
const dispatch = createEventDispatcher();
1610
1711
const namespace = 'learn.svelte.dev';
1812
const copy_enabled = `${namespace}:copy_enabled`;
1913
20-
let show_modal = false;
14+
let show_modal = $state(false);
2115
</script>
2216

2317
<Menu {index} current={exercise} />

‎src/routes/tutorial/[slug]/ToggleButton.svelte

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
<script>
33
import { createEventDispatcher } from 'svelte';
44
5-
/** @type {string} */
6-
export let label;
7-
8-
export let pressed = false;
5+
/** @type {{ label: string; pressed: boolean }} */
6+
let { label, pressed = false } = $props();
97
108
const dispatch = createEventDispatcher();
119
</script>
@@ -72,8 +70,12 @@
7270
left: 2px;
7371
border-radius: 50%;
7472
background: var(--fg);
75-
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.4), 0 4px 2px rgba(0, 0, 0, 0.1);
76-
transition: background 0.2s ease-out, left 0.2s ease-out;
73+
box-shadow:
74+
0 0px 1px rgba(0, 0, 0, 0.4),
75+
0 4px 2px rgba(0, 0, 0, 0.1);
76+
transition:
77+
background 0.2s ease-out,
78+
left 0.2s ease-out;
7779
}
7880
7981
button[aria-pressed='true']::after {

0 commit comments

Comments
 (0)