From 76f0605c2ea16d4c91394c06f48aad234f7ff884 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 27 Aug 2024 08:53:51 -0400 Subject: [PATCH] make changes runes-mode-only --- .../client/visitors/RegularElement.js | 31 ++++++++++++------- .../server/visitors/shared/element.js | 2 +- .../client/dom/elements/attributes.js | 17 ++++++++++ packages/svelte/src/internal/client/index.js | 1 + .../reflect-attributes/main.svelte | 3 +- .../main.svelte | 2 +- 6 files changed, 40 insertions(+), 16 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 7658a08fd1..de2c35fa8a 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 @@ -633,22 +633,29 @@ function build_custom_element_attribute_update_assignment(node_id, attribute, co const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive let { has_call, value } = build_attribute_value(attribute.value, context); - // if it's quoted, it's an attribute, otherwise it's a property - const is_attribute = is_array(attribute.value); + /** @type {Statement} */ + let update; - if (dev) { - if (is_attribute && !is_ignored(attribute, 'custom_element_invalid_attribute')) { - state.init.push(b.stmt(b.call('$.warn_if_property', node_id, b.literal(name)))); - } + if (context.state.analysis.runes) { + // if it's quoted, it's an attribute, otherwise it's a property + const is_attribute = is_array(attribute.value); + + if (dev) { + if (is_attribute && !is_ignored(attribute, 'custom_element_invalid_attribute')) { + state.init.push(b.stmt(b.call('$.warn_if_property', node_id, b.literal(name)))); + } - if (!is_attribute && !is_ignored(attribute, 'custom_element_invalid_property')) { - state.init.push(b.stmt(b.call('$.warn_if_attribute', node_id, b.literal(name)))); + if (!is_attribute && !is_ignored(attribute, 'custom_element_invalid_property')) { + state.init.push(b.stmt(b.call('$.warn_if_attribute', node_id, b.literal(name)))); + } } - } - const update = is_attribute - ? b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value)) - : b.stmt(b.assignment('=', b.member(node_id, name), value)); + update = is_attribute + ? b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value)) + : b.stmt(b.assignment('=', b.member(node_id, name), value)); + } else { + update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value)); + } if (attribute.metadata.expression.has_state) { if (has_call) { diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js index d633aadef0..262d8b7cc5 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js @@ -240,7 +240,7 @@ export function build_element_attributes(node, context) { continue; } - if (is_array(attribute.value) || !node.name.includes('-')) { + if (is_array(attribute.value) || !node.name.includes('-') || !context.state.analysis.runes) { const name = get_attribute_name(node, attribute, context); const value = build_attribute_value( attribute.value, diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index fa3d267142..e880e3ed12 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -154,6 +154,23 @@ export function warn_if_property(element, name) { } } +/** + * @param {any} node + * @param {string} prop + * @param {any} value + */ +export function set_custom_element_data(node, prop, value) { + if (prop in node) { + var curr_val = node[prop]; + var next_val = typeof curr_val === 'boolean' && value === '' ? true : value; + if (typeof curr_val !== 'object' || curr_val !== next_val) { + node[prop] = next_val; + } + } else { + set_attribute(node, prop, value); + } +} + /** * Spreads attributes onto a DOM element, taking into account the currently set attributes * @param {Element & ElementCSSInlineStyle} element diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 4dd17fc15e..9fb085e880 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -33,6 +33,7 @@ export { handle_lazy_img, set_value, set_checked, + set_custom_element_data, warn_if_attribute, warn_if_property } from './dom/elements/attributes.js'; diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte index 770f4cd420..cfb74add9b 100644 --- a/packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte +++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte @@ -14,8 +14,7 @@
hi

hi

- - +