Skip to content

Commit f81f4fe

Browse files
Rich-HarrisRich-Harris
authored
chore: simplify attributes (#13337)
* chore: simplify attributes * fix/optimise * unused
1 parent 1a5cf6f commit f81f4fe

File tree

4 files changed

+28
-63
lines changed

4 files changed

+28
-63
lines changed

‎packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -511,7 +511,8 @@ function build_element_spread_attributes(
511511
b.object(values),
512512
context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
513513
preserve_attribute_case && b.true,
514-
is_ignored(element, 'hydration_attribute_changed') && b.true
514+
is_ignored(element, 'hydration_attribute_changed') && b.true,
515+
element.name.includes('-') && b.true
515516
)
516517
)
517518
);

‎packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, ObjectExpression, Statement } from 'estree' */
22
/** @import { AST } from '#compiler' */
33
/** @import { ComponentContext } from '../types' */
4-
import { dev, locator } from '../../../../state.js';
4+
import { dev, is_ignored, locator } from '../../../../state.js';
55
import {
66
get_attribute_expression,
77
is_event_attribute,
@@ -84,7 +84,7 @@ export function SvelteElement(node, context) {
8484
// Always use spread because we don't know whether the element is a custom element or not,
8585
// therefore we need to do the "how to set an attribute" logic at runtime.
8686
const is_attributes_reactive =
87-
build_dynamic_element_attributes(attributes, inner_context, element_id) !== null;
87+
build_dynamic_element_attributes(node, attributes, inner_context, element_id) !== null;
8888

8989
// class/style directives must be applied last since they could override class/style attributes
9090
build_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
@@ -137,12 +137,13 @@ export function SvelteElement(node, context) {
137137
/**
138138
* Serializes dynamic element attribute assignments.
139139
* Returns the `true` if spread is deemed reactive.
140+
* @param {AST.SvelteElement} element
140141
* @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
141142
* @param {ComponentContext} context
142143
* @param {Identifier} element_id
143144
* @returns {boolean}
144145
*/
145-
function build_dynamic_element_attributes(attributes, context, element_id) {
146+
function build_dynamic_element_attributes(element, attributes, context, element_id) {
146147
if (attributes.length === 0) {
147148
if (context.state.analysis.css.hash) {
148149
context.state.init.push(
@@ -197,11 +198,14 @@ function build_dynamic_element_attributes(attributes, context, element_id) {
197198
'=',
198199
b.id(id),
199200
b.call(
200-
'$.set_dynamic_element_attributes',
201+
'$.set_attributes',
201202
element_id,
202203
b.id(id),
203204
b.object(values),
204-
context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash)
205+
context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
206+
b.binary('!==', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
207+
is_ignored(element, 'hydration_attribute_changed') && b.true,
208+
b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-'))
205209
)
206210
)
207211
);
@@ -218,11 +222,14 @@ function build_dynamic_element_attributes(attributes, context, element_id) {
218222
context.state.init.push(
219223
b.stmt(
220224
b.call(
221-
'$.set_dynamic_element_attributes',
225+
'$.set_attributes',
222226
element_id,
223227
b.literal(null),
224228
b.object(values),
225-
context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash)
229+
context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
230+
b.binary('!==', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
231+
is_ignored(element, 'hydration_attribute_changed') && b.true,
232+
b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-'))
226233
)
227234
)
228235
);

‎packages/svelte/src/internal/client/dom/elements/attributes.js

Lines changed: 11 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -136,18 +136,8 @@ export function set_xlink_attribute(dom, attribute, value) {
136136
* @param {any} value
137137
*/
138138
export function set_custom_element_data(node, prop, value) {
139-
if (prop in node) {
140-
// Reading the prop could cause an error, we don't want this to fail everything else
141-
try {
142-
var curr_val = node[prop];
143-
} catch {
144-
set_attribute(node, prop, value);
145-
return;
146-
}
147-
var next_val = typeof curr_val === 'boolean' && value === '' ? true : value;
148-
if (typeof curr_val !== 'object' || curr_val !== next_val) {
149-
node[prop] = next_val;
150-
}
139+
if (get_setters(node).includes(prop)) {
140+
node[prop] = value;
151141
} else {
152142
set_attribute(node, prop, value);
153143
}
@@ -161,6 +151,7 @@ export function set_custom_element_data(node, prop, value) {
161151
* @param {string} [css_hash]
162152
* @param {boolean} preserve_attribute_case
163153
* @param {boolean} [skip_warning]
154+
* @param {boolean} [is_custom_element]
164155
* @returns {Record<string, any>}
165156
*/
166157
export function set_attributes(
@@ -169,7 +160,8 @@ export function set_attributes(
169160
next,
170161
css_hash,
171162
preserve_attribute_case = false,
172-
skip_warning
163+
skip_warning = false,
164+
is_custom_element = false
173165
) {
174166
var current = prev || {};
175167
var is_option_element = element.tagName === 'OPTION';
@@ -271,14 +263,11 @@ export function set_attributes(
271263
delegate([event_name]);
272264
}
273265
}
274-
} else if (value == null) {
275-
attributes[key] = null;
276-
element.removeAttribute(key);
277-
} else if (key === 'style') {
266+
} else if (key === 'style' && value != null) {
278267
element.style.cssText = value + '';
279268
} else if (key === 'autofocus') {
280269
autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
281-
} else if (key === '__value' || key === 'value') {
270+
} else if (key === '__value' || (key === 'value' && value != null)) {
282271
// @ts-ignore
283272
element.value = element[key] = element.__value = value;
284273
} else {
@@ -287,7 +276,10 @@ export function set_attributes(
287276
name = normalize_attribute(name);
288277
}
289278

290-
if (setters.includes(name) && typeof value !== 'string') {
279+
if (value == null && !is_custom_element) {
280+
attributes[key] = null;
281+
element.removeAttribute(key);
282+
} else if (setters.includes(name) && (is_custom_element || typeof value !== 'string')) {
291283
// @ts-ignore
292284
element[name] = value;
293285
} else if (typeof value !== 'function') {
@@ -316,40 +308,6 @@ export function set_attributes(
316308
return current;
317309
}
318310

319-
/**
320-
* @param {Element} node
321-
* @param {Record<string, any> | undefined} prev
322-
* @param {Record<string, any>} next The new attributes - this function mutates this object
323-
* @param {string} [css_hash]
324-
*/
325-
export function set_dynamic_element_attributes(node, prev, next, css_hash) {
326-
if (node.tagName.includes('-')) {
327-
for (var key in prev) {
328-
if (!(key in next)) {
329-
next[key] = null;
330-
}
331-
}
332-
333-
if (css_hash !== undefined) {
334-
next.class = next.class ? next.class + ' ' + css_hash : css_hash;
335-
}
336-
337-
for (key in next) {
338-
set_custom_element_data(node, key, next[key]);
339-
}
340-
341-
return next;
342-
}
343-
344-
return set_attributes(
345-
/** @type {Element & ElementCSSInlineStyle} */ (node),
346-
prev,
347-
next,
348-
css_hash,
349-
node.namespaceURI !== NAMESPACE_SVG
350-
);
351-
}
352-
353311
/** @type {Map<string, string[]>} */
354312
var setters_cache = new Map();
355313

‎packages/svelte/src/internal/client/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { FILENAME, HMR } from '../../constants.js';
1+
export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
22
export { cleanup_styles } from './dev/css.js';
33
export { add_locations } from './dev/elements.js';
44
export { hmr } from './dev/hmr.js';
@@ -30,7 +30,6 @@ export {
3030
set_attribute,
3131
set_attributes,
3232
set_custom_element_data,
33-
set_dynamic_element_attributes,
3433
set_xlink_attribute,
3534
handle_lazy_img,
3635
set_value,

0 commit comments

Comments
 (0)