From 0ae56ff5e0386ee9984260970cb53cbd328253b7 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Mon, 21 Oct 2024 17:05:34 +0100 Subject: [PATCH 1/5] fix: ensure muted DOM property works correctly in FF --- .changeset/wise-timers-look.md | 5 +++++ .../compiler/phases/2-analyze/visitors/RegularElement.js | 4 +++- .../phases/3-transform/client/visitors/RegularElement.js | 7 +++++++ .../3-transform/client/visitors/shared/fragment.js | 2 +- packages/svelte/src/internal/client/dom/elements/misc.js | 9 +++++++++ packages/svelte/src/internal/client/index.js | 2 +- 6 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 .changeset/wise-timers-look.md diff --git a/.changeset/wise-timers-look.md b/.changeset/wise-timers-look.md new file mode 100644 index 000000000000..0c980592206d --- /dev/null +++ b/.changeset/wise-timers-look.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure muted DOM property works correctly in FF diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js index dd8a594e610e..98bb1ca92a8a 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js @@ -77,7 +77,9 @@ export function RegularElement(node, context) { if ( node.attributes.some( - (attribute) => attribute.type === 'Attribute' && attribute.name === 'autofocus' + (attribute) => + attribute.type === 'Attribute' && + (attribute.name === 'autofocus' || attribute.name === 'muted') ) ) { mark_subtree_dynamic(context.path); 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 d4624c9d3a8c..e7228e5913f2 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 @@ -242,6 +242,7 @@ export function RegularElement(node, context) { ); } } else { + debugger; /** If true, needs `__value` for inputs */ const needs_special_value_handling = node.name === 'option' || @@ -263,6 +264,7 @@ export function RegularElement(node, context) { if ( !is_custom_element && attribute.name !== 'autofocus' && + attribute.name !== 'muted' && (attribute.value === true || is_text_attribute(attribute)) ) { const name = get_attribute_name(node, attribute); @@ -530,6 +532,11 @@ function build_element_attribute_update_assignment(element, node_id, attribute, return false; } + if (name === 'muted') { + state.init.push(b.stmt(b.call('$.muted', node_id, value))); + return false; + } + /** @type {Statement} */ let update; diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js index 4de1a11a97ee..022b8574d974 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js @@ -142,7 +142,7 @@ function is_static_element(node) { return false; } - if (attribute.name === 'autofocus') { + if (attribute.name === 'autofocus' || attribute.name === 'muted') { return false; } diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js index 61e513903f76..727c3030ab19 100644 --- a/packages/svelte/src/internal/client/dom/elements/misc.js +++ b/packages/svelte/src/internal/client/dom/elements/misc.js @@ -20,6 +20,15 @@ export function autofocus(dom, value) { } } +/** + * @param {HTMLVideoElement} dom + * @param {boolean} value + * @returns {void} + */ +export function muted(dom, value) { + dom.muted = value; +} + /** * The child of a textarea actually corresponds to the defaultValue property, so we need * to remove it upon hydration to avoid a bug when someone resets the form value. diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 306fc69ca745..3fcaa1a67c2f 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -37,7 +37,7 @@ export { } from './dom/elements/attributes.js'; export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js'; export { apply, event, delegate, replay_events } from './dom/elements/events.js'; -export { autofocus, remove_textarea_child } from './dom/elements/misc.js'; +export { autofocus, muted, remove_textarea_child } from './dom/elements/misc.js'; export { set_style } from './dom/elements/style.js'; export { animation, transition } from './dom/elements/transitions.js'; export { bind_active_element } from './dom/elements/bindings/document.js'; From b11f3149ed6c148f334f8e4a0fc61fd4e133a14a Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Mon, 21 Oct 2024 17:08:53 +0100 Subject: [PATCH 2/5] update test --- .../omit-scoping-attribute-attribute-selector/expected.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html b/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html index f585d6bcdda2..ddbe5169b723 100644 --- a/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html +++ b/packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html @@ -1,2 +1,2 @@ -
-
+
+
From a33564afe676be9835f48cb3d97f78bb6be1da37 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 21 Oct 2024 09:22:29 -0700 Subject: [PATCH 3/5] Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js --- .../phases/3-transform/client/visitors/RegularElement.js | 1 - 1 file changed, 1 deletion(-) 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 e7228e5913f2..2ea956c38049 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 @@ -242,7 +242,6 @@ export function RegularElement(node, context) { ); } } else { - debugger; /** If true, needs `__value` for inputs */ const needs_special_value_handling = node.name === 'option' || From 9e56c1d6b4f72228878ca90fc89d8152ef1a3356 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 22 Oct 2024 12:43:59 +0100 Subject: [PATCH 4/5] feedback --- .../phases/3-transform/client/visitors/RegularElement.js | 2 +- packages/svelte/src/internal/client/dom/elements/misc.js | 9 --------- packages/svelte/src/internal/client/index.js | 2 +- 3 files changed, 2 insertions(+), 11 deletions(-) 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 2ea956c38049..cbbbb718cb77 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 @@ -532,7 +532,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute, } if (name === 'muted') { - state.init.push(b.stmt(b.call('$.muted', node_id, value))); + state.init.push(b.stmt(b.assignment('=', b.member(node_id, b.id('muted')), value))); return false; } diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js index 727c3030ab19..61e513903f76 100644 --- a/packages/svelte/src/internal/client/dom/elements/misc.js +++ b/packages/svelte/src/internal/client/dom/elements/misc.js @@ -20,15 +20,6 @@ export function autofocus(dom, value) { } } -/** - * @param {HTMLVideoElement} dom - * @param {boolean} value - * @returns {void} - */ -export function muted(dom, value) { - dom.muted = value; -} - /** * The child of a textarea actually corresponds to the defaultValue property, so we need * to remove it upon hydration to avoid a bug when someone resets the form value. diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 3fcaa1a67c2f..306fc69ca745 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -37,7 +37,7 @@ export { } from './dom/elements/attributes.js'; export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js'; export { apply, event, delegate, replay_events } from './dom/elements/events.js'; -export { autofocus, muted, remove_textarea_child } from './dom/elements/misc.js'; +export { autofocus, remove_textarea_child } from './dom/elements/misc.js'; export { set_style } from './dom/elements/style.js'; export { animation, transition } from './dom/elements/transitions.js'; export { bind_active_element } from './dom/elements/bindings/document.js'; From cacd1f12224bd871f553cfd7fb8e51ff19e4c5f9 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 23 Oct 2024 16:57:08 +0100 Subject: [PATCH 5/5] Update packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .../phases/3-transform/client/visitors/RegularElement.js | 1 + 1 file changed, 1 insertion(+) 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 cbbbb718cb77..3922ab382f4d 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 @@ -531,6 +531,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute, return false; } + // Special case for Firefox who needs it set as a property in order to work if (name === 'muted') { state.init.push(b.stmt(b.assignment('=', b.member(node_id, b.id('muted')), value))); return false;