From d52015f902bcb9397b25a5d4434d1fb8491f67a4 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 15 Dec 2022 13:57:11 +0100 Subject: [PATCH 001/371] [fix] add color-scheme meta tag styles inputs/scrollbars etc correctly in dark mode fixes #142 --- content/tutorial/common/src/app.html | 1 + src/app.html | 1 + 2 files changed, 2 insertions(+) diff --git a/content/tutorial/common/src/app.html b/content/tutorial/common/src/app.html index 30c510e28..b24ae5c3a 100644 --- a/content/tutorial/common/src/app.html +++ b/content/tutorial/common/src/app.html @@ -4,6 +4,7 @@ + %sveltekit.head% diff --git a/src/routes/tutorial/[slug]/chevron.svg b/src/routes/tutorial/[slug]/chevron.svg new file mode 100644 index 000000000..bab0e6cbb --- /dev/null +++ b/src/routes/tutorial/[slug]/chevron.svg @@ -0,0 +1,11 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/tutorial/[slug]/refresh.svg b/src/routes/tutorial/[slug]/refresh.svg index 99308ad90..bcdad913b 100644 --- a/src/routes/tutorial/[slug]/refresh.svg +++ b/src/routes/tutorial/[slug]/refresh.svg @@ -1,4 +1,6 @@ - - - + + + \ No newline at end of file From e350963e5262543098de0e0d374b981dc2ec3ae4 Mon Sep 17 00:00:00 2001 From: tomoam <29677552+tomoam@users.noreply.github.com> Date: Mon, 23 Jan 2023 19:30:10 +0900 Subject: [PATCH 021/371] docs: add filename label (#172) --- .../tutorial/02-sveltekit/07-page-options/04-prerender/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md b/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md index d9fa996fc..ea6cf68d6 100644 --- a/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md +++ b/content/tutorial/02-sveltekit/07-page-options/04-prerender/README.md @@ -11,6 +11,7 @@ The tradeoff is that the build process takes longer, and prerendered content can To prerender a page, set `prerender` to `true`: ```js +/// file: src/routes/+page.server.js export const prerender = true; ``` From fe5db26599111714c55b61fca0d4699ac1011618 Mon Sep 17 00:00:00 2001 From: Marcus Nygren Date: Mon, 23 Jan 2023 11:30:59 +0100 Subject: [PATCH 022/371] docs: add missing import (#173) --- .../tutorial/02-sveltekit/04-forms/03-form-validation/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md b/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md index 432168eca..682fa54f8 100644 --- a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md +++ b/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md @@ -56,6 +56,7 @@ It would be much better to stay on the same page and provide an indication of wh ```js /// file: src/routes/+page.server.js +++import { fail } from '@sveltejs/kit';+++ +import * as db from '$lib/server/database.js'; export function load({ cookies }) {...} From 07a99b2a538a9b2835d573fee3dd3d8016282164 Mon Sep 17 00:00:00 2001 From: tomoam <29677552+tomoam@users.noreply.github.com> Date: Mon, 23 Jan 2023 19:31:35 +0900 Subject: [PATCH 023/371] docs: fix position of single quote (#171) --- .../02-sveltekit/07-page-options/05-trailingslash/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md b/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md index e5375f823..09c137093 100644 --- a/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md +++ b/content/tutorial/02-sveltekit/07-page-options/05-trailingslash/README.md @@ -13,7 +13,7 @@ If you instead want to ensure that a trailing slash is always present, you can s export const trailingSlash = 'always'; ``` -To accommodate both cases (this is not recommended!), use `'ignore`': +To accommodate both cases (this is not recommended!), use `'ignore'`: ```js /// file: src/routes/ignore/+page.server.js From d87ab3065e76f2747d328ab404bdbfcde1afdeec Mon Sep 17 00:00:00 2001 From: tomoam <29677552+tomoam@users.noreply.github.com> Date: Mon, 23 Jan 2023 19:32:46 +0900 Subject: [PATCH 024/371] fix: properly detect selected file (#170) --- src/lib/components/filetree/File.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/filetree/File.svelte b/src/lib/components/filetree/File.svelte index bd2e61e9b..d911ddb5f 100644 --- a/src/lib/components/filetree/File.svelte +++ b/src/lib/components/filetree/File.svelte @@ -33,7 +33,7 @@ : []; -
+
Date: Mon, 23 Jan 2023 10:35:22 +0000 Subject: [PATCH 025/371] fix: load images (#174) from https://via.placeholder.com using crossorigin="anonymous" attribute --- content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md | 2 -- .../01-svelte/07-lifecycle/01-onmount/app-a/src/lib/App.svelte | 1 + .../01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md index 3fcdab956..371848d57 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md @@ -2,8 +2,6 @@ title: onMount --- -> The images in this exercise don't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/onmount - Every component has a _lifecycle_ that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle. The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 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 1133a6dec..b4041eebd 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 @@ -8,6 +8,7 @@ {#each photos as photo}
{photo.title} diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte index c074739b0..5e3ebfeb0 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/app-b/src/lib/App.svelte @@ -17,6 +17,7 @@ {#each photos as photo}
{photo.title} From dd0b9faf4e3de0fbb753fce318d484dbabe636b2 Mon Sep 17 00:00:00 2001 From: Ivanbtrujillo Date: Mon, 23 Jan 2023 10:39:18 +0000 Subject: [PATCH 026/371] fix: add marked dependency for Part 1 / Bindings / Textarea inputs (#175) ..by adding it as node_modules to app-a Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .../06-bindings/05-textarea-inputs/README.md | 2 - .../app-a/node_modules/.bin/marked | 1 + .../app-a/node_modules/marked/LICENSE.md | 44 + .../app-a/node_modules/marked/README.md | 99 + .../app-a/node_modules/marked/bin/marked.js | 217 ++ .../app-a/node_modules/marked/lib/marked.cjs | 2723 ++++++++++++++++ .../node_modules/marked/lib/marked.esm.js | 2824 +++++++++++++++++ .../node_modules/marked/lib/marked.umd.js | 2729 ++++++++++++++++ .../app-a/node_modules/marked/man/marked.1 | 92 + .../node_modules/marked/man/marked.1.txt | 86 + .../app-a/node_modules/marked/marked.min.js | 6 + .../app-a/node_modules/marked/package.json | 94 + .../app-a/node_modules/marked/src/Lexer.js | 503 +++ .../app-a/node_modules/marked/src/Parser.js | 286 ++ .../app-a/node_modules/marked/src/Renderer.js | 203 ++ .../app-a/node_modules/marked/src/Slugger.js | 55 + .../node_modules/marked/src/TextRenderer.js | 42 + .../node_modules/marked/src/Tokenizer.js | 794 +++++ .../app-a/node_modules/marked/src/defaults.js | 29 + .../app-a/node_modules/marked/src/helpers.js | 276 ++ .../app-a/node_modules/marked/src/marked.js | 366 +++ .../app-a/node_modules/marked/src/rules.js | 305 ++ .../05-textarea-inputs/app-a/package.json | 8 + 23 files changed, 11782 insertions(+), 2 deletions(-) create mode 120000 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/.bin/marked create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/LICENSE.md create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/README.md create mode 100755 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/bin/marked.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/lib/marked.cjs create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/lib/marked.esm.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/lib/marked.umd.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/man/marked.1 create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/man/marked.1.txt create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/marked.min.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/package.json create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/Lexer.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/Parser.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/Renderer.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/Slugger.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/TextRenderer.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/Tokenizer.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/defaults.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/helpers.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/marked.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/node_modules/marked/src/rules.js create mode 100644 content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-a/package.json diff --git a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md index 047669e7d..3fb4ff242 100644 --- a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md +++ b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/README.md @@ -2,8 +2,6 @@ title: Textarea inputs --- -> This exercise doesn't currently work. You can switch to the old tutorial instead: https://svelte.dev/tutorial/textarea-inputs - The ` ``` In cases like these, where the names match, we can also use a shorthand form: ```svelte +/// file: App.svelte ``` diff --git a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md b/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md index bc4b35f54..c1ce601c9 100644 --- a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md +++ b/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md @@ -5,6 +5,7 @@ title: Select bindings We can also use `bind:value` with ` ``` diff --git a/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md b/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md index 1107d74b5..1ffe9885e 100644 --- a/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md +++ b/content/tutorial/01-svelte/06-bindings/07-multiple-select-bindings/README.md @@ -7,6 +7,7 @@ A select can have a `multiple` attribute, in which case it will populate an arra Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a ` diff --git a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md index 3fcdab956..4a1cfa630 100644 --- a/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md +++ b/content/tutorial/01-svelte/07-lifecycle/01-onmount/README.md @@ -11,6 +11,7 @@ The one you'll use most frequently is `onMount`, which runs after the component We'll add an `onMount` handler that loads some data over the network: ```svelte +/// file: App.svelte

The count is {count_value}

@@ -39,14 +41,24 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`: ```svelte +/// file: App.svelte -

The count is {$count}

+

The count is {+++$count+++}

``` > Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component. diff --git a/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md b/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md index 5e5385270..0f6d1dbee 100644 --- a/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md +++ b/content/tutorial/01-svelte/08-stores/03-readable-stores/README.md @@ -4,9 +4,10 @@ title: Readable stores Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have _readable_ stores. -Click over to the `stores.js` tab. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes. +Open `stores.js`. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes. ```js +/// file: stores.js export const time = readable(new Date(), function start(set) { const interval = setInterval(() => { set(new Date()); diff --git a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md index ca71e5d0d..d96a3cf5f 100644 --- a/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md +++ b/content/tutorial/01-svelte/08-stores/04-derived-stores/README.md @@ -5,7 +5,11 @@ title: Derived stores You can create a store whose value is based on the value of one or more _other_ stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open: ```js -export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000)); +/// file: stores.js +export const elapsed = derived( + time, + ($time) => Math.round(($time - start) / 1000) +); ``` > It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](https://svelte.dev/docs#run-time-svelte-store-derived) for more information. diff --git a/content/tutorial/01-svelte/08-stores/04-derived-stores/app-a/src/lib/stores.js b/content/tutorial/01-svelte/08-stores/04-derived-stores/app-a/src/lib/stores.js index 854dd7d43..7eaf0ca8e 100644 --- a/content/tutorial/01-svelte/08-stores/04-derived-stores/app-a/src/lib/stores.js +++ b/content/tutorial/01-svelte/08-stores/04-derived-stores/app-a/src/lib/stores.js @@ -12,4 +12,7 @@ export const time = readable(new Date(), function start(set) { const start = new Date(); -export const elapsed = derived(time, ($time) => {}); +export const elapsed = derived( + time, + ($time) => {} +); diff --git a/content/tutorial/01-svelte/08-stores/04-derived-stores/app-b/src/lib/stores.js b/content/tutorial/01-svelte/08-stores/04-derived-stores/app-b/src/lib/stores.js index 741f92784..ff3fb8458 100644 --- a/content/tutorial/01-svelte/08-stores/04-derived-stores/app-b/src/lib/stores.js +++ b/content/tutorial/01-svelte/08-stores/04-derived-stores/app-b/src/lib/stores.js @@ -12,4 +12,7 @@ export const time = readable(new Date(), function start(set) { const start = new Date(); -export const elapsed = derived(time, ($time) => Math.round(($time - start) / 1000)); +export const elapsed = derived( + time, + ($time) => Math.round(($time - start) / 1000) +); diff --git a/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md b/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md index ebc427678..f54d73cbb 100644 --- a/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md +++ b/content/tutorial/01-svelte/08-stores/05-custom-stores/README.md @@ -7,14 +7,15 @@ As long as an object correctly implements the `subscribe` method, it's a store. For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`: ```js +/// file: stores.js function createCount() { const { subscribe, set, update } = writable(0); return { subscribe, - increment: () => update((n) => n + 1), - decrement: () => update((n) => n - 1), - reset: () => set(0) + increment: () => +++update((n) => n + 1)+++, + decrement: () => +++update((n) => n - 1)+++, + reset: () => +++set(0)+++ }; } ``` diff --git a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md index 05691b05d..ea16d03c9 100644 --- a/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md +++ b/content/tutorial/01-svelte/08-stores/06-store-bindings/README.md @@ -4,17 +4,19 @@ title: Store bindings If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state. -In this example we have a writable store `name` and a derived store `greeting`. Update the `` element: +In this example we're exporting a writable store `name` and a derived store `greeting` from `stores.js`. Update the `` element in `App.svelte`: ```svelte - +/// file: App.svelte + ``` Changing the input value will now update `name` and all its dependents. -We can also assign directly to store values inside a component. Add a ` diff --git a/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md b/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md index 97cb90f5e..e7812fead 100644 --- a/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md +++ b/content/tutorial/02-sveltekit/02-routing/02-layouts/README.md @@ -6,11 +6,11 @@ Different routes of your app will often share common UI. Instead of repeating it In this app we have two routes, `src/routes/+page.svelte` and `src/routes/about/+page.svelte`, that contain the same navigation UI. Let's create a new file, `src/routes/+layout.svelte`... -```diff +``` src/routes/ ├ about/ │ └ +page.svelte -+├ +layout.svelte ++++├ +layout.svelte+++ └ +page.svelte ``` diff --git a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md b/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md index 9ab42c065..f23ff32c3 100644 --- a/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md +++ b/content/tutorial/02-sveltekit/03-loading-data/01-page-data/README.md @@ -32,6 +32,7 @@ export function load() { We can access this data in `src/routes/blog/+page.svelte` via the `data` prop: ```svelte +/// file: src/routes/blog/+page.svelte ++++++ diff --git a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md b/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md index 682fa54f8..6c7799b46 100644 --- a/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md +++ b/content/tutorial/02-sveltekit/04-forms/03-form-validation/README.md @@ -7,6 +7,7 @@ Users are a mischievous bunch, who will submit all kinds of nonsensical data if The first line of defense is the browser's [built-in form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation), which makes it easy to, for example, mark an `` as required: ```svelte +/// file: src/routes/+page.svelte