From 14f33cfe6191f63b9ac3f6d4b273c67b1cdec955 Mon Sep 17 00:00:00 2001 From: Sanguansak Petchmeesri Date: Sat, 3 Dec 2022 22:42:34 +0700 Subject: [PATCH 01/30] [docs] add rel noreferrer to fix warning in tutorial (#8024) Co-authored-by: vaishnav Co-authored-by: Alfredo Vecino Co-authored-by: Yuichiro Yamashita --- .../09-transitions/06-deferred-transitions/App.svelte | 4 ++-- .../examples/21-miscellaneous/01-hacker-news/Summary.svelte | 4 ++-- .../tutorial/04-logic/04-each-blocks/app-a/App.svelte | 2 +- .../tutorial/04-logic/04-each-blocks/app-b/App.svelte | 2 +- site/content/tutorial/04-logic/04-each-blocks/text.md | 6 +++--- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte index f8c74081fe..5ee7da1263 100644 --- a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte +++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte @@ -56,8 +56,8 @@ >

- via Flickr – - {d.license.name} + via Flickr – + {d.license.name}

{/await} diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte index 08d515f3c2..2a54289119 100644 --- a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte +++ b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte @@ -13,7 +13,7 @@ @@ -37,4 +37,4 @@ a { color: #333; } - \ No newline at end of file + diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte index 34fb2cebfc..6c0cca3587 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte +++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte @@ -10,7 +10,7 @@
    -
  • +
  • {cat.name}
    • diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte index 6ea5097be2..3a13c0057f 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte +++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte @@ -10,7 +10,7 @@
      {#each cats as { id, name }, i} -
    • +
    • {i + 1}: {name}
      • {/each} diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md index 886990f5a0..c3a6c30d4e 100644 --- a/site/content/tutorial/04-logic/04-each-blocks/text.md +++ b/site/content/tutorial/04-logic/04-each-blocks/text.md @@ -7,7 +7,7 @@ If you need to loop over lists of data, use an `each` block: ```html
        {#each cats as cat} -
      • +
      • {cat.name}
        • {/each} @@ -20,10 +20,10 @@ You can get the current *index* as a second argument, like so: ```html {#each cats as cat, i} -
      • +
      • {i + 1}: {cat.name}
        • {/each} ``` -If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. \ No newline at end of file +If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. From 84d61c61f883c206b87a6fc76c5690379059f979 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 5 Dec 2022 05:43:59 -0800 Subject: [PATCH 02/30] [feat] Add options w/ direction to transitions (#8068) --- site/content/docs/03-template-syntax.md | 7 +++++- src/runtime/internal/transitions.ts | 18 ++++++++------ .../_config.js | 19 +++++++++++++++ .../main.svelte | 24 +++++++++++++++++++ .../transition-js-option-direction/_config.js | 13 ++++++++++ .../main.svelte | 20 ++++++++++++++++ 6 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-deferred-option-direction/main.svelte create mode 100644 test/runtime/samples/transition-js-option-direction/_config.js create mode 100644 test/runtime/samples/transition-js-option-direction/main.svelte diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 9afe399469..de7ded9d6c 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -971,7 +971,7 @@ transition:fn|local={params} ```js -transition = (node: HTMLElement, params: any) => { +transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => { delay?: number, duration?: number, easing?: (t: number) => number, @@ -1091,6 +1091,11 @@ A custom transition function can also return a `tick` function, which is called If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible. +Transition functions also receive a third argument, `options`, which contains information about the transition. + +Available values in the `options` object are: + +* `direction` - one of `in`, `out`, or `bidirectional` depending on the type of transition ##### Transition events diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts index 9aa45dc4f1..4705c0ac9a 100644 --- a/src/runtime/internal/transitions.ts +++ b/src/runtime/internal/transitions.ts @@ -86,10 +86,12 @@ export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, ca const null_transition: TransitionConfig = { duration: 0 }; -type TransitionFn = (node: Element, params: any) => TransitionConfig; +type TransitionOptions = { direction: 'in' | 'out' | 'both' }; +type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig; export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'in' }; + let config = fn(node, params, options); let running = false; let animation_name; let task; @@ -150,7 +152,7 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: delete_rule(node); if (is_function(config)) { - config = config(); + config = config(options); wait().then(go); } else { go(); @@ -171,7 +173,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: } export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'out' }; + let config = fn(node, params, options); let running = true; let animation_name; @@ -224,7 +227,7 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); go(); }); } else { @@ -264,7 +267,8 @@ interface Program { } export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) { - let config = fn(node, params); + const options: TransitionOptions = { direction: 'both' }; + let config = fn(node, params, options); let t = intro ? 0 : 1; @@ -373,7 +377,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline if (is_function(config)) { wait().then(() => { // @ts-ignore - config = config(); + config = config(options); go(b); }); } else { diff --git a/test/runtime/samples/transition-js-deferred-option-direction/_config.js b/test/runtime/samples/transition-js-deferred-option-direction/_config.js new file mode 100644 index 0000000000..2bf448d9c7 --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/_config.js @@ -0,0 +1,19 @@ +export default { + test({ assert, component, target }) { + component.visible = true; + + const div_in = target.querySelector('#in'); + const div_out = target.querySelector('#out'); + const div_both = target.querySelector('#both'); + + assert.equal(div_in.initial, 'in'); + assert.equal(div_out.initial, 'out'); + assert.equal(div_both.initial, 'both'); + + return Promise.resolve().then(() => { + assert.equal(div_in.later, 'in'); + assert.equal(div_out.later, 'out'); + assert.equal(div_both.later, 'both'); + }); + } +}; diff --git a/test/runtime/samples/transition-js-deferred-option-direction/main.svelte b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte new file mode 100644 index 0000000000..9ac816ce75 --- /dev/null +++ b/test/runtime/samples/transition-js-deferred-option-direction/main.svelte @@ -0,0 +1,24 @@ + + +{#if visible} +
        +
        +{/if} + +{#if !visible} +
        +{/if} diff --git a/test/runtime/samples/transition-js-option-direction/_config.js b/test/runtime/samples/transition-js-option-direction/_config.js new file mode 100644 index 0000000000..649b4ec7fa --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/_config.js @@ -0,0 +1,13 @@ +export default { + test({ assert, component, target }) { + component.visible = true; + + const div_in = target.querySelector('#in'); + const div_out = target.querySelector('#out'); + const div_both = target.querySelector('#both'); + + assert.equal(div_in.direction, 'in'); + assert.equal(div_out.direction, 'out'); + assert.equal(div_both.direction, 'both'); + } +}; diff --git a/test/runtime/samples/transition-js-option-direction/main.svelte b/test/runtime/samples/transition-js-option-direction/main.svelte new file mode 100644 index 0000000000..7bae2c158d --- /dev/null +++ b/test/runtime/samples/transition-js-option-direction/main.svelte @@ -0,0 +1,20 @@ + + +{#if visible} +
        +
        +{/if} + +{#if !visible} +
        +{/if} From 6330bfc05285f945b750a3d78f28b7994d2a2e13 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 22:44:40 +0900 Subject: [PATCH 03/30] Update CHANGELOG.md --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cb521f390..65eadad36e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Svelte changelog +## Unreleased + +* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) + + ## 3.53.1 * Fix exception in `rel=` attribute check with dynamic values ([#7994](https://github.com/sveltejs/svelte/issues/7994)) From 676716979a95bf33333a2ba8185ceea63e7d7655 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 5 Dec 2022 15:00:51 +0100 Subject: [PATCH 04/30] [fix] a11y - allow fallback roles (#8045) --- src/compiler/compile/nodes/Element.ts | 77 ++++++++++--------- .../samples/a11y-aria-role/input.svelte | 8 +- .../samples/a11y-aria-role/warnings.json | 25 ++++-- 3 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index ca9bcb8c4e..a499d013e3 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -194,10 +194,10 @@ function is_valid_aria_attribute_value(schema: ARIAPropertyDefinition, value: st .indexOf(typeof value === 'string' ? value.toLowerCase() : value) > -1; case 'idlist': // if list of ids, split each return typeof value === 'string' - && value.split(' ').every((id) => typeof id === 'string'); + && value.split(regex_any_repeated_whitespaces).every((id) => typeof id === 'string'); case 'tokenlist': // if list of tokens, split each return typeof value === 'string' - && value.split(' ').every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1); + && value.split(regex_any_repeated_whitespaces).every((token) => (schema.values || []).indexOf(token.toLowerCase()) > -1); default: return false; } @@ -492,47 +492,52 @@ export default class Element extends Node { component.warn(attribute, compiler_warnings.a11y_misplaced_role(this.name)); } - const value = attribute.get_static_value() as ARIARoleDefintionKey; + const value = attribute.get_static_value(); - if (value && aria_role_abstract_set.has(value)) { - component.warn(attribute, compiler_warnings.a11y_no_abstract_role(value)); - } else if (value && !aria_role_set.has(value)) { - const match = fuzzymatch(value, aria_roles); - component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match)); - } + if (typeof value === 'string') { + value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefintionKey) => { + if (current_role && aria_role_abstract_set.has(current_role)) { + component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role)); + } else if (current_role && !aria_role_set.has(current_role)) { + const match = fuzzymatch(current_role, aria_roles); + component.warn(attribute, compiler_warnings.a11y_unknown_role(current_role, match)); + } - // no-redundant-roles - const has_redundant_role = value === a11y_implicit_semantics.get(this.name); + // no-redundant-roles + const has_redundant_role = current_role === a11y_implicit_semantics.get(this.name); - if (this.name === value || has_redundant_role) { - component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value)); - } + if (this.name === current_role || has_redundant_role) { + component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role)); + } - // Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles. - const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']); - if (!is_parent_section_or_article) { - const has_nested_redundant_role = value === a11y_nested_implicit_semantics.get(this.name); - if (has_nested_redundant_role) { - component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value)); - } - } + // Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles. + const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']); + if (!is_parent_section_or_article) { + const has_nested_redundant_role = current_role === a11y_nested_implicit_semantics.get(this.name); + if (has_nested_redundant_role) { + component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role)); + } + } - // role-has-required-aria-props - if (!is_semantic_role_element(value, this.name, attribute_map)) { - const role = roles.get(value); - if (role) { - const required_role_props = Object.keys(role.requiredProps); - const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop)); + // role-has-required-aria-props + if (!is_semantic_role_element(current_role, this.name, attribute_map)) { + const role = roles.get(current_role); + if (role) { + const required_role_props = Object.keys(role.requiredProps); + const has_missing_props = required_role_props.some(prop => !attributes.find(a => a.name === prop)); - if (has_missing_props) { - component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(value as string, required_role_props)); + if (has_missing_props) { + component.warn(attribute, compiler_warnings.a11y_role_has_required_aria_props(current_role, required_role_props)); + } + } } - } - } - // no-interactive-element-to-noninteractive-role - if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(value) || is_presentation_role(value))) { - component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(value, this.name)); + // no-interactive-element-to-noninteractive-role + if (is_interactive_element(this.name, attribute_map) && (is_non_interactive_roles(current_role) || is_presentation_role(current_role))) { + component.warn(this, compiler_warnings.a11y_no_interactive_element_to_noninteractive_role(current_role, this.name)); + } + }); + } } @@ -621,7 +626,7 @@ export default class Element extends Node { if (href_static_value === null || href_static_value.match(/^(https?:)?\/\//i)) { const rel = attribute_map.get('rel'); if (rel == null || rel.is_static) { - const rel_values = rel ? rel.get_static_value().split(' ') : []; + const rel_values = rel ? rel.get_static_value().split(regex_any_repeated_whitespaces) : []; const expected_values = ['noreferrer']; expected_values.forEach(expected_value => { if (!rel || rel && rel_values.indexOf(expected_value) < 0) { diff --git a/test/validator/samples/a11y-aria-role/input.svelte b/test/validator/samples/a11y-aria-role/input.svelte index 3089d84e5b..1dde21a2ad 100644 --- a/test/validator/samples/a11y-aria-role/input.svelte +++ b/test/validator/samples/a11y-aria-role/input.svelte @@ -1 +1,7 @@ -
        \ No newline at end of file + +
        +
        + + +
        +
        diff --git a/test/validator/samples/a11y-aria-role/warnings.json b/test/validator/samples/a11y-aria-role/warnings.json index 22fb2d52b6..2943f232f8 100644 --- a/test/validator/samples/a11y-aria-role/warnings.json +++ b/test/validator/samples/a11y-aria-role/warnings.json @@ -3,15 +3,30 @@ "code": "a11y-unknown-role", "message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)", "start": { - "line": 1, + "line": 6, "column": 5, - "character": 5 + "character": 101 }, "end": { - "line": 1, + "line": 6, "column": 20, - "character": 20 + "character": 116 }, - "pos": 5 + "pos": 101 + }, + { + "code": "a11y-unknown-role", + "message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)", + "start": { + "line": 7, + "column": 5, + "character": 129 + }, + "end": { + "line": 7, + "column": 27, + "character": 151 + }, + "pos": 129 } ] From de46e36315322f9785bb88cd0f3e78e42fd765c3 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:01:14 +0900 Subject: [PATCH 05/30] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65eadad36e..3545785f66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) +* Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) ## 3.53.1 From ed3ac92ec075dc237de2994c7f5f9a38819fd79c Mon Sep 17 00:00:00 2001 From: Bert B <44912991+bertybot@users.noreply.github.com> Date: Mon, 5 Dec 2022 09:25:25 -0500 Subject: [PATCH 06/30] [fix] Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` (#8025) * update tabindex warning to ignore tabpanels * refactor Co-authored-by: Yuichiro Yamashita --- src/compiler/compile/utils/a11y.ts | 25 +++--------- .../input.svelte | 1 + .../warnings.json | 40 +++++++++---------- 3 files changed, 26 insertions(+), 40 deletions(-) diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index b96386a3b0..d51125fa92 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/src/compiler/compile/utils/a11y.ts @@ -7,17 +7,17 @@ import { import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query'; import Attribute from '../nodes/Attribute'; -const roles = [...roles_map.keys()]; +const non_abstract_roles = [...roles_map.keys()].filter((name) => !roles_map.get(name).abstract); const non_interactive_roles = new Set( - roles + non_abstract_roles .filter((name) => { const role = roles_map.get(name); return ( - !roles_map.get(name).abstract && // 'toolbar' does not descend from widget, but it does support // aria-activedescendant, thus in practice we treat it as a widget. - name !== 'toolbar' && + // focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable. + !['toolbar', 'tabpanel'].includes(name) && !role.superClass.some((classes) => classes.includes('widget')) ); }) @@ -29,22 +29,7 @@ const non_interactive_roles = new Set( ); const interactive_roles = new Set( - roles - .filter((name) => { - const role = roles_map.get(name); - return ( - !role.abstract && - // The `progressbar` is descended from `widget`, but in practice, its - // value is always `readonly`, so we treat it as a non-interactive role. - name !== 'progressbar' && - role.superClass.some((classes) => classes.includes('widget')) - ); - }) - .concat( - // 'toolbar' does not descend from widget, but it does support - // aria-activedescendant, thus in practice we treat it as a widget. - 'toolbar' - ) + non_abstract_roles.filter((name) => !non_interactive_roles.has(name)) ); export function is_non_interactive_roles(role: ARIARoleDefintionKey) { diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte index e9ac0d3c9f..9efed4d879 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte @@ -7,6 +7,7 @@
        +
        diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json index 740d9b346c..b2c3ec4168 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json @@ -2,61 +2,61 @@ { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 241, + "character": 278, "column": 20, - "line": 11 + "line": 12 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 221, + "pos": 258, "start": { - "character": 221, + "character": 258, "column": 0, - "line": 11 + "line": 12 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 277, + "character": 314, "column": 35, - "line": 12 + "line": 13 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 242, + "pos": 279, "start": { - "character": 242, + "character": 279, "column": 0, - "line": 12 + "line": 13 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 302, + "character": 339, "column": 24, - "line": 13 + "line": 14 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 278, + "pos": 315, "start": { - "character": 278, + "character": 315, "column": 0, - "line": 13 + "line": 14 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 329, + "character": 366, "column": 26, - "line": 14 + "line": 15 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 303, + "pos": 340, "start": { - "character": 303, + "character": 340, "column": 0, - "line": 14 + "line": 15 } } ] From d2ff2aee4f6269868099dae42472c1be00d24576 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:25:55 +0900 Subject: [PATCH 07/30] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3545785f66..bdad22e607 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) - +* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) ## 3.53.1 From 4c5469b1ee55a9675240adaab5bb42ae8b7c3f3f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 5 Dec 2022 15:43:39 +0100 Subject: [PATCH 08/30] [fix] don't run binding init unnecessarily (#7981) --- .../wrappers/InlineComponent/index.ts | 2 +- src/runtime/internal/Component.ts | 6 ++++-- .../Tab.svelte | 3 +++ .../_config.js | 7 +++++++ .../main.svelte | 17 +++++++++++++++++ 5 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/_config.js create mode 100644 test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index bca01fdb4c..f7875dc1b0 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -393,7 +393,7 @@ export default class InlineComponentWrapper extends Wrapper { component.partly_hoisted.push(body); - return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`; + return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}, ${snippet}));`; }); const munged_handlers = this.node.handlers.map(handler => { diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 5aec24c651..eedf8dd1ad 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -5,11 +5,13 @@ import { children, detach, start_hydrating, end_hydrating } from './dom'; import { transition_in } from './transitions'; import { T$$ } from './types'; -export function bind(component, name, callback) { +export function bind(component, name, callback, value) { const index = component.$$.props[name]; if (index !== undefined) { component.$$.bound[index] = callback; - callback(component.$$.ctx[index]); + if (value === undefined) { + callback(component.$$.ctx[index]); + } } } diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte new file mode 100644 index 0000000000..86e2413898 --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/Tab.svelte @@ -0,0 +1,3 @@ + diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js new file mode 100644 index 0000000000..a34cf0121f --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/_config.js @@ -0,0 +1,7 @@ +export default { + async test({ assert, target }) { + assert.htmlEqual(target.innerHTML, ` +

        0

        + `); + } +}; diff --git a/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte new file mode 100644 index 0000000000..c57781cc97 --- /dev/null +++ b/test/runtime/samples/binding-no-unnecessary-invalidation/main.svelte @@ -0,0 +1,17 @@ + + + +

        {i}

        From 43905ccc22e0875f39a3e8d9317d8a75cdf974d5 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Mon, 5 Dec 2022 23:52:30 +0900 Subject: [PATCH 09/30] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bdad22e607..1209f74131 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) +* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) ## 3.53.1 From 5eb1ff9946a6a1ac2d1de838f1911cceab3723c7 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 5 Dec 2022 06:53:29 -0800 Subject: [PATCH 10/30] [docs] publish roadmap. add process section to contributor's guide and re-organize a bit (#7965) --- CONTRIBUTING.md | 94 +++++++++++++++++++++++++++---------------------- README.md | 5 +++ 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6153ae25d9..01f8728cc0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,7 +13,7 @@ There are many ways to contribute to Svelte, and many of them do not involve wri - Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues). - Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests). -- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request). +- If you find an issue you would like to fix, [open a pull request](#pull-requests). - Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page. - Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on. @@ -24,44 +24,43 @@ Contributions are very welcome. If you think you need help planning your contrib One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in. - Ask for more information if you believe the issue does not provide all the details required to solve it. -- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues. - Flag issues that are stale or that should be closed. - Ask for test plans and review code. -## Bugs +## Our process -We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). +### RFCs -If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. +If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. -If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) +### Roadmap -## Reporting new issues +When deciding where to contribute, you may wish to take a look at [our roadmap](https://svelte.dev/roadmap). The Svelte team generally works on a single major effort at a time. This has a couple benefits for us as maintainers. First, it allows us to focus and make noticeable progress in an area being proactive rather than reactive. Secondly, it allows us to handle related issues and PRs together. By batching issues and PRs together we’re able to ensure implementations and fixes holistically address the set of problems and use cases encountered by our users. -When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. +### Maintainer meetings -- **One issue, one bug:** Please report a single bug per issue. -- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. +The maintainers meet on the final Saturday of each month. While these meetings are not open publicly, we will report back by leaving a comment on each issue discussed. We will generally discuss items aligning with our roadmap, but major PRs needing discussion amongst the maintainers can be added to the agenda for the monthly maintainer’s meeting. However, we typically are only able to get to a couple of items that are not aligned with our current priority. -## RFCs +### Prioritization -If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front. +We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFC, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch. -## Installation +## Bugs -1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. -1. After cloning the repository, run `npm install` in the root of the repository. -1. To start a development server, run `npm run dev`. +We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues). -## Pull requests +If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions. -### Your first pull request +If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md) -So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at. +### Reporting new issues -Working on your first Pull Request? You can learn how from this free video series: +When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template. + +- **One issue, one bug:** Please report a single bug per issue. +- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction. -[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) +## Pull requests ### Proposing a change @@ -69,20 +68,19 @@ If you would like to request a new feature or enhancement but are not yet thinki If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue. -### Sending a pull request +Small pull requests are much easier to review and more likely to get merged. -Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. +### Installation -Please make sure the following is done when submitting a pull request: +1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed. +1. After cloning the repository, run `npm install` in the root of the repository. +1. To start a development server, run `npm run dev`. -1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. -1. Describe your **test plan** in your pull request description. Make sure to test your changes. -1. Make sure your code lints (`npm run lint`). -1. Make sure your tests pass (`npm run test`). +### Creating a branch -All pull requests should be opened against the `master` branch. +Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`. If you've never sent a GitHub pull request before, you can learn how from [this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). -#### Test plan +### Testing A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI. @@ -110,6 +108,25 @@ Test samples are kept in `/test/xxx/samples` folder. 1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`. 1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`) +### Style guide + +[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. + +#### Code conventions + +- `snake_case` for internal variable names and methods. +- `camelCase` for public variable names and methods. + +### Sending your pull request + +Please make sure the following is done when submitting a pull request: + +1. Describe your **test plan** in your pull request description. Make sure to test your changes. +1. Make sure your code lints (`npm run lint`). +1. Make sure your tests pass (`npm run test`). + +All pull requests should be opened against the `master` branch. Make sure the PR does only one thing, otherwise please split it. + #### Breaking changes When adding a new breaking change, follow this template in your pull request: @@ -123,19 +140,10 @@ When adding a new breaking change, follow this template in your pull request: - **Severity (number of people affected x effort)**: ``` -### What happens next? - -The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above. - -## Style guide - -[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`. - -### Code conventions - -- `snake_case` for internal variable names and methods. -- `camelCase` for public variable names and methods. - ## License By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE). + +## Questions + +Feel free to ask in [#contributing](https://discord.com/channels/457912077277855764/750401468569354431) on [Discord](https://svelte.dev/chat) if you have questions about our process, how to proceed, etc. diff --git a/README.md b/README.md index 97e9ab65f3..11150f39b8 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,11 @@ Svelte is an MIT-licensed open source project with its ongoing development made Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly. +## Roadmap + +You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what we're currently working on. + + ## Development Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out! From 2f61907ec136eb53528a2933b194689b98e444aa Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 5 Dec 2022 23:01:51 +0800 Subject: [PATCH 11/30] [fix] allow invalidating variables from @const declared function (#7858) --- .../compile/nodes/shared/Expression.ts | 82 +++++++++++-------- .../samples/const-tag-invalidate/_config.js | 34 ++++++++ .../samples/const-tag-invalidate/main.svelte | 16 ++++ 3 files changed, 96 insertions(+), 36 deletions(-) create mode 100644 test/runtime/samples/const-tag-invalidate/_config.js create mode 100644 test/runtime/samples/const-tag-invalidate/main.svelte diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index d726b811a1..1b1558ec17 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -274,41 +274,7 @@ export default class Expression { ); const declaration = b`const ${id} = ${node}`; - - if (owner.type === 'ConstTag') { - let child_scope = scope; - walk(node, { - enter(node: Node, parent: any) { - if (map.has(node)) child_scope = map.get(node); - if (node.type === 'Identifier' && is_reference(node, parent)) { - if (child_scope.has(node.name)) return; - this.replace(block.renderer.reference(node, ctx)); - } - }, - leave(node: Node) { - if (map.has(node)) child_scope = child_scope.parent; - } - }); - } else if (dependencies.size === 0 && contextual_dependencies.size === 0) { - // we can hoist this out of the component completely - component.fully_hoisted.push(declaration); - - this.replace(id as any); - - component.add_var(node, { - name: id.name, - internal: true, - hoistable: true, - referenced: true - }); - } else if (contextual_dependencies.size === 0) { - // function can be hoisted inside the component init - component.partly_hoisted.push(declaration); - - block.renderer.add_to_context(id.name); - this.replace(block.renderer.reference(id)); - } else { - // we need a combo block/init recipe + const extract_functions = () => { const deps = Array.from(contextual_dependencies); const function_expression = node as FunctionExpression; @@ -318,7 +284,7 @@ export default class Expression { ...function_expression.params ]; - const context_args = deps.map(name => block.renderer.reference(name)); + const context_args = deps.map(name => block.renderer.reference(name, ctx)); component.partly_hoisted.push(declaration); @@ -334,6 +300,50 @@ export default class Expression { : b`function ${id}() { return ${callee}(${context_args}); }`; + return { deps, func_declaration }; + }; + + if (owner.type === 'ConstTag') { + // we need a combo block/init recipe + if (contextual_dependencies.size === 0) { + let child_scope = scope; + walk(node, { + enter(node: Node, parent: any) { + if (map.has(node)) child_scope = map.get(node); + if (node.type === 'Identifier' && is_reference(node, parent)) { + if (child_scope.has(node.name)) return; + this.replace(block.renderer.reference(node, ctx)); + } + }, + leave(node: Node) { + if (map.has(node)) child_scope = child_scope.parent; + } + }); + } else { + const { func_declaration } = extract_functions(); + this.replace(func_declaration[0]); + } + } else if (dependencies.size === 0 && contextual_dependencies.size === 0) { + // we can hoist this out of the component completely + component.fully_hoisted.push(declaration); + + this.replace(id as any); + + component.add_var(node, { + name: id.name, + internal: true, + hoistable: true, + referenced: true + }); + } else if (contextual_dependencies.size === 0) { + // function can be hoisted inside the component init + component.partly_hoisted.push(declaration); + + block.renderer.add_to_context(id.name); + this.replace(block.renderer.reference(id)); + } else { + // we need a combo block/init recipe + const { deps, func_declaration } = extract_functions(); if (owner.type === 'Attribute' && owner.parent.name === 'slot') { const dep_scopes = new Set(deps.map(name => template_scope.get_owner(name))); diff --git a/test/runtime/samples/const-tag-invalidate/_config.js b/test/runtime/samples/const-tag-invalidate/_config.js new file mode 100644 index 0000000000..ffb1f14816 --- /dev/null +++ b/test/runtime/samples/const-tag-invalidate/_config.js @@ -0,0 +1,34 @@ +export default { + html: ` +
        [Y] A
        +
        [N] B
        +
        [N] C
        + `, + async test({ component, target, assert, window }) { + const [btn1, btn2, btn3] = target.querySelectorAll('button'); + await btn1.dispatchEvent(new window.MouseEvent('click')); + await btn2.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
        [N] A
        +
        [Y] B
        +
        [N] C
        + `); + + await btn2.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
        [N] A
        +
        [N] B
        +
        [N] C
        + `); + + await btn3.dispatchEvent(new window.MouseEvent('click')); + + assert.htmlEqual(target.innerHTML, ` +
        [N] A
        +
        [N] B
        +
        [Y] C
        + `); + } +}; diff --git a/test/runtime/samples/const-tag-invalidate/main.svelte b/test/runtime/samples/const-tag-invalidate/main.svelte new file mode 100644 index 0000000000..6e58cbd9e2 --- /dev/null +++ b/test/runtime/samples/const-tag-invalidate/main.svelte @@ -0,0 +1,16 @@ + + +{#each items as item} + {@const toggle = () => item.selected = !item.selected} +
        + {item.selected ? '[Y]' : '[N]'} + {item.name} + +
        +{/each} From d8c6ab87df1edf28e7a286818434bda8443d3f15 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Tue, 6 Dec 2022 00:02:21 +0900 Subject: [PATCH 12/30] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1209f74131..a055b2f9d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) * Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) * Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) +* Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) ## 3.53.1 From f45b8237704573fb736bd40cf7751063f61deb91 Mon Sep 17 00:00:00 2001 From: Daniel Huang <99danielh@gmail.com> Date: Mon, 5 Dec 2022 10:14:11 -0500 Subject: [PATCH 13/30] [docs] fix inconsistent margin in svelte/motion spring tutorial (#8081) --- site/content/tutorial/09-motion/02-spring/app-b/App.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte index d8a0287c2c..3ded9350a9 100644 --- a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte +++ b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte @@ -33,6 +33,7 @@ svg { width: 100%; height: 100%; + margin: -8px; } circle { fill: #ff3e00; From cc52dc442be8cb3207005d13bf9b1d521b2b0afd Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Tue, 6 Dec 2022 00:18:29 +0900 Subject: [PATCH 14/30] [docs] add explanation about property binding order (#7833) * update document * update sentence and position * update the sentence * update --- site/content/docs/03-template-syntax.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index de7ded9d6c..2d92813e89 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -124,6 +124,10 @@ An element or component can have multiple spread attributes, interspersed with r > The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable. +> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, ``, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to ``. + +> Another example is ``. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `` to make the image lazily loaded. + --- ### Text expressions From 75c3a48245295c3748a135165a4ac9947bf11ef8 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:22:36 -0500 Subject: [PATCH 15/30] update changelog --- CHANGELOG.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a055b2f9d5..0aa980597e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,11 +2,11 @@ ## Unreleased -* Add argument `option.direction` to `transition` function ([#3918](https://github.com/sveltejs/svelte/issues/3918)) +* Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) -* Suppress `a11y-no-noninteractive-tabindex` warning if an element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) -* Prevent to call unnecessary init binding ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) +* Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) +* Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) ## 3.53.1 From 94e51df07b0512de0716a0109d29c8a1d1f1ce20 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Wed, 7 Dec 2022 04:23:23 +0900 Subject: [PATCH 16/30] [fix] escape style attribute for SSR (#8087) --- src/runtime/internal/ssr.ts | 2 +- test/runtime/samples/css-vars-escape/Sub.svelte | 7 +++++++ test/runtime/samples/css-vars-escape/_config.js | 12 ++++++++++++ test/runtime/samples/css-vars-escape/main.svelte | 6 ++++++ .../samples/inline-style-directive-escape/_config.js | 12 ++++++++++++ .../inline-style-directive-escape/main.svelte | 5 +++++ 6 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 test/runtime/samples/css-vars-escape/Sub.svelte create mode 100644 test/runtime/samples/css-vars-escape/_config.js create mode 100644 test/runtime/samples/css-vars-escape/main.svelte create mode 100644 test/runtime/samples/inline-style-directive-escape/_config.js create mode 100644 test/runtime/samples/inline-style-directive-escape/main.svelte diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index 571a25f1ac..e6d747dc18 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -205,7 +205,7 @@ export function add_classes(classes) { function style_object_to_string(style_object) { return Object.keys(style_object) .filter(key => style_object[key]) - .map(key => `${key}: ${style_object[key]};`) + .map(key => `${key}: ${escape_attribute_value(style_object[key])};`) .join(' '); } diff --git a/test/runtime/samples/css-vars-escape/Sub.svelte b/test/runtime/samples/css-vars-escape/Sub.svelte new file mode 100644 index 0000000000..4781b65b36 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/Sub.svelte @@ -0,0 +1,7 @@ +
        hi
        + + diff --git a/test/runtime/samples/css-vars-escape/_config.js b/test/runtime/samples/css-vars-escape/_config.js new file mode 100644 index 0000000000..04defbdae8 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/_config.js @@ -0,0 +1,12 @@ +export default { + html: ` +
        +
        hi
        +
        + `, + ssrHtml: ` +
        +
        hi
        +
        + ` +}; diff --git a/test/runtime/samples/css-vars-escape/main.svelte b/test/runtime/samples/css-vars-escape/main.svelte new file mode 100644 index 0000000000..d18e2d57f2 --- /dev/null +++ b/test/runtime/samples/css-vars-escape/main.svelte @@ -0,0 +1,6 @@ + + + diff --git a/test/runtime/samples/inline-style-directive-escape/_config.js b/test/runtime/samples/inline-style-directive-escape/_config.js new file mode 100644 index 0000000000..31666815d9 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-escape/_config.js @@ -0,0 +1,12 @@ +export default { + html: ` +
        + `, + + test({ assert, component, target }) { + component.attack = '" onload="alert(\'uhoh2\')" data-nothing="not important'; + assert.htmlEqual(target.innerHTML, ` +
        + `); + } +}; diff --git a/test/runtime/samples/inline-style-directive-escape/main.svelte b/test/runtime/samples/inline-style-directive-escape/main.svelte new file mode 100644 index 0000000000..fd27bfda6a --- /dev/null +++ b/test/runtime/samples/inline-style-directive-escape/main.svelte @@ -0,0 +1,5 @@ + + +
        From 86524181a9b825ad2a49f3af52f501950ea627ba Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:24:27 -0500 Subject: [PATCH 17/30] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0aa980597e..315db36a18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Prevent running init binding unnecessarily ([#5689](https://github.com/sveltejs/svelte/issues/5689), [#6298](https://github.com/sveltejs/svelte/issues/6298)) * Allow updating variables from `@const` declared function ([#7843](https://github.com/sveltejs/svelte/issues/7843)) * Do not emit `a11y-no-noninteractive-tabindex` warning if element has a `tabpanel` ([#8025](https://github.com/sveltejs/svelte/pull/8025)) +* Fix escaping SSR'd values in `style:` directive ([#8085](https://github.com/sveltejs/svelte/issues/8085)) ## 3.53.1 From aa5a1cdf1a21845f8d174ebadee76564394daa81 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 6 Dec 2022 14:25:16 -0500 Subject: [PATCH 18/30] -> v3.54.0 --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 315db36a18..30e5136d0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.54.0 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) * Support fallback a11y WAI-ARIA roles ([#8044](https://github.com/sveltejs/svelte/issues/8044)) diff --git a/package-lock.json b/package-lock.json index 59c853fa4b..d57d0b3436 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", diff --git a/package.json b/package.json index 4fde354b6a..7996fd5583 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.53.1", + "version": "3.54.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From a0a6bd1f546096d9e5cac8edbec7b21d5f2d580e Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 7 Dec 2022 11:04:50 -0800 Subject: [PATCH 19/30] [docs] add some basic docs about bundler plugins (#8092) --- site/content/docs/01-getting-started.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md index 48cdbcc231..03dfb4bbcf 100644 --- a/site/content/docs/01-getting-started.md +++ b/site/content/docs/01-getting-started.md @@ -6,17 +6,16 @@ title: Getting started To try Svelte in an interactive online environment you can try [the REPL](https://svelte.dev/repl) or [StackBlitz](https://node.new/svelte). -To create a project locally, run: - +To create a project locally we recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team: ``` -npm create vite@latest myapp -- --template svelte +npm create svelte@latest myapp cd myapp npm install npm run dev ``` -Or use [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team (currently in release candidate status). +SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR. -The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and the Svelte community has created a list of integrations with various other [tooling and editors](https://sveltesociety.dev/tools). +The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well. If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte). From 512eda7a84c342b2798b2e5cffcd16068744d798 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 11 Dec 2022 21:45:11 +0100 Subject: [PATCH 20/30] [feat] add html typings (#7649) This adds typings for HTML elements and their attributes. It's supposed to be used by the new transformation in language-tools. Co-authored-by: Ignatius Bagus Co-authored-by: Lyu, Wei-Da <36730922+jasonlyu123@users.noreply.github.com> --- CHANGELOG.md | 4 + elements/index.d.ts | 1581 +++++++++++++++++++++++++++++++++++++++++ elements/package.json | 3 + package.json | 4 + 4 files changed, 1592 insertions(+) create mode 100644 elements/index.d.ts create mode 100644 elements/package.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 30e5136d0f..a92cb4472c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649)) + ## 3.54.0 * Pass `options.direction` argument to custom transition functions ([#3918](https://github.com/sveltejs/svelte/issues/3918)) diff --git a/elements/index.d.ts b/elements/index.d.ts new file mode 100644 index 0000000000..2534bfaf40 --- /dev/null +++ b/elements/index.d.ts @@ -0,0 +1,1581 @@ +// Type definitions for Svelte HTML, based on JSX React 18 typings +// Original Project/Authors: +// Type definitions for React 18.0 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana +// AssureSign +// Microsoft +// John Reilly +// Benoit Benezech +// Patricio Zavolinsky +// Eric Anderson +// Dovydas Navickas +// Josh Rutherford +// Guilherme Hübner +// Ferdy Budhidharma +// Johann Rakotoharisoa +// Olivier Pascal +// Martin Hochel +// Frank Li +// Jessica Franco +// Saransh Kataria +// Kanitkorn Sujautra +// Sebastian Silbermann +// Kyle Scully +// Cong Zhang +// Dimitri Mitropoulos +// JongChan Choi +// Victor Magalhães +// Dale Tan +// Priyanshu Rav +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +// Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined` + +type Booleanish = boolean | 'true' | 'false'; + +// +// Event Handler Types +// ---------------------------------------------------------------------- + +type EventHandler = +(event: E & { currentTarget: EventTarget & T}) => any; + +export type ClipboardEventHandler = EventHandler; +export type CompositionEventHandler = EventHandler; +export type DragEventHandler = EventHandler; +export type FocusEventHandler = EventHandler; +export type FormEventHandler = EventHandler; +export type ChangeEventHandler = EventHandler; +export type KeyboardEventHandler = EventHandler; +export type MouseEventHandler = EventHandler; +export type TouchEventHandler = EventHandler; +export type PointerEventHandler = EventHandler; +export type UIEventHandler = EventHandler; +export type WheelEventHandler = EventHandler; +export type AnimationEventHandler = EventHandler; +export type TransitionEventHandler = EventHandler; +export type MessageEventHandler = EventHandler; + +// +// DOM Attributes +// ---------------------------------------------------------------------- + +export interface DOMAttributes { + // Clipboard Events + 'on:copy'?: ClipboardEventHandler | undefined | null; + 'on:cut'?: ClipboardEventHandler | undefined | null; + 'on:paste'?: ClipboardEventHandler | undefined | null; + + // Composition Events + 'on:compositionend'?: CompositionEventHandler | undefined | null; + 'on:compositionstart'?: CompositionEventHandler | undefined | null; + 'on:compositionupdate'?: CompositionEventHandler | undefined | null; + + // Focus Events + 'on:focus'?: FocusEventHandler | undefined | null; + 'on:focusin'?: FocusEventHandler | undefined | null; + 'on:focusout'?: FocusEventHandler | undefined | null; + 'on:blur'?: FocusEventHandler | undefined | null; + + // Form Events + 'on:change'?: FormEventHandler | undefined | null; + 'on:beforeinput'?: EventHandler | undefined | null; + 'on:input'?: FormEventHandler | undefined | null; + 'on:reset'?: FormEventHandler | undefined | null; + 'on:submit'?: EventHandler | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4 + 'on:invalid'?: EventHandler | undefined | null; + 'on:formdata'?: EventHandler | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4 + + // Image Events + 'on:load'?: EventHandler | undefined | null; + 'on:error'?: EventHandler | undefined | null; // also a Media Event + + // Detail Events + 'on:toggle'?: EventHandler | undefined | null; + + // Keyboard Events + 'on:keydown'?: KeyboardEventHandler | undefined | null; + 'on:keypress'?: KeyboardEventHandler | undefined | null; + 'on:keyup'?: KeyboardEventHandler | undefined | null; + + // Media Events + 'on:abort'?: EventHandler | undefined | null; + 'on:canplay'?: EventHandler | undefined | null; + 'on:canplaythrough'?: EventHandler | undefined | null; + 'on:cuechange'?: EventHandler | undefined | null; + 'on:durationchange'?: EventHandler | undefined | null; + 'on:emptied'?: EventHandler | undefined | null; + 'on:encrypted'?: EventHandler | undefined | null; + 'on:ended'?: EventHandler | undefined | null; + 'on:loadeddata'?: EventHandler | undefined | null; + 'on:loadedmetadata'?: EventHandler | undefined | null; + 'on:loadstart'?: EventHandler | undefined | null; + 'on:pause'?: EventHandler | undefined | null; + 'on:play'?: EventHandler | undefined | null; + 'on:playing'?: EventHandler | undefined | null; + 'on:progress'?: EventHandler | undefined | null; + 'on:ratechange'?: EventHandler | undefined | null; + 'on:seeked'?: EventHandler | undefined | null; + 'on:seeking'?: EventHandler | undefined | null; + 'on:stalled'?: EventHandler | undefined | null; + 'on:suspend'?: EventHandler | undefined | null; + 'on:timeupdate'?: EventHandler | undefined | null; + 'on:volumechange'?: EventHandler | undefined | null; + 'on:waiting'?: EventHandler | undefined | null; + + // MouseEvents + 'on:auxclick'?: MouseEventHandler | undefined | null; + 'on:click'?: MouseEventHandler | undefined | null; + 'on:contextmenu'?: MouseEventHandler | undefined | null; + 'on:dblclick'?: MouseEventHandler | undefined | null; + 'on:drag'?: DragEventHandler | undefined | null; + 'on:dragend'?: DragEventHandler | undefined | null; + 'on:dragenter'?: DragEventHandler | undefined | null; + 'on:dragexit'?: DragEventHandler | undefined | null; + 'on:dragleave'?: DragEventHandler | undefined | null; + 'on:dragover'?: DragEventHandler | undefined | null; + 'on:dragstart'?: DragEventHandler | undefined | null; + 'on:drop'?: DragEventHandler | undefined | null; + 'on:mousedown'?: MouseEventHandler | undefined | null; + 'on:mouseenter'?: MouseEventHandler | undefined | null; + 'on:mouseleave'?: MouseEventHandler | undefined | null; + 'on:mousemove'?: MouseEventHandler | undefined | null; + 'on:mouseout'?: MouseEventHandler | undefined | null; + 'on:mouseover'?: MouseEventHandler | undefined | null; + 'on:mouseup'?: MouseEventHandler | undefined | null; + + // Selection Events + 'on:select'?: EventHandler | undefined | null; + 'on:selectionchange'?: EventHandler | undefined | null; + 'on:selectstart'?: EventHandler | undefined | null; + + // Touch Events + 'on:touchcancel'?: TouchEventHandler | undefined | null; + 'on:touchend'?: TouchEventHandler | undefined | null; + 'on:touchmove'?: TouchEventHandler | undefined | null; + 'on:touchstart'?: TouchEventHandler | undefined | null; + + // Pointer Events + 'on:gotpointercapture'?: PointerEventHandler | undefined | null; + 'on:pointercancel'?: PointerEventHandler | undefined | null; + 'on:pointerdown'?: PointerEventHandler | undefined | null; + 'on:pointerenter'?: PointerEventHandler | undefined | null; + 'on:pointerleave'?: PointerEventHandler | undefined | null; + 'on:pointermove'?: PointerEventHandler | undefined | null; + 'on:pointerout'?: PointerEventHandler | undefined | null; + 'on:pointerover'?: PointerEventHandler | undefined | null; + 'on:pointerup'?: PointerEventHandler | undefined | null; + 'on:lostpointercapture'?: PointerEventHandler | undefined | null; + + // UI Events + 'on:scroll'?: UIEventHandler | undefined | null; + 'on:resize'?: UIEventHandler | undefined | null; + + // Wheel Events + 'on:wheel'?: WheelEventHandler | undefined | null; + + // Animation Events + 'on:animationstart'?: AnimationEventHandler | undefined | null; + 'on:animationend'?: AnimationEventHandler | undefined | null; + 'on:animationiteration'?: AnimationEventHandler | undefined | null; + + // Transition Events + 'on:transitionstart'?: TransitionEventHandler | undefined | null; + 'on:transitionrun'?: TransitionEventHandler | undefined | null; + 'on:transitionend'?: TransitionEventHandler | undefined | null; + 'on:transitioncancel'?: TransitionEventHandler | undefined | null; + + // Svelte Transition Events + 'on:outrostart'?: EventHandler, T> | undefined | null; + 'on:outroend'?: EventHandler, T> | undefined | null; + 'on:introstart'?: EventHandler, T> | undefined | null; + 'on:introend'?: EventHandler, T> | undefined | null; + + // Message Events + 'on:message'?: MessageEventHandler | undefined | null; + 'on:messageerror'?: MessageEventHandler | undefined | null; + + // Global Events + 'on:cancel'?: EventHandler | undefined | null; + 'on:close'?: EventHandler | undefined | null; + 'on:fullscreenchange'?: EventHandler | undefined | null; + 'on:fullscreenerror'?: EventHandler | undefined | null; +} + +// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ +export interface AriaAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string | undefined | null; + /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ + 'aria-atomic'?: Booleanish | undefined | null; + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null; + /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ + 'aria-busy'?: Booleanish | undefined | null; + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: number | undefined | null; + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + 'aria-colindex'?: number | undefined | null; + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + 'aria-colspan'?: number | undefined | null; + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + * @see aria-owns. + */ + 'aria-controls'?: string | undefined | null; + /** Indicates the element that represents the current item within a container or set of related elements. */ + 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined | null; + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + 'aria-describedby'?: string | undefined | null; + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + 'aria-details'?: string | undefined | null; + /** + * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + * @see aria-hidden @see aria-readonly. + */ + 'aria-disabled'?: Booleanish | undefined | null; + /** + * Indicates what functions can be performed when a dragged object is released on the drop target. + * @deprecated in ARIA 1.1 + */ + 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null; + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + 'aria-errormessage'?: string | undefined | null; + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: Booleanish | undefined | null; + /** + * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, + * allows assistive technology to override the general default of reading in document source order. + */ + 'aria-flowto'?: string | undefined | null; + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + 'aria-grabbed'?: Booleanish | undefined | null; + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined | null; + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: Booleanish | undefined | null; + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined | null; + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + 'aria-keyshortcuts'?: string | undefined | null; + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + 'aria-label'?: string | undefined | null; + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + 'aria-labelledby'?: string | undefined | null; + /** Defines the hierarchical level of an element within a structure. */ + 'aria-level'?: number | undefined | null; + /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ + 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined | null; + /** Indicates whether an element is modal when displayed. */ + 'aria-modal'?: Booleanish | undefined | null; + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: Booleanish | undefined | null; + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: Booleanish | undefined | null; + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + 'aria-orientation'?: 'horizontal' | 'vertical' | undefined | null; + /** + * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship + * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. + * @see aria-controls. + */ + 'aria-owns'?: string | undefined | null; + /** + * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. + * A hint could be a sample value or a brief description of the expected format. + */ + 'aria-placeholder'?: string | undefined | null; + /** + * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-setsize. + */ + 'aria-posinset'?: number | undefined | null; + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined | null; + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: Booleanish | undefined | null; + /** + * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. + * @see aria-atomic. + */ + 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined | null; + /** Indicates that user input is required on the element before a form may be submitted. */ + 'aria-required'?: Booleanish | undefined | null; + /** Defines a human-readable, author-localized description for the role of an element. */ + 'aria-roledescription'?: string | undefined | null; + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + 'aria-rowcount'?: number | undefined | null; + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + 'aria-rowindex'?: number | undefined | null; + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + 'aria-rowspan'?: number | undefined | null; + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: Booleanish | undefined | null; + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + 'aria-setsize'?: number | undefined | null; + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined | null; + /** Defines the maximum allowed value for a range widget. */ + 'aria-valuemax'?: number | undefined | null; + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: number | undefined | null; + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: number | undefined | null; + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string | undefined | null; +} + +// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions +export type AriaRole = + | 'alert' + | 'alertdialog' + | 'application' + | 'article' + | 'banner' + | 'button' + | 'cell' + | 'checkbox' + | 'columnheader' + | 'combobox' + | 'complementary' + | 'contentinfo' + | 'definition' + | 'dialog' + | 'directory' + | 'document' + | 'feed' + | 'figure' + | 'form' + | 'grid' + | 'gridcell' + | 'group' + | 'heading' + | 'img' + | 'link' + | 'list' + | 'listbox' + | 'listitem' + | 'log' + | 'main' + | 'marquee' + | 'math' + | 'menu' + | 'menubar' + | 'menuitem' + | 'menuitemcheckbox' + | 'menuitemradio' + | 'navigation' + | 'none' + | 'note' + | 'option' + | 'presentation' + | 'progressbar' + | 'radio' + | 'radiogroup' + | 'region' + | 'row' + | 'rowgroup' + | 'rowheader' + | 'scrollbar' + | 'search' + | 'searchbox' + | 'separator' + | 'slider' + | 'spinbutton' + | 'status' + | 'switch' + | 'tab' + | 'table' + | 'tablist' + | 'tabpanel' + | 'term' + | 'textbox' + | 'timer' + | 'toolbar' + | 'tooltip' + | 'tree' + | 'treegrid' + | 'treeitem' + | (string & {}); + +export interface HTMLAttributes extends AriaAttributes, DOMAttributes { + // Standard HTML Attributes + accesskey?: string | undefined | null; + autofocus?: boolean | undefined | null; + class?: string | undefined | null; + contenteditable?: Booleanish | 'inherit' | undefined | null; + contextmenu?: string | undefined | null; + dir?: string | undefined | null; + draggable?: Booleanish | undefined | null; + enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null; + hidden?: boolean | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + placeholder?: string | undefined | null; + slot?: string | undefined | null; + spellcheck?: Booleanish | undefined | null; + style?: string | undefined | null; + tabindex?: number | undefined | null; + title?: string | undefined | null; + translate?: 'yes' | 'no' | '' | undefined | null; + inert?: boolean | undefined | null; + + // Unknown + radiogroup?: string | undefined | null; // , + + // WAI-ARIA + role?: AriaRole | undefined | null; + + // RDFa Attributes + about?: string | undefined | null; + datatype?: string | undefined | null; + inlist?: any; + prefix?: string | undefined | null; + property?: string | undefined | null; + resource?: string | undefined | null; + typeof?: string | undefined | null; + vocab?: string | undefined | null; + + // Non-standard Attributes + autocapitalize?: string | undefined | null; + autocorrect?: string | undefined | null; + autosave?: string | undefined | null; + color?: string | undefined | null; + itemprop?: string | undefined | null; + itemscope?: boolean | undefined | null; + itemtype?: string | undefined | null; + itemid?: string | undefined | null; + itemref?: string | undefined | null; + results?: number | undefined | null; + security?: string | undefined | null; + unselectable?: 'on' | 'off' | undefined | null; + + // Living Standard + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents + * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute + */ + inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined | null; + /** + * Specify that a standard HTML element should behave like a defined custom built-in element + * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is + */ + is?: string | undefined | null; + + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:innerHTML'?: string | undefined | null; + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + 'bind:textContent'?: string | undefined | null; + + // SvelteKit + 'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null; + 'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null; + 'data-sveltekit-reload'?: true | '' | 'off' | undefined | null; +} + +export type HTMLAttributeAnchorTarget = + | '_self' + | '_blank' + | '_parent' + | '_top' + | (string & {}); + +export interface HTMLAnchorAttributes extends HTMLAttributes { + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + ping?: string | undefined | null; + rel?: string | undefined | null; + target?: HTMLAttributeAnchorTarget | undefined | null; + type?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + + // Sapper + 'sapper:noscroll'?: true | undefined | null; + 'sapper:prefetch'?: true | undefined | null; +} + +export interface HTMLAudioAttributes extends HTMLMediaAttributes {} + +export interface HTMLAreaAttributes extends HTMLAttributes { + alt?: string | undefined | null; + coords?: string | undefined | null; + download?: any; + href?: string | undefined | null; + hreflang?: string | undefined | null; + media?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + shape?: string | undefined | null; + target?: string | undefined | null; + ping?: string | undefined | null; +} + +export interface HTMLBaseAttributes extends HTMLAttributes { + href?: string | undefined | null; + target?: string | undefined | null; +} + +export interface HTMLBlockquoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLButtonAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + name?: string | undefined | null; + type?: 'submit' | 'reset' | 'button' | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLCanvasAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColAttributes extends HTMLAttributes { + span?: number | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLColgroupAttributes extends HTMLAttributes { + span?: number | undefined | null; +} + +export interface HTMLDataAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLDetailsAttributes extends HTMLAttributes { + open?: boolean | undefined | null; + + 'bind:open'?: boolean | undefined | null; +} + +export interface HTMLDelAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export interface HTMLDialogAttributes extends HTMLAttributes { + open?: boolean | undefined | null; +} + +export interface HTMLEmbedAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLFieldsetAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + form?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLFormAttributes extends HTMLAttributes { + acceptcharset?: string | undefined | null; + action?: string | undefined | null; + autocomplete?: string | undefined | null; + enctype?: string | undefined | null; + method?: string | undefined | null; + name?: string | undefined | null; + novalidate?: boolean | undefined | null; + target?: string | undefined | null; + rel?: string | undefined | null; +} + +export interface HTMLHtmlAttributes extends HTMLAttributes { + manifest?: string | undefined | null; +} + +export interface HTMLIframeAttributes extends HTMLAttributes { + allow?: string | undefined | null; + allowfullscreen?: boolean | undefined | null; + allowtransparency?: boolean | undefined | null; + /** @deprecated */ + frameborder?: number | string | undefined | null; + height?: number | string | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + /** @deprecated */ + marginheight?: number | undefined | null; + /** @deprecated */ + marginwidth?: number | undefined | null; + name?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sandbox?: string | undefined | null; + /** @deprecated */ + scrolling?: string | undefined | null; + seamless?: boolean | undefined | null; + src?: string | undefined | null; + srcdoc?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLImgAttributes extends HTMLAttributes { + alt?: string | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + decoding?: 'async' | 'auto' | 'sync' | undefined | null; + height?: number | string | undefined | null; + ismap?: boolean | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLInsAttributes extends HTMLAttributes { + cite?: string | undefined | null; + datetime?: string | undefined | null; +} + +export type HTMLInputTypeAttribute = + | 'button' + | 'checkbox' + | 'color' + | 'date' + | 'datetime-local' + | 'email' + | 'file' + | 'hidden' + | 'image' + | 'month' + | 'number' + | 'password' + | 'radio' + | 'range' + | 'reset' + | 'search' + | 'submit' + | 'tel' + | 'text' + | 'time' + | 'url' + | 'week' + | (string & {}); + +export interface HTMLInputAttributes extends HTMLAttributes { + accept?: string | undefined | null; + alt?: string | undefined | null; + autocomplete?: string | undefined | null; + capture?: boolean | 'user' | 'environment' | undefined | null; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute + checked?: boolean | undefined | null; + crossorigin?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + height?: number | string | undefined | null; + list?: string | undefined | null; + max?: number | string | undefined | null; + maxlength?: number | undefined | null; + min?: number | string | undefined | null; + minlength?: number | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + pattern?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + src?: string | undefined | null; + step?: number | string | undefined | null; + type?: HTMLInputTypeAttribute | undefined | null; + value?: any; + width?: number | string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:checked'?: boolean | undefined | null; + 'bind:value'?: any; + 'bind:group'?: any | undefined | null; + 'bind:files'?: FileList | undefined | null; + 'bind:indeterminate'?: boolean | undefined | null; +} + +export interface HTMLKeygenAttributes extends HTMLAttributes { + challenge?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + keytype?: string | undefined | null; + keyparams?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLLabelAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; +} + +export interface HTMLLiAttributes extends HTMLAttributes { + value?: string | string[] | number | undefined | null; +} + +export interface HTMLLinkAttributes extends HTMLAttributes { + as?: string | undefined | null; + crossorigin?: string | undefined | null; + href?: string | undefined | null; + hreflang?: string | undefined | null; + integrity?: string | undefined | null; + media?: string | undefined | null; + imagesrcset?: string | undefined | null; + imagesizes?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + rel?: string | undefined | null; + sizes?: string | undefined | null; + type?: string | undefined | null; + charset?: string | undefined | null; +} + +export interface HTMLMapAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLMenuAttributes extends HTMLAttributes { + type?: string | undefined | null; +} + +export interface HTMLMediaAttributes extends HTMLAttributes { + autoplay?: boolean | undefined | null; + controls?: boolean | undefined | null; + controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback' | (string & {}) | undefined | null; + crossorigin?: string | undefined | null; + currenttime?: number | undefined | null; + defaultmuted?: boolean | undefined | null; + defaultplaybackrate?: number | undefined | null; + loop?: boolean | undefined | null; + mediagroup?: string | undefined | null; + muted?: boolean | undefined | null; + playsinline?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + /** + * a value between 0 and 1 + */ + volume?: number | undefined | null; + + readonly 'bind:duration'?: number | undefined | null; + readonly 'bind:buffered'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:played'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seekable'?: SvelteMediaTimeRange[] | undefined | null; + readonly 'bind:seeking'?: boolean | undefined | null; + readonly 'bind:ended'?: boolean | undefined | null; + 'bind:muted'?: boolean | undefined | null; + 'bind:volume'?: number | undefined | null; + /** + * the current playback time in the video, in seconds + */ + 'bind:currentTime'?: number | undefined | null; + /** + * how fast or slow to play the video, where 1 is 'normal' + */ + 'bind:playbackRate'?: number | undefined | null; + 'bind:paused'?: boolean | undefined | null; +} + +export interface HTMLMetaAttributes extends HTMLAttributes { + charSet?: string | undefined | null; + content?: string | undefined | null; + httpequiv?: string | undefined | null; + name?: string | undefined | null; + media?: string | undefined | null; +} + +export interface HTMLMeterAttributes extends HTMLAttributes { + form?: string | undefined | null; + high?: number | undefined | null; + low?: number | undefined | null; + max?: number | string | undefined | null; + min?: number | string | undefined | null; + optimum?: number | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLQuoteAttributes extends HTMLAttributes { + cite?: string | undefined | null; +} + +export interface HTMLObjectAttributes extends HTMLAttributes { + classid?: string | undefined | null; + data?: string | undefined | null; + form?: string | undefined | null; + height?: number | string | undefined | null; + name?: string | undefined | null; + type?: string | undefined | null; + usemap?: string | undefined | null; + width?: number | string | undefined | null; + wmode?: string | undefined | null; +} + +export interface HTMLOlAttributes extends HTMLAttributes { + reversed?: boolean | undefined | null; + start?: number | undefined | null; + type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined | null; +} + +export interface HTMLOptgroupAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; +} + +export interface HTMLOptionAttributes extends HTMLAttributes { + disabled?: boolean | undefined | null; + label?: string | undefined | null; + selected?: boolean | undefined | null; + value?: any; +} + +export interface HTMLOutputAttributes extends HTMLAttributes { + form?: string | undefined | null; + for?: string | undefined | null; + name?: string | undefined | null; +} + +export interface HTMLParamAttributes extends HTMLAttributes { + name?: string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLProgressAttributes extends HTMLAttributes { + max?: number | string | undefined | null; + value?: string | string[] | number | undefined | null; +} + +export interface HTMLSlotAttributes extends HTMLAttributes { + name?: string | undefined | null; +} + +export interface HTMLScriptAttributes extends HTMLAttributes { + async?: boolean | undefined | null; + /** @deprecated */ + charset?: string | undefined | null; + crossorigin?: string | undefined | null; + defer?: boolean | undefined | null; + integrity?: string | undefined | null; + nomodule?: boolean | undefined | null; + nonce?: string | undefined | null; + referrerpolicy?: ReferrerPolicy | undefined | null; + src?: string | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLSelectAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + multiple?: boolean | undefined | null; + name?: string | undefined | null; + required?: boolean | undefined | null; + size?: number | undefined | null; + value?: any; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLSourceAttributes extends HTMLAttributes { + height?: number | string | undefined | null; + media?: string | undefined | null; + sizes?: string | undefined | null; + src?: string | undefined | null; + srcset?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLStyleAttributes extends HTMLAttributes { + media?: string | undefined | null; + nonce?: string | undefined | null; + scoped?: boolean | undefined | null; + type?: string | undefined | null; +} + +export interface HTMLTableAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | undefined | null; + bgcolor?: string | undefined | null; + border?: number | undefined | null; + cellpadding?: number | string | undefined | null; + cellspacing?: number | string | undefined | null; + frame?: boolean | undefined | null; + rules?: 'none' | 'groups' | 'rows' | 'columns' | 'all' | undefined | null; + summary?: string | undefined | null; + width?: number | string | undefined | null; +} + +export interface HTMLTextareaAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; + cols?: number | undefined | null; + dirname?: string | undefined | null; + disabled?: boolean | undefined | null; + form?: string | undefined | null; + maxlength?: number | undefined | null; + minlength?: number | undefined | null; + name?: string | undefined | null; + placeholder?: string | undefined | null; + readonly?: boolean | undefined | null; + required?: boolean | undefined | null; + rows?: number | undefined | null; + value?: string | string[] | number | undefined | null; + wrap?: string | undefined | null; + + 'on:change'?: ChangeEventHandler | undefined | null; + + 'bind:value'?: any; +} + +export interface HTMLTdAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; + height?: number | string | undefined | null; + width?: number | string | undefined | null; + valign?: 'top' | 'middle' | 'bottom' | 'baseline' | undefined | null; +} + +export interface HTMLThAttributes extends HTMLAttributes { + align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined | null; + colspan?: number | undefined | null; + headers?: string | undefined | null; + rowspan?: number | undefined | null; + scope?: string | undefined | null; + abbr?: string | undefined | null; +} + +export interface HTMLTimeAttributes extends HTMLAttributes { + datetime?: string | undefined | null; +} + +export interface HTMLTrackAttributes extends HTMLAttributes { + default?: boolean | undefined | null; + kind?: string | undefined | null; + label?: string | undefined | null; + src?: string | undefined | null; + srclang?: string | undefined | null; +} + +export interface HTMLVideoAttributes extends HTMLMediaAttributes { + height?: number | string | undefined | null; + playsinline?: boolean | undefined | null; + poster?: string | undefined | null; + width?: number | string | undefined | null; + disablepictureinpicture?: boolean | undefined | null; + disableremoteplayback?: boolean | undefined | null; + + readonly 'bind:videoWidth'?: number | undefined | null; + readonly 'bind:videoHeight'?: number | undefined | null; +} + +export interface SvelteMediaTimeRange { + start: number; + end: number; +} + +export interface SvelteWindowAttributes extends HTMLAttributes { + readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null; + readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null; + readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null; + readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null; + 'bind:scrollX'?: Window['scrollX'] | undefined | null; + 'bind:scrollY'?: Window['scrollY'] | undefined | null; + readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null; + + // SvelteKit + 'on:sveltekit:start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-start'?: EventHandler | undefined | null; + 'on:sveltekit:navigation-end'?: EventHandler | undefined | null; + + 'on:devicelight'?: EventHandler | undefined | null; + 'on:beforeinstallprompt'?: EventHandler | undefined | null; + 'on:deviceproximity'?: EventHandler | undefined | null; + 'on:paint'?: EventHandler | undefined | null; + 'on:userproximity'?: EventHandler | undefined | null; + 'on:beforeprint'?: EventHandler | undefined | null; + 'on:afterprint'?: EventHandler | undefined | null; + 'on:languagechange'?: EventHandler | undefined | null; + 'on:orientationchange'?: EventHandler | undefined | null; + 'on:message'?: EventHandler | undefined | null; + 'on:messageerror'?: EventHandler | undefined | null; + 'on:offline'?: EventHandler | undefined | null; + 'on:online'?: EventHandler | undefined | null; + 'on:beforeunload'?: EventHandler | undefined | null; + 'on:unload'?: EventHandler | undefined | null; + 'on:storage'?: EventHandler | undefined | null; + 'on:hashchange'?: EventHandler | undefined | null; + 'on:pagehide'?: EventHandler | undefined | null; + 'on:pageshow'?: EventHandler | undefined | null; + 'on:popstate'?: EventHandler | undefined | null; + 'on:devicemotion'?: EventHandler | undefined | null; + 'on:deviceorientation'?: EventHandler | undefined | null; + 'on:deviceorientationabsolute'?: EventHandler | undefined | null; + 'on:unhandledrejection'?: EventHandler | undefined | null; + 'on:rejectionhandled'?: EventHandler | undefined | null; +} + +export interface SVGAttributes extends AriaAttributes, DOMAttributes { + // Attributes which also defined in HTMLAttributes + className?: string | undefined | null; + class?: string | undefined | null; + color?: string | undefined | null; + height?: number | string | undefined | null; + id?: string | undefined | null; + lang?: string | undefined | null; + max?: number | string | undefined | null; + media?: string | undefined | null; + method?: string | undefined | null; + min?: number | string | undefined | null; + name?: string | undefined | null; + style?: string | undefined | null; + target?: string | undefined | null; + type?: string | undefined | null; + width?: number | string | undefined | null; + + // Other HTML properties supported by SVG elements in browsers + role?: AriaRole | undefined | null; + tabindex?: number | undefined | null; + crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null; + + // SVG Specific attributes + 'accent-height'?: number | string | undefined | null; + accumulate?: 'none' | 'sum' | undefined | null; + additive?: 'replace' | 'sum' | undefined | null; + 'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | + 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | + 'mathematical' | 'inherit' | undefined | null; + allowReorder?: 'no' | 'yes' | undefined | null; + alphabetic?: number | string | undefined | null; + amplitude?: number | string | undefined | null; + 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined | null; + ascent?: number | string | undefined | null; + attributeName?: string | undefined | null; + attributeType?: string | undefined | null; + autoReverse?: number | string | undefined | null; + azimuth?: number | string | undefined | null; + baseFrequency?: number | string | undefined | null; + 'baseline-shift'?: number | string | undefined | null; + baseProfile?: number | string | undefined | null; + bbox?: number | string | undefined | null; + begin?: number | string | undefined | null; + bias?: number | string | undefined | null; + by?: number | string | undefined | null; + calcMode?: number | string | undefined | null; + 'cap-height'?: number | string | undefined | null; + clip?: number | string | undefined | null; + 'clip-path'?: string | undefined | null; + clipPathUnits?: number | string | undefined | null; + 'clip-rule'?: number | string | undefined | null; + 'color-interpolation'?: number | string | undefined | null; + 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined | null; + 'color-profile'?: number | string | undefined | null; + 'color-rendering'?: number | string | undefined | null; + contentScriptType?: number | string | undefined | null; + contentStyleType?: number | string | undefined | null; + cursor?: number | string | undefined | null; + cx?: number | string | undefined | null; + cy?: number | string | undefined | null; + d?: string | undefined | null; + decelerate?: number | string | undefined | null; + descent?: number | string | undefined | null; + diffuseConstant?: number | string | undefined | null; + direction?: number | string | undefined | null; + display?: number | string | undefined | null; + divisor?: number | string | undefined | null; + 'dominant-baseline'?: number | string | undefined | null; + dur?: number | string | undefined | null; + dx?: number | string | undefined | null; + dy?: number | string | undefined | null; + edgeMode?: number | string | undefined | null; + elevation?: number | string | undefined | null; + 'enable-background'?: number | string | undefined | null; + end?: number | string | undefined | null; + exponent?: number | string | undefined | null; + externalResourcesRequired?: number | string | undefined | null; + fill?: string | undefined | null; + 'fill-opacity'?: number | string | undefined | null; + 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined | null; + filter?: string | undefined | null; + filterRes?: number | string | undefined | null; + filterUnits?: number | string | undefined | null; + 'flood-color'?: number | string | undefined | null; + 'flood-opacity'?: number | string | undefined | null; + focusable?: number | string | undefined | null; + 'font-family'?: string | undefined | null; + 'font-size'?: number | string | undefined | null; + 'font-size-adjust'?: number | string | undefined | null; + 'font-stretch'?: number | string | undefined | null; + 'font-style'?: number | string | undefined | null; + 'font-variant'?: number | string | undefined | null; + 'font-weight'?: number | string | undefined | null; + format?: number | string | undefined | null; + from?: number | string | undefined | null; + fx?: number | string | undefined | null; + fy?: number | string | undefined | null; + g1?: number | string | undefined | null; + g2?: number | string | undefined | null; + 'glyph-name'?: number | string | undefined | null; + 'glyph-orientation-horizontal'?: number | string | undefined | null; + 'glyph-orientation-vertical'?: number | string | undefined | null; + glyphRef?: number | string | undefined | null; + gradientTransform?: string | undefined | null; + gradientUnits?: string | undefined | null; + hanging?: number | string | undefined | null; + href?: string | undefined | null; + 'horiz-adv-x'?: number | string | undefined | null; + 'horiz-origin-x'?: number | string | undefined | null; + ideographic?: number | string | undefined | null; + 'image-rendering'?: number | string | undefined | null; + in2?: number | string | undefined | null; + in?: string | undefined | null; + intercept?: number | string | undefined | null; + k1?: number | string | undefined | null; + k2?: number | string | undefined | null; + k3?: number | string | undefined | null; + k4?: number | string | undefined | null; + k?: number | string | undefined | null; + kernelMatrix?: number | string | undefined | null; + kernelUnitLength?: number | string | undefined | null; + kerning?: number | string | undefined | null; + keyPoints?: number | string | undefined | null; + keySplines?: number | string | undefined | null; + keyTimes?: number | string | undefined | null; + lengthAdjust?: number | string | undefined | null; + 'letter-spacing'?: number | string | undefined | null; + 'lighting-color'?: number | string | undefined | null; + limitingConeAngle?: number | string | undefined | null; + local?: number | string | undefined | null; + 'marker-end'?: string | undefined | null; + markerHeight?: number | string | undefined | null; + 'marker-mid'?: string | undefined | null; + 'marker-start'?: string | undefined | null; + markerUnits?: number | string | undefined | null; + markerWidth?: number | string | undefined | null; + mask?: string | undefined | null; + maskContentUnits?: number | string | undefined | null; + maskUnits?: number | string | undefined | null; + mathematical?: number | string | undefined | null; + mode?: number | string | undefined | null; + numOctaves?: number | string | undefined | null; + offset?: number | string | undefined | null; + opacity?: number | string | undefined | null; + operator?: number | string | undefined | null; + order?: number | string | undefined | null; + orient?: number | string | undefined | null; + orientation?: number | string | undefined | null; + origin?: number | string | undefined | null; + overflow?: number | string | undefined | null; + 'overline-position'?: number | string | undefined | null; + 'overline-thickness'?: number | string | undefined | null; + 'paint-order'?: number | string | undefined | null; + 'panose-1'?: number | string | undefined | null; + path?: string | undefined | null; + pathLength?: number | string | undefined | null; + patternContentUnits?: string | undefined | null; + patternTransform?: number | string | undefined | null; + patternUnits?: string | undefined | null; + 'pointer-events'?: number | string | undefined | null; + points?: string | undefined | null; + pointsAtX?: number | string | undefined | null; + pointsAtY?: number | string | undefined | null; + pointsAtZ?: number | string | undefined | null; + preserveAlpha?: number | string | undefined | null; + preserveAspectRatio?: string | undefined | null; + primitiveUnits?: number | string | undefined | null; + r?: number | string | undefined | null; + radius?: number | string | undefined | null; + refX?: number | string | undefined | null; + refY?: number | string | undefined | null; + 'rendering-intent'?: number | string | undefined | null; + repeatCount?: number | string | undefined | null; + repeatDur?: number | string | undefined | null; + requiredExtensions?: number | string | undefined | null; + requiredFeatures?: number | string | undefined | null; + restart?: number | string | undefined | null; + result?: string | undefined | null; + rotate?: number | string | undefined | null; + rx?: number | string | undefined | null; + ry?: number | string | undefined | null; + scale?: number | string | undefined | null; + seed?: number | string | undefined | null; + 'shape-rendering'?: number | string | undefined | null; + slope?: number | string | undefined | null; + spacing?: number | string | undefined | null; + specularConstant?: number | string | undefined | null; + specularExponent?: number | string | undefined | null; + speed?: number | string | undefined | null; + spreadMethod?: string | undefined | null; + startOffset?: number | string | undefined | null; + stdDeviation?: number | string | undefined | null; + stemh?: number | string | undefined | null; + stemv?: number | string | undefined | null; + stitchTiles?: number | string | undefined | null; + 'stop-color'?: string | undefined | null; + 'stop-opacity'?: number | string | undefined | null; + 'strikethrough-position'?: number | string | undefined | null; + 'strikethrough-thickness'?: number | string | undefined | null; + string?: number | string | undefined | null; + stroke?: string | undefined | null; + 'stroke-dasharray'?: string | number | undefined | null; + 'stroke-dashoffset'?: string | number | undefined | null; + 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' | undefined | null; + 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined | null; + 'stroke-miterlimit'?: string | undefined | null; + 'stroke-opacity'?: number | string | undefined | null; + 'stroke-width'?: number | string | undefined | null; + surfaceScale?: number | string | undefined | null; + systemLanguage?: number | string | undefined | null; + tableValues?: number | string | undefined | null; + targetX?: number | string | undefined | null; + targetY?: number | string | undefined | null; + 'text-anchor'?: string | undefined | null; + 'text-decoration'?: number | string | undefined | null; + textLength?: number | string | undefined | null; + 'text-rendering'?: number | string | undefined | null; + to?: number | string | undefined | null; + transform?: string | undefined | null; + u1?: number | string | undefined | null; + u2?: number | string | undefined | null; + 'underline-position'?: number | string | undefined | null; + 'underline-thickness'?: number | string | undefined | null; + unicode?: number | string | undefined | null; + 'unicode-bidi'?: number | string | undefined | null; + 'unicode-range'?: number | string | undefined | null; + 'units-per-em'?: number | string | undefined | null; + 'v-alphabetic'?: number | string | undefined | null; + values?: string | undefined | null; + 'vector-effect'?: number | string | undefined | null; + version?: string | undefined | null; + 'vert-adv-y'?: number | string | undefined | null; + 'vert-origin-x'?: number | string | undefined | null; + 'vert-origin-y'?: number | string | undefined | null; + 'v-hanging'?: number | string | undefined | null; + 'v-ideographic'?: number | string | undefined | null; + viewBox?: string | undefined | null; + viewTarget?: number | string | undefined | null; + visibility?: number | string | undefined | null; + 'v-mathematical'?: number | string | undefined | null; + widths?: number | string | undefined | null; + 'word-spacing'?: number | string | undefined | null; + 'writing-mode'?: number | string | undefined | null; + x1?: number | string | undefined | null; + x2?: number | string | undefined | null; + x?: number | string | undefined | null; + xChannelSelector?: string | undefined | null; + 'x-height'?: number | string | undefined | null; + 'xlink:actuate'?: string | undefined | null; + 'xlink:arcrole'?: string | undefined | null; + 'xlink:href'?: string | undefined | null; + 'xlink:role'?: string | undefined | null; + 'xlink:show'?: string | undefined | null; + 'xlink:title'?: string | undefined | null; + 'xlink:type'?: string | undefined | null; + 'xml:base'?: string | undefined | null; + 'xml:lang'?: string | undefined | null; + xmlns?: string | undefined | null; + 'xmlns:xlink'?: string | undefined | null; + 'xml:space'?: string | undefined | null; + y1?: number | string | undefined | null; + y2?: number | string | undefined | null; + y?: number | string | undefined | null; + yChannelSelector?: string | undefined | null; + z?: number | string | undefined | null; + zoomAndPan?: string | undefined | null; +} + +export interface HTMLWebViewAttributes extends HTMLAttributes { + allowfullscreen?: boolean | undefined | null; + allowpopups?: boolean | undefined | null; + autosize?: boolean | undefined | null; + blinkfeatures?: string | undefined | null; + disableblinkfeatures?: string | undefined | null; + disableguestresize?: boolean | undefined | null; + disablewebsecurity?: boolean | undefined | null; + guestinstance?: string | undefined | null; + httpreferrer?: string | undefined | null; + nodeintegration?: boolean | undefined | null; + partition?: string | undefined | null; + plugins?: boolean | undefined | null; + preload?: string | undefined | null; + src?: string | undefined | null; + useragent?: string | undefined | null; + webpreferences?: string | undefined | null; +} + +// +// DOM Elements +// ---------------------------------------------------------------------- + +export interface SvelteHTMLElements { + a: HTMLAnchorAttributes; + abbr: HTMLAttributes; + address: HTMLAttributes; + area: HTMLAreaAttributes; + article: HTMLAttributes; + aside: HTMLAttributes; + audio: HTMLAudioAttributes; + b: HTMLAttributes; + base: HTMLBaseAttributes; + bdi: HTMLAttributes; + bdo: HTMLAttributes; + big: HTMLAttributes; + blockquote: HTMLBlockquoteAttributes; + body: HTMLAttributes; + br: HTMLAttributes; + button: HTMLButtonAttributes; + canvas: HTMLCanvasAttributes; + caption: HTMLAttributes; + cite: HTMLAttributes; + code: HTMLAttributes; + col: HTMLColAttributes; + colgroup: HTMLColgroupAttributes; + data: HTMLDataAttributes; + datalist: HTMLAttributes; + dd: HTMLAttributes; + del: HTMLDelAttributes; + details: HTMLDetailsAttributes; + dfn: HTMLAttributes; + dialog: HTMLDialogAttributes; + div: HTMLAttributes; + dl: HTMLAttributes; + dt: HTMLAttributes; + em: HTMLAttributes; + embed: HTMLEmbedAttributes; + fieldset: HTMLFieldsetAttributes; + figcaption: HTMLAttributes; + figure: HTMLAttributes; + footer: HTMLAttributes; + form: HTMLFormAttributes; + h1: HTMLAttributes; + h2: HTMLAttributes; + h3: HTMLAttributes; + h4: HTMLAttributes; + h5: HTMLAttributes; + h6: HTMLAttributes; + head: HTMLAttributes; + header: HTMLAttributes; + hgroup: HTMLAttributes; + hr: HTMLAttributes; + html: HTMLHtmlAttributes; + i: HTMLAttributes; + iframe: HTMLIframeAttributes; + img: HTMLImgAttributes; + input: HTMLInputAttributes; + ins: HTMLInsAttributes; + kbd: HTMLAttributes; + keygen: HTMLKeygenAttributes; + label: HTMLLabelAttributes; + legend: HTMLAttributes; + li: HTMLLiAttributes; + link: HTMLLinkAttributes; + main: HTMLAttributes; + map: HTMLMapAttributes; + mark: HTMLAttributes; + menu: HTMLMenuAttributes; + menuitem: HTMLAttributes; + meta: HTMLMetaAttributes; + meter: HTMLMeterAttributes; + nav: HTMLAttributes; + noscript: HTMLAttributes; + object: HTMLObjectAttributes; + ol: HTMLOlAttributes; + optgroup: HTMLOptgroupAttributes; + option: HTMLOptionAttributes; + output: HTMLOutputAttributes; + p: HTMLAttributes; + param: HTMLParamAttributes; + picture: HTMLAttributes; + pre: HTMLAttributes; + progress: HTMLProgressAttributes; + q: HTMLQuoteAttributes; + rp: HTMLAttributes; + rt: HTMLAttributes; + ruby: HTMLAttributes; + s: HTMLAttributes; + samp: HTMLAttributes; + slot: HTMLSlotAttributes; + script: HTMLScriptAttributes; + section: HTMLAttributes; + select: HTMLSelectAttributes; + small: HTMLAttributes; + source: HTMLSourceAttributes; + span: HTMLAttributes; + strong: HTMLAttributes; + style: HTMLStyleAttributes; + sub: HTMLAttributes; + summary: HTMLAttributes; + sup: HTMLAttributes; + table: HTMLTableAttributes; + template: HTMLAttributes; + tbody: HTMLAttributes; + td: HTMLTdAttributes; + textarea: HTMLTextareaAttributes; + tfoot: HTMLAttributes; + th: HTMLThAttributes; + thead: HTMLAttributes; + time: HTMLTimeAttributes; + title: HTMLAttributes; + tr: HTMLAttributes; + track: HTMLTrackAttributes; + u: HTMLAttributes; + ul: HTMLAttributes; + var: HTMLAttributes; + video: HTMLVideoAttributes; + wbr: HTMLAttributes; + webview: HTMLWebViewAttributes; + // SVG + svg: SVGAttributes; + + animate: SVGAttributes; + animateMotion: SVGAttributes; + animateTransform: SVGAttributes; + circle: SVGAttributes; + clipPath: SVGAttributes; + defs: SVGAttributes; + desc: SVGAttributes; + ellipse: SVGAttributes; + feBlend: SVGAttributes; + feColorMatrix: SVGAttributes; + feComponentTransfer: SVGAttributes; + feComposite: SVGAttributes; + feConvolveMatrix: SVGAttributes; + feDiffuseLighting: SVGAttributes; + feDisplacementMap: SVGAttributes; + feDistantLight: SVGAttributes; + feDropShadow: SVGAttributes; + feFlood: SVGAttributes; + feFuncA: SVGAttributes; + feFuncB: SVGAttributes; + feFuncG: SVGAttributes; + feFuncR: SVGAttributes; + feGaussianBlur: SVGAttributes; + feImage: SVGAttributes; + feMerge: SVGAttributes; + feMergeNode: SVGAttributes; + feMorphology: SVGAttributes; + feOffset: SVGAttributes; + fePointLight: SVGAttributes; + feSpecularLighting: SVGAttributes; + feSpotLight: SVGAttributes; + feTile: SVGAttributes; + feTurbulence: SVGAttributes; + filter: SVGAttributes; + foreignObject: SVGAttributes; + g: SVGAttributes; + image: SVGAttributes; + line: SVGAttributes; + linearGradient: SVGAttributes; + marker: SVGAttributes; + mask: SVGAttributes; + metadata: SVGAttributes; + mpath: SVGAttributes; + path: SVGAttributes; + pattern: SVGAttributes; + polygon: SVGAttributes; + polyline: SVGAttributes; + radialGradient: SVGAttributes; + rect: SVGAttributes; + stop: SVGAttributes; + switch: SVGAttributes; + symbol: SVGAttributes; + text: SVGAttributes; + textPath: SVGAttributes; + tspan: SVGAttributes; + use: SVGAttributes; + view: SVGAttributes; + + // Svelte specific + 'svelte:window': SvelteWindowAttributes; + 'svelte:body': HTMLAttributes; + 'svelte:fragment': { slot?: string }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; + + [name: string]: { [name: string]: any }; +} diff --git a/elements/package.json b/elements/package.json new file mode 100644 index 0000000000..1704e6b78b --- /dev/null +++ b/elements/package.json @@ -0,0 +1,3 @@ +{ + "types": "./index.d.ts" +} diff --git a/package.json b/package.json index 7996fd5583..fa7a97cbfd 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "easing", "motion", "action", + "elements", "README.md" ], "exports": { @@ -75,6 +76,9 @@ "import": "./transition/index.mjs", "require": "./transition/index.js" }, + "./elements": { + "types": "./elements/index.d.ts" + }, "./ssr": { "types": "./types/runtime/index.d.ts", "import": "./ssr.mjs", From 3ba0e304166f7d5dfc608fdf2696a8f4cbc2b4f0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 13 Dec 2022 09:04:08 -0500 Subject: [PATCH 21/30] -> v3.55.0 --- CHANGELOG.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a92cb4472c..190caaf6e1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.55.0 * Add `svelte/elements` for HTML/Svelte typings ([#7649](https://github.com/sveltejs/svelte/pull/7649)) diff --git a/package-lock.json b/package-lock.json index d57d0b3436..eeef42a72c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", diff --git a/package.json b/package.json index fa7a97cbfd..8839b95c75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.54.0", + "version": "3.55.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From ad8dbfb9b923182872f781210b6c69beff6a2a24 Mon Sep 17 00:00:00 2001 From: Nilesh <19304+nileshtrivedi@users.noreply.github.com> Date: Thu, 15 Dec 2022 12:47:02 +0000 Subject: [PATCH 22/30] [docs] Add comment about generating a Svelte project without Kit (#8115) --- site/content/docs/01-getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/01-getting-started.md b/site/content/docs/01-getting-started.md index 03dfb4bbcf..2362925beb 100644 --- a/site/content/docs/01-getting-started.md +++ b/site/content/docs/01-getting-started.md @@ -16,6 +16,8 @@ npm run dev SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. [SvelteKit](https://kit.svelte.dev/) utilizes [Vite](https://vitejs.dev/) to build your code and handle server-side rendering (SSR). There are [plugins for all the major web bundlers](https://sveltesociety.dev/tools#bundling) to handle Svelte compilation, which will output `.js` and `.css` that you can insert into your HTML, but most others won't handle SSR. +If you don't need a full-fledged app framework and instead want to build a simple frontend-only site/app, you can also use Svelte (without Kit) with Vite by running `npm init vite` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. + The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/tools#editor-support) and tools as well. If you're having trouble, get help on [Discord](https://svelte.dev/chat) or [StackOverflow](https://stackoverflow.com/questions/tagged/svelte). From 670f4580568fe8ea31097981ba2d59c33daf0725 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 16 Dec 2022 10:33:36 +0100 Subject: [PATCH 23/30] [docs] adjust code snippet to conform with previous one Backported from https://github.com/sveltejs/learn.svelte.dev/pull/143 --- site/content/tutorial/04-logic/06-await-blocks/text.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md index 0d47dcde95..1814681341 100644 --- a/site/content/tutorial/04-logic/06-await-blocks/text.md +++ b/site/content/tutorial/04-logic/06-await-blocks/text.md @@ -19,7 +19,7 @@ Most web applications have to deal with asynchronous data at some point. Svelte If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: ```html -{#await promise then value} -

        the value is {value}

        +{#await promise then number} +

        the number is {number}

        {/await} -``` \ No newline at end of file +``` From eef125f6c1d586ec4ed4a75ae8a93c54870a2e12 Mon Sep 17 00:00:00 2001 From: gaac510 <74474003+gaac510@users.noreply.github.com> Date: Tue, 20 Dec 2022 08:47:31 +1100 Subject: [PATCH 24/30] [docs] update outdated SvelteKit release info (#8128) Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .../tutorial/01-introduction/07-making-an-app/text.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md index 4ba5908137..dc3fe7adad 100644 --- a/site/content/tutorial/01-introduction/07-making-an-app/text.md +++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md @@ -4,15 +4,13 @@ title: Making an app This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. -First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)... +First, you'll need to integrate Svelte with a build tool. We recommend using [SvelteKit](https://kit.svelte.dev), which sets up [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/) for you... ```bash -npm create vite@latest my-app -- --template svelte +npm create svelte@latest myapp ``` -...or one of the [community-maintained integrations](https://sveltesociety.dev/tools). - -> [SvelteKit](https://kit.svelte.dev) is the official application framework from the Svelte team. It's currently in development, but if you don't mind using pre-1.0 software then it's the recommended way to build Svelte apps. +There are also a number of [community-maintained integrations](https://sveltesociety.dev/tools). Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process. From b8bc1be0a8bc4f5cf9e78fa44ae7e22e724dc985 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 20 Dec 2022 11:09:50 -0500 Subject: [PATCH 25/30] remove blog content. it now lives in sites repo (#8117) --- ...-11-26-frameworks-without-the-framework.md | 55 ----- ...17-08-07-the-easiest-way-to-get-started.md | 66 ------ .../2017-09-06-the-zen-of-just-writing-css.md | 78 ------- ...per-towards-the-ideal-web-app-framework.md | 84 -------- site/content/blog/2018-04-18-version-2.md | 204 ------------------ .../blog/2018-12-26-svelte-css-in-js.md | 29 --- ...2018-12-27-virtual-dom-is-pure-overhead.md | 149 ------------- .../2019-01-31-svelte-on-the-changelog.md | 21 -- .../blog/2019-04-15-setting-up-your-editor.md | 65 ------ .../2019-04-16-svelte-for-new-developers.md | 100 --------- .../blog/2019-04-20-write-less-code.md | 164 -------------- ...19-04-22-svelte-3-rethinking-reactivity.md | 97 --------- .../blog/2020-07-17-svelte-and-typescript.md | 141 ------------ ...-10-01-whats-new-in-svelte-october-2020.md | 85 -------- ...11-01-whats-new-in-svelte-november-2020.md | 46 ---- ...020-11-05-whats-the-deal-with-sveltekit.md | 103 --------- ...12-01-whats-new-in-svelte-december-2020.md | 71 ------ ...-01-01-whats-new-in-svelte-january-2021.md | 86 -------- ...02-01-whats-new-in-svelte-february-2021.md | 86 -------- ...21-03-01-whats-new-in-svelte-march-2021.md | 104 --------- .../content/blog/2021-03-23-sveltekit-beta.md | 67 ------ ...21-04-01-whats-new-in-svelte-april-2021.md | 73 ------- ...2021-05-01-whats-new-in-svelte-may-2021.md | 76 ------- ...021-06-01-whats-new-in-svelte-june-2021.md | 65 ------ ...021-07-01-whats-new-in-svelte-july-2021.md | 65 ------ ...1-08-01-whats-new-in-svelte-august-2021.md | 71 ------ ...9-01-whats-new-in-svelte-september-2021.md | 83 ------- ...-10-01-whats-new-in-svelte-october-2021.md | 99 --------- ...11-01-whats-new-in-svelte-november-2021.md | 85 -------- ...12-01-whats-new-in-svelte-december-2021.md | 91 -------- ...-01-01-whats-new-in-svelte-january-2022.md | 77 ------- ...-01-13-accelerating-sveltes-development.md | 67 ------ ...02-01-whats-new-in-svelte-february-2022.md | 106 --------- ...22-03-01-whats-new-in-svelte-march-2022.md | 87 -------- ...22-04-01-whats-new-in-svelte-april-2022.md | 104 --------- ...2022-05-01-whats-new-in-svelte-may-2022.md | 89 -------- ...022-06-01-whats-new-in-svelte-june-2022.md | 113 ---------- ...022-07-01-whats-new-in-svelte-july-2022.md | 98 --------- ...2-08-01-whats-new-in-svelte-august-2022.md | 119 ---------- ...9-01-whats-new-in-svelte-september-2022.md | 105 --------- ...-10-01-whats-new-in-svelte-october-2022.md | 139 ------------ ...11-01-whats-new-in-svelte-november-2022.md | 116 ---------- ...12-01-whats-new-in-svelte-december-2022.md | 102 --------- 43 files changed, 3931 deletions(-) delete mode 100644 site/content/blog/2016-11-26-frameworks-without-the-framework.md delete mode 100644 site/content/blog/2017-08-07-the-easiest-way-to-get-started.md delete mode 100644 site/content/blog/2017-09-06-the-zen-of-just-writing-css.md delete mode 100644 site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md delete mode 100644 site/content/blog/2018-04-18-version-2.md delete mode 100644 site/content/blog/2018-12-26-svelte-css-in-js.md delete mode 100644 site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md delete mode 100644 site/content/blog/2019-01-31-svelte-on-the-changelog.md delete mode 100644 site/content/blog/2019-04-15-setting-up-your-editor.md delete mode 100644 site/content/blog/2019-04-16-svelte-for-new-developers.md delete mode 100644 site/content/blog/2019-04-20-write-less-code.md delete mode 100644 site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md delete mode 100644 site/content/blog/2020-07-17-svelte-and-typescript.md delete mode 100644 site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md delete mode 100644 site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md delete mode 100644 site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md delete mode 100644 site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md delete mode 100644 site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md delete mode 100644 site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md delete mode 100644 site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md delete mode 100644 site/content/blog/2021-03-23-sveltekit-beta.md delete mode 100644 site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md delete mode 100644 site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md delete mode 100644 site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md delete mode 100644 site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md delete mode 100644 site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md delete mode 100644 site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md delete mode 100644 site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md delete mode 100644 site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md delete mode 100644 site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md delete mode 100644 site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md delete mode 100644 site/content/blog/2022-01-13-accelerating-sveltes-development.md delete mode 100644 site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md delete mode 100644 site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md delete mode 100644 site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md delete mode 100644 site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md delete mode 100644 site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md delete mode 100644 site/content/blog/2022-07-01-whats-new-in-svelte-july-2022.md delete mode 100644 site/content/blog/2022-08-01-whats-new-in-svelte-august-2022.md delete mode 100644 site/content/blog/2022-09-01-whats-new-in-svelte-september-2022.md delete mode 100644 site/content/blog/2022-10-01-whats-new-in-svelte-october-2022.md delete mode 100644 site/content/blog/2022-11-01-whats-new-in-svelte-november-2022.md delete mode 100644 site/content/blog/2022-12-01-whats-new-in-svelte-december-2022.md 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 deleted file mode 100644 index b29525dec3..0000000000 --- a/site/content/blog/2016-11-26-frameworks-without-the-framework.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -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 ---- - -> Wait, this new framework has a *runtime*? Ugh. Thanks, I'll pass. -> **– front end developers in 2018** - -We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what *really* mattered was performance once your app was already interactive. - -But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly. - -If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing. - -Perhaps we need to rethink the whole thing. - - -## What problem do frameworks *really* solve? - -The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks *move the complexity around*, away from code that you had to write and into code you didn't. - -Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your *concepts*. Frameworks are primarily a tool for structuring your thoughts, not your code. - -Given that, what if the framework *didn't actually run in the browser*? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser. - - -## Introducing Svelte - -Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](https://v2.svelte.dev/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible. - -The [Svelte implementation of TodoMVC](https://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC. - -And once your app *is* up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).) - -It's basically as fast as vanilla JS, which makes sense because it *is* vanilla JS – just vanilla JS that you didn't have to write. - - -## But that's not the important thing - -Well, it *is* important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development. - -Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.) - -Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, *you still have to serve React itself*. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny. - -Finally, something I've wrestled with a great deal as an open source maintainer: your users always want *their* features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary. - - -## We're just getting started - -Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on. - -But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](https://v2.svelte.dev/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development. diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md deleted file mode 100644 index 29e59270d0..0000000000 --- a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: The easiest way to get started with Svelte -description: This'll only take a minute. -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a ` diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md deleted file mode 100644 index 65d0234645..0000000000 --- a/site/content/blog/2019-04-15-setting-up-your-editor.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Setting up your editor -description: Instructions for configuring linting and syntax highlighting -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris -draft: true ---- - -*__Coming soon__* - -This post will walk you through setting up your editor so that it recognises Svelte files: - -* eslint-plugin-svelte3 -* svelte-vscode -* associating .svelte files with HTML in VSCode, Sublime, etc. - -## Atom - -To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the following lines to your `core` section: - -```cson -"*": - core: - … - customFileTypes: - "text.html.basic": [ - "svelte" - ] -``` - -## Vim/Neovim - -You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server. - -As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`: - -``` -au! BufNewFile,BufRead *.svelte set ft=html -``` - -To temporarily turn on HTML syntax highlighting for the current buffer, use: - -``` -:set ft=html -``` - -To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic): - -``` - -``` - -## Visual Studio Code - -We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). - -## JetBrains WebStorm - -The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details. - -## Sublime Text 3 - -Open any `.svelte` file. - -Go to *__View → Syntax → Open all with current extension as... → HTML__*. diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md deleted file mode 100644 index 834e042138..0000000000 --- a/site/content/blog/2019-04-16-svelte-for-new-developers.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Svelte for new developers -description: Never used Node.js or the command line? No problem -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running. - -If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people. - -If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat). - - -## First things first - -You'll be using the *command line*, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line. - -The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day. - -Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type - -```bash -cd Development -``` - -to go to it. From there, you could create a new project directory with the `mkdir` command: - -```bash -mkdir svelte-projects -cd svelte-projects -``` - -A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands: - -* `cd ..` — navigates to the parent of the current directory -* `cat my-file.txt` — on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt` -* `open .` (or `start .` on Windows) — opens the current directory in Finder or File Explorer - - -## Installing Node.js - -[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/). - -Once installed, you'll have access to three new commands: - -* `node my-file.js` — runs the JavaScript in `my-file.js` -* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package -* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them - - -## Installing a text editor - -To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components). - - -## Creating a project - -We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work. - -On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it): - -```bash -npm create vite@latest my-svelte-project -- --template svelte -cd my-svelte-project -npm install -``` - -> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript. - -This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`. - -In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following: - -```bash -npm run dev -``` - -Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser. - -Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local *web server* (hence 'localhost') on port 5173. - -Try changing `src/App.svelte` and saving it. The application will update with your changes. - - -## Building your app - -In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed. - -When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command: - -```bash -npm run build -``` - -Your `dist` directory now contains an optimised version of your app. You can run it like so: - -```bash -npm run preview -``` diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md deleted file mode 100644 index 97e020af90..0000000000 --- a/site/content/blog/2019-04-20-write-less-code.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Write less code -description: The most important metric you're not paying attention to -author: Rich Harris -authorURL: https://twitter.com/Rich_Harris ---- - -All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. - -Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop. - -In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in *more* code. It's a vicious cycle. - -Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing. - - -## Readability is important - -I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this... - -```js -for (let i = 0; i <= 100; i += 1) { - if (i % 2 === 0) { - console.log(`${i} is even`); - } -} -``` - -...into something much harder to parse: - -```js -for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`); -``` - -Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code. - - -## Yes, I'm talking about Svelte - -Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version: - -
        - -
        - -How would we build this in React? It would probably look something like this: - -```js -import React, { useState } from 'react'; - -export default () => { - const [a, setA] = useState(1); - const [b, setB] = useState(2); - - function handleChangeA(event) { - setA(+event.target.value); - } - - function handleChangeB(event) { - setB(+event.target.value); - } - - return ( -
        - - - -

        {a} + {b} = {a + b}

        -
        - ); -}; -``` - -Here's an equivalent component in Vue: - -```html - - - -``` - - - -In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger! - -It's unusual for the difference to be *quite* so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely: - - -### Top-level elements - -In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `
        `, but it's the same basic idea, and still results in an extra level of indentation). - -In Vue, your markup must be wrapped in a `