From f14f11f71991ccf8db121239537486114a69bc4c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 22 Mar 2023 13:04:55 -0400 Subject: [PATCH 001/259] better each block example, showing interactivity etc --- .../04-logic/04-each-blocks/README.md | 58 ++++++++----- .../04-each-blocks/app-a/src/lib/App.svelte | 85 +++++++++++++------ .../04-each-blocks/app-b/src/lib/App.svelte | 63 +++++++++----- 3 files changed, 139 insertions(+), 67 deletions(-) diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md index a098d9e75..9c9e7ffc3 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md @@ -2,34 +2,54 @@ title: Each blocks --- -If you need to loop over lists of data, use an `each` block: +When building user interfaces you'll often find yourself working with lists of data. In this exercise, we've repeated the ` +++{/each}+++ - + ``` -> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. +> The expression (`colors`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. -You can get the current _index_ as a second argument, like so: +Now we need to use the `color` variable in place of `"red"`: ```svelte /// file: App.svelte -{#each cats as cat+++, i}+++ -
  • - - +++{i + 1}:+++ {cat.name} - -
  • -{/each} +
    + {#each colors as color} + + {/each} +
    ``` -If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. +You can get the current _index_ as a second argument, like so: + +```svelte +/// file: App.svelte +
    + {#each colors as color, +++i}+++ + + {/each} +
    +``` diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte index 501254eb1..087b803e6 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/app-a/src/lib/App.svelte @@ -1,28 +1,63 @@ -

    The Famous Cats of YouTube

    - - +

    Pick a colour

    + +
    + + + + + + + + + + + +
    + + \ No newline at end of file diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte index 7d5d7187a..a4c929d7f 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/app-b/src/lib/App.svelte @@ -1,28 +1,45 @@ -

    The Famous Cats of YouTube

    +

    Pick a colour

    - + + + \ No newline at end of file From b2a590a58ed2b8c7371c93b4403475c72a3a762a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 22 Mar 2023 13:20:43 -0400 Subject: [PATCH 002/259] tidy up await block example --- .../01-svelte/04-logic/06-await-blocks/README.md | 8 ++++---- .../06-await-blocks/app-a/src/lib/App.svelte | 16 ++-------------- .../06-await-blocks/app-a/src/lib/utils.js | 12 ++++++++++++ .../06-await-blocks/app-b/src/lib/App.svelte | 13 +------------ 4 files changed, 19 insertions(+), 30 deletions(-) create mode 100644 content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/utils.js diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md index 4cd0b0ee1..37f5871b8 100644 --- a/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/README.md @@ -6,13 +6,13 @@ Most web applications have to deal with asynchronous data at some point. Svelte ```svelte /// file: App.svelte -{#await promise} ++++{#await promise}+++

    ...waiting

    -{:then number} ++++{:then number}

    The number is {number}

    {:catch error}

    {error.message}

    -{/await} +{/await}+++ ``` > Only the most recent `promise` is considered, meaning you don't need to worry about race conditions. @@ -20,7 +20,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: ```svelte -/// file: App.svelte +/// no-file {#await promise then number}

    The number is {number}

    {/await} diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte index 7af6f29b5..a3030a8b3 100644 --- a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte +++ b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte @@ -1,16 +1,5 @@
    - The mouse position is {m.x} x {m.y} + The pointer is at {m.x} x {m.y}
    diff --git a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-b/src/lib/App.svelte index 057dafd2a..27e2ef0fe 100644 --- a/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-b/src/lib/App.svelte +++ b/content/tutorial/01-svelte/06-bindings/05-textarea-inputs/app-b/src/lib/App.svelte @@ -1,15 +1,27 @@ -{@html marked(value)} +
    + input + - + output +
    {@html marked(value)}
    +
    diff --git a/content/tutorial/common/src/app.html b/content/tutorial/common/src/app.html index 4b820f1a8..c090e1a9f 100644 --- a/content/tutorial/common/src/app.html +++ b/content/tutorial/common/src/app.html @@ -23,6 +23,7 @@ font-family: var(--font); line-height: 1.5; margin: 1rem; + height: calc(100vh - 2rem); } h1, From c65a55f0b407a34200523922a9ef2ea48efa92fc Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 23 Mar 2023 12:45:53 -0400 Subject: [PATCH 012/259] reorder examples --- .../{06-select-bindings => 04-select-bindings}/README.md | 7 +++++-- .../app-a/src/lib/App.svelte | 0 .../app-b/src/lib/App.svelte | 0 .../{04-group-inputs => 05-group-inputs}/README.md | 0 .../app-a/src/lib/App.svelte | 0 .../app-b/src/lib/App.svelte | 0 .../README.md | 0 .../app-a/src/lib/App.svelte | 0 .../app-b/src/lib/App.svelte | 0 .../{05-textarea-inputs => 07-textarea-inputs}/README.md | 0 .../app-a/node_modules/.bin/marked | 0 .../app-a/node_modules/marked/LICENSE.md | 0 .../app-a/node_modules/marked/README.md | 0 .../app-a/node_modules/marked/bin/marked.js | 0 .../app-a/node_modules/marked/lib/marked.cjs | 0 .../app-a/node_modules/marked/lib/marked.esm.js | 0 .../app-a/node_modules/marked/lib/marked.umd.js | 0 .../app-a/node_modules/marked/man/marked.1 | 0 .../app-a/node_modules/marked/man/marked.1.txt | 0 .../app-a/node_modules/marked/marked.min.js | 0 .../app-a/node_modules/marked/package.json | 0 .../app-a/node_modules/marked/src/Lexer.js | 0 .../app-a/node_modules/marked/src/Parser.js | 0 .../app-a/node_modules/marked/src/Renderer.js | 0 .../app-a/node_modules/marked/src/Slugger.js | 0 .../app-a/node_modules/marked/src/TextRenderer.js | 0 .../app-a/node_modules/marked/src/Tokenizer.js | 0 .../app-a/node_modules/marked/src/defaults.js | 0 .../app-a/node_modules/marked/src/helpers.js | 0 .../app-a/node_modules/marked/src/marked.js | 0 .../app-a/node_modules/marked/src/rules.js | 0 .../app-a/package.json | 0 .../app-a/src/lib/App.svelte | 0 .../app-b/src/lib/App.svelte | 0 34 files changed, 5 insertions(+), 2 deletions(-) rename content/tutorial/01-svelte/06-bindings/{06-select-bindings => 04-select-bindings}/README.md (77%) rename content/tutorial/01-svelte/06-bindings/{06-select-bindings => 04-select-bindings}/app-a/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{06-select-bindings => 04-select-bindings}/app-b/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{04-group-inputs => 05-group-inputs}/README.md (100%) rename content/tutorial/01-svelte/06-bindings/{04-group-inputs => 05-group-inputs}/app-a/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{04-group-inputs => 05-group-inputs}/app-b/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{07-multiple-select-bindings => 06-multiple-select-bindings}/README.md (100%) rename content/tutorial/01-svelte/06-bindings/{07-multiple-select-bindings => 06-multiple-select-bindings}/app-a/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{07-multiple-select-bindings => 06-multiple-select-bindings}/app-b/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/README.md (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/.bin/marked (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/LICENSE.md (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/README.md (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/bin/marked.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/lib/marked.cjs (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/lib/marked.esm.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/lib/marked.umd.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/man/marked.1 (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/man/marked.1.txt (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/marked.min.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/package.json (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/Lexer.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/Parser.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/Renderer.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/Slugger.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/TextRenderer.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/Tokenizer.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/defaults.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/helpers.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/marked.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/node_modules/marked/src/rules.js (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/package.json (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-a/src/lib/App.svelte (100%) rename content/tutorial/01-svelte/06-bindings/{05-textarea-inputs => 07-textarea-inputs}/app-b/src/lib/App.svelte (100%) diff --git a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md b/content/tutorial/01-svelte/06-bindings/04-select-bindings/README.md similarity index 77% rename from content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md rename to content/tutorial/01-svelte/06-bindings/04-select-bindings/README.md index c1ce601c9..d6c22c998 100644 --- a/content/tutorial/01-svelte/06-bindings/06-select-bindings/README.md +++ b/content/tutorial/01-svelte/06-bindings/04-select-bindings/README.md @@ -2,11 +2,14 @@ title: Select bindings --- -We can also use `bind:value` with `` elements: ```svelte /// file: App.svelte - answer = ''} +> ``` Note that the `