From 7c4a08e10928deae03044c0e53c899371d7f934f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 26 May 2021 11:07:55 -0700 Subject: [PATCH 01/13] Bump browserslist from 4.16.0 to 4.16.6 in /site (#6361) Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.16.0 to 4.16.6. - [Release notes](https://github.com/browserslist/browserslist/releases) - [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md) - [Commits](https://github.com/browserslist/browserslist/compare/4.16.0...4.16.6) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- site/package-lock.json | 64 ++++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/site/package-lock.json b/site/package-lock.json index 2375d4009b..ffa8991018 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1581,16 +1581,42 @@ "dev": true }, "browserslist": { - "version": "4.16.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz", - "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==", + "version": "4.16.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", + "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001165", - "colorette": "^1.2.1", - "electron-to-chromium": "^1.3.621", + "caniuse-lite": "^1.0.30001219", + "colorette": "^1.2.2", + "electron-to-chromium": "^1.3.723", "escalade": "^3.1.1", - "node-releases": "^1.1.67" + "node-releases": "^1.1.71" + }, + "dependencies": { + "caniuse-lite": { + "version": "1.0.30001228", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz", + "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==", + "dev": true + }, + "colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.736", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.736.tgz", + "integrity": "sha512-DY8dA7gR51MSo66DqitEQoUMQ0Z+A2DSXFi7tK304bdTVqczCAfUuyQw6Wdg8hIoo5zIxkU1L24RQtUce1Ioig==", + "dev": true + }, + "node-releases": { + "version": "1.1.72", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz", + "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==", + "dev": true + } } }, "buffer": { @@ -1657,12 +1683,6 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, - "caniuse-lite": { - "version": "1.0.30001171", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz", - "integrity": "sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg==", - "dev": true - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -1762,12 +1782,6 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, - "colorette": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz", - "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==", - "dev": true - }, "commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -1947,12 +1961,6 @@ "safe-buffer": "^5.0.1" } }, - "electron-to-chromium": { - "version": "1.3.633", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz", - "integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==", - "dev": true - }, "emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -2870,12 +2878,6 @@ } } }, - "node-releases": { - "version": "1.1.67", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz", - "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==", - "dev": true - }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", From 2ce3a581888a12f2e407d07e573cbab56d203c55 Mon Sep 17 00:00:00 2001 From: Konstantin Nosov Date: Wed, 26 May 2021 21:13:16 +0300 Subject: [PATCH 02/13] combine padding specifications (#6354) --- site/src/routes/tutorial/[slug]/index.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte index bcb9a9b24a..bc7ed6bfe5 100644 --- a/site/src/routes/tutorial/[slug]/index.svelte +++ b/site/src/routes/tutorial/[slug]/index.svelte @@ -243,11 +243,10 @@ } .improve-chapter a { - padding: 0 .1em; font-size: 14px; text-decoration: none; opacity: .3; - padding-left: 1.2em; + padding: 0 .1em 0 1.2em; background: no-repeat 0 50% url(/icons/edit.svg); background-size: 1em 1em; } From fd9eea28f2abf8922740aba52bbb6e67364d2f18 Mon Sep 17 00:00:00 2001 From: Konstantin Nosov Date: Wed, 26 May 2021 21:13:37 +0300 Subject: [PATCH 03/13] remove redundant CSS (#6355) --- site/content/examples/11-easing/00-easing/App.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte index 7e79edf2af..8dd92f2b20 100644 --- a/site/content/examples/11-easing/00-easing/App.svelte +++ b/site/content/examples/11-easing/00-easing/App.svelte @@ -82,7 +82,6 @@ max-height: 95%; max-width: 800px; margin: auto; - padding: 10px; border: 1px solid #333; border-radius: 2px; padding: 20px; @@ -103,4 +102,4 @@ max-height: calc(100% - 3rem); } } - \ No newline at end of file + From 7c21f919add8c6156d83a7048d72199b12d767a3 Mon Sep 17 00:00:00 2001 From: gltchitm <42951031+gltchitm@users.noreply.github.com> Date: Thu, 27 May 2021 15:08:23 -0400 Subject: [PATCH 04/13] site: filter out bot contributors (#6352) --- site/scripts/get-contributors.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/scripts/get-contributors.js b/site/scripts/get-contributors.js index cb1facb874..ff52652ffd 100644 --- a/site/scripts/get-contributors.js +++ b/site/scripts/get-contributors.js @@ -24,6 +24,7 @@ async function main() { } const authors = contributors + .filter(({ login }) => !login.includes('[bot]')) .sort((a, b) => b.contributions - a.contributions); const sprite = new Jimp(SIZE * authors.length, SIZE); @@ -50,4 +51,4 @@ async function main() { fs.writeFileSync(`../src/routes/_contributors.js`, `export default ${str};`); } -main(); \ No newline at end of file +main(); From 4acfb053157caa063cb6405673e03e0c513e8eac Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sat, 29 May 2021 18:44:42 +0200 Subject: [PATCH 05/13] Docs: Clarify that `@html` does not compile Svelte code (#6349) --- site/content/docs/02-template-syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 85b6ef553e..2ff5b1362c 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -393,7 +393,7 @@ When used around components, this will cause them to be reinstantiated and reini In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not. -The expression should be valid standalone HTML — `{@html "
"}content{@html "
"}` will *not* work, because `` is not valid HTML. +The expression should be valid standalone HTML — `{@html "
"}content{@html "
"}` will *not* work, because `` is not valid HTML. It also will *not* compile Svelte code. > Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability. From 8184bd52197602ef9ac51d51c4d49cdef6b65cfb Mon Sep 17 00:00:00 2001 From: Bashu Naimi-Roy Date: Sat, 29 May 2021 13:31:11 -0400 Subject: [PATCH 06/13] docs: update Keyed Each Blocks tutorial (#6358) --- .../05-keyed-each-blocks/app-a/App.svelte | 12 ++++---- .../05-keyed-each-blocks/app-a/Thing.svelte | 30 ++++++++++++------- .../05-keyed-each-blocks/app-b/App.svelte | 14 ++++----- .../05-keyed-each-blocks/app-b/Thing.svelte | 30 ++++++++++++------- .../04-logic/05-keyed-each-blocks/text.md | 10 ++++--- 5 files changed, 57 insertions(+), 39 deletions(-) diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte index 969114428a..36a97ea1ba 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte @@ -2,11 +2,11 @@ import Thing from './Thing.svelte'; let things = [ - { id: 1, color: 'darkblue' }, - { id: 2, color: 'indigo' }, - { id: 3, color: 'deeppink' }, - { id: 4, color: 'salmon' }, - { id: 5, color: 'gold' } + { id: 1, name: 'apple' }, + { id: 2, name: 'banana' }, + { id: 3, name: 'carrot' }, + { id: 4, name: 'doughnut' }, + { id: 5, name: 'egg' }, ]; function handleClick() { @@ -19,5 +19,5 @@ {#each things as thing} - + {/each} diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte index 28c3c65d05..02e6fa7640 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte @@ -1,24 +1,32 @@

- initial - current + The emoji for { name } is { emoji }

\ No newline at end of file + diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte index 37a19a67a8..0939d58b8a 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte @@ -2,11 +2,11 @@ import Thing from './Thing.svelte'; let things = [ - { id: 1, color: 'darkblue' }, - { id: 2, color: 'indigo' }, - { id: 3, color: 'deeppink' }, - { id: 4, color: 'salmon' }, - { id: 5, color: 'gold' } + { id: 1, name: 'apple' }, + { id: 2, name: 'banana' }, + { id: 3, name: 'carrot' }, + { id: 4, name: 'doughnut' }, + { id: 5, name: 'egg' }, ]; function handleClick() { @@ -18,6 +18,6 @@ Remove first thing -{#each things as thing (thing.id)} - +{#each things as thing (thing.id) } + {/each} diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte index 28c3c65d05..02e6fa7640 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte @@ -1,24 +1,32 @@

- initial - current + The emoji for { name } is { emoji }

\ No newline at end of file + diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md index 4affb89cd6..b990dead95 100644 --- a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md +++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md @@ -4,16 +4,18 @@ title: Keyed each blocks By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want. -It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice that it's removing `` components from the end and updating the `color` for those that remain. Instead, we'd like to remove the first `` component and leave the rest unaffected. +It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: It removes the first `` component, but the *last* DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji. -To do that, we specify a unique identifier for the `each` block: +Instead, we'd like to remove only the first `` component and its DOM node, and leave the others unaffected. + +To do that, we specify a unique identifier (or "key") for the `each` block: ```html {#each things as thing (thing.id)} - + {/each} ``` -The `(thing.id)` tells Svelte how to figure out what changed. +Here, `(thing.id)` is the *key*, which tells Svelte how to figure out which DOM node to change when the component updates. > You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server. From b1d09a4aa20ef246b01ddbed1c71c0bb396a075c Mon Sep 17 00:00:00 2001 From: Stephane Date: Sat, 29 May 2021 19:36:35 +0200 Subject: [PATCH 07/13] Clarify that special elements have to be top level (#6240) --- site/content/docs/02-template-syntax.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 2ff5b1362c..7e904c5f1f 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1475,6 +1475,8 @@ If `this` is falsy, no component is rendered. The `` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering. +Contrary to `` this element can only be a the top level of your component and must never be inside a block or element. + ```sv @@ -15,4 +15,4 @@ - \ No newline at end of file + diff --git a/site/content/tutorial/08-stores/01-writable-stores/text.md b/site/content/tutorial/08-stores/01-writable-stores/text.md index 57c27411ea..247ef86e8d 100644 --- a/site/content/tutorial/08-stores/01-writable-stores/text.md +++ b/site/content/tutorial/08-stores/01-writable-stores/text.md @@ -24,4 +24,4 @@ Finally, in `Resetter.svelte`, implement `reset`: function reset() { count.set(0); } -``` \ No newline at end of file +``` diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte index ee542f789d..f2a4023f25 100644 --- a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte +++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte @@ -6,7 +6,7 @@ let count_value; - const unsubscribe = count.subscribe(value => { + count.subscribe(value => { count_value = value; }); @@ -15,4 +15,4 @@ - \ No newline at end of file + diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md index af584261f4..f80c4b2f72 100644 --- a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md +++ b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md @@ -2,9 +2,17 @@ title: Auto-subscriptions --- -The app in the previous example works, but there's a subtle bug — the `unsubscribe` function never gets called. If the component was instantiated and destroyed many times, this would result in a *memory leak*. +The app in the previous example works, but there's a subtle bug — the store is subscribed to, but never unsubscribed. If the component was instantiated and destroyed many times, this would result in a *memory leak*. -One way to fix it would be to use the `onDestroy` [lifecycle hook](tutorial/ondestroy): +Start by declaring `unsubscribe` in `App.svelte`: + +```js +const unsubscribe = count.subscribe(value => { + count_value = value; +}); +``` + +You now declared `unsubscribe`, but it still needs be to called, for example through the `onDestroy` [lifecycle hook](tutorial/ondestroy): ```html