From dc7fc9140ff716e18fd75952d0ac844503d7fbc7 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 23 Mar 2023 11:25:32 +0100 Subject: [PATCH 1/5] fix: special-case width/height attribute during spread fixes #6752 --- src/runtime/internal/dom.ts | 11 ++++++++++- .../samples/spread-width-height-attributes/_config.js | 4 ++++ .../spread-width-height-attributes/main.svelte | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 test/runtime/samples/spread-width-height-attributes/_config.js create mode 100644 test/runtime/samples/spread-width-height-attributes/main.svelte diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index a7466131708e..767bcbda2f72 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -302,6 +302,15 @@ export function attr(node: Element, attribute: string, value?: string) { else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } +/** + * List of attributes that should always be set through the attr method, + * because updating them through the property setter doesn't work reliably. + * In the example of `width`/`height`, the problem is that the setter only + * accepts numeric values, but the attribute can also be set to a string like `50%`. + * If this list becomes too big, rethink this approach. + */ +const always_set_through_attr = ['width', 'height']; + export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) { // @ts-ignore const descriptors = Object.getOwnPropertyDescriptors(node.__proto__); @@ -312,7 +321,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes node.style.cssText = attributes[key]; } else if (key === '__value') { (node as any).value = node[key] = attributes[key]; - } else if (descriptors[key] && descriptors[key].set) { + } else if (descriptors[key] && descriptors[key].set && always_set_through_attr.indexOf(key) === -1) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]); diff --git a/test/runtime/samples/spread-width-height-attributes/_config.js b/test/runtime/samples/spread-width-height-attributes/_config.js new file mode 100644 index 000000000000..1559ab3fd08b --- /dev/null +++ b/test/runtime/samples/spread-width-height-attributes/_config.js @@ -0,0 +1,4 @@ +export default { + // https://github.com/sveltejs/svelte/issues/6752 + html: `` +}; diff --git a/test/runtime/samples/spread-width-height-attributes/main.svelte b/test/runtime/samples/spread-width-height-attributes/main.svelte new file mode 100644 index 000000000000..b91b00845738 --- /dev/null +++ b/test/runtime/samples/spread-width-height-attributes/main.svelte @@ -0,0 +1 @@ + From 0e0eeed6b0b0829e4ada097e2fac6002b2c66690 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Fri, 24 Mar 2023 08:46:58 +1300 Subject: [PATCH 2/5] Update test/runtime/samples/spread-width-height-attributes/_config.js --- test/runtime/samples/spread-width-height-attributes/_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/runtime/samples/spread-width-height-attributes/_config.js b/test/runtime/samples/spread-width-height-attributes/_config.js index 1559ab3fd08b..cf2dc7efdee5 100644 --- a/test/runtime/samples/spread-width-height-attributes/_config.js +++ b/test/runtime/samples/spread-width-height-attributes/_config.js @@ -1,4 +1,4 @@ export default { // https://github.com/sveltejs/svelte/issues/6752 - html: `` + html: '' }; From a726adc313f4ec9e18502709a3e0dbb1c8de8b4b Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:44:32 +0200 Subject: [PATCH 3/5] Update src/runtime/internal/dom.ts Co-authored-by: Tan Li Hau --- src/runtime/internal/dom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 767bcbda2f72..4e19399eb25d 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -309,7 +309,7 @@ export function attr(node: Element, attribute: string, value?: string) { * accepts numeric values, but the attribute can also be set to a string like `50%`. * If this list becomes too big, rethink this approach. */ -const always_set_through_attr = ['width', 'height']; +const always_set_through_set_attribute = ['width', 'height']; export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) { // @ts-ignore From 106b51a2eb67539fb40d387eeb76fdd79929fb22 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:44:53 +0200 Subject: [PATCH 4/5] Update src/runtime/internal/dom.ts --- src/runtime/internal/dom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 4e19399eb25d..2cbe6aac24bf 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -321,7 +321,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes node.style.cssText = attributes[key]; } else if (key === '__value') { (node as any).value = node[key] = attributes[key]; - } else if (descriptors[key] && descriptors[key].set && always_set_through_attr.indexOf(key) === -1) { + } else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute .indexOf(key) === -1) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]); From 62ec0328bf3254f4dcf4b1c80c2b0335f8a3b862 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:45:24 +0200 Subject: [PATCH 5/5] Update src/runtime/internal/dom.ts --- src/runtime/internal/dom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 2cbe6aac24bf..40a9feda9939 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -321,7 +321,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes node.style.cssText = attributes[key]; } else if (key === '__value') { (node as any).value = node[key] = attributes[key]; - } else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute .indexOf(key) === -1) { + } else if (descriptors[key] && descriptors[key].set && always_set_through_set_attribute.indexOf(key) === -1) { node[key] = attributes[key]; } else { attr(node, key, attributes[key]);