From ce3a5791258ec6ecf8c1ea022cb871afe805a45c Mon Sep 17 00:00:00 2001 From: Geoff Rich Date: Fri, 5 Mar 2021 08:29:03 -0800 Subject: [PATCH 001/458] docs: update 7gui example links (#6052) --- site/content/examples/20-7guis/01-7guis-counter/App.svelte | 2 +- site/content/examples/20-7guis/02-7guis-temperature/App.svelte | 2 +- .../content/examples/20-7guis/03-7guis-flight-booker/App.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/examples/20-7guis/01-7guis-counter/App.svelte b/site/content/examples/20-7guis/01-7guis-counter/App.svelte index 11c5993901..832891b735 100644 --- a/site/content/examples/20-7guis/01-7guis-counter/App.svelte +++ b/site/content/examples/20-7guis/01-7guis-counter/App.svelte @@ -1,7 +1,7 @@ + - \ No newline at end of file diff --git a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte index 216c3461eb..503fb080ea 100644 --- a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte +++ b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte @@ -1,4 +1,4 @@ - + °c = °f diff --git a/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte index c4a4cde0cb..82b23596b7 100644 --- a/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte +++ b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte @@ -1,3 +1,4 @@ + + + +
+

All rights reserved.

+

Copyright (c) 2019 Svelte Industries

+
+ diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte new file mode 100644 index 0000000000..16c17f90ef --- /dev/null +++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte @@ -0,0 +1,20 @@ + + +
+ No header was provided +

Some content between header and footer

+ +
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte new file mode 100644 index 0000000000..6f55903ece --- /dev/null +++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte @@ -0,0 +1,10 @@ + + + + +

All rights reserved.

+

Copyright (c) 2019 Svelte Industries

+ + diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte new file mode 100644 index 0000000000..16c17f90ef --- /dev/null +++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte @@ -0,0 +1,20 @@ + + +
+ No header was provided +

Some content between header and footer

+ +
diff --git a/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md new file mode 100644 index 0000000000..fca7aeb844 --- /dev/null +++ b/site/content/tutorial/16-special-elements/08-svelte-fragment/text.md @@ -0,0 +1,35 @@ +--- +title: +--- + +The `` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact. + +In the example notice how we applied a flex layout with a gap of `1em` to the box. + +```sv + + + +
+ No header was provided +

Some content between header and footer

+ +
+``` + +However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout. + +We can solve this by changing `
` in the `App` component. Replace the `
` with ``: + +```sv + +

All rights reserved.

+

Copyright (c) 2019 Svelte Industries

+ +``` From e5a5eaeef02cf241f7eec68a7814629e2bd78b2b Mon Sep 17 00:00:00 2001 From: Luke Edwards Date: Mon, 29 Mar 2021 19:39:39 -0700 Subject: [PATCH 017/458] fix: revert breaking change for `compiler/preprocess` types location (#6100) --- src/compiler/preprocess/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/compiler/preprocess/index.ts b/src/compiler/preprocess/index.ts index 93b48996c1..16bcdf1687 100644 --- a/src/compiler/preprocess/index.ts +++ b/src/compiler/preprocess/index.ts @@ -5,6 +5,8 @@ import { decode_map } from './decode_sourcemap'; import { replace_in_code, slice_source } from './replace_in_code'; import { MarkupPreprocessor, Source, Preprocessor, PreprocessorGroup, Processed } from './types'; +export * from './types'; + interface SourceUpdate { string?: string; map?: DecodedSourceMap; From 32f58b9d41762d0bcc10916fe8b6b9e2aba4d0f3 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 29 Mar 2021 22:41:40 -0400 Subject: [PATCH 018/458] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37c8414dff..a13b1377ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Export `Spring`, `Tweened` and `EasingFunction` interfaces ([#6070](https://github.com/sveltejs/svelte/issues/6070), [#6056](https://github.com/sveltejs/svelte/pull/6056)) * Export interfaces for transition parameters ([#5207](https://github.com/sveltejs/svelte/issues/5207)) * Export store's useful TypeScript definitions ([#5864](https://github.com/sveltejs/svelte/issues/5864)) +* Fix previous breaking change to `svelte/preprocess` types location ([#6100](https://github.com/sveltejs/svelte/pull/6100)) ## 3.35.0 From e84e356ca5a67769c2d86b7a1fa798549598b979 Mon Sep 17 00:00:00 2001 From: Mark A Shuttleworth <144485+MShuttle@users.noreply.github.com> Date: Tue, 30 Mar 2021 13:47:54 +1100 Subject: [PATCH 019/458] site: fix grammatical issue in tutorial/update (#6136) --- site/content/tutorial/07-lifecycle/03-update/text.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/07-lifecycle/03-update/text.md b/site/content/tutorial/07-lifecycle/03-update/text.md index 40e071630a..0255e845a8 100644 --- a/site/content/tutorial/07-lifecycle/03-update/text.md +++ b/site/content/tutorial/07-lifecycle/03-update/text.md @@ -2,7 +2,7 @@ title: beforeUpdate and afterUpdate --- -The `beforeUpdate` function schedules work to happen immediately before the DOM has been updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data. +The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data. Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element. @@ -21,4 +21,4 @@ afterUpdate(() => { }); ``` -Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties. \ No newline at end of file +Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties. From 286c60da4db2a068731e854b998061febb3bc98f Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 29 Mar 2021 22:55:52 -0400 Subject: [PATCH 020/458] fix missing slotted elements in AST (#6148) --- CHANGELOG.md | 1 + src/compiler/compile/Component.ts | 7 +- src/compiler/compile/nodes/Binding.ts | 3 +- src/compiler/compile/nodes/shared/Context.ts | 3 +- .../compile/nodes/shared/Expression.ts | 3 +- src/compiler/utils/clone.ts | 33 ++++++++ .../samples/slotted-element/input.svelte | 1 + .../samples/slotted-element/output.json | 42 ++++++++++ .../samples/textarea-children/output.json | 76 +++++++++---------- 9 files changed, 122 insertions(+), 47 deletions(-) create mode 100644 src/compiler/utils/clone.ts create mode 100644 test/parser/samples/slotted-element/input.svelte create mode 100644 test/parser/samples/slotted-element/output.json diff --git a/CHANGELOG.md b/CHANGELOG.md index a13b1377ec..c72df2436b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Export interfaces for transition parameters ([#5207](https://github.com/sveltejs/svelte/issues/5207)) * Export store's useful TypeScript definitions ([#5864](https://github.com/sveltejs/svelte/issues/5864)) * Fix previous breaking change to `svelte/preprocess` types location ([#6100](https://github.com/sveltejs/svelte/pull/6100)) +* Fix missing slotted elements in AST ([#6066](https://github.com/sveltejs/svelte/issues/6066)) ## 3.35.0 diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 70c25460b5..155b64778b 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -32,6 +32,7 @@ import { is_reserved_keyword } from './utils/reserved_keywords'; import { apply_preprocessor_sourcemap } from '../utils/mapped_code'; import Element from './nodes/Element'; import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types/types'; +import { clone } from '../utils/clone'; interface ComponentOptions { namespace?: string; @@ -116,12 +117,12 @@ export default class Component { // the instance JS gets mutated, so we park // a copy here for later. TODO this feels gross - this.original_ast = { + this.original_ast = clone({ html: ast.html, css: ast.css, - instance: ast.instance && JSON.parse(JSON.stringify(ast.instance)), + instance: ast.instance, module: ast.module - }; + }); this.file = compile_options.filename && diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts index 3a9aa943e9..8fcc70ded9 100644 --- a/src/compiler/compile/nodes/Binding.ts +++ b/src/compiler/compile/nodes/Binding.ts @@ -9,6 +9,7 @@ import { TemplateNode } from '../../interfaces'; import Element from './Element'; import InlineComponent from './InlineComponent'; import Window from './Window'; +import { clone } from '../../utils/clone'; // TODO this should live in a specific binding const read_only_media_attributes = new Set([ @@ -42,7 +43,7 @@ export default class Binding extends Node { this.name = info.name; this.expression = new Expression(component, this, scope, info.expression); - this.raw_expression = JSON.parse(JSON.stringify(info.expression)); + this.raw_expression = clone(info.expression); const { name } = get_object(this.expression.node); diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts index c6ad2c2893..dbcdada587 100644 --- a/src/compiler/compile/nodes/shared/Context.ts +++ b/src/compiler/compile/nodes/shared/Context.ts @@ -2,6 +2,7 @@ import { x } from 'code-red'; import { Node, Identifier, Expression } from 'estree'; import { walk } from 'estree-walker'; import is_reference from 'is-reference'; +import { clone } from '../../../utils/clone'; export interface Context { key: Identifier; @@ -81,7 +82,7 @@ function update_reference(contexts: Context[], n: number, expression: Expression } // NOTE: avoid unnecessary deep clone? - expression = JSON.parse(JSON.stringify(expression)) as Expression; + expression = clone(expression) as Expression; walk(expression, { enter(node, parent: Node) { if (is_reference(node, parent)) { diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index caece14f00..cca81b6372 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -16,6 +16,7 @@ import { is_reserved_keyword } from '../../utils/reserved_keywords'; import replace_object from '../../utils/replace_object'; import is_contextual from './is_contextual'; import EachBlock from '../EachBlock'; +import { clone } from '../../../utils/clone'; type Owner = INode; @@ -195,7 +196,7 @@ export default class Expression { const node = walk(this.node, { enter(node: any, parent: any) { if (node.type === 'Property' && node.shorthand) { - node.value = JSON.parse(JSON.stringify(node.value)); + node.value = clone(node.value); node.shorthand = false; } diff --git a/src/compiler/utils/clone.ts b/src/compiler/utils/clone.ts new file mode 100644 index 0000000000..74b6cfa0a1 --- /dev/null +++ b/src/compiler/utils/clone.ts @@ -0,0 +1,33 @@ +// adapted from klona v2.0.4 - https://github.com/lukeed/klona +// (c) Luke Edwards, under MIT License + +// The sole modification is to skip function values in objects when cloning, so we don't break tests. + +export function clone(val) { + let k, out, tmp; + + if (Array.isArray(val)) { + out = Array(k=val.length); + while (k--) out[k] = (tmp=val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp; + return out; + } + + if (Object.prototype.toString.call(val) === '[object Object]') { + out = {}; // null + for (k in val) { + if (k === '__proto__') { + Object.defineProperty(out, k, { + value: clone(val[k]), + configurable: true, + enumerable: true, + writable: true + }); + } else if (typeof val[k] !== 'function') { // MODIFICATION: skip functions + out[k] = (tmp=val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp; + } + } + return out; + } + + return val; +} diff --git a/test/parser/samples/slotted-element/input.svelte b/test/parser/samples/slotted-element/input.svelte new file mode 100644 index 0000000000..709dede9a5 --- /dev/null +++ b/test/parser/samples/slotted-element/input.svelte @@ -0,0 +1 @@ +
 diff --git a/test/parser/samples/slotted-element/output.json b/test/parser/samples/slotted-element/output.json new file mode 100644 index 0000000000..7028a367ff --- /dev/null +++ b/test/parser/samples/slotted-element/output.json @@ -0,0 +1,42 @@ +{ + "html": { + "start": 0, + "end": 45, + "type": "Fragment", + "children": [ + { + "start": 0, + "end": 45, + "type": "InlineComponent", + "name": "Component", + "attributes": [], + "children": [ + { + "start": 11, + "end": 33, + "type": "Element", + "name": "div", + "attributes": [ + { + "start": 16, + "end": 26, + "type": "Attribute", + "name": "slot", + "value": [ + { + "start": 22, + "end": 25, + "type": "Text", + "raw": "foo", + "data": "foo" + } + ] + } + ], + "children": [] + } + ] + } + ] + } +} diff --git a/test/parser/samples/textarea-children/output.json b/test/parser/samples/textarea-children/output.json index 919fa33fde..0ebbfd38fc 100644 --- a/test/parser/samples/textarea-children/output.json +++ b/test/parser/samples/textarea-children/output.json @@ -9,51 +9,45 @@ "end": 61, "type": "Element", "name": "textarea", - "attributes": [ + "attributes": [], + "children": [ { - "type": "Attribute", - "name": "value", - "value": [ - { - "start": 10, - "end": 41, - "type": "Text", - "raw": "\n\t

not actually an element. ", - "data": "\n\t

not actually an element. " - }, - { - "start": 40, - "end": 45, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 41, - "end": 44, - "loc": { - "start": { - "line": 2, - "column": 30 - }, - "end": { - "line": 2, - "column": 33 - } - }, - "name": "foo" + "start": 10, + "end": 41, + "type": "Text", + "raw": "\n\t

not actually an element. ", + "data": "\n\t

not actually an element. " + }, + { + "start": 40, + "end": 45, + "type": "MustacheTag", + "expression": { + "type": "Identifier", + "start": 41, + "end": 44, + "loc": { + "start": { + "line": 2, + "column": 30 + }, + "end": { + "line": 2, + "column": 33 } }, - { - "start": 45, - "end": 50, - "type": "Text", - "raw": "

\n", - "data": "

\n" - } - ] + "name": "foo" + } + }, + { + "start": 45, + "end": 50, + "type": "Text", + "raw": "

\n", + "data": "

\n" } - ], - "children": [] + ] } ] } -} \ No newline at end of file +} From ed01d16a8eb577bddf6441c5139fec72b9b3ae3d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 29 Mar 2021 22:57:06 -0400 Subject: [PATCH 021/458] -> v3.36.0 --- CHANGELOG.md | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c72df2436b..09e9808546 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.36.0 * Add `this: void` typing to store functions ([#6094](https://github.com/sveltejs/svelte/pull/6094)) * Export `Spring`, `Tweened` and `EasingFunction` interfaces ([#6070](https://github.com/sveltejs/svelte/issues/6070), [#6056](https://github.com/sveltejs/svelte/pull/6056)) diff --git a/package-lock.json b/package-lock.json index d8a594416c..d445588c1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.35.0", + "version": "3.36.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 2223b84771..aa81e982eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.35.0", + "version": "3.36.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From 4ccd65fdc35f708c4029cc62590d32ea8f2b2d10 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 30 Mar 2021 11:21:42 -0700 Subject: [PATCH 022/458] Bump y18n from 4.0.0 to 4.0.1 (#6151) Bumps [y18n](https://github.com/yargs/y18n) from 4.0.0 to 4.0.1. - [Release notes](https://github.com/yargs/y18n/releases) - [Changelog](https://github.com/yargs/y18n/blob/master/CHANGELOG.md) - [Commits](https://github.com/yargs/y18n/commits) 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 d445588c1d..e20509316a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4797,9 +4797,9 @@ "dev": true }, "y18n": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", + "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==", "dev": true }, "yallist": { From 00acbf211710190616bb6a8e1fca4644d1b06c6b Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 30 Mar 2021 11:30:29 -0700 Subject: [PATCH 023/458] Tutorial: remove outline on scrollbar thumb (#6090) --- site/src/routes/tutorial/[slug]/index.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte index be59665970..bcb9a9b24a 100644 --- a/site/src/routes/tutorial/[slug]/index.svelte +++ b/site/src/routes/tutorial/[slug]/index.svelte @@ -198,7 +198,6 @@ .chapter-markup::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.7); border-radius: 1em; - outline: 1px solid green; } .chapter-markup :global(p) > :global(code), From 31cb5206e0d0a23af47957f30e4fa080c6924cc0 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Tue, 30 Mar 2021 11:33:42 -0700 Subject: [PATCH 024/458] Remove trailing whitespace --- src/compiler/compile/css/Selector.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 6d0e7c5003..66caea3988 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -223,7 +223,7 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: any[]): const siblings = get_possible_element_siblings(node, block.combinator.name === '+'); let has_match = false; - // NOTE: if we have :global(), we couldn't figure out what is selected within `:global` due to the + // NOTE: if we have :global(), we couldn't figure out what is selected within `:global` due to the // css-tree limitation that does not parse the inner selector of :global // so unless we are sure there will be no sibling to match, we will consider it as matched const has_global = blocks.some(block => block.global); @@ -449,7 +449,7 @@ function get_possible_element_siblings(node: INode, adjacent_only: boolean): Map while ((parent = parent.parent) && (parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'ElseBlock' || parent.type === 'AwaitBlock')) { const possible_siblings = get_possible_element_siblings(parent, adjacent_only); add_to_map(possible_siblings, result); - + if (parent.type === 'EachBlock') { // first child of each block can select the last child of each block as previous sibling if (skip_each_for_last_child) { @@ -477,7 +477,7 @@ function get_possible_last_child(block: EachBlock | IfBlock | AwaitBlock, adjace if (block.type === 'EachBlock') { const each_result: Map = loop_child(block.children, adjacent_only); const else_result: Map = block.else ? loop_child(block.else.children, adjacent_only) : new Map(); - + const not_exhaustive = !has_definite_elements(else_result); if (not_exhaustive) { From bcf2313a34fc29794fb85f1a93d1fbec629a05dd Mon Sep 17 00:00:00 2001 From: GeopJr <18014039+GeopJr@users.noreply.github.com> Date: Tue, 30 Mar 2021 18:39:33 +0000 Subject: [PATCH 025/458] ci: cache node_modules (#6048) --- .github/workflows/ci.yml | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4e04386fcc..12819d3e2a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -13,6 +13,14 @@ jobs: - uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} + - id: npm-cache-dir + run: echo "::set-output name=dir::$(npm config get cache)" + - uses: actions/cache@v2 + id: npm-cache + with: + path: ${{ steps.npm-cache-dir.outputs.dir }} + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: ${{ runner.os }}-node- - run: npm install - run: npm test env: @@ -23,6 +31,14 @@ jobs: steps: - uses: actions/checkout@v1 - uses: actions/setup-node@v1 + - id: npm-cache-dir + run: echo "::set-output name=dir::$(npm config get cache)" + - uses: actions/cache@v2 + id: npm-cache + with: + path: ${{ steps.npm-cache-dir.outputs.dir }} + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: ${{ runner.os }}-node- - run: 'npm i && npm run lint' Unit: runs-on: ${{ matrix.os }} @@ -33,4 +49,12 @@ jobs: steps: - uses: actions/checkout@v1 - uses: actions/setup-node@v1 + - id: npm-cache-dir + run: echo "::set-output name=dir::$(npm config get cache)" + - uses: actions/cache@v2 + id: npm-cache + with: + path: ${{ steps.npm-cache-dir.outputs.dir }} + key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} + restore-keys: ${{ runner.os }}-node- - run: 'npm i && npm run test:unit' From 6c5257beb26094ed42105a0f59b4f04e18fe20b5 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 31 Mar 2021 23:07:32 +0800 Subject: [PATCH 026/458] allow passing in context in constructor (#6032) Co-authored-by: Conduitry --- CHANGELOG.md | 4 +++ site/content/docs/03-run-time.md | 27 ++++++++++++++++ src/runtime/internal/Component.ts | 2 +- src/runtime/internal/ssr.ts | 8 ++--- .../constructor-pass-context/Component.svelte | 9 ++++++ .../constructor-pass-context/_config.js | 32 +++++++++++++++++++ .../constructor-pass-context/main.svelte | 0 test/server-side-rendering/index.ts | 5 +++ 8 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 test/runtime/samples/constructor-pass-context/Component.svelte create mode 100644 test/runtime/samples/constructor-pass-context/_config.js create mode 100644 test/runtime/samples/constructor-pass-context/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 09e9808546..86c9bff955 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Allow root-level context to be passed to the component constructor ([#6032](https://github.com/sveltejs/svelte/pull/6032)) + ## 3.36.0 * Add `this: void` typing to store functions ([#6094](https://github.com/sveltejs/svelte/pull/6094)) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 386c18d5fd..7fbc8850de 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -904,6 +904,7 @@ The following initialisation options can be provided: | `target` | **none** | An `HTMLElement` to render to. This option is required | `anchor` | `null` | A child of `target` to render the component immediately before | `props` | `{}` | An object of properties to supply to the component +| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component | `hydrate` | `false` | See below | `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes @@ -1081,3 +1082,29 @@ const { head, html, css } = App.render({ answer: 42 }); ``` + +--- + +The `.render()` method accepts the following parameters: + +| parameter | default | description | +| --- | --- | --- | +| `props` | `{}` | An object of properties to supply to the component +| `options` | `{}` | An object of options + +The `options` object takes in the following options: + +| option | default | description | +| --- | --- | --- | +| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component + +```js +const { head, html, css } = App.render( + // props + { answer: 42 }, + // options + { + context: new Map([['context-key', 'context-value']]) + } +); +``` diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 5a2a966d0b..32de46506a 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -120,7 +120,7 @@ export function init(component, options, instance, create_fragment, not_equal, p on_disconnect: [], before_update: [], after_update: [], - context: new Map(parent_component ? parent_component.$$.context : []), + context: new Map(parent_component ? parent_component.$$.context : options.context || []), // everything else callbacks: blank_object(), diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index 2d843abb2f..5e7977571c 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -74,12 +74,12 @@ export function debug(file, line, column, values) { let on_destroy; export function create_ssr_component(fn) { - function $$render(result, props, bindings, slots) { + function $$render(result, props, bindings, slots, context) { const parent_component = current_component; const $$ = { on_destroy, - context: new Map(parent_component ? parent_component.$$.context : []), + context: new Map(parent_component ? parent_component.$$.context : context || []), // these will be immediately discarded on_mount: [], @@ -97,7 +97,7 @@ export function create_ssr_component(fn) { } return { - render: (props = {}, options = {}) => { + render: (props = {}, { $$slots = {}, context = new Map() } = {}) => { on_destroy = []; const result: { @@ -109,7 +109,7 @@ export function create_ssr_component(fn) { }>; } = { title: '', head: '', css: new Set() }; - const html = $$render(result, props, {}, options); + const html = $$render(result, props, {}, $$slots, context); run_all(on_destroy); diff --git a/test/runtime/samples/constructor-pass-context/Component.svelte b/test/runtime/samples/constructor-pass-context/Component.svelte new file mode 100644 index 0000000000..ae27a0d57a --- /dev/null +++ b/test/runtime/samples/constructor-pass-context/Component.svelte @@ -0,0 +1,9 @@ + + +
{value}
+'); + + const button = target.querySelector('button'); + await button.dispatchEvent(new window.MouseEvent('click')); + + assert.deepEqual(called, ['hello world']); + + component.$destroy(); + }, + test_ssr({ assert }) { + const Component = require('./Component.svelte').default; + + const called = []; + const { html } = Component.render(undefined, { context: new Map([ + ['key', 'svelte'], + ['fn', (value) => called.push(value)] + ]) }); + assert.htmlEqual(html, '
svelte
'); + } +}; diff --git a/test/runtime/samples/constructor-pass-context/main.svelte b/test/runtime/samples/constructor-pass-context/main.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts index f44bf17ab9..e81058181d 100644 --- a/test/server-side-rendering/index.ts +++ b/test/server-side-rendering/index.ts @@ -13,6 +13,7 @@ import { shouldUpdateExpected, mkdirp } from '../helpers'; +import { set_current_component } from '../../internal'; function tryToReadFile(file) { try { @@ -127,6 +128,8 @@ describe('ssr', () => { showOutput(dir, { generate: 'ssr', format: 'cjs' }); err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), dir)}/main.svelte`; throw err; + } finally { + set_current_component(null); } }); }); @@ -223,6 +226,8 @@ describe('ssr', () => { showOutput(cwd, compileOptions); throw err; } + } finally { + set_current_component(null); } }); }); From 5ba7d35921f27ef73a0a8e6e33724e7650b546c5 Mon Sep 17 00:00:00 2001 From: Peter Boling Date: Wed, 31 Mar 2021 09:16:23 -0600 Subject: [PATCH 027/458] site: improve grammar in tutorial comment (#6156) --- .../tutorial/01-introduction/04-styling/app-a/App.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte index c13ed6f072..f945ada7d0 100644 --- a/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte +++ b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte @@ -1,5 +1,5 @@ -

This is a paragraph.

\ No newline at end of file +

This is a paragraph.

From 26d006591d289d7215af3add94e73d2e45029fa1 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 31 Mar 2021 12:14:28 -0400 Subject: [PATCH 028/458] -> v3.37.0 --- CHANGELOG.md | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86c9bff955..e1d2fe716b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.37.0 * Allow root-level context to be passed to the component constructor ([#6032](https://github.com/sveltejs/svelte/pull/6032)) diff --git a/package-lock.json b/package-lock.json index e20509316a..b5d7d5ba13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.36.0", + "version": "3.37.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index aa81e982eb..74942c9630 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.36.0", + "version": "3.37.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From c7e820e08fade3b26e84de9025cd564bac87fbed Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Thu, 1 Apr 2021 03:48:31 -0700 Subject: [PATCH 029/458] "What's new in Svelte" April newsletter (#6129) --- ...21-04-01-whats-new-in-svelte-april-2021.md | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md 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 new file mode 100644 index 0000000000..02c6216317 --- /dev/null +++ b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md @@ -0,0 +1,73 @@ +--- +title: What's new in Svelte: April 2021 +description: SvelteKit beta and new way to use slots +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte! + +## What's up with SvelteKit? +[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2). + +Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx. + +## New in Svelte & Language Tools +- Slotted components, including `` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#svelte_fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment)) +- Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**) +- Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**) +- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin. + +--- + +## Community Showcase + +**Apps & Sites** + +- [Nagato](https://nagato.app/) is a task management tool that connects popular time tracking and to-do tools all in one place. +- [type-kana](https://type-kana.cass.moe/setup) is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries. +- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA. +- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) is a website that displays music modes as interactive wheels. +- [Critical Notes](https://www.critical-notes.com/) helps game masters and players keep track of their roleplaying games campaigns and adventures. +- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) is an educational implementation of Conway's Game of Life in TypeScript + Svelte +- [foxql](https://github.com/foxql) is a peer to peer full text search engine that runs on your browser. + + +**Demos, Libraries, Tools & Components** + +- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte +- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) allows you to write your "stories" in Storybook using the Svelte syntax. More info in the [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/) +- [SelectMadu](https://github.com/pavish/select-madu) is a replacement for the select menu, with support for searching, multiple selections, async data loading and more. +- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) is a customizable CheckList built with Svelte. +- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) is a Svelte component that implements the core idea of React's ``. +- [MiniRx](https://spierala.github.io/mini-rx-store/) is a RxJS Redux Store that works with Svelte and TypeScript +- [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper +- [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty. + +**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +**Starters** + +- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) is a starter kit for Electron using SvelteKit +- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte. +- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function. + + +**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other integration examples at [sveltejs/integrations](https://github.com/sveltejs/integrations) + +**Learning Resources** +- [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) is a step-by-step tutorial walking through the new SvelteKit setup. +- [A Svelte store for prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility. +- [TypeScript support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) is an MDN guide to using TypeScript in Svelte. +- [How to merge cells with svelte-window](https://gradientdescent.de/merging-cells/) is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see [from react-window 1:1 to svelte-window](https://gradientdescent.de/porting-react-window/). +- [Easy-to-Embed Svelte Components](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) explains how to use Rollup and a script tag to embed Svelte components anywhere. +- [Convert Svelte project from Rollup to Snowpack](https://www.youtube.com/watch?v=-sHcqj4YLeQ) walks through a common migration pattern on video. +- [How to internationalize routing in Svelte & Sapper](https://www.leaf.cloud/blog/how-to-internationalize-routing-in-svelte-sapper?utm_medium=story&utm_source=reddit.com&utm_campaign=awareness&utm_content=sapper_routing) explains how leaf.cloud translated their site to Dutch. +- [Svelte Store: Reactive context using Svelte Store](https://www.youtube.com/watch?v=-rTnWlbdjoY) is a video answer to the question, "How do we make [a] context value reactive?" +- [Creating Social Sharing Images with Cloudinary and Svelte](https://www.youtube.com/watch?v=-Si5o-R7KHY) is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website. + + +## See you next month! + +Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! From 5c309a5a78670186b0807d90255f605447749a80 Mon Sep 17 00:00:00 2001 From: Antony Jones Date: Fri, 9 Apr 2021 00:23:21 +0100 Subject: [PATCH 030/458] Add sponsorship button --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000000..d632634540 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: svelte From 3b4d53e6111e2e77a74452f0bf9a835467f93dc3 Mon Sep 17 00:00:00 2001 From: Fielding Johnston Date: Fri, 9 Apr 2021 10:32:17 -0500 Subject: [PATCH 031/458] fix(store): add missing `derived` type definition (#6172) --- src/runtime/store/index.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts index 45877d861f..cf15db5250 100644 --- a/src/runtime/store/index.ts +++ b/src/runtime/store/index.ts @@ -133,6 +133,20 @@ export function derived( initial_value?: T ): Readable; +/** + * Derived value store by synchronizing one or more readable stores and + * applying an aggregation function over its input values. + * + * @param stores - input stores + * @param fn - function callback that aggregates the values + * @param initial_value - initial value + */ +export function derived( + stores: S, + fn: (values: StoresValues) => T, + initial_value?: T +): Readable; + /** * Derived value store by synchronizing one or more readable stores and * applying an aggregation function over its input values. From 52d6a5905dac89f8c0581868baa3344274f0f088 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 11 Apr 2021 17:49:23 +0200 Subject: [PATCH 032/458] Update unreleased --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1d2fe716b..efc891eca2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* 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)) + ## 3.37.0 * Allow root-level context to be passed to the component constructor ([#6032](https://github.com/sveltejs/svelte/pull/6032)) From a55295de8ceea6cb0506652ae64dd98f912e26ce Mon Sep 17 00:00:00 2001 From: Geoff Rich Date: Sun, 11 Apr 2021 17:01:41 -0700 Subject: [PATCH 033/458] docs: mention that svelte:self can be in a slot (#6184) --- 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 0e0e8e4008..85b6ef553e 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1430,7 +1430,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit The `` element allows a component to include itself, recursively. -It cannot appear at the top level of your markup; it must be inside an if or each block to prevent an infinite loop. +It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop. ```sv +

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; - -