From ae71152013ef47cb917c371156a69224248d174c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 15 May 2025 11:18:55 -0400 Subject: [PATCH 1/6] docs: clarify keyed each blocks (#15923) --- documentation/docs/03-template-syntax/03-each.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md index 70666f6a5798..006cadd15257 100644 --- a/documentation/docs/03-template-syntax/03-each.md +++ b/documentation/docs/03-template-syntax/03-each.md @@ -43,7 +43,9 @@ An each block can also specify an _index_, equivalent to the second argument in {#each expression as name, index (key)}...{/each} ``` -If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change. +If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle. + +The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change. ```svelte {#each items as item (item.id)} From 17a7cf51e44dfb7704e6b2559e14e63f22972cd3 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 15 May 2025 11:19:09 -0400 Subject: [PATCH 2/6] docs: clarify ordering of attributes with spread (#15917) --- documentation/docs/03-template-syntax/01-basic-markup.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md index fe5f8b02aae0..feecfe033e63 100644 --- a/documentation/docs/03-template-syntax/01-basic-markup.md +++ b/documentation/docs/03-template-syntax/01-basic-markup.md @@ -82,12 +82,14 @@ As with elements, `name={name}` can be replaced with the `{name}` shorthand. ``` +## Spread attributes + _Spread attributes_ allow many attributes or properties to be passed to an element or component at once. -An element or component can have multiple spread attributes, interspersed with regular ones. +An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a="b"`, while `c="d"` would take precedence over `things.c`: ```svelte - + ``` ## Events From a5a0b49003d9cb544ed7919a4320870bda237833 Mon Sep 17 00:00:00 2001 From: Matteo Battista Date: Thu, 15 May 2025 18:14:18 +0200 Subject: [PATCH 3/6] fix: update_branch with (anchor).data possible undefined on ios devices (#15851) * fix: update_branch with (anchor).data possible undefined * error sooner * add tests * changeset --------- Co-authored-by: Rich Harris --- .changeset/silly-apples-remain.md | 5 +++++ .../svelte/src/internal/client/dom/blocks/each.js | 3 ++- .../svelte/src/internal/client/dom/blocks/if.js | 4 +++- .../svelte/src/internal/client/dom/hydration.js | 13 +++++++++++++ .../samples/cloudflare-mirage-borking-2/_config.js | 6 ++++++ .../cloudflare-mirage-borking-2/_expected.html | 1 + .../cloudflare-mirage-borking-2/_override.html | 1 + .../samples/cloudflare-mirage-borking-2/main.svelte | 5 +++++ .../samples/cloudflare-mirage-borking/_config.js | 6 ++++++ .../cloudflare-mirage-borking/_expected.html | 1 + .../cloudflare-mirage-borking/_override.html | 1 + .../samples/cloudflare-mirage-borking/main.svelte | 9 +++++++++ 12 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 .changeset/silly-apples-remain.md create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html create mode 100644 packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte diff --git a/.changeset/silly-apples-remain.md b/.changeset/silly-apples-remain.md new file mode 100644 index 000000000000..10d43db55087 --- /dev/null +++ b/.changeset/silly-apples-remain.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: handle more hydration mismatches diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js index 92c953b541f8..2997664fa259 100644 --- a/packages/svelte/src/internal/client/dom/blocks/each.js +++ b/packages/svelte/src/internal/client/dom/blocks/each.js @@ -12,6 +12,7 @@ import { hydrate_next, hydrate_node, hydrating, + read_hydration_instruction, remove_nodes, set_hydrate_node, set_hydrating @@ -160,7 +161,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f let mismatch = false; if (hydrating) { - var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE; + var is_else = read_hydration_instruction(anchor) === HYDRATION_START_ELSE; if (is_else !== (length === 0)) { // hydration mismatch — remove the server-rendered DOM and start over diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js index 925abb9d9d46..bf1098c3f465 100644 --- a/packages/svelte/src/internal/client/dom/blocks/if.js +++ b/packages/svelte/src/internal/client/dom/blocks/if.js @@ -4,6 +4,7 @@ import { hydrate_next, hydrate_node, hydrating, + read_hydration_instruction, remove_nodes, set_hydrate_node, set_hydrating @@ -56,7 +57,8 @@ export function if_block(node, fn, [root_index, hydrate_index] = [0, 0]) { if (hydrating && hydrate_index !== -1) { if (root_index === 0) { - const data = /** @type {Comment} */ (anchor).data; + const data = read_hydration_instruction(anchor); + if (data === HYDRATION_START) { hydrate_index = 0; } else if (data === HYDRATION_START_ELSE) { diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js index 8523ff97d559..ab3256da82db 100644 --- a/packages/svelte/src/internal/client/dom/hydration.js +++ b/packages/svelte/src/internal/client/dom/hydration.js @@ -103,3 +103,16 @@ export function remove_nodes() { node = next; } } + +/** + * + * @param {TemplateNode} node + */ +export function read_hydration_instruction(node) { + if (!node || node.nodeType !== 8) { + w.hydration_mismatch(); + throw HYDRATION_ERROR; + } + + return /** @type {Comment} */ (node).data; +} diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js new file mode 100644 index 000000000000..56ba73b06408 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js @@ -0,0 +1,6 @@ +import { test } from '../../test'; + +// https://github.com/sveltejs/svelte/issues/15819 +export default test({ + expect_hydration_error: true +}); diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html new file mode 100644 index 000000000000..5179fb04a5f7 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html @@ -0,0 +1 @@ +

start

cond

diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html new file mode 100644 index 000000000000..2a1c32328897 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html @@ -0,0 +1 @@ +

start

cond

diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte new file mode 100644 index 000000000000..bfb4f2cdb8cf --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte @@ -0,0 +1,5 @@ + + +

start

{#if cond}

cond

{/if} diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js new file mode 100644 index 000000000000..56ba73b06408 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js @@ -0,0 +1,6 @@ +import { test } from '../../test'; + +// https://github.com/sveltejs/svelte/issues/15819 +export default test({ + expect_hydration_error: true +}); diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html new file mode 100644 index 000000000000..f6c03b87c1c2 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html @@ -0,0 +1 @@ +

start

pre123 mid diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html new file mode 100644 index 000000000000..c84efbb00bd2 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html @@ -0,0 +1 @@ +

start

pre123 mid diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte new file mode 100644 index 000000000000..2c9a94686eb3 --- /dev/null +++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte @@ -0,0 +1,9 @@ + + +

start

+pre123 +{#if cond} +mid +{/if} From 60b22ab933c45ce329f4e7919be0b0b73a65ecbb Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Sat, 17 May 2025 10:07:21 +0200 Subject: [PATCH 4/6] fix: falsy attachments types (#15939) --- .changeset/chilled-otters-hear.md | 5 +++++ packages/svelte/elements.d.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/chilled-otters-hear.md diff --git a/.changeset/chilled-otters-hear.md b/.changeset/chilled-otters-hear.md new file mode 100644 index 000000000000..53a9872d9611 --- /dev/null +++ b/.changeset/chilled-otters-hear.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: falsy attachments types diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index c63713736594..237e96c69919 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -863,8 +863,8 @@ export interface HTMLAttributes extends AriaAttributes, D // allow any data- attribute [key: `data-${string}`]: any; - // allow any attachment - [key: symbol]: Attachment; + // allow any attachment and falsy values (by using false we prevent the usage of booleans values by themselves) + [key: symbol]: Attachment | false | undefined | null; } export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}); From c7e4b8e765ee3e5f184d736ed401e63124065753 Mon Sep 17 00:00:00 2001 From: pengqiseven <134899215+pengqiseven@users.noreply.github.com> Date: Sat, 17 May 2025 16:10:54 +0800 Subject: [PATCH 5/6] chore: remove redundant word in comment (#15942) Signed-off-by: pengqiseven <912170095@qq.com> --- .../svelte/src/compiler/phases/2-analyze/visitors/Attribute.js | 2 +- .../phases/3-transform/client/visitors/RegularElement.js | 2 +- packages/svelte/src/internal/client/dom/elements/class.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js index 3ba81767cce3..773aa597444b 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js @@ -211,7 +211,7 @@ function get_delegated_event(event_name, handler, context) { if ( binding !== null && - // Bail out if the the binding is a rest param + // Bail out if the binding is a rest param (binding.declaration_kind === 'rest_param' || // Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode, (((!context.state.analysis.runes && binding.kind === 'each') || diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js index ab981878ad78..1d39289f3df2 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js @@ -564,7 +564,7 @@ export function build_style_directives_object(style_directives, context) { /** * Serializes an assignment to an element property by adding relevant statements to either only - * the init or the the init and update arrays, depending on whether or not the value is dynamic. + * the init or the init and update arrays, depending on whether or not the value is dynamic. * Resulting code for static looks something like this: * ```js * element.property = value; diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js index fc081b895653..038ce33f3eee 100644 --- a/packages/svelte/src/internal/client/dom/elements/class.js +++ b/packages/svelte/src/internal/client/dom/elements/class.js @@ -24,7 +24,7 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes) if (!hydrating || next_class_name !== dom.getAttribute('class')) { // Removing the attribute when the value is only an empty string causes // performance issues vs simply making the className an empty string. So - // we should only remove the class if the the value is nullish + // we should only remove the class if the value is nullish // and there no hash/directives : if (next_class_name == null) { dom.removeAttribute('class'); From c365634ace068698e29c0331399f3a8c03ad5467 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 17 May 2025 05:04:39 -0400 Subject: [PATCH 6/6] Version Packages (#15931) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/chilled-otters-hear.md | 5 ----- .changeset/silly-apples-remain.md | 5 ----- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) delete mode 100644 .changeset/chilled-otters-hear.md delete mode 100644 .changeset/silly-apples-remain.md diff --git a/.changeset/chilled-otters-hear.md b/.changeset/chilled-otters-hear.md deleted file mode 100644 index 53a9872d9611..000000000000 --- a/.changeset/chilled-otters-hear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: falsy attachments types diff --git a/.changeset/silly-apples-remain.md b/.changeset/silly-apples-remain.md deleted file mode 100644 index 10d43db55087..000000000000 --- a/.changeset/silly-apples-remain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: handle more hydration mismatches diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 2b65a1889ffa..9d5cfe1334ee 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,13 @@ # svelte +## 5.30.2 + +### Patch Changes + +- fix: falsy attachments types ([#15939](https://github.com/sveltejs/svelte/pull/15939)) + +- fix: handle more hydration mismatches ([#15851](https://github.com/sveltejs/svelte/pull/15851)) + ## 5.30.1 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index b6e8d06c638c..4ec70a88b5ee 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.30.1", + "version": "5.30.2", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index b849318036b1..a5cc8b719185 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.30.1'; +export const VERSION = '5.30.2'; export const PUBLIC_VERSION = '5'; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy