diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 03190c4dcf..7438b85fbc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -59,7 +59,7 @@ function get_attribute_name(element, attribute, context) { } /** - * Serializes each style directive into something like `$.style(element, style_property, value)` + * Serializes each style directive into something like `$.set_style(element, style_property, value)` * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic. * @param {import('#compiler').StyleDirective[]} style_directives * @param {import('estree').Identifier} element_id @@ -77,7 +77,7 @@ function serialize_style_directives(style_directives, element_id, context, is_at const update = b.stmt( b.call( - '$.style', + '$.set_style', element_id, b.literal(directive.name), value, @@ -136,7 +136,7 @@ function serialize_class_directives(class_directives, element_id, context, is_at const state = context.state; for (const directive of class_directives) { const value = /** @type {import('estree').Expression} */ (context.visit(directive.expression)); - const update = b.stmt(b.call('$.class_toggle', element_id, b.literal(directive.name), value)); + const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value)); const contains_call_expression = directive.expression.type === 'CallExpression'; if (!is_attributes_reactive && contains_call_expression) { @@ -280,14 +280,14 @@ function serialize_element_spread_attributes( const lowercase_attributes = element.metadata.svg || is_custom_element_node(element) ? b.false : b.true; - const id = context.state.scope.generate('spread_attributes'); + const id = context.state.scope.generate('attributes'); const update = b.stmt( b.assignment( '=', b.id(id), b.call( - '$.spread_attributes', + '$.set_attributes', element_id, b.id(id), b.array(values), @@ -337,7 +337,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { if (attributes.length === 0) { if (context.state.analysis.css.hash) { context.state.init.push( - b.stmt(b.call('$.class_name', element_id, b.literal(context.state.analysis.css.hash))) + b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash))) ); } return false; @@ -368,7 +368,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { } if (needs_isolation || is_reactive) { - const id = context.state.scope.generate('spread_attributes'); + const id = context.state.scope.generate('attributes'); context.state.init.push(b.let(id)); const update = b.stmt( @@ -376,7 +376,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { '=', b.id(id), b.call( - '$.spread_dynamic_element_attributes', + '$.set_dynamic_element_attributes', element_id, b.id(id), b.array(values), @@ -397,7 +397,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { context.state.init.push( b.stmt( b.call( - '$.spread_dynamic_element_attributes', + '$.set_dynamic_element_attributes', element_id, b.literal(null), b.array(values), @@ -415,7 +415,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { * ```js * element.property = value; * // or - * $.attr(element, property, value); + * $.set_attribute(element, property, value); * }); * ``` * Resulting code for dynamic looks something like this: @@ -425,7 +425,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) { * if (value !== (value = 'new value')) { * element.property = value; * // or - * $.attr(element, property, value); + * $.set_attribute(element, property, value); * } * }); * ``` @@ -444,7 +444,9 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu // The foreign namespace doesn't have any special handling, everything goes through the attr function if (context.state.metadata.namespace === 'foreign') { - const statement = { grouped: b.stmt(b.call('$.attr', node_id, b.literal(name), value)) }; + const statement = { + grouped: b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value)) + }; if (attribute.metadata.dynamic) { const id = state.scope.generate(`${node_id.name}_${name}`); serialize_update_assignment(state, id, undefined, value, statement, contains_call_expression); @@ -464,11 +466,11 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu let update; if (name === 'class') { - update = b.stmt(b.call(is_svg ? '$.svg_class_name' : '$.class_name', node_id, value)); + update = b.stmt(b.call(is_svg ? '$.set_svg_class' : '$.set_class', node_id, value)); } else if (DOMProperties.includes(name)) { update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value)); } else { - const callee = name.startsWith('xlink') ? '$.xlink_attr' : '$.attr'; + const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute'; update = b.stmt(b.call(callee, node_id, b.literal(name), value)); } @@ -1397,7 +1399,7 @@ function process_children(nodes, expression, is_element, { visit, state }) { const update = b.stmt( b.call( - '$.text', + '$.set_text', text_id, /** @type {import('estree').Expression} */ (visit(node.expression)) ) @@ -1431,7 +1433,7 @@ function process_children(nodes, expression, is_element, { visit, state }) { const [contains_call_expression, value] = serialize_template_literal(sequence, visit); - const update = b.stmt(b.call('$.text', text_id, value)); + const update = b.stmt(b.call('$.set_text', text_id, value)); if (contains_call_expression && !within_bound_contenteditable) { state.init.push(serialize_update(update)); diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index e896350d80..3a0a5ca791 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -13,8 +13,8 @@ import { autofocus } from './misc.js'; */ export function remove_input_attr_defaults(dom) { if (hydrating) { - attr(dom, 'value', null); - attr(dom, 'checked', null); + set_attribute(dom, 'value', null); + set_attribute(dom, 'checked', null); } } @@ -23,7 +23,7 @@ export function remove_input_attr_defaults(dom) { * @param {string} attribute * @param {string | null} value */ -export function attr(element, attribute, value) { +export function set_attribute(element, attribute, value) { value = value == null ? null : value + ''; // @ts-expect-error @@ -57,7 +57,7 @@ export function attr(element, attribute, value) { * @param {string} attribute * @param {string} value */ -export function xlink_attr(dom, attribute, value) { +export function set_xlink_attribute(dom, attribute, value) { dom.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value); } @@ -70,7 +70,7 @@ export function set_custom_element_data(node, prop, value) { if (prop in node) { node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value; } else { - attr(node, prop, value); + set_attribute(node, prop, value); } } @@ -83,7 +83,7 @@ export function set_custom_element_data(node, prop, value) { * @param {string} css_hash * @returns {Record} */ -export function spread_attributes(element, prev, attrs, lowercase_attributes, css_hash) { +export function set_attributes(element, prev, attrs, lowercase_attributes, css_hash) { var next = object_assign({}, ...attrs); var has_hash = css_hash.length !== 0; @@ -164,7 +164,7 @@ export function spread_attributes(element, prev, attrs, lowercase_attributes, cs value += css_hash; } - attr(element, name, value); + set_attribute(element, name, value); } } } @@ -178,7 +178,7 @@ export function spread_attributes(element, prev, attrs, lowercase_attributes, cs * @param {Record[]} attrs * @param {string} css_hash */ -export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) { +export function set_dynamic_element_attributes(node, prev, attrs, css_hash) { if (node.tagName.includes('-')) { var next = object_assign({}, ...attrs); @@ -193,15 +193,15 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) { } return next; - } else { - return spread_attributes( - /** @type {Element & ElementCSSInlineStyle} */ (node), - prev, - attrs, - node.namespaceURI !== namespace_svg, - css_hash - ); } + + return set_attributes( + /** @type {Element & ElementCSSInlineStyle} */ (node), + prev, + attrs, + node.namespaceURI !== namespace_svg, + css_hash + ); } /** diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js index d411ac8477..074152d901 100644 --- a/packages/svelte/src/internal/client/dom/elements/class.js +++ b/packages/svelte/src/internal/client/dom/elements/class.js @@ -6,7 +6,7 @@ import { set_class_name } from '../operations.js'; * @param {string} value * @returns {void} */ -export function svg_class_name(dom, value) { +export function set_svg_class(dom, value) { // @ts-expect-error need to add __className to patched prototype var prev_class_name = dom.__className; var next_class_name = to_class(value); @@ -35,7 +35,7 @@ export function svg_class_name(dom, value) { * @param {string} value * @returns {void} */ -export function class_name(dom, value) { +export function set_class(dom, value) { // @ts-expect-error need to add __className to patched prototype var prev_class_name = dom.__className; var next_class_name = to_class(value); @@ -77,7 +77,7 @@ function to_class(value) { * @param {boolean} value * @returns {void} */ -export function class_toggle(dom, class_name, value) { +export function toggle_class(dom, class_name, value) { if (value) { dom.classList.add(class_name); } else { diff --git a/packages/svelte/src/internal/client/dom/elements/style.js b/packages/svelte/src/internal/client/dom/elements/style.js index 56257d3fb3..96922bdc5f 100644 --- a/packages/svelte/src/internal/client/dom/elements/style.js +++ b/packages/svelte/src/internal/client/dom/elements/style.js @@ -1,12 +1,10 @@ -import { render_effect } from '../../reactivity/effects.js'; - /** * @param {HTMLElement} dom * @param {string} key * @param {string} value * @param {boolean} [important] */ -export function style(dom, key, value, important) { +export function set_style(dom, key, value, important) { const style = dom.style; const prev_value = style.getPropertyValue(key); if (value == null) { diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index 3526b83815..fea594d9c8 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -44,7 +44,7 @@ export function set_should_intro(value) { * @param {string} value * @returns {void} */ -export function text(dom, value) { +export function set_text(dom, value) { // @ts-expect-error need to add __value to patched prototype const prev_node_value = dom.__nodeValue; const next_node_value = stringify(value); diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js index 5f9d45dfbd..3f13e05aff 100644 --- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js +++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js @@ -17,19 +17,19 @@ export default function Main($$anchor, $$props) { var custom_element = $.sibling($.sibling(svg, true)); var div_1 = $.sibling($.sibling(custom_element, true)); - $.render_effect(() => $.attr(div_1, "foobar", y())); + $.render_effect(() => $.set_attribute(div_1, "foobar", y())); var svg_1 = $.sibling($.sibling(div_1, true)); - $.render_effect(() => $.attr(svg_1, "viewBox", y())); + $.render_effect(() => $.set_attribute(svg_1, "viewBox", y())); var custom_element_1 = $.sibling($.sibling(svg_1, true)); $.render_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y())); $.render_effect(() => { - $.attr(div, "foobar", x); - $.attr(svg, "viewBox", x); + $.set_attribute(div, "foobar", x); + $.set_attribute(svg, "viewBox", x); $.set_custom_element_data(custom_element, "fooBar", x); }); diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js index f65b30c4f1..43f6d25f8c 100644 --- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js @@ -17,7 +17,7 @@ export default function Each_string_template($$anchor, $$props) { ($$anchor, thing, $$index) => { var text = $.space_frag($$anchor); - $.render_effect(() => $.text(text, `${$.stringify($.unwrap(thing))}, `)); + $.render_effect(() => $.set_text(text, `${$.stringify($.unwrap(thing))}, `)); return $.close($$anchor, text); }, null diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js index 58832a1d68..c50bc71263 100644 --- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js +++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js @@ -23,7 +23,7 @@ export default function Function_prop_no_getter($$anchor, $$props) { children: ($$anchor, $$slotProps) => { var text = $.space_frag($$anchor); - $.render_effect(() => $.text(text, `clicks: ${$.stringify($.get(count))}`)); + $.render_effect(() => $.set_text(text, `clicks: ${$.stringify($.get(count))}`)); return $.close($$anchor, text); } });