From a0ab52bee57d16bf889d7e60ac6c0f115a958661 Mon Sep 17 00:00:00 2001 From: adiguba Date: Sat, 1 Mar 2025 14:23:28 +0100 Subject: [PATCH 1/6] set_attributes for --- .../3-transform/client/visitors/SvelteElement.js | 15 ++++++++++++--- .../3-transform/client/visitors/shared/element.js | 8 +++++--- .../internal/client/dom/blocks/svelte-element.js | 12 +++++++++--- .../internal/client/dom/elements/attributes.js | 2 +- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js index 7149f8d0e4af..2a3d1d537b52 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js @@ -114,8 +114,8 @@ export function SvelteElement(node, context) { node, element_id, attributes_id, - b.binary('===', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')), - b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-')) + b.id('$$preserve_attribute_case'), + b.id('$$is_custom_element') ); } @@ -158,7 +158,16 @@ export function SvelteElement(node, context) { context.state.node, get_tag, node.metadata.svg || node.metadata.mathml ? b.true : b.false, - inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)), + inner.length > 0 && + b.arrow( + [ + element_id, + b.id('$$anchor'), + b.id('$$preserve_attribute_case'), + b.id('$$is_custom_element') + ], + b.block(inner) + ), dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context).value), location && b.array([b.literal(location.line), b.literal(location.column)]) ) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js index 81a4b45288eb..06e36f585577 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js @@ -88,9 +88,11 @@ export function build_set_attributes( element_id, is_dynamic ? attributes_id : b.literal(null), b.object(values), - element.metadata.scoped && - context.state.analysis.css.hash !== '' && - b.literal(context.state.analysis.css.hash), + element.metadata.scoped && context.state.analysis.css.hash !== '' + ? b.literal(context.state.analysis.css.hash) + : is_custom_element + ? b.null + : false, preserve_attribute_case, is_custom_element, is_ignored(element, 'hydration_attribute_changed') && b.true diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index 18641300e537..779fe92c9b99 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -1,5 +1,5 @@ /** @import { Effect, TemplateNode } from '#client' */ -import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js'; +import { FILENAME, NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js'; import { hydrate_next, hydrate_node, @@ -28,7 +28,7 @@ import { is_raw_text_element } from '../../../../utils.js'; * @param {Comment | Element} node * @param {() => string} get_tag * @param {boolean} is_svg - * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn, + * @param {undefined | ((element: Element, anchor: Node | null, preserve_attribute_case: boolean, is_custom_element: boolean) => void)} render_fn, * @param {undefined | (() => string)} get_namespace * @param {undefined | [number, number]} location * @returns {void} @@ -137,11 +137,17 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio } } + var is_custom_element = element.nodeName.includes('-'); + var preserve_attribute_case = + is_custom_element || + element.namespaceURI === NAMESPACE_SVG || + element.namespaceURI === NAMESPACE_MATHML; + // `child_anchor` is undefined if this is a void element, but we still // need to call `render_fn` in order to run actions etc. If the element // contains children, it's a user error (which is warned on elsewhere) // and the DOM will be silently discarded - render_fn(element, child_anchor); + render_fn(element, child_anchor, preserve_attribute_case, is_custom_element); } // we do this after calling `render_fn` so that child effects don't override `nodes.end` diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index dd408dcf8715..aa1d2696216a 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -432,7 +432,7 @@ export function set_attributes( // @ts-ignore element[name] = value; } else if (typeof value !== 'function') { - set_attribute(element, name, value); + set_attribute(element, name, value, skip_warning); } } if (key === 'style' && '__styles' in element) { From ddde140d228c6e309b184de96e8048593665e765 Mon Sep 17 00:00:00 2001 From: adiguba Date: Sat, 1 Mar 2025 14:27:47 +0100 Subject: [PATCH 2/6] changeset --- .changeset/wise-hats-wonder.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wise-hats-wonder.md diff --git a/.changeset/wise-hats-wonder.md b/.changeset/wise-hats-wonder.md new file mode 100644 index 000000000000..51938e62589e --- /dev/null +++ b/.changeset/wise-hats-wonder.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: small tweaks on set_attributes() From 74bbc55d900077285e97a89163ad43438d1a8b42 Mon Sep 17 00:00:00 2001 From: adiGuba Date: Tue, 4 Mar 2025 14:10:45 +0100 Subject: [PATCH 3/6] Update .changeset/wise-hats-wonder.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .changeset/wise-hats-wonder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/wise-hats-wonder.md b/.changeset/wise-hats-wonder.md index 51938e62589e..4d49f8febcb3 100644 --- a/.changeset/wise-hats-wonder.md +++ b/.changeset/wise-hats-wonder.md @@ -2,4 +2,4 @@ 'svelte': patch --- -chore: small tweaks on set_attributes() +chore: consolidate code around attribute logic From fb4bcb680f529cbdda4d8d6c5b135afb9e23ec1d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 4 Mar 2025 10:43:42 -0500 Subject: [PATCH 4/6] add changeset --- .changeset/quiet-baboons-listen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-baboons-listen.md diff --git a/.changeset/quiet-baboons-listen.md b/.changeset/quiet-baboons-listen.md new file mode 100644 index 000000000000..eb5b4cc69927 --- /dev/null +++ b/.changeset/quiet-baboons-listen.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: respect `svelte-ignore hydration_attribute_changed` on elements with spread attributes From 57a4ab21ce5f21ccd651d579516613eef105f4ee Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 4 Mar 2025 10:47:28 -0500 Subject: [PATCH 5/6] =?UTF-8?q?remove=20`chore`=20changeset=20=E2=80=94=20?= =?UTF-8?q?no=20need=20for=20non-user-facing=20changes=20to=20appear=20in?= =?UTF-8?q?=20changelog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/wise-hats-wonder.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/wise-hats-wonder.md diff --git a/.changeset/wise-hats-wonder.md b/.changeset/wise-hats-wonder.md deleted file mode 100644 index 4d49f8febcb3..000000000000 --- a/.changeset/wise-hats-wonder.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -chore: consolidate code around attribute logic From 346de0e5ec80c9d0fc8c7097a00933b3720f74d9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 4 Mar 2025 10:50:10 -0500 Subject: [PATCH 6/6] Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js --- .../phases/3-transform/client/visitors/shared/element.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js index 06e36f585577..81a4b45288eb 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js @@ -88,11 +88,9 @@ export function build_set_attributes( element_id, is_dynamic ? attributes_id : b.literal(null), b.object(values), - element.metadata.scoped && context.state.analysis.css.hash !== '' - ? b.literal(context.state.analysis.css.hash) - : is_custom_element - ? b.null - : false, + element.metadata.scoped && + context.state.analysis.css.hash !== '' && + b.literal(context.state.analysis.css.hash), preserve_attribute_case, is_custom_element, is_ignored(element, 'hydration_attribute_changed') && b.true