diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte index 39b42393d..b36b80ce0 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte @@ -5,7 +5,7 @@ +> - \ No newline at end of file + diff --git a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte index 2a2a9d89e..fcfbc28ce 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/app-b/src/lib/AudioPlayer.svelte @@ -27,13 +27,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -69,7 +69,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte index de10e6465..582abc630 100644 --- a/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte @@ -20,7 +20,7 @@ +> -``` \ No newline at end of file +``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/App.svelte index 594151af4..a9bde36e5 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/App.svelte @@ -14,7 +14,7 @@ Mergers and Aquisitions - 358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534 + 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 diff --git a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-b/src/lib/App.svelte index 2613efd08..6ddf52dcc 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/02-named-slots/app-b/src/lib/App.svelte @@ -14,7 +14,7 @@ Mergers and Aquisitions - 358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534 + 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 diff --git a/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/App.svelte index 5bb5882ca..b7b99912f 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/App.svelte @@ -14,7 +14,7 @@ Mergers and Aquisitions - 358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534 + 358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534 diff --git a/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/paper.svg b/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/paper.svg index f8f704fdf..5dba50c15 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/paper.svg +++ b/content/tutorial/02-advanced-svelte/07-composition/03-slot-fallbacks/app-a/src/lib/paper.svg @@ -6,5 +6,5 @@ - - \ No newline at end of file + + diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md index 896528c17..c8dbd89a4 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/README.md @@ -12,7 +12,7 @@ Open `FilterableList.svelte`. The `` is being rendered for each filtered i /// file: FilterableList.svelte
{#each data.filter(matches) as item} - + {/each}
``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte index 9757ff15d..1a7c9c9d5 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-a/src/lib/App.svelte @@ -10,7 +10,7 @@ field="name" >
- + name hex rgb @@ -18,7 +18,7 @@
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte index a21b37016..34c173fff 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/04-slot-props/app-b/src/lib/App.svelte @@ -9,7 +9,7 @@ let:item={row} >
- + name hex rgb @@ -17,7 +17,7 @@
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md index 7f1d3d859..c9c219f69 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md +++ b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/README.md @@ -7,7 +7,7 @@ In some cases, you may want to control parts of your component based on whether ```svelte /// file: App.svelte ---
- + name hex rgb @@ -31,7 +31,7 @@ We can fix that by using the special `$$slots` variable in `FilterableList.svelt /// file: FilterableList.svelte +++{#if $$slots.header}+++
- +
+++{/if}+++ ``` diff --git a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte index de5be5138..0dde93327 100644 --- a/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte +++ b/content/tutorial/02-advanced-svelte/07-composition/05-optional-slots/app-b/src/lib/App.svelte @@ -9,7 +9,7 @@ let:item={row} >
- + {row.name} {row.hex} {row.rgb} diff --git a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md index c117ad4ce..ea4e6a572 100644 --- a/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md +++ b/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/README.md @@ -20,8 +20,8 @@ It's useful for things like this folder tree view, where folders can contain _ot ```svelte /// file: Folder.svelte {#if file.files} - ++++++ + ++++++ {:else} - + {/if} ``` diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte index 1cc7d1737..85be476d6 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-a/src/lib/AudioPlayer.svelte @@ -26,13 +26,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -68,7 +68,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte index acafe1bbc..ffdb485d8 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/app-b/src/lib/AudioPlayer.svelte @@ -38,13 +38,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -80,7 +80,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte index 0eaa4a16e..323286b79 100644 --- a/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte +++ b/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/app-b/src/lib/AudioPlayer.svelte @@ -42,13 +42,13 @@ on:ended={() => { time = 0; }} - /> + >
@@ -84,7 +84,7 @@ }); }} > -
+
{duration ? format(duration) : '--:--'}
diff --git a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md index e7812fead..79898d168 100644 --- a/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md +++ b/content/tutorial/03-sveltekit/02-routing/02-layouts/README.md @@ -14,7 +14,7 @@ src/routes/ └ +page.svelte ``` -...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `` element is where the page content will be rendered: +...and move the duplicated content from the `+page.svelte` files into the new `+layout.svelte` file. The `` element is where the page content will be rendered: ```svelte /// file: src/routes/+layout.svelte @@ -23,7 +23,7 @@ src/routes/ about - + ``` A `+layout.svelte` file applies to every child route, including the sibling `+page.svelte` (if it exists). You can nest layouts to arbitrary depth. diff --git a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md index 0ea2b69c5..a96aab1ad 100644 --- a/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md +++ b/content/tutorial/03-sveltekit/03-loading-data/02-layout-data/README.md @@ -19,7 +19,7 @@ Now, add a sidebar in the layout for the post page:
- +
+++
button { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4ch; + width: 100%; + height: 100%; + } + h1 { display: flex; @@ -414,7 +418,7 @@ } /* Remove all styles */ - .heading { + .menu { box-shadow: none; background-color: transparent; @@ -434,7 +438,7 @@ align-items: flex-start; grid-template-rows: repeat(2, auto); - width: max-content; + width: 100%; height: max-content; } diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte index e2703a9d2..629a2cf5b 100644 --- a/src/routes/tutorial/[slug]/Output.svelte +++ b/src/routes/tutorial/[slug]/Output.svelte @@ -133,7 +133,7 @@
{#if browser} - {/if} {#if paused || loading || $error} diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js index 891a3eddb..f133d4cc6 100644 --- a/src/routes/tutorial/[slug]/adapter.js +++ b/src/routes/tutorial/[slug]/adapter.js @@ -15,7 +15,7 @@ export const error = writable(null); /** @type {import('svelte/store').Writable} */ export const logs = writable([]); -/** @type {import('svelte/store').Writable>} */ +/** @type {import('svelte/store').Writable>} */ export const warnings = writable({}); /** @type {Promise} */ diff --git a/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte b/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte index d06288a65..5ebd23ac9 100644 --- a/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte +++ b/src/routes/tutorial/[slug]/filetree/ContextMenu.svelte @@ -5,18 +5,14 @@ import { writable } from 'svelte/store'; /** - * @typedef {{ icon: string; label: string; fn: () => void }} MenuItem - */ - - /** - * @type {import("svelte/store").Writable<{x: number; y: number; items: MenuItem[]} | null>} + * @type {import("svelte/store").Writable<{x: number; y: number; items: import('$lib/types').MenuItem[]} | null>} */ let menu_items = writable(null); /** * @param {number} x * @param {number} y - * @param {MenuItem[]} items + * @param {import('$lib/types').MenuItem[]} items */ export function open(x, y, items) { if (items.length > 0) { diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte index 6b65bf25b..e7652ae63 100644 --- a/src/routes/tutorial/[slug]/filetree/File.svelte +++ b/src/routes/tutorial/[slug]/filetree/File.svelte @@ -16,7 +16,7 @@ $: can_remove = !$solution[file.name]; - /** @type {import('./ContextMenu.svelte').MenuItems} */ + /** @type {import('$lib/types').MenuItem[]} */ $: actions = can_remove ? [ { diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte index fa71de0aa..d432230cd 100644 --- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte +++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte @@ -138,6 +138,7 @@ } +
    li.contains(e.target)); + const focused = lis.findIndex((li) => li.contains(/** @type {HTMLElement} */ (e.target))); const d = e.key === 'ArrowUp' ? -1 : +1; diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte index c379eafe1..a1a8b1945 100644 --- a/src/routes/tutorial/[slug]/filetree/Folder.svelte +++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte @@ -33,8 +33,11 @@ (child) => get_depth(child.name) === segments && child.type === 'directory' ); - $: child_files = /** @type {import('$lib/types').FileStub[]} */ ( - children.filter((child) => get_depth(child.name) === segments && child.type === 'file') + // prettier-ignore + $: child_files = ( + /** @type {import('$lib/types').FileStub[]} */ ( + children.filter((child) => get_depth(child.name) === segments && child.type === 'file') + ) ); const can_create = { file: false, directory: false }; @@ -71,43 +74,45 @@ // fake root directory has no name $: can_remove = directory.name ? !$solution[directory.name] : false; - /** @type {import('./ContextMenu.svelte').MenuItem[]} */ - $: actions = [ - can_create.file && { - icon: 'file-new', - label: 'New file', - fn: () => { - creating.set({ - parent: directory.name, - type: 'file' - }); + // prettier-ignore + $: actions = ( + /** @type {import('$lib/types').MenuItem[]} */ ([ + can_create.file && { + icon: 'file-new', + label: 'New file', + fn: () => { + creating.set({ + parent: directory.name, + type: 'file' + }); + } + }, + can_create.directory && { + icon: 'folder-new', + label: 'New folder', + fn: () => { + creating.set({ + parent: directory.name, + type: 'directory' + }); + } + }, + can_remove && { + icon: 'rename', + label: 'Rename', + fn: () => { + renaming = true; + } + }, + can_remove && { + icon: 'delete', + label: 'Delete', + fn: () => { + remove(directory); + } } - }, - can_create.directory && { - icon: 'folder-new', - label: 'New folder', - fn: () => { - creating.set({ - parent: directory.name, - type: 'directory' - }); - } - }, - can_remove && { - icon: 'rename', - label: 'Rename', - fn: () => { - renaming = true; - } - }, - can_remove && { - icon: 'delete', - label: 'Delete', - fn: () => { - remove(directory); - } - } - ].filter(Boolean); + ].filter(Boolean)) + ); +
  • 0}
    {#each actions as action} - {/each}
    {/if} @@ -208,4 +209,4 @@ :global(.mobile-filetree) [aria-current='true']::after { display: none; } - \ No newline at end of file + diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js index 629a4d863..e321c3892 100644 --- a/src/routes/tutorial/[slug]/state.js +++ b/src/routes/tutorial/[slug]/state.js @@ -6,19 +6,6 @@ import * as adapter from './adapter.js'; * @typedef {import('svelte/store').Writable} Writable */ -// TODO would be nice if svelte exported this type (maybe it does already?) -/** - * @typedef {{ - * code: string; - * start: { line: number, column: number, character: number }; - * end: { line: number, column: number, character: number }; - * pos: number; - * filename: string; - * frame: string; - * message: string; - * }} CompilerWarning - */ - /** @type {Writable} */ export const files = writable([]); @@ -98,4 +85,4 @@ export function create_directories(name, files) { } return directories; -} \ No newline at end of file +}