From 370dd4d81ba8d9d200e058f66a9aacbc6962cc18 Mon Sep 17 00:00:00 2001 From: Maxime LUCE Date: Fri, 16 Apr 2021 19:22:18 +0200 Subject: [PATCH 001/298] ci: increase timeouts to avoid random breaks (#6193) --- .github/workflows/ci.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 12819d3e2a..406aab993a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,7 +3,7 @@ on: [push, pull_request] jobs: Tests: runs-on: ${{ matrix.os }} - timeout-minutes: 10 + timeout-minutes: 15 strategy: matrix: node-version: [8, 10, 12, 14] @@ -27,7 +27,7 @@ jobs: CI: true Lint: runs-on: ubuntu-latest - timeout-minutes: 2 + timeout-minutes: 5 steps: - uses: actions/checkout@v1 - uses: actions/setup-node@v1 @@ -42,7 +42,7 @@ jobs: - run: 'npm i && npm run lint' Unit: runs-on: ${{ matrix.os }} - timeout-minutes: 5 + timeout-minutes: 10 strategy: matrix: os: [ubuntu-latest, windows-latest, macOS-latest] From f322e3fba41cb4f67b34b389d039e8baeb9cba3a Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 19 Apr 2021 12:18:05 -0700 Subject: [PATCH 002/298] Upgrade version of jsdom used in tests (#6202) --- package-lock.json | 52 ++++++++++++++++++++++++----------------------- package.json | 2 +- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index b5d7d5ba13..453e482ef1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -233,8 +233,8 @@ } }, "@sveltejs/eslint-config": { - "version": "github:sveltejs/eslint-config#cca8177349dd5a02b19a5865afc4a7066921409a", - "from": "github:sveltejs/eslint-config#v5.6.0", + "version": "git+ssh://git@github.com/sveltejs/eslint-config.git#cca8177349dd5a02b19a5865afc4a7066921409a", + "from": "@sveltejs/eslint-config@github:sveltejs/eslint-config#v5.6.0", "dev": true }, "@tootallnate/once": { @@ -1069,18 +1069,26 @@ } }, "cssom": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", - "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", + "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==", "dev": true }, "cssstyle": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.4.0.tgz", - "integrity": "sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz", + "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==", "dev": true, "requires": { - "cssom": "0.3.x" + "cssom": "~0.3.6" + }, + "dependencies": { + "cssom": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", + "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", + "dev": true + } } }, "dashdash": { @@ -2668,22 +2676,22 @@ "dev": true }, "jsdom": { - "version": "15.1.1", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.1.1.tgz", - "integrity": "sha512-cQZRBB33arrDAeCrAEWn1U3SvrvC8XysBua9Oqg1yWrsY/gYcusloJC3RZJXuY5eehSCmws8f2YeliCqGSkrtQ==", + "version": "15.2.1", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.2.1.tgz", + "integrity": "sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==", "dev": true, "requires": { "abab": "^2.0.0", - "acorn": "^6.1.1", + "acorn": "^7.1.0", "acorn-globals": "^4.3.2", "array-equal": "^1.0.0", - "cssom": "^0.3.6", - "cssstyle": "^1.2.2", + "cssom": "^0.4.1", + "cssstyle": "^2.0.0", "data-urls": "^1.1.0", "domexception": "^1.0.1", "escodegen": "^1.11.1", "html-encoding-sniffer": "^1.0.2", - "nwsapi": "^2.1.4", + "nwsapi": "^2.2.0", "parse5": "5.1.0", "pn": "^1.1.0", "request": "^2.88.0", @@ -2701,12 +2709,6 @@ "xml-name-validator": "^3.0.0" }, "dependencies": { - "acorn": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", - "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==", - "dev": true - }, "ws": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/ws/-/ws-7.1.1.tgz", @@ -3171,9 +3173,9 @@ } }, "nwsapi": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.4.tgz", - "integrity": "sha512-iGfd9Y6SFdTNldEy2L0GUhcarIutFmk+MPWIn9dmj8NMIup03G08uUF2KGbbmv/Ux4RT0VZJoP/sVbWA6d/VIw==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", + "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==", "dev": true }, "oauth-sign": { diff --git a/package.json b/package.json index 74942c9630..51600a7989 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "eslint-plugin-svelte3": "^2.7.3", "estree-walker": "^1.0.0", "is-reference": "^1.1.4", - "jsdom": "^15.1.1", + "jsdom": "^15.2.1", "kleur": "^3.0.3", "locate-character": "^2.0.5", "magic-string": "^0.25.3", From 10e3e3dae8dbd0bf3151c162949b8bf76dc62e8b Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 21 Apr 2021 09:42:52 -0700 Subject: [PATCH 003/298] Improve SSR hydration performance (#6204) * Improve SSR hydration performance - Fixes #4308 by avoiding de- and reattaching nodes during hydration - Turns existing append, insert and detach methods into "upserts" The new "hydration mode" was added in order to maintain the detach by default behavior during hydration. By tracking which nodes are claimed during hydration unclaimed nodes can then removed from the DOM at the end of hydration without touching the remaining nodes. Co-authored-by: Jonatan Svennberg --- CHANGELOG.md | 1 + src/runtime/internal/Component.ts | 4 ++- src/runtime/internal/dom.ts | 50 ++++++++++++++++++++++++++----- 3 files changed, 47 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb22c97eb7..85281d4326 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Unreleased +* Avoid recreating DOM elements during hydration ([#6204](https://github.com/sveltejs/svelte/pull/6204)) * Add missing function overload for `derived` to allow explicitly setting an initial value for non-async derived stores ([#6172](https://github.com/sveltejs/svelte/pull/6172)) * Pass full markup source to script/style preprocessors ([#6169](https://github.com/sveltejs/svelte/pull/6169)) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 32de46506a..a191e5d83b 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -1,7 +1,7 @@ import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler'; import { current_component, set_current_component } from './lifecycle'; import { blank_object, is_empty, is_function, run, run_all, noop } from './utils'; -import { children, detach } from './dom'; +import { children, detach, start_hydrating, end_hydrating } from './dom'; import { transition_in } from './transitions'; interface Fragment { @@ -150,6 +150,7 @@ export function init(component, options, instance, create_fragment, not_equal, p if (options.target) { if (options.hydrate) { + start_hydrating(); const nodes = children(options.target); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment!.l(nodes); @@ -161,6 +162,7 @@ export function init(component, options, instance, create_fragment, not_equal, p if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor, options.customElement); + end_hydrating(); flush(); } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 8d99234c9d..911f96a275 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -1,15 +1,47 @@ import { has_prop } from './utils'; +// Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM +// at the end of hydration without touching the remaining nodes. +let is_hydrating = false; +const nodes_to_detach = new Set(); + +export function start_hydrating() { + is_hydrating = true; +} +export function end_hydrating() { + is_hydrating = false; + + for (const node of nodes_to_detach) { + node.parentNode.removeChild(node); + } + + nodes_to_detach.clear(); +} + export function append(target: Node, node: Node) { - target.appendChild(node); + if (is_hydrating) { + nodes_to_detach.delete(node); + } + if (node.parentNode !== target) { + target.appendChild(node); + } } export function insert(target: Node, node: Node, anchor?: Node) { - target.insertBefore(node, anchor || null); + if (is_hydrating) { + nodes_to_detach.delete(node); + } + if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) { + target.insertBefore(node, anchor || null); + } } export function detach(node: Node) { - node.parentNode.removeChild(node); + if (is_hydrating) { + nodes_to_detach.add(node); + } else if (node.parentNode) { + node.parentNode.removeChild(node); + } } export function destroy_each(iterations, detaching) { @@ -154,8 +186,9 @@ export function children(element) { } export function claim_element(nodes, name, attributes, svg) { - for (let i = 0; i < nodes.length; i += 1) { - const node = nodes[i]; + while (nodes.length > 0) { + const node = nodes.shift(); + if (node.nodeName === name) { let j = 0; const remove = []; @@ -168,7 +201,10 @@ export function claim_element(nodes, name, attributes, svg) { for (let k = 0; k < remove.length; k++) { node.removeAttribute(remove[k]); } - return nodes.splice(i, 1)[0]; + + return node; + } else { + detach(node); } } @@ -180,7 +216,7 @@ export function claim_text(nodes, data) { const node = nodes[i]; if (node.nodeType === 3) { node.data = '' + data; - return nodes.splice(i, 1)[0]; + return nodes.shift(); } } From 27234275c0e4534c8f1f3b1be02fb354e88f8ebf Mon Sep 17 00:00:00 2001 From: Mauricio Paternina <49292621+spaceinvadev@users.noreply.github.com> Date: Wed, 21 Apr 2021 11:46:00 -0500 Subject: [PATCH 004/298] tutorial: fix custombutton colors for a11y contrast (#6212) --- .../06-dom-event-forwarding/app-a/CustomButton.svelte | 10 +++++----- .../06-dom-event-forwarding/app-b/CustomButton.svelte | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte index 0955930b5d..e68b9d46d9 100644 --- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte @@ -2,18 +2,18 @@ button { height: 4rem; width: 8rem; - background-color: #aaa; - border-color: #f1c40f; - color: #f1c40f; + background-color: #ddd; + border-color: #ff3e00; + color: #ff3e00; font-size: 1.25rem; - background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%); + background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%); background-position: 100%; background-size: 400%; transition: background 300ms ease-in-out; } button:hover { background-position: 0; - color: #aaa; + color: #ddd; } diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte index f521c1f471..3ae3172c9d 100644 --- a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte +++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte @@ -2,18 +2,18 @@ button { height: 4rem; width: 8rem; - background-color: #aaa; - border-color: #f1c40f; - color: #f1c40f; + background-color: #ddd; + border-color: #ff3e00; + color: #ff3e00; font-size: 1.25rem; - background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%); + background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%); background-position: 100%; background-size: 400%; transition: background 300ms ease-in-out; } button:hover { background-position: 0; - color: #aaa; + color: #ddd; } From 697d4c7f5199ad1fe0d8283bd8fd151401f2f467 Mon Sep 17 00:00:00 2001 From: Mlocik97 Date: Wed, 21 Apr 2021 22:36:51 +0200 Subject: [PATCH 005/298] Add link to SvelteKit to Svelte website. (#6161) --- 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 55f4861880..b375a8c8db 100644 --- a/site/src/routes/_layout.svelte +++ b/site/src/routes/_layout.svelte @@ -44,7 +44,7 @@ Blog FAQ - Sapper + SvelteKit From ec2540787adcc299a140050ec9bb38aac320c79d Mon Sep 17 00:00:00 2001 From: BabakFP <44144724+babakfp@users.noreply.github.com> Date: Thu, 22 Apr 2021 09:05:13 -0700 Subject: [PATCH 006/298] Changing tutorial/example order from script-style-html to script-html-style (#6213) Also change button style in one tutorial --- .../00-introduction/02-styling/App.svelte | 6 +- .../03-nested-components/App.svelte | 8 +- .../04-events/00-dom-events/App.svelte | 10 +- .../04-events/01-inline-handlers/App.svelte | 10 +- .../CustomButton.svelte | 10 +- .../05-bindings/04-textarea-inputs/App.svelte | 10 +- .../05-bindings/06-select-bindings/App.svelte | 10 +- .../05-bindings/09-media-elements/App.svelte | 54 +++---- .../05-bindings/10-dimensions/App.svelte | 12 +- .../05-bindings/11-bind-this/App.svelte | 14 +- .../12-component-bindings/Keypad.svelte | 28 ++-- .../06-lifecycle/00-onmount/App.svelte | 28 ++-- .../06-lifecycle/02-update/App.svelte | 28 ++-- .../examples/06-lifecycle/03-tick/App.svelte | 6 +- .../examples/08-motion/00-tweened/App.svelte | 16 +-- .../examples/08-motion/01-spring/App.svelte | 12 +- .../03-custom-css-transitions/App.svelte | 24 ++-- .../10-animations/00-animate/App.svelte | 78 +++++----- .../examples/11-easing/00-easing/App.svelte | 60 ++++---- .../11-easing/00-easing/Controls.svelte | 133 +++++++++--------- .../examples/11-easing/00-easing/Grid.svelte | 28 ++-- .../examples/12-svg/01-clock/App.svelte | 78 +++++----- .../examples/12-svg/02-bar-chart/App.svelte | 74 +++++----- .../examples/12-svg/03-area-chart/App.svelte | 2 +- .../examples/12-svg/04-scatterplot/App.svelte | 20 +-- .../12-svg/04-scatterplot/Scatterplot.svelte | 2 +- .../12-svg/05-svg-transitions/App.svelte | 66 ++++----- .../examples/13-actions/00-actions/App.svelte | 22 +-- .../examples/14-classes/00-classes/App.svelte | 24 ++-- .../14-classes/01-class-shorthand/App.svelte | 14 +- .../15-composition/00-slots/Box.svelte | 10 +- .../01-slot-fallbacks/Box.svelte | 14 +- .../02-named-slots/ContactCard.svelte | 42 +++--- .../15-composition/03-slot-props/App.svelte | 28 ++-- .../04-conditional-slots/Profile.svelte | 24 ++-- .../15-composition/05-modal/Modal.svelte | 2 +- .../16-context/00-context-api/Map.svelte | 14 +- .../00-svelte-self/File.svelte | 6 +- .../00-svelte-self/Folder.svelte | 34 ++--- .../01-svelte-component/BlueThing.svelte | 10 +- .../01-svelte-component/GreenThing.svelte | 10 +- .../01-svelte-component/RedThing.svelte | 10 +- .../02-svelte-window/App.svelte | 24 ++-- .../03-svelte-window-bindings/App.svelte | 2 +- .../04-svelte-body/App.svelte | 26 ++-- .../01-module-exports/AudioPlayer.svelte | 16 +-- .../20-7guis/02-7guis-temperature/App.svelte | 20 +-- .../03-7guis-flight-booker/App.svelte | 16 +-- .../20-7guis/05-7guis-crud/App.svelte | 36 ++--- .../20-7guis/06-7guis-circles/App.svelte | 52 +++---- .../01-hacker-news/App.svelte | 22 +-- .../01-hacker-news/Comment.svelte | 26 ++-- .../01-hacker-news/Item.svelte | 32 ++--- .../01-hacker-news/List.svelte | 22 +-- .../01-hacker-news/Summary.svelte | 14 +- .../02-immutable-data/ImmutableTodo.svelte | 12 +- .../02-immutable-data/MutableTodo.svelte | 14 +- .../04-styling/app-a/App.svelte | 6 +- .../04-styling/app-b/App.svelte | 4 +- .../01-introduction/04-styling/text.md | 6 +- .../05-nested-components/app-a/App.svelte | 4 +- .../05-nested-components/app-a/Nested.svelte | 2 +- .../05-nested-components/app-b/App.svelte | 6 +- .../05-nested-components/app-b/Nested.svelte | 2 +- .../05-events/01-dom-events/app-a/App.svelte | 10 +- .../05-events/01-dom-events/app-b/App.svelte | 10 +- .../02-inline-handlers/app-a/App.svelte | 10 +- .../02-inline-handlers/app-b/App.svelte | 10 +- .../06-dom-event-forwarding/app-a/App.svelte | 2 +- .../app-a/CustomButton.svelte | 34 ++--- .../06-dom-event-forwarding/app-b/App.svelte | 2 +- .../app-b/CustomButton.svelte | 34 ++--- .../04-group-inputs/app-a/App.svelte | 2 +- .../04-group-inputs/app-b/App.svelte | 2 +- .../05-textarea-inputs/app-a/App.svelte | 10 +- .../05-textarea-inputs/app-b/App.svelte | 10 +- .../06-select-bindings/app-a/App.svelte | 14 +- .../06-select-bindings/app-b/App.svelte | 14 +- .../09-each-block-bindings/app-a/App.svelte | 12 +- .../09-each-block-bindings/app-b/App.svelte | 12 +- .../10-media-elements/app-a/App.svelte | 48 +++---- .../10-media-elements/app-b/App.svelte | 54 +++---- .../11-dimensions/app-a/App.svelte | 14 +- .../11-dimensions/app-b/App.svelte | 14 +- .../06-bindings/12-bind-this/app-a/App.svelte | 12 +- .../06-bindings/12-bind-this/app-b/App.svelte | 14 +- .../13-component-bindings/app-a/Keypad.svelte | 28 ++-- .../13-component-bindings/app-b/Keypad.svelte | 28 ++-- .../07-lifecycle/01-onmount/app-a/App.svelte | 30 ++-- .../07-lifecycle/01-onmount/app-b/App.svelte | 30 ++-- .../09-motion/01-tweened/app-a/App.svelte | 16 +-- .../09-motion/01-tweened/app-b/App.svelte | 16 +-- .../09-motion/02-spring/app-a/App.svelte | 18 ++- .../09-motion/02-spring/app-b/App.svelte | 17 ++- .../app-a/App.svelte | 24 ++-- .../app-b/App.svelte | 24 ++-- .../07-local-transitions/app-a/App.svelte | 16 +-- .../07-local-transitions/app-b/App.svelte | 16 +-- .../08-deferred-transitions/app-a/App.svelte | 2 +- .../08-deferred-transitions/app-b/App.svelte | 2 +- .../11-animations/01-animate/app-a/App.svelte | 2 +- .../11-animations/01-animate/app-b/App.svelte | 2 +- .../13-classes/01-classes/app-a/App.svelte | 24 ++-- .../13-classes/01-classes/app-b/App.svelte | 24 ++-- .../02-class-shorthand/app-a/App.svelte | 14 +- .../02-class-shorthand/app-b/App.svelte | 14 +- .../14-composition/01-slots/app-a/Box.svelte | 10 +- .../14-composition/01-slots/app-b/Box.svelte | 10 +- .../02-slot-fallbacks/app-a/Box.svelte | 10 +- .../02-slot-fallbacks/app-b/Box.svelte | 14 +- .../03-named-slots/app-a/ContactCard.svelte | 54 +++---- .../03-named-slots/app-b/ContactCard.svelte | 54 +++---- .../04-optional-slots/app-a/App.svelte | 52 +++---- .../04-optional-slots/app-a/Comment.svelte | 28 ++-- .../04-optional-slots/app-a/Project.svelte | 24 ++-- .../04-optional-slots/app-b/App.svelte | 52 +++---- .../04-optional-slots/app-b/Comment.svelte | 28 ++-- .../04-optional-slots/app-b/Project.svelte | 28 ++-- .../05-slot-props/app-a/App.svelte | 22 +-- .../05-slot-props/app-b/App.svelte | 28 ++-- .../01-context-api/app-a/Map.svelte | 14 +- .../01-context-api/app-b/Map.svelte | 14 +- .../01-svelte-self/app-a/File.svelte | 6 +- .../01-svelte-self/app-a/Folder.svelte | 34 ++--- .../01-svelte-self/app-b/File.svelte | 6 +- .../01-svelte-self/app-b/Folder.svelte | 34 ++--- .../app-a/BlueThing.svelte | 10 +- .../app-a/GreenThing.svelte | 10 +- .../02-svelte-component/app-a/RedThing.svelte | 10 +- .../app-b/BlueThing.svelte | 10 +- .../app-b/GreenThing.svelte | 10 +- .../02-svelte-component/app-b/RedThing.svelte | 10 +- .../03-svelte-window/app-a/App.svelte | 32 ++--- .../03-svelte-window/app-b/App.svelte | 30 ++-- .../app-a/App.svelte | 2 +- .../app-b/App.svelte | 2 +- .../07-svelte-options/app-a/Todo.svelte | 14 +- .../07-svelte-options/app-b/Todo.svelte | 14 +- .../08-svelte-fragment/app-a/App.svelte | 2 +- .../08-svelte-fragment/app-a/Box.svelte | 16 +-- .../08-svelte-fragment/app-b/App.svelte | 2 +- .../08-svelte-fragment/app-b/Box.svelte | 16 +-- .../08-svelte-fragment/text.md | 12 +- .../01-sharing-code/app-a/AudioPlayer.svelte | 24 ++-- .../01-sharing-code/app-b/AudioPlayer.svelte | 24 ++-- .../app-a/AudioPlayer.svelte | 24 ++-- .../app-b/AudioPlayer.svelte | 24 ++-- .../01-congratulations/app-a/App.svelte | 10 +- 148 files changed, 1529 insertions(+), 1447 deletions(-) diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte index 7148dcf10f..b3ad2fc8e6 100644 --- a/site/content/examples/00-introduction/02-styling/App.svelte +++ b/site/content/examples/00-introduction/02-styling/App.svelte @@ -1,9 +1,9 @@ +

Styled!

+ - -

Styled!

\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte index bb97f50ace..0b200112ab 100644 --- a/site/content/examples/00-introduction/03-nested-components/App.svelte +++ b/site/content/examples/00-introduction/03-nested-components/App.svelte @@ -2,13 +2,13 @@ import Nested from './Nested.svelte'; +

These styles...

+ + - -

These styles...

- \ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte index f26112f06c..de1f664112 100644 --- a/site/content/examples/04-events/00-dom-events/App.svelte +++ b/site/content/examples/04-events/00-dom-events/App.svelte @@ -7,10 +7,10 @@ } - -
The mouse position is {m.x} x {m.y} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte index f0fd6ff17a..36fed40a4f 100644 --- a/site/content/examples/04-events/01-inline-handlers/App.svelte +++ b/site/content/examples/04-events/01-inline-handlers/App.svelte @@ -2,10 +2,10 @@ let m = { x: 0, y: 0 }; - -
The mouse position is {m.x} x {m.y} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte index f521c1f471..4004ffbf29 100644 --- a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte +++ b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte @@ -1,3 +1,7 @@ + + - - \ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte index 5a9e18f79d..0d02d7ba2e 100644 --- a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte +++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte @@ -3,10 +3,10 @@ let text = `Some words are *italic*, some are **bold**`; - - -{@html marked(text)} \ No newline at end of file +{@html marked(text)} + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte index 3f1e7fa7e1..a3607a6f4f 100644 --- a/site/content/examples/05-bindings/06-select-bindings/App.svelte +++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte @@ -14,10 +14,6 @@ } - -

Insecurity questions

@@ -36,4 +32,8 @@
-

selected question {selected ? selected.id : '[waiting...]'}

\ No newline at end of file +

selected question {selected ? selected.id : '[waiting...]'}

+ + \ No newline at end of file diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte index 45345a39ff..5aad9a0fae 100644 --- a/site/content/examples/05-bindings/09-media-elements/App.svelte +++ b/site/content/examples/05-bindings/09-media-elements/App.svelte @@ -51,6 +51,32 @@ } +

Caminandes: Llamigos

+

From Blender Open Projects. CC-BY

+ +
+ + +
+ + +
+ {format(time)} + click anywhere to {paused ? 'play' : 'pause'} / drag to seek + {format(duration)} +
+
+
+ - -

Caminandes: Llamigos

-

From Blender Open Projects. CC-BY

- -
- - -
- - -
- {format(time)} - click anywhere to {paused ? 'play' : 'pause'} / drag to seek - {format(duration)} -
-
-
+ \ No newline at end of file diff --git a/site/content/examples/05-bindings/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte index ca992599c1..c955aeba8e 100644 --- a/site/content/examples/05-bindings/10-dimensions/App.svelte +++ b/site/content/examples/05-bindings/10-dimensions/App.svelte @@ -5,11 +5,6 @@ let text = 'edit me'; - - @@ -17,4 +12,9 @@
{text} -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte index 439d240670..8612e8f5e3 100644 --- a/site/content/examples/05-bindings/11-bind-this/App.svelte +++ b/site/content/examples/05-bindings/11-bind-this/App.svelte @@ -38,6 +38,12 @@ }); + + - - + \ No newline at end of file diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte index c457a15cb5..631f7964e2 100644 --- a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte +++ b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte @@ -10,19 +10,6 @@ const submit = () => dispatch('submit'); - -
@@ -37,4 +24,17 @@ -
\ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte index 1b83727627..b6c3100e58 100644 --- a/site/content/examples/06-lifecycle/00-onmount/App.svelte +++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte @@ -9,6 +9,20 @@ }); +

Photo album

+ +
+ {#each photos as photo} +
+ {photo.title} +
{photo.title}
+
+ {:else} + +

loading...

+ {/each} +
+ - -

Photo album

- -
- {#each photos as photo} -
- {photo.title} -
{photo.title}
-
- {:else} - -

loading...

- {/each} -
\ No newline at end of file diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte index 419e763c57..ee3bca32df 100644 --- a/site/content/examples/06-lifecycle/02-update/App.svelte +++ b/site/content/examples/06-lifecycle/02-update/App.svelte @@ -51,6 +51,20 @@ } +
+

Eliza

+ +
+ {#each comments as comment} +
+ {comment.text} +
+ {/each} +
+ + +
+ - -
-

Eliza

- -
- {#each comments as comment} -
- {comment.text} -
- {/each} -
- - -
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte index 477b5ffb79..e678020d3d 100644 --- a/site/content/examples/06-lifecycle/03-tick/App.svelte +++ b/site/content/examples/06-lifecycle/03-tick/App.svelte @@ -27,11 +27,11 @@ } + + - - + \ No newline at end of file diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte index 83f3b50a04..ee3c7a1b5d 100644 --- a/site/content/examples/08-motion/00-tweened/App.svelte +++ b/site/content/examples/08-motion/00-tweened/App.svelte @@ -8,13 +8,6 @@ }); - - \ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte index 9918cf40e8..251bf640ee 100644 --- a/site/content/examples/08-motion/01-spring/App.svelte +++ b/site/content/examples/08-motion/01-spring/App.svelte @@ -9,11 +9,6 @@ let size = spring(10); - -
+ + \ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte index 66a297323f..3123b8a25b 100644 --- a/site/content/examples/11-easing/00-easing/Controls.svelte +++ b/site/content/examples/11-easing/00-easing/Controls.svelte @@ -14,6 +14,72 @@ $: mobile = width && width < 600; +
+
+

Ease

+ {#if mobile} + + {:else} +
    + {#each [...eases] as [name]} +
  • current_ease = name} + > + {name} +
    • + {/each} +
+ {/if} +

Type

+ {#if mobile } + + {:else} +
    + {#each types as [name, type]} +
  • current_type = type} + > + {name} +
    • + {/each} +
+ {/if} +
+

+ Duration +

+
+ + + + + + +
+
+ + - -
-
-

Ease

- {#if mobile} - - {:else} -
    - {#each [...eases] as [name]} -
  • current_ease = name} - > - {name} -
    • - {/each} -
- {/if} -

Type

- {#if mobile } - - {:else} -
    - {#each types as [name, type]} -
  • current_type = type} - > - {name} -
    • - {/each} -
- {/if} -
-

- Duration -

-
- - - - - - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte index e704f46cf7..c0c9d47913 100644 --- a/site/content/examples/11-easing/00-easing/Grid.svelte +++ b/site/content/examples/11-easing/00-easing/Grid.svelte @@ -2,19 +2,6 @@ export let x, y; - - \ No newline at end of file +/> + + diff --git a/site/content/examples/12-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte index 49d3a7f809..44f7e484a1 100644 --- a/site/content/examples/12-svg/01-clock/App.svelte +++ b/site/content/examples/12-svg/01-clock/App.svelte @@ -20,44 +20,6 @@ }); - - @@ -101,4 +63,42 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/site/content/examples/12-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte index 30c374b67e..d44c0e67cf 100644 --- a/site/content/examples/12-svg/02-bar-chart/App.svelte +++ b/site/content/examples/12-svg/02-bar-chart/App.svelte @@ -33,6 +33,42 @@ $: barWidth = innerWidth / xTicks.length; +

US birthrate by year

+ +
+ + + + {#each yTicks as tick} + + + {tick} {tick === 20 ? ' per 1,000 population' : ''} + + {/each} + + + + + {#each points as point, i} + + {width > 380 ? point.year : formatMobile(point.year)} + + {/each} + + + + {#each points as point, i} + + {/each} + + +
+ - -

US birthrate by year

- -
- - - - {#each yTicks as tick} - - - {tick} {tick === 20 ? ' per 1,000 population' : ''} - - {/each} - - - - - {#each points as point, i} - - {width > 380 ? point.year : formatMobile(point.year)} - - {/each} - - - - {#each points as point, i} - - {/each} - - -
+ \ No newline at end of file diff --git a/site/content/examples/12-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte index 98ff070411..2fe39280e4 100644 --- a/site/content/examples/12-svg/03-area-chart/App.svelte +++ b/site/content/examples/12-svg/03-area-chart/App.svelte @@ -108,4 +108,4 @@ .path-area { fill: rgba(0,100,100,0.2); } - + \ No newline at end of file diff --git a/site/content/examples/12-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte index 42a0660b87..1ceb1d221c 100644 --- a/site/content/examples/12-svg/04-scatterplot/App.svelte +++ b/site/content/examples/12-svg/04-scatterplot/App.svelte @@ -3,6 +3,15 @@ import data from './data.js'; +
+

Anscombe's quartet

+ + + + + +
+ - -
-

Anscombe's quartet

- - - - - -
\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte index f7a46899fa..7ae113ab06 100644 --- a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte +++ b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte @@ -92,4 +92,4 @@ .y-axis text { text-anchor: end; } - + \ No newline at end of file diff --git a/site/content/examples/12-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte index 6e1e636b20..7f3a774a2c 100644 --- a/site/content/examples/12-svg/05-svg-transitions/App.svelte +++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte @@ -7,6 +7,38 @@ let visible = true; +{#if visible} + + + + + + + +
+ {#each 'SVELTE' as char, i} + {char} + {/each} +
+{/if} + + + + + - -{#if visible} - - - - - - - -
- {#each 'SVELTE' as char, i} - {char} - {/each} -
-{/if} - - - - + \ No newline at end of file diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte index 171f82762c..4548a5cbb6 100644 --- a/site/content/examples/13-actions/00-actions/App.svelte +++ b/site/content/examples/13-actions/00-actions/App.svelte @@ -25,6 +25,16 @@ } +
+ - -
\ No newline at end of file + \ No newline at end of file diff --git a/site/content/examples/14-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte index 4da386991d..1073242bcf 100644 --- a/site/content/examples/14-classes/00-classes/App.svelte +++ b/site/content/examples/14-classes/00-classes/App.svelte @@ -2,17 +2,6 @@ let current = 'foo'; - - \ No newline at end of file +>baz + + \ No newline at end of file diff --git a/site/content/examples/14-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte index 0f4e0d9f24..c91385e4e5 100644 --- a/site/content/examples/14-classes/01-class-shorthand/App.svelte +++ b/site/content/examples/14-classes/01-class-shorthand/App.svelte @@ -2,12 +2,6 @@ let big = false; - -