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 001/196] 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 002/196] 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 003/196] 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 004/196] 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 005/196] 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 006/196] 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 007/196] 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 + + + +Kitten wants to know what's going on + - - - - -Kitten wants to know what's going on \ No newline at end of file diff --git a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte index ac946962eb..238da2ab18 100644 --- a/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte +++ b/site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte @@ -5,6 +5,18 @@ const handleMouseleave = () => hereKitty = false; + + + +Kitten wants to know what's going on + - - - - -Kitten wants to know what's going on \ No newline at end of file From e6c2c8ed9f7d6b866a970b3eeefb2f64131f1998 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 6 Jun 2021 08:10:49 -0700 Subject: [PATCH 015/196] Bump ws from 6.2.1 to 6.2.2 (#6383) Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2. - [Release notes](https://github.com/websockets/ws/releases) - [Commits](https://github.com/websockets/ws/commits) --- updated-dependencies: - dependency-name: ws dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6b2335d70b..e00935200f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2707,17 +2707,6 @@ "whatwg-url": "^7.0.0", "ws": "^7.0.0", "xml-name-validator": "^3.0.0" - }, - "dependencies": { - "ws": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.1.1.tgz", - "integrity": "sha512-o41D/WmDeca0BqYhsr3nJzQyg9NF5X8l/UdnFNux9cS3lwB+swm8qGWX5rn+aD6xfBU3rGmtHij7g7x6LxFU3A==", - "dev": true, - "requires": { - "async-limiter": "^1.0.0" - } - } } }, "json-parse-better-errors": { @@ -3633,6 +3622,15 @@ "requires": { "mime-db": "1.44.0" } + }, + "ws": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", + "dev": true, + "requires": { + "async-limiter": "~1.0.0" + } } } }, @@ -4778,13 +4776,10 @@ "dev": true }, "ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", - "dev": true, - "requires": { - "async-limiter": "~1.0.0" - } + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "dev": true }, "xml-name-validator": { "version": "3.0.0", From 6e9ecd8159573445149b06f094ebf7f8d6b97e57 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 10 Jun 2021 14:08:19 -0700 Subject: [PATCH 016/196] Bump glob-parent from 5.1.1 to 5.1.2 (#6390) Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2. - [Release notes](https://github.com/gulpjs/glob-parent/releases) - [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md) - [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2) --- updated-dependencies: - dependency-name: glob-parent dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index e00935200f..41dafadee4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2211,9 +2211,9 @@ } }, "glob-parent": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", - "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, "requires": { "is-glob": "^4.0.1" From c5f588ee50a50a77bb22ba006ee04f66795de74f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 13 Jun 2021 12:56:01 +0200 Subject: [PATCH 017/196] Fix generic props relationship in SvelteComponentTyped (#6400) A recent refactoring commit where the constructor definition was moved to an interface disconnected the props relationship of the props that are passed in the constructor and the instance props --- CHANGELOG.md | 1 + src/runtime/internal/dev.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89249634bb..b78b8ab37d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Fix type signatures of `writable` and `readable`. It's possible to invoke them without arguments ([#6291](https://github.com/sveltejs/svelte/issues/6291), [#6345](https://github.com/sveltejs/svelte/issues/6345)) +* Fix generic props relationship in SvelteComponentTyped ([#6400](https://github.com/sveltejs/svelte/pull/6400)) ## 3.38.2 diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts index 8e67b0f61b..8a7415d872 100644 --- a/src/runtime/internal/dev.ts +++ b/src/runtime/internal/dev.ts @@ -104,7 +104,7 @@ export interface SvelteComponentDev { $destroy(): void; [accessor: string]: any; } -interface IComponentOptions { +interface IComponentOptions = Record> { target: Element; anchor?: Element; props?: Props; @@ -232,7 +232,7 @@ export class SvelteComponentTyped< */ $$slot_def: Slots; - constructor(options: IComponentOptions) { + constructor(options: IComponentOptions) { super(options); } } From 9051ee011ed9f67966d69463ccc8943f866fd777 Mon Sep 17 00:00:00 2001 From: Rui Sousa <30603437+ItzaMi@users.noreply.github.com> Date: Tue, 15 Jun 2021 16:53:53 +0100 Subject: [PATCH 018/196] Fix ScreenToggle button styling so text is centered (#6394) --- site/src/components/ScreenToggle.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/ScreenToggle.svelte b/site/src/components/ScreenToggle.svelte index a70d35bdeb..87d90aa7a8 100644 --- a/site/src/components/ScreenToggle.svelte +++ b/site/src/components/ScreenToggle.svelte @@ -20,9 +20,9 @@ margin: 0 .15em; width: 4em; height: 1em; - padding: .2em .4em .3em; + padding: .3em .4em; border-radius: var(--border-r); - line-height: normal; + line-height: 1em; box-sizing: content-box; color: #888; border: 1px solid var(--back-light); From c441fb1ad1e9226b6f25d53b2caecf4438f1d5ab Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Tue, 15 Jun 2021 11:51:09 -0700 Subject: [PATCH 019/196] Bump site-kit (#6407) --- site/package-lock.json | 6 +++--- site/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/package-lock.json b/site/package-lock.json index ffa8991018..a9014cf4bb 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1427,9 +1427,9 @@ } }, "@sveltejs/site-kit": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.2.5.tgz", - "integrity": "sha512-fA1YWW4tYOxPRVocx+jF4S2LGamku8xeKx/+J5aY7ZCbwuo/c4VF+T0K7WuQRI8U6Dw3pJqdiCra+xH4TnCGRw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.3.0.tgz", + "integrity": "sha512-xGZiB0t7LXiThffL3LH5Kg+zjxrykBR1SnXw07gVM+FgbTngmCEOho7SQm+fPq2n9mU4XnisoOkl9KCxMSM9hg==", "dev": true, "requires": { "@sindresorhus/slugify": "^0.9.1", diff --git a/site/package.json b/site/package.json index 6c1513b61d..e11c6f306c 100644 --- a/site/package.json +++ b/site/package.json @@ -41,7 +41,7 @@ "@rollup/plugin-node-resolve": "^11.0.0", "@rollup/plugin-replace": "^2.2.0", "@sindresorhus/slugify": "^0.9.1", - "@sveltejs/site-kit": "^1.2.5", + "@sveltejs/site-kit": "^1.3.0", "@sveltejs/svelte-repl": "^0.2.1", "degit": "^2.1.4", "dotenv": "^8.1.0", From 8dd9c1b09883b4b51ef39d2f38d697b4e544779f Mon Sep 17 00:00:00 2001 From: pngwn Date: Tue, 15 Jun 2021 19:51:45 +0100 Subject: [PATCH 020/196] docs: make yaml frontmatter in blogs valid (#6206) --- .../content/blog/2016-11-26-frameworks-without-the-framework.md | 2 +- .../2017-12-31-sapper-towards-the-ideal-web-app-framework.md | 2 +- site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md | 2 +- .../content/blog/2020-10-01-whats-new-in-svelte-october-2020.md | 2 +- .../blog/2020-11-01-whats-new-in-svelte-november-2020.md | 2 +- .../blog/2020-12-01-whats-new-in-svelte-december-2020.md | 2 +- .../content/blog/2021-01-01-whats-new-in-svelte-january-2021.md | 2 +- .../blog/2021-02-01-whats-new-in-svelte-february-2021.md | 2 +- site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md | 2 +- site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md index 76c8b90ab3..b29525dec3 100644 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ b/site/content/blog/2016-11-26-frameworks-without-the-framework.md @@ -1,5 +1,5 @@ --- -title: Frameworks without the framework: why didn't we think of this sooner? +title: "Frameworks without the framework: why didn't we think of this sooner?" description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you. author: Rich Harris authorURL: https://twitter.com/Rich_Harris diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md index 60609609f7..a79042c63f 100644 --- a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md +++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md @@ -1,5 +1,5 @@ --- -title: Sapper: Towards the ideal web app framework +title: "Sapper: Towards the ideal web app framework" description: Taking the next-plus-one step author: Rich Harris authorURL: https://twitter.com/Rich_Harris diff --git a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md index 3ae0085e86..89d71caf32 100644 --- a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md +++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md @@ -1,5 +1,5 @@ --- -title: Svelte 3: Rethinking reactivity +title: "Svelte 3: Rethinking reactivity" description: It's finally here author: Rich Harris authorURL: https://twitter.com/Rich_Harris diff --git a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md index d57e88173c..6f27938bca 100644 --- a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md +++ b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: October 2020 +title: "What's new in Svelte: October 2020" description: New object methods, in-depth learning resources and tons of integration examples! author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md index 433bafaa29..99de2dd332 100644 --- a/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md +++ b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: November 2020 +title: "What's new in Svelte: November 2020" description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md index 7c6c271022..c10836b5c2 100644 --- a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md +++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: December 2020 +title: "What's new in Svelte: December 2020" description: Better tooling, export maps and improvements to slots and context author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md index 60a7021414..ba82146cd5 100644 --- a/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md +++ b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: January 2021 +title: "What's new in Svelte: January 2021" description: A Svelte-packed showcase to kick-off the new year! author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md index 1fb08f2e12..2d09a3c439 100644 --- a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md +++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: February 2021 +title: "What's new in Svelte: February 2021" description: Integrations and improvements at lightning speed... author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md index 6f63060a1c..8ae5c9d625 100644 --- a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md +++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: March 2021 +title: "What's new in Svelte: March 2021" description: Call for Svelte Summit Speakers! Improved SSR, non-HTML5 compilation targets, and ESLint TypeScript support author: Daniel Sandoval authorURL: https://desandoval.net diff --git a/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md index 02c6216317..7db7cbd87c 100644 --- a/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md +++ b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md @@ -1,5 +1,5 @@ --- -title: What's new in Svelte: April 2021 +title: "What's new in Svelte: April 2021" description: SvelteKit beta and new way to use slots author: Daniel Sandoval authorURL: https://desandoval.net From 3f990a96baa217aef04303afcefc47a0714748eb Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sat, 19 Jun 2021 10:06:01 +0800 Subject: [PATCH 021/196] Use SSR rendered as initial html for runtime hydration test (#4444) --- .../render_dom/wrappers/Element/index.ts | 6 +-- .../render_dom/wrappers/RawMustacheTag.ts | 6 ++- .../compile/render_ssr/handlers/Element.ts | 20 +++++---- .../compile/render_ssr/handlers/HtmlTag.ts | 4 +- src/runtime/internal/dom.ts | 41 +++++++++++++++++-- .../each-block-changed-check/expected.js | 3 +- test/runtime/index.ts | 25 ++++++++--- .../_config.js | 8 ++-- .../_config.js | 1 + .../_config.js | 1 + .../samples/attribute-dynamic-type/_config.js | 3 +- .../_config.js | 2 +- .../samples/component-namespaced/_config.js | 6 --- .../component-namespaced/components.js | 3 -- .../component-namespaced/components.svelte | 5 +++ .../samples/component-namespaced/main.svelte | 2 +- .../samples/deconflict-builtins-2/_config.js | 2 +- .../samples/deconflict-builtins-2/main.svelte | 5 ++- .../each-block-keyed-dyanmic-key/_config.js | 4 ++ .../if-block-conservative-update/_config.js | 3 ++ .../_config.js | 5 +++ .../_config.js | 6 +-- .../samples/lifecycle-render-order/_config.js | 5 ++- .../samples/noscript-removal/_config.js | 34 ++++++++++++--- .../runtime/samples/ondestroy-deep/_config.js | 3 ++ .../samples/raw-anchor-first-child/_config.js | 1 + test/runtime/samples/raw-mustaches/_config.js | 1 - .../_config.js | 3 ++ .../samples/store-unreferenced/_config.js | 6 ++- 29 files changed, 159 insertions(+), 55 deletions(-) delete mode 100644 test/runtime/samples/component-namespaced/components.js create mode 100644 test/runtime/samples/component-namespaced/components.svelte diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index b21a1aa24b..9363015b1c 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -372,9 +372,9 @@ export default class ElementWrapper extends Wrapper { } get_claim_statement(nodes: Identifier) { - const attributes = this.node.attributes - .filter((attr) => attr.type === 'Attribute') - .map((attr) => p`${attr.name}: true`); + const attributes = this.attributes + .filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name) + .map((attr) => p`${(attr as StyleAttributeWrapper | AttributeWrapper).name}: true`); const name = this.node.namespace ? this.node.name diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts index fd43ffcc32..1315f1e144 100644 --- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts @@ -51,7 +51,11 @@ export default class RawMustacheTagWrapper extends Tag { const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null'; - block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${update_anchor});`); + block.chunks.create.push(b`${html_tag} = new @HtmlTag();`); + if (this.renderer.options.hydratable) { + block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${_parent_nodes});`); + } + block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`); block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`); if (needs_anchor) { diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index d10c165198..a0bae4044a 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -6,6 +6,8 @@ import Element from '../../nodes/Element'; import { x } from 'code-red'; import Expression from '../../nodes/shared/Expression'; import remove_whitespace_children from './utils/remove_whitespace_children'; +import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing'; +import { namespaces } from '../../../utils/namespaces'; export default function(node: Element, renderer: Renderer, options: RenderOptions) { @@ -41,20 +43,21 @@ export default function(node: Element, renderer: Renderer, options: RenderOption if (attribute.is_spread) { args.push(attribute.expression.node); } else { + const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name); const name = attribute.name.toLowerCase(); if (name === 'value' && node.name.toLowerCase() === 'textarea') { node_contents = get_attribute_value(attribute); } else if (attribute.is_true) { - args.push(x`{ ${attribute.name}: true }`); + args.push(x`{ ${attr_name}: true }`); } else if ( boolean_attributes.has(name) && attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text' ) { // a boolean attribute with one non-Text chunk - args.push(x`{ ${attribute.name}: ${(attribute.chunks[0] as Expression).node} || null }`); + args.push(x`{ ${attr_name}: ${(attribute.chunks[0] as Expression).node} || null }`); } else { - args.push(x`{ ${attribute.name}: ${get_attribute_value(attribute)} }`); + args.push(x`{ ${attr_name}: ${get_attribute_value(attribute)} }`); } } }); @@ -64,10 +67,11 @@ export default function(node: Element, renderer: Renderer, options: RenderOption let add_class_attribute = !!class_expression; node.attributes.forEach(attribute => { const name = attribute.name.toLowerCase(); + const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name); if (name === 'value' && node.name.toLowerCase() === 'textarea') { node_contents = get_attribute_value(attribute); } else if (attribute.is_true) { - renderer.add_string(` ${attribute.name}`); + renderer.add_string(` ${attr_name}`); } else if ( boolean_attributes.has(name) && attribute.chunks.length === 1 && @@ -75,17 +79,17 @@ export default function(node: Element, renderer: Renderer, options: RenderOption ) { // a boolean attribute with one non-Text chunk renderer.add_string(' '); - renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${attribute.name}" : ""`); + renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${attr_name}" : ""`); } else if (name === 'class' && class_expression) { add_class_attribute = false; - renderer.add_string(` ${attribute.name}="`); + renderer.add_string(` ${attr_name}="`); renderer.add_expression(x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`); renderer.add_string('"'); } else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { const snippet = (attribute.chunks[0] as Expression).node; - renderer.add_expression(x`@add_attribute("${attribute.name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`); + renderer.add_expression(x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`); } else { - renderer.add_string(` ${attribute.name}="`); + renderer.add_string(` ${attr_name}="`); renderer.add_expression((name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute)); renderer.add_string('"'); } diff --git a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts index c0a7952e65..cd62b95981 100644 --- a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts +++ b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts @@ -2,6 +2,8 @@ import Renderer, { RenderOptions } from '../Renderer'; import RawMustacheTag from '../../nodes/RawMustacheTag'; import { Expression } from 'estree'; -export default function(node: RawMustacheTag, renderer: Renderer, _options: RenderOptions) { +export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) { + if (options.hydratable) renderer.add_string(''); renderer.add_expression(node.expression.node as Expression); + if (options.hydratable) renderer.add_string(''); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 40471c2980..1b4c4451bc 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -191,6 +191,29 @@ export function claim_space(nodes) { return claim_text(nodes, ' '); } +function find_comment(nodes, text, start) { + for (let i = start; i < nodes.length; i += 1) { + const node = nodes[i]; + if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) { + return i; + } + } + return nodes.length; +} + +export function claim_html_tag(nodes) { + // find html opening tag + const start_index = find_comment(nodes, 'HTML_TAG_START', 0); + const end_index = find_comment(nodes, 'HTML_TAG_END', start_index); + if (start_index === end_index) { + return new HtmlTag(); + } + const html_tag_nodes = nodes.splice(start_index, end_index + 1); + detach(html_tag_nodes[0]); + detach(html_tag_nodes[html_tag_nodes.length - 1]); + return new HtmlTag(html_tag_nodes.slice(1, html_tag_nodes.length - 1)); +} + export function set_data(text, data) { data = '' + data; if (text.wholeText !== data) text.data = data; @@ -318,27 +341,37 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum } export class HtmlTag { + // parent for creating node e: HTMLElement; + // html tag nodes n: ChildNode[]; + // hydration claimed nodes + l: ChildNode[] | void; + // target t: HTMLElement; + // anchor a: HTMLElement; - constructor(anchor: HTMLElement = null) { - this.a = anchor; + constructor(claimed_nodes?: ChildNode[]) { this.e = this.n = null; + this.l = claimed_nodes; } m(html: string, target: HTMLElement, anchor: HTMLElement = null) { if (!this.e) { this.e = element(target.nodeName as keyof HTMLElementTagNameMap); this.t = target; - this.h(html); + if (this.l) { + this.n = this.l; + } else { + this.h(html); + } } this.i(anchor); } - h(html) { + h(html: string) { this.e.innerHTML = html; this.n = Array.from(this.e.childNodes); } diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 63bc1d8607..0020235d44 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -52,8 +52,9 @@ function create_each_block(ctx) { t4 = text(t4_value); t5 = text(" ago:"); t6 = space(); + html_tag = new HtmlTag(); attr(span, "class", "meta"); - html_tag = new HtmlTag(null); + html_tag.a = null; attr(div, "class", "comment"); }, m(target, anchor) { diff --git a/test/runtime/index.ts b/test/runtime/index.ts index 153ac9dbb8..ff6d1039d3 100644 --- a/test/runtime/index.ts +++ b/test/runtime/index.ts @@ -49,19 +49,21 @@ describe('runtime', () => { const failed = new Set(); - function runTest(dir, hydrate) { + function runTest(dir, hydrate, from_ssr_html) { if (dir[0] === '.') return; const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`); const solo = config.solo || /\.solo/.test(dir); if (hydrate && config.skip_if_hydrate) return; + if (hydrate && from_ssr_html && config.skip_if_hydrate_from_ssr) return; if (solo && process.env.CI) { throw new Error('Forgot to remove `solo: true` from test'); } - (config.skip ? it.skip : solo ? it.only : it)(`${dir} ${hydrate ? '(with hydration)' : ''}`, () => { + const testName = `${dir} ${hydrate ? `(with hydration${from_ssr_html ? ' from ssr rendered html' : ''})` : ''}`; + (config.skip ? it.skip : solo ? it.only : it)(testName, () => { if (failed.has(dir)) { // this makes debugging easier, by only printing compiled output once throw new Error('skipping test, already failed'); @@ -146,13 +148,25 @@ describe('runtime', () => { throw err; } - if (config.before_test) config.before_test(); - // Put things we need on window for testing window.SvelteComponent = SvelteComponent; const target = window.document.querySelector('main'); + if (hydrate && from_ssr_html) { + // ssr into target + compileOptions.generate = 'ssr'; + cleanRequireCache(); + const SsrSvelteComponent = require(`./samples/${dir}/main.svelte`).default; + const { html } = SsrSvelteComponent.render(config.props); + target.innerHTML = html; + delete compileOptions.generate; + } else { + target.innerHTML = ''; + } + + if (config.before_test) config.before_test(); + const warnings = []; const warn = console.warn; console.warn = warning => { @@ -245,7 +259,8 @@ describe('runtime', () => { fs.readdirSync(`${__dirname}/samples`).forEach(dir => { runTest(dir, false); - runTest(dir, true); + runTest(dir, true, false); + runTest(dir, true, true); }); async function create_component(src = '
') { diff --git a/test/runtime/samples/attribute-boolean-indeterminate/_config.js b/test/runtime/samples/attribute-boolean-indeterminate/_config.js index d16cb5f96b..d6e97ffc0e 100644 --- a/test/runtime/samples/attribute-boolean-indeterminate/_config.js +++ b/test/runtime/samples/attribute-boolean-indeterminate/_config.js @@ -7,9 +7,11 @@ export default { indeterminate: true }, - html: ` - - `, + html: "", + + // somehow ssr will render indeterminate="" + // the hydrated html will still contain that attribute + ssrHtml: "", test({ assert, component, target }) { const input = target.querySelector('input'); diff --git a/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js index 0439aca06a..9f8ee61c7a 100644 --- a/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js +++ b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js @@ -11,6 +11,7 @@ export default { options: { hydrate: false // Hydration test will fail as case sensitivity is only handled for svg elements. }, + skip_if_hydrate_from_ssr: true, compileOptions: { namespace: 'foreign' }, diff --git a/test/runtime/samples/attribute-casing-foreign-namespace/_config.js b/test/runtime/samples/attribute-casing-foreign-namespace/_config.js index d7eca6aba9..f74f622524 100644 --- a/test/runtime/samples/attribute-casing-foreign-namespace/_config.js +++ b/test/runtime/samples/attribute-casing-foreign-namespace/_config.js @@ -9,6 +9,7 @@ export default { options: { hydrate: false // Hydration test will fail as case sensitivity is only handled for svg elements. }, + skip_if_hydrate_from_ssr: true, test({ assert, target }) { const attr = sel => target.querySelector(sel).attributes[0].name; diff --git a/test/runtime/samples/attribute-dynamic-type/_config.js b/test/runtime/samples/attribute-dynamic-type/_config.js index 19aa33d65e..fa00cb6bc3 100644 --- a/test/runtime/samples/attribute-dynamic-type/_config.js +++ b/test/runtime/samples/attribute-dynamic-type/_config.js @@ -1,12 +1,11 @@ export default { - skip_if_ssr: true, - props: { inputType: 'text', inputValue: 42 }, html: '', + ssrHtml: '', test({ assert, component, target }) { const input = target.querySelector('input'); diff --git a/test/runtime/samples/binding-this-each-block-property-2/_config.js b/test/runtime/samples/binding-this-each-block-property-2/_config.js index b67d27050e..49131d6635 100644 --- a/test/runtime/samples/binding-this-each-block-property-2/_config.js +++ b/test/runtime/samples/binding-this-each-block-property-2/_config.js @@ -7,7 +7,7 @@ export default { props: { callback }, - after_test() { + before_test() { calls = []; }, async test({ assert, component, target }) { diff --git a/test/runtime/samples/component-namespaced/_config.js b/test/runtime/samples/component-namespaced/_config.js index 35a5e46d47..7ec4a35c6d 100644 --- a/test/runtime/samples/component-namespaced/_config.js +++ b/test/runtime/samples/component-namespaced/_config.js @@ -1,5 +1,3 @@ -import * as path from 'path'; - export default { props: { a: 1 @@ -9,10 +7,6 @@ export default {

foo 1

`, - before_test() { - delete require.cache[path.resolve(__dirname, 'components.js')]; - }, - test({ assert, component, target }) { component.a = 2; assert.htmlEqual(target.innerHTML, ` diff --git a/test/runtime/samples/component-namespaced/components.js b/test/runtime/samples/component-namespaced/components.js deleted file mode 100644 index 7dcfcf157c..0000000000 --- a/test/runtime/samples/component-namespaced/components.js +++ /dev/null @@ -1,3 +0,0 @@ -import Foo from './Foo.svelte'; - -export default { Foo }; diff --git a/test/runtime/samples/component-namespaced/components.svelte b/test/runtime/samples/component-namespaced/components.svelte new file mode 100644 index 0000000000..5b9a6c5167 --- /dev/null +++ b/test/runtime/samples/component-namespaced/components.svelte @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/test/runtime/samples/component-namespaced/main.svelte b/test/runtime/samples/component-namespaced/main.svelte index 541b68e47e..25862cf6f2 100644 --- a/test/runtime/samples/component-namespaced/main.svelte +++ b/test/runtime/samples/component-namespaced/main.svelte @@ -1,5 +1,5 @@ diff --git a/test/runtime/samples/deconflict-builtins-2/_config.js b/test/runtime/samples/deconflict-builtins-2/_config.js index e136b0410d..fba811b880 100644 --- a/test/runtime/samples/deconflict-builtins-2/_config.js +++ b/test/runtime/samples/deconflict-builtins-2/_config.js @@ -1,4 +1,4 @@ export default { - html: 'hello world', + html: 'hello world', preserveIdentifiers: true }; diff --git a/test/runtime/samples/deconflict-builtins-2/main.svelte b/test/runtime/samples/deconflict-builtins-2/main.svelte index 82f9213045..db10a81c74 100644 --- a/test/runtime/samples/deconflict-builtins-2/main.svelte +++ b/test/runtime/samples/deconflict-builtins-2/main.svelte @@ -1,5 +1,6 @@ - -{foo} \ No newline at end of file + + {foo} + \ No newline at end of file diff --git a/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js b/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js index 0aed1b0e07..949235ee48 100644 --- a/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js +++ b/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js @@ -9,6 +9,10 @@ export default { } }, + before_test() { + count = 0; + }, + html: `
foo
foo
diff --git a/test/runtime/samples/if-block-conservative-update/_config.js b/test/runtime/samples/if-block-conservative-update/_config.js index f84ccb6b43..f7ba01a8fd 100644 --- a/test/runtime/samples/if-block-conservative-update/_config.js +++ b/test/runtime/samples/if-block-conservative-update/_config.js @@ -11,6 +11,9 @@ export default { html: '

potato

', + before_test() { + count = 0; + }, test({ assert, component, target }) { assert.equal(count, 1); diff --git a/test/runtime/samples/if-block-else-conservative-update/_config.js b/test/runtime/samples/if-block-else-conservative-update/_config.js index da83385dd5..b3db0bca54 100644 --- a/test/runtime/samples/if-block-else-conservative-update/_config.js +++ b/test/runtime/samples/if-block-else-conservative-update/_config.js @@ -17,6 +17,11 @@ export default { html: '

potato

', + before_test() { + count_a = 0; + count_b = 0; + }, + test({ assert, component, target }) { assert.equal(count_a, 1); assert.equal(count_b, 0); diff --git a/test/runtime/samples/lifecycle-render-order-for-children/_config.js b/test/runtime/samples/lifecycle-render-order-for-children/_config.js index d182d5a97e..b85c91d07f 100644 --- a/test/runtime/samples/lifecycle-render-order-for-children/_config.js +++ b/test/runtime/samples/lifecycle-render-order-for-children/_config.js @@ -2,7 +2,9 @@ import order from './order.js'; export default { skip_if_ssr: true, - + before_test() { + order.length = 0; + }, test({ assert, component, target, compileOptions }) { if (compileOptions.hydratable) { assert.deepEqual(order, [ @@ -43,7 +45,5 @@ export default { '0: afterUpdate' ]); } - - order.length = 0; } }; diff --git a/test/runtime/samples/lifecycle-render-order/_config.js b/test/runtime/samples/lifecycle-render-order/_config.js index 5080973cef..2bbab7a838 100644 --- a/test/runtime/samples/lifecycle-render-order/_config.js +++ b/test/runtime/samples/lifecycle-render-order/_config.js @@ -3,6 +3,9 @@ import order from './order.js'; export default { skip_if_ssr: true, + before_test() { + order.length = 0; + }, test({ assert }) { assert.deepEqual(order, [ 'beforeUpdate', @@ -10,7 +13,5 @@ export default { 'onMount', 'afterUpdate' ]); - - order.length = 0; } }; diff --git a/test/runtime/samples/noscript-removal/_config.js b/test/runtime/samples/noscript-removal/_config.js index 709792c14a..0fd03ea223 100644 --- a/test/runtime/samples/noscript-removal/_config.js +++ b/test/runtime/samples/noscript-removal/_config.js @@ -1,9 +1,33 @@ export default { - skip_if_ssr: true, + ssrHtml: ` + - html: ` -
foo
+
foo
-
foo
foo
-` +
foo
foo
+ `, + test({ assert, target, compileOptions }) { + // if created on client side, should not build noscript + if (!compileOptions.hydratable) { + assert.equal(target.querySelectorAll('noscript').length, 0); + } + + // it's okay not to remove the node during hydration + // will not be seen by user anyway + removeNoScript(target); + + assert.htmlEqual( + target.innerHTML, + ` +
foo
+
foo
foo
+ ` + ); + } }; + +function removeNoScript(target) { + target.querySelectorAll('noscript').forEach(elem => { + elem.parentNode.removeChild(elem); + }); +} diff --git a/test/runtime/samples/ondestroy-deep/_config.js b/test/runtime/samples/ondestroy-deep/_config.js index 3f82e8b601..397d8c5684 100644 --- a/test/runtime/samples/ondestroy-deep/_config.js +++ b/test/runtime/samples/ondestroy-deep/_config.js @@ -2,6 +2,9 @@ import { destroyed, reset } from './destroyed.js'; export default { test({ assert, component }) { + // for hydration, ssr may have pushed to `destroyed` + reset(); + component.visible = false; assert.deepEqual(destroyed, ['A', 'B', 'C']); diff --git a/test/runtime/samples/raw-anchor-first-child/_config.js b/test/runtime/samples/raw-anchor-first-child/_config.js index 02297675c5..f9e6b76626 100644 --- a/test/runtime/samples/raw-anchor-first-child/_config.js +++ b/test/runtime/samples/raw-anchor-first-child/_config.js @@ -8,5 +8,6 @@ export default { assert.ok(!span.previousSibling); component.raw = 'bar'; + assert.htmlEqual(target.innerHTML, '
bar
'); } }; diff --git a/test/runtime/samples/raw-mustaches/_config.js b/test/runtime/samples/raw-mustaches/_config.js index 9eda8289ce..a69b91d2d8 100644 --- a/test/runtime/samples/raw-mustaches/_config.js +++ b/test/runtime/samples/raw-mustaches/_config.js @@ -1,5 +1,4 @@ export default { - skip_if_ssr: true, props: { raw: 'raw html!!!\\o/' diff --git a/test/runtime/samples/reactive-function-called-reassigned/_config.js b/test/runtime/samples/reactive-function-called-reassigned/_config.js index 7b2a8b72fe..b4d50a3e84 100644 --- a/test/runtime/samples/reactive-function-called-reassigned/_config.js +++ b/test/runtime/samples/reactive-function-called-reassigned/_config.js @@ -9,6 +9,9 @@ export default { props: { callback }, + before_test() { + called = 0; + }, async test({ assert, component, target, window }) { assert.equal(called, 1); diff --git a/test/runtime/samples/store-unreferenced/_config.js b/test/runtime/samples/store-unreferenced/_config.js index e15f202492..ce416bca5d 100644 --- a/test/runtime/samples/store-unreferenced/_config.js +++ b/test/runtime/samples/store-unreferenced/_config.js @@ -3,11 +3,13 @@ import { count } from './store.js'; export default { html: '

count: 0

', + before_test() { + count.set(0); + }, + async test({ assert, component, target }) { await component.increment(); assert.htmlEqual(target.innerHTML, '

count: 1

'); - - count.set(0); } }; From 17c5402e311d7224aa8c11d979c9b32cb950883f Mon Sep 17 00:00:00 2001 From: Robert Hall Date: Fri, 18 Jun 2021 20:09:03 -0600 Subject: [PATCH 022/196] Cleanup logos on homepage (#6409) --- .gitignore | 2 - site/package.json | 2 +- site/scripts/update_whos_using.js | 13 --- .../src/routes/_components/WhosUsingSvelte.js | 80 +++++++++++++++++++ .../routes/_components/WhosUsingSvelte.svelte | 60 ++++++++++++++ .../[id]/_components/AppControls/index.svelte | 1 - site/src/routes/repl/[id]/index.svelte | 17 ---- .../tutorial/[slug]/_TableOfContents.svelte | 1 + site/static/whos-using-svelte/1password.svg | 1 + .../whos-using-svelte/Schneider_Electric.svg | 1 + .../whos-using-svelte/alaskaairlines.svg | 1 + site/static/whos-using-svelte/avast.svg | 1 + site/static/whos-using-svelte/chess.svg | 1 + .../static/whos-using-svelte/fusioncharts.svg | 1 + site/static/whos-using-svelte/godaddy.svg | 1 + site/static/whos-using-svelte/ibm.svg | 1 + site/static/whos-using-svelte/les-echos.svg | 1 + site/static/whos-using-svelte/nyt.svg | 1 + site/static/whos-using-svelte/philips.svg | 1 + site/static/whos-using-svelte/rakuten.svg | 1 + site/static/whos-using-svelte/razorpay.svg | 1 + site/static/whos-using-svelte/square.svg | 1 + site/static/whos-using-svelte/transloadit.svg | 1 + 23 files changed, 157 insertions(+), 34 deletions(-) delete mode 100644 site/scripts/update_whos_using.js create mode 100644 site/src/routes/_components/WhosUsingSvelte.js create mode 100644 site/src/routes/_components/WhosUsingSvelte.svelte create mode 100644 site/static/whos-using-svelte/1password.svg create mode 100644 site/static/whos-using-svelte/Schneider_Electric.svg create mode 100644 site/static/whos-using-svelte/alaskaairlines.svg create mode 100644 site/static/whos-using-svelte/avast.svg create mode 100644 site/static/whos-using-svelte/chess.svg create mode 100644 site/static/whos-using-svelte/fusioncharts.svg create mode 100644 site/static/whos-using-svelte/godaddy.svg create mode 100644 site/static/whos-using-svelte/ibm.svg create mode 100644 site/static/whos-using-svelte/les-echos.svg create mode 100644 site/static/whos-using-svelte/nyt.svg create mode 100644 site/static/whos-using-svelte/philips.svg create mode 100644 site/static/whos-using-svelte/rakuten.svg create mode 100644 site/static/whos-using-svelte/razorpay.svg create mode 100644 site/static/whos-using-svelte/square.svg create mode 100644 site/static/whos-using-svelte/transloadit.svg diff --git a/.gitignore b/.gitignore index bddabf688b..e21a94e698 100644 --- a/.gitignore +++ b/.gitignore @@ -30,8 +30,6 @@ _output /site/static/svelte-app.json /site/static/contributors.jpg /site/static/workers -/site/static/organisations /site/scripts/svelte-app /site/scripts/community /site/src/routes/_contributors.js -/site/src/routes/_components/WhosUsingSvelte.* diff --git a/site/package.json b/site/package.json index e11c6f306c..f88da89e5b 100644 --- a/site/package.json +++ b/site/package.json @@ -7,7 +7,7 @@ "copy-workers": "node scripts/copy-workers.js", "migrate": "node-pg-migrate -r dotenv/config", "build": "npm run copy-workers && sapper build --legacy", - "update": "node scripts/update_template.js && node scripts/get-contributors.js && node scripts/update_whos_using.js", + "update": "node scripts/update_template.js && node scripts/get-contributors.js", "start": "node __sapper__/build", "test": "mocha -r esm test/**", "deploy": "make deploy" diff --git a/site/scripts/update_whos_using.js b/site/scripts/update_whos_using.js deleted file mode 100644 index 36bc3bdc53..0000000000 --- a/site/scripts/update_whos_using.js +++ /dev/null @@ -1,13 +0,0 @@ -const sh = require('shelljs'); - -sh.cd(__dirname + '/../'); - -// fetch community repo -sh.rm('-rf','scripts/community'); -sh.exec('npx degit sveltejs/community scripts/community'); - -// copy over relevant files -sh.cp('scripts/community/whos-using-svelte/WhosUsingSvelte.svelte', 'src/routes/_components/WhosUsingSvelte.svelte'); -sh.cp('scripts/community/whos-using-svelte/WhosUsingSvelte.js', 'src/routes/_components/WhosUsingSvelte.js'); -sh.rm('-rf', 'static/organisations'); -sh.cp('-r', 'scripts/community/whos-using-svelte/organisations', 'static'); diff --git a/site/src/routes/_components/WhosUsingSvelte.js b/site/src/routes/_components/WhosUsingSvelte.js new file mode 100644 index 0000000000..430bc95867 --- /dev/null +++ b/site/src/routes/_components/WhosUsingSvelte.js @@ -0,0 +1,80 @@ +export const companies = [ + { + href: "https://1password.com", + filename: "1password.svg", + alt: "1Password logo", + }, + { + href: "https://www.alaskaair.com/", + style: "background-color: #01426a;", + filename: "alaskaairlines.svg", + alt: "Alaska Airlines logo", + }, + { + href: "https://avast.com", + filename: "avast.svg", + alt: "Avast logo", + }, + { + href: "https://chess.com", + style: "background-color: #312e2b;", + filename: "chess.svg", + alt: "Chess.com logo", + }, + { + href: "https://fusioncharts.com", + filename: "fusioncharts.svg", + alt: "FusionCharts logo", + }, + { + href: "https://godaddy.com", + filename: "godaddy.svg", + alt: "GoDaddy logo", + }, + { + href: "https://www.ibm.com/", + filename: "ibm.svg", + alt: "IBM logo", + }, + { + href: "https://media.lesechos.fr/infographie", + filename: "les-echos.svg", + alt: "Les Echos", + }, + { + href: "https://www.philips.co.uk", + filename: "philips.svg", + alt: "Philips logo", + }, + { + href: "https://global.rakuten.com/corp/", + filename: "rakuten.svg", + alt: "Rakuten logo", + }, + { + href: "https://razorpay.com", + filename: "razorpay.svg", + alt: "Razorpay logo", + }, + { + href: "https://www.se.com", + style: " background-color: #3dcd58; ", + filename: "Schneider_Electric.svg", + alt: "Schneider Electric", + }, + { + href: "https://squareup.com", + filename: "square.svg", + alt: "Square", + }, + { + href: "https://nytimes.com", + filename: "nyt.svg", + alt: "The New York Times logo", + }, + { + href: "https://transloadit.com", + filename: "transloadit.svg", + alt: "Transloadit", + }, +]; diff --git a/site/src/routes/_components/WhosUsingSvelte.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte new file mode 100644 index 0000000000..0b48800e86 --- /dev/null +++ b/site/src/routes/_components/WhosUsingSvelte.svelte @@ -0,0 +1,60 @@ + + + + +
+ {#each sortedCompanies as {href, filename, alt, style, picture, span}, index} + + {#if picture} + + {#each picture as {type, srcset}} + + {/each} + + + {:else} + + {#if span} + {span} + {/if} + {/if} + + {/each} +
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte index c2e5684944..55a1d24e28 100644 --- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte +++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte @@ -16,7 +16,6 @@ export let gist; export let name; export let zen_mode; - export let bundle; let saving = false; let downloading = false; diff --git a/site/src/routes/repl/[id]/index.svelte b/site/src/routes/repl/[id]/index.svelte index 945678ba33..70b843724c 100644 --- a/site/src/routes/repl/[id]/index.svelte +++ b/site/src/routes/repl/[id]/index.svelte @@ -167,27 +167,10 @@ z-index: 111; } - .pane { width: 100%; height: 100% } - - .loading { - text-align: center; - color: var(--second); - font-weight: 400; - margin: 2em 0 0 0; - opacity: 0; - animation: fade-in .4s; - animation-delay: .2s; - animation-fill-mode: both; - } - @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } - - .input { - padding: 2.4em 0 0 0; - } diff --git a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte index 97a298bcca..3b9d9ca44b 100644 --- a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte +++ b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte @@ -77,6 +77,7 @@ {selected.chapter.title} + + diff --git a/test/parser/samples/textarea-end-tag/output.json b/test/parser/samples/textarea-end-tag/output.json new file mode 100644 index 0000000000..d723169934 --- /dev/null +++ b/test/parser/samples/textarea-end-tag/output.json @@ -0,0 +1,53 @@ +{ + "html": { + "start": 0, + "end": 117, + "type": "Fragment", + "children": [ + { + "start": 0, + "end": 117, + "type": "Element", + "name": "textarea", + "attributes": [], + "children": [ + { + "start": 10, + "end": 51, + "type": "Text", + "raw": "\n\t

not actu not actu \n asdf", + "data": "

\n asdf" + } + ] + } + ] + } +} \ No newline at end of file From 6f81c230ae3f69c4ed79b99919446fd0d4065cb3 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 22 Jun 2021 09:46:11 -0400 Subject: [PATCH 025/196] update changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b78b8ab37d..f084d46a42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,8 @@ ## Unreleased -* Fix type signatures of `writable` and `readable`. It's possible to invoke them without arguments ([#6291](https://github.com/sveltejs/svelte/issues/6291), [#6345](https://github.com/sveltejs/svelte/issues/6345)) +* Make ` - {@html marked(value)} + + \ No newline at end of file + diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte index 7775ab6319..f9521d6db6 100644 --- a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte +++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte @@ -3,10 +3,10 @@ let value = `Some words are *italic*, some are **bold**`; - - {@html marked(value)} + + \ No newline at end of file + From 0f92863033316c8a87c02b775fffe78ccddd3292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20=C4=90=E1=BB=A9c=20H=C3=A0o?= <39975444+haond10adp@users.noreply.github.com> Date: Sun, 27 Jun 2021 00:57:48 +0700 Subject: [PATCH 048/196] tutorial: add name attribute to inputs (#5649) --- .../06-bindings/04-group-inputs/app-a/App.svelte | 12 ++++++------ .../06-bindings/04-group-inputs/app-b/App.svelte | 8 ++++---- .../tutorial/06-bindings/04-group-inputs/text.md | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte index 038790bc51..3a29f89484 100644 --- a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte @@ -11,34 +11,34 @@

Size

Flavours

diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte index b12704b87d..d97db41f0b 100644 --- a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte +++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte @@ -17,17 +17,17 @@

Size

@@ -35,7 +35,7 @@ {#each menu as flavour} {/each} diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md index 97edb8db76..b48b23921f 100644 --- a/site/content/tutorial/06-bindings/04-group-inputs/text.md +++ b/site/content/tutorial/06-bindings/04-group-inputs/text.md @@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group` Add `bind:group` to each input: ```html - + ``` In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the ` + + diff --git a/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte new file mode 100644 index 0000000000..e2b04b93ed --- /dev/null +++ b/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte new file mode 100644 index 0000000000..f14332b398 --- /dev/null +++ b/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte @@ -0,0 +1,9 @@ + + + + + diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte new file mode 100644 index 0000000000..e2b04b93ed --- /dev/null +++ b/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/site/content/tutorial/06-bindings/14-component-this/text.md b/site/content/tutorial/06-bindings/14-component-this/text.md new file mode 100644 index 0000000000..00af193604 --- /dev/null +++ b/site/content/tutorial/06-bindings/14-component-this/text.md @@ -0,0 +1,19 @@ +--- +title: Binding to component instances +--- + +Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `` to a prop named `field` in the same way we did when binding DOM Elements + +```html + +``` + +Now we can programmatically interact with this component using `field`. + +```html + +``` + +> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error. \ No newline at end of file From f99deeb67b89687b4daf94416ceac7747f3eab7f Mon Sep 17 00:00:00 2001 From: Simon Scharf Date: Sat, 26 Jun 2021 20:18:09 +0200 Subject: [PATCH 051/196] docs: remove type property from special elements tutorial (#4715) Instead, determine type based on the existence of the files property. Removes console warnings --- .../01-svelte-self/app-a/App.svelte | 24 ++++++++----------- .../01-svelte-self/app-a/Folder.svelte | 4 ++-- .../01-svelte-self/app-b/App.svelte | 24 ++++++++----------- .../01-svelte-self/app-b/Folder.svelte | 4 ++-- .../01-svelte-self/text.md | 4 ++-- 5 files changed, 26 insertions(+), 34 deletions(-) diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte index ff02fa6a42..de0b2e0179 100644 --- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte +++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte @@ -3,39 +3,35 @@ let root = [ { - type: 'folder', name: 'Important work stuff', files: [ - { type: 'file', name: 'quarterly-results.xlsx' } + { name: 'quarterly-results.xlsx' } ] }, { - type: 'folder', name: 'Animal GIFs', files: [ { - type: 'folder', name: 'Dogs', files: [ - { type: 'file', name: 'treadmill.gif' }, - { type: 'file', name: 'rope-jumping.gif' } + { name: 'treadmill.gif' }, + { name: 'rope-jumping.gif' } ] }, { - type: 'folder', name: 'Goats', files: [ - { type: 'file', name: 'parkour.gif' }, - { type: 'file', name: 'rampage.gif' } + { name: 'parkour.gif' }, + { name: 'rampage.gif' } ] }, - { type: 'file', name: 'cat-roomba.gif' }, - { type: 'file', name: 'duck-shuffle.gif' }, - { type: 'file', name: 'monkey-on-a-pig.gif' } + { name: 'cat-roomba.gif' }, + { name: 'duck-shuffle.gif' }, + { name: 'monkey-on-a-pig.gif' } ] }, - { type: 'file', name: 'TODO.md' } + { name: 'TODO.md' } ]; - \ No newline at end of file + diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte index 20096e805e..1108b3575c 100644 --- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte +++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte @@ -16,7 +16,7 @@
    {#each files as file}
  • - {#if file.type === 'folder'} + {#if file.files} {:else} @@ -49,4 +49,4 @@ li { padding: 0.2em 0; } - \ No newline at end of file + diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte index ff02fa6a42..de0b2e0179 100644 --- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte +++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte @@ -3,39 +3,35 @@ let root = [ { - type: 'folder', name: 'Important work stuff', files: [ - { type: 'file', name: 'quarterly-results.xlsx' } + { name: 'quarterly-results.xlsx' } ] }, { - type: 'folder', name: 'Animal GIFs', files: [ { - type: 'folder', name: 'Dogs', files: [ - { type: 'file', name: 'treadmill.gif' }, - { type: 'file', name: 'rope-jumping.gif' } + { name: 'treadmill.gif' }, + { name: 'rope-jumping.gif' } ] }, { - type: 'folder', name: 'Goats', files: [ - { type: 'file', name: 'parkour.gif' }, - { type: 'file', name: 'rampage.gif' } + { name: 'parkour.gif' }, + { name: 'rampage.gif' } ] }, - { type: 'file', name: 'cat-roomba.gif' }, - { type: 'file', name: 'duck-shuffle.gif' }, - { type: 'file', name: 'monkey-on-a-pig.gif' } + { name: 'cat-roomba.gif' }, + { name: 'duck-shuffle.gif' }, + { name: 'monkey-on-a-pig.gif' } ] }, - { type: 'file', name: 'TODO.md' } + { name: 'TODO.md' } ]; - \ No newline at end of file + diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte index f5f0a7b194..11049c2e52 100644 --- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte +++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte @@ -16,7 +16,7 @@
      {#each files as file}
    • - {#if file.type === 'folder'} + {#if file.files} {:else} @@ -49,4 +49,4 @@ li { padding: 0.2em 0; } - \ No newline at end of file + diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/text.md b/site/content/tutorial/16-special-elements/01-svelte-self/text.md index c7946f6c6d..894a8efc3d 100644 --- a/site/content/tutorial/16-special-elements/01-svelte-self/text.md +++ b/site/content/tutorial/16-special-elements/01-svelte-self/text.md @@ -7,7 +7,7 @@ Svelte provides a variety of built-in elements. The first, ``, allo It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this... ```html -{#if file.type === 'folder'} +{#if file.files} {:else} @@ -17,7 +17,7 @@ It's useful for things like this folder tree view, where folders can contain *ot ...but that's impossible, because a module can't import itself. Instead, we use ``: ```html -{#if file.type === 'folder'} +{#if file.files} {:else} From 7115601cd39f7b1916ef99babad66ee11a6ba4cf Mon Sep 17 00:00:00 2001 From: The Jared Wilcurt Date: Sat, 26 Jun 2021 14:23:30 -0400 Subject: [PATCH 052/196] Docs: Accurately name function (#4060) --- .../01-reactive-assignments/app-b/App.svelte | 6 +++--- .../02-reactivity/01-reactive-assignments/text.md | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte index bc50d74cfc..dff5942d6e 100644 --- a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte +++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte @@ -1,11 +1,11 @@ - \ No newline at end of file + diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md index b0909f1feb..15b58f0820 100644 --- a/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md +++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md @@ -7,15 +7,15 @@ At the heart of Svelte is a powerful system of *reactivity* for keeping the DOM To demonstrate it, we first need to wire up an event handler. Replace line 9 with this: ```html - +

      + The Timer component has been open for + {seconds} {seconds === 1 ? 'second' : 'seconds'} +

      + {#if open} + + {/if} + diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte new file mode 100644 index 0000000000..0eb5a7461d --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte @@ -0,0 +1,20 @@ + + +

      + This component executes a callback every + {interval} millisecond{interval === 1 ? '' : 's'} +

      + + diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js index 7b65e75c8c..64ab7e50c7 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js @@ -1,5 +1,9 @@ import { onDestroy } from 'svelte'; export function onInterval(callback, milliseconds) { - // implementation goes here + const interval = setInterval(callback, milliseconds); + + onDestroy(() => { + // Fix the memory leak here + }); } \ No newline at end of file diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte index 93a721ef44..49936b6617 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte @@ -1,11 +1,20 @@ -

      - The page has been open for - {seconds} {seconds === 1 ? 'second' : 'seconds'} -

      \ No newline at end of file +
      + +

      + The Timer component has been open for + {seconds} {seconds === 1 ? 'second' : 'seconds'} +

      + {#if open} + + {/if} +
      diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte new file mode 100644 index 0000000000..0eb5a7461d --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte @@ -0,0 +1,20 @@ + + +

      + This component executes a callback every + {interval} millisecond{interval === 1 ? '' : 's'} +

      + + diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md index 647fbaa160..34bbf83cbf 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md @@ -10,8 +10,8 @@ For example, we can add a `setInterval` function when our component initialises, @@ -37,7 +37,9 @@ export function onInterval(callback, milliseconds) { -``` \ No newline at end of file +``` + +Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example. \ No newline at end of file From f797482e27b8f2d53b33ac6814c4ae26d225d760 Mon Sep 17 00:00:00 2001 From: Ophir LOJKINE Date: Sun, 27 Jun 2021 18:01:26 +0200 Subject: [PATCH 057/196] Add documentation for crossfade (#6196) --- site/content/docs/03-run-time.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index c0bd145316..83b6fa9b8e 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -752,7 +752,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts * `easing` (`function`, default `cubicInOut`) — an [easing function](docs#svelte_easing) -The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it. +The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it. ```sv + +{#if condition} +

      BIG ELEM

      +{:else} + small elem +{/if} +``` ### `svelte/animate` From 0e18b1311ed1cdfe73eb8091093000988102d203 Mon Sep 17 00:00:00 2001 From: EmNudge Date: Sun, 27 Jun 2021 12:05:53 -0400 Subject: [PATCH 058/196] docs: clarified readonly prop access (#5825) --- site/content/docs/01-component-format.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index 30c53b225f..c7bcfaa800 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -57,6 +57,8 @@ In development mode (see the [compiler options](docs#svelte_compile)), a warning If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however. +Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](docs#bind_element). + ```sv + + diff --git a/test/validator/samples/event-modifiers-invalid/errors.json b/test/validator/samples/event-modifiers-invalid/errors.json index 59a142d632..ea6de4ce34 100644 --- a/test/validator/samples/event-modifiers-invalid/errors.json +++ b/test/validator/samples/event-modifiers-invalid/errors.json @@ -1,5 +1,5 @@ [{ - "message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive, nonpassive or self", + "message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive, nonpassive, self or trusted", "code": "invalid-event-modifier", "start": { "line": 1, From 5f584d165a474fb2fa09ff85596732964f62a777 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 27 Jun 2021 18:49:59 +0200 Subject: [PATCH 061/196] update unreleased --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9427453930..2294d951d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Add `trusted` event modifier ([#6137](https://github.com/sveltejs/svelte/issues/6137)) + ## 3.38.3 * Speed up hydration by reducing amount of element reorderings ([#4308](https://github.com/sveltejs/svelte/issues/4308)) From 92fba761a8d38b2ef148a2f5b7566589e14e8601 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 27 Jun 2021 18:58:38 +0200 Subject: [PATCH 062/196] docs: clarify writable value is lost when destroyed Closes #4610 Closes #4407 --- site/content/docs/03-run-time.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 83b6fa9b8e..9a8d6a69b5 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -294,6 +294,8 @@ const unsubscribe = count.subscribe(value => { unsubscribe(); // logs 'no more subscribers' ``` +Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`. + #### `readable` ```js From 5d824966a22e73b009b26f5cd1b3651f96a1a519 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 28 Jun 2021 01:08:19 +0800 Subject: [PATCH 063/196] internal: add typescript def for transitions (#5625) --- src/runtime/internal/Component.ts | 5 ++- src/runtime/internal/transitions.ts | 57 +++++++++++++++++++++++------ src/runtime/internal/utils.ts | 2 +- 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index a191e5d83b..0d1d65cbdc 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -4,7 +4,10 @@ import { blank_object, is_empty, is_function, run, run_all, noop } from './utils import { children, detach, start_hydrating, end_hydrating } from './dom'; import { transition_in } from './transitions'; -interface Fragment { +/** + * INTERNAL, DO NOT USE. Code may change at any time. + */ +export interface Fragment { key: string|null; first: null; /* create */ c: () => void; diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 2fc81cc21f..f7b6b6d86a 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -5,8 +5,25 @@ import { create_rule, delete_rule } from './style_manager'; import { custom_event } from './dom'; import { add_render_callback } from './scheduler'; import { TransitionConfig } from '../transition'; +import { Fragment } from './Component'; let promise: Promise|null; +type INTRO = 1; +type OUTRO = 0; +interface Outro { + /** + * remaining outros + */ + r: number; + /** + * callbacks + */ + c: Function[]; + /** + * parent outro + */ + p: Outro; +} function wait() { if (!promise) { @@ -19,12 +36,12 @@ function wait() { return promise; } -function dispatch(node: Element, direction: boolean, kind: 'start' | 'end') { +function dispatch(node: Element, direction: INTRO | OUTRO | boolean, kind: 'start' | 'end') { node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`)); } const outroing = new Set(); -let outros; +let outros: Outro; export function group_outros() { outros = { @@ -41,14 +58,14 @@ export function check_outros() { outros = outros.p; } -export function transition_in(block, local?: 0 | 1) { +export function transition_in(block: Fragment, local?: 0 | 1) { if (block && block.i) { outroing.delete(block); block.i(local); } } -export function transition_out(block, local: 0 | 1, detach?: 0 | 1, callback?) { +export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, callback?) { if (block && block.o) { if (outroing.has(block)) return; outroing.add(block); @@ -225,21 +242,39 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: }; } +interface PendingProgram { + start: number; + b: INTRO | OUTRO; + group?: Outro; +} +interface Program { + a: number; + b: INTRO | OUTRO; + /** + * direction + */ + d: 1 | -1; + duration: number; + start: number; + end: number; + group?: Outro; +} + export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) { let config = fn(node, params); let t = intro ? 0 : 1; - let running_program = null; - let pending_program = null; + let running_program: Program | null = null; + let pending_program: PendingProgram | null = null; let animation_name = null; function clear_animation() { if (animation_name) delete_rule(node, animation_name); } - function init(program, duration) { - const d = program.b - t; + function init(program: PendingProgram, duration: number): Program { + const d = (program.b - t) as Program['d']; duration *= Math.abs(d); return { @@ -253,7 +288,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline }; } - function go(b) { + function go(b: INTRO | OUTRO) { const { delay = 0, duration = 300, @@ -262,7 +297,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline css } = config || null_transition; - const program = { + const program: PendingProgram = { start: now() + delay, b }; @@ -331,7 +366,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline } return { - run(b) { + run(b: INTRO | OUTRO) { if (is_function(config)) { wait().then(() => { // @ts-ignore diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index 084019fb59..9f3da8589a 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -28,7 +28,7 @@ export function blank_object() { return Object.create(null); } -export function run_all(fns) { +export function run_all(fns: Function[]) { fns.forEach(run); } From 0df9233fb170ced0a92961a2b6a7ad4d265425c1 Mon Sep 17 00:00:00 2001 From: zerdox <49815452+ZerdoX-x@users.noreply.github.com> Date: Mon, 28 Jun 2021 11:45:22 +0500 Subject: [PATCH 064/196] Fix wrong "slot" property warning (runtime) (#6065) * updated: condition for warning about unknown prop * test are updated --- src/compiler/compile/render_dom/index.ts | 2 +- test/js/samples/capture-inject-state/expected.js | 2 +- test/js/samples/debug-empty/expected.js | 2 +- test/js/samples/debug-foo-bar-baz-things/expected.js | 2 +- test/js/samples/debug-foo/expected.js | 2 +- test/js/samples/debug-hoisted/expected.js | 2 +- test/js/samples/debug-no-dependencies/expected.js | 2 +- test/js/samples/dev-warning-missing-data-computed/expected.js | 2 +- test/js/samples/loop-protect/expected.js | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index a56f3fb2b3..8be14c6b54 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -399,7 +399,7 @@ export default function dom( unknown_props_check = b` const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}]; @_Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; } diff --git a/test/js/samples/capture-inject-state/expected.js b/test/js/samples/capture-inject-state/expected.js index 854e0b3265..6485526bd4 100644 --- a/test/js/samples/capture-inject-state/expected.js +++ b/test/js/samples/capture-inject-state/expected.js @@ -116,7 +116,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = ["prop", "alias"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$$set = $$props => { diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index f427f1bf45..c18eb8699c 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -75,7 +75,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = ["name"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$$set = $$props => { diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index 7439b3310b..12a04b438b 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -179,7 +179,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = ["things", "foo", "bar", "baz"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$$set = $$props => { diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index d869a5cf9e..029d525883 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -171,7 +171,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = ["things", "foo"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$$set = $$props => { diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index c6257ac90d..8dbd718404 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -56,7 +56,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = []; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$capture_state = () => ({ obj, kobzol }); diff --git a/test/js/samples/debug-no-dependencies/expected.js b/test/js/samples/debug-no-dependencies/expected.js index 4d8d05d3aa..29e518d9b1 100644 --- a/test/js/samples/debug-no-dependencies/expected.js +++ b/test/js/samples/debug-no-dependencies/expected.js @@ -141,7 +141,7 @@ function instance($$self, $$props) { const writable_props = []; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); return []; diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index 8c7f8bb1cf..a981d88dca 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -72,7 +72,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = ["foo"]; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console.warn(` was created with unknown prop '${key}'`); }); $$self.$$set = $$props => { diff --git a/test/js/samples/loop-protect/expected.js b/test/js/samples/loop-protect/expected.js index 1042b20823..26721d6be6 100644 --- a/test/js/samples/loop-protect/expected.js +++ b/test/js/samples/loop-protect/expected.js @@ -110,7 +110,7 @@ function instance($$self, $$props, $$invalidate) { const writable_props = []; Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(` was created with unknown prop '${key}'`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot") console_1.warn(` was created with unknown prop '${key}'`); }); function div_binding($$value) { From e69c05a7dbbbe57fd50bc44a130afecd484c371d Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 28 Jun 2021 14:48:33 +0800 Subject: [PATCH 065/196] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2294d951d9..62b2e4ff47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Add `trusted` event modifier ([#6137](https://github.com/sveltejs/svelte/issues/6137)) +* Fix erroneous `unknown prop` warning when using slot on a component ([#6065](https://github.com/sveltejs/svelte/pull/6065)) ## 3.38.3 From 2357e642e36572176ccd6d41f1fc9af678f825d3 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Sun, 27 Jun 2021 23:49:28 -0700 Subject: [PATCH 066/196] Rename menu item from API to Docs (#6456) --- site/src/routes/_layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte index b375a8c8db..936db61f8b 100644 --- a/site/src/routes/_layout.svelte +++ b/site/src/routes/_layout.svelte @@ -38,7 +38,7 @@ {#if $page.path !== '/repl/embed'}