From b8eb68fc0398797995c325cf4738a9e7c5d7a11c Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Nov 2024 14:03:27 +0000 Subject: [PATCH] better fix --- .../client/visitors/RegularElement.js | 44 +++++++++---------- packages/svelte/src/utils.js | 16 ++----- 2 files changed, 24 insertions(+), 36 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 1a6b695aa1..455327a712 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 @@ -6,7 +6,7 @@ import { escape_html } from '../../../../../escaping.js'; import { is_boolean_attribute, - get_dom_property, + is_dom_property, is_load_error_element, is_void } from '../../../../../utils.js'; @@ -557,31 +557,27 @@ function build_element_attribute_update_assignment(element, node_id, attribute, update = b.stmt(b.call('$.set_value', node_id, value)); } else if (name === 'checked') { update = b.stmt(b.call('$.set_checked', node_id, value)); + } else if (is_dom_property(name)) { + update = b.stmt(b.assignment('=', b.member(node_id, name), value)); } else { - const dom_property = get_dom_property(name); - - if (dom_property) { - update = b.stmt(b.assignment('=', b.member(node_id, dom_property), value)); - } else { - if (name === 'style' && attribute.metadata.expression.has_state && has_call) { - // ensure we're not creating a separate template effect for this so that - // potential style directives are added to the same effect and therefore always apply - const id = b.id(state.scope.generate('style_derived')); - state.init.push(b.const(id, create_derived(state, b.thunk(value)))); - value = b.call('$.get', id); - has_call = false; - } - const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute'; - update = b.stmt( - b.call( - callee, - node_id, - b.literal(name), - value, - is_ignored(element, 'hydration_attribute_changed') && b.true - ) - ); + if (name === 'style' && attribute.metadata.expression.has_state && has_call) { + // ensure we're not creating a separate template effect for this so that + // potential style directives are added to the same effect and therefore always apply + const id = b.id(state.scope.generate('style_derived')); + state.init.push(b.const(id, create_derived(state, b.thunk(value)))); + value = b.call('$.get', id); + has_call = false; } + const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute'; + update = b.stmt( + b.call( + callee, + node_id, + b.literal(name), + value, + is_ignored(element, 'hydration_attribute_changed') && b.true + ) + ); } if (attribute.metadata.expression.has_state) { diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js index 6f7d3e7517..ee27053721 100644 --- a/packages/svelte/src/utils.js +++ b/packages/svelte/src/utils.js @@ -192,7 +192,8 @@ const ATTRIBUTE_ALIASES = { ismap: 'isMap', nomodule: 'noModule', playsinline: 'playsInline', - readonly: 'readOnly' + readonly: 'readOnly', + srcobject: 'srcObject' }; /** @@ -216,20 +217,11 @@ const DOM_PROPERTIES = [ 'srcObject' ]; -/** @type {Map} */ -let DOM_PROPERTIES_MAP; - /** * @param {string} name - * @returns {string | undefined} */ -export function get_dom_property(name) { - if (!DOM_PROPERTIES_MAP) { - DOM_PROPERTIES_MAP = new Map( - DOM_PROPERTIES.map((property) => [property.toLowerCase(), property]) - ); - } - return DOM_PROPERTIES_MAP.get(name); +export function is_dom_property(name) { + return DOM_PROPERTIES.includes(name); } /**