msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

breaking: use quotes to differentiate custom element properties from attributes

Browse Source
gh-12624
Rich Harris 2 months ago
parent 448f21620f
commit 8907c23263
11 changed files with 122 additions and 37 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/breezy-months-push.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: use quotes to differentiate custom element properties from attributes

14
packages/svelte/messages/client-warnings/warnings.md
Unescape View File

@ -4,6 +4,20 @@
> `%binding%` (%location%) is binding to a non-reactive property
## custom_element_invalid_attribute
> `<%name%>` has a `%prop%` property, but it is specified as an attribute. Use `%prop%={...}`, without surrounding quotes, to treat it as a property instead
> `<%name%>` (%location%) has a `%prop%` property, but is specified as an attribute. Use `%prop%={...}`, without surrounding quotes, to treat it as a property instead
When specifying attributes and properties on custom elements, values that are quoted are treated as attributes. Unquoted values are treated as properties.
## custom_element_invalid_property
> `<%name%>` does not have a `%prop%` property. Use `%prop%="..."`, with the surrounding quotes, to treat it as an attribute instead
> `<%name%>` (%location%) does not have a `%prop%` property. Use `%prop%="..."`, with the surrounding quotes, to treat it as an attribute instead
## event_handler_invalid
> %handler% should be a function. Did you mean to %suggestion%?

18
packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
Unescape View File

@ -34,6 +34,7 @@ import {
build_update_assignment
} from './shared/utils.js';
import { visit_event_attribute } from './shared/events.js';
import { is_array } from '../../../../../internal/shared/utils.js';
/**
* @param {RegularElement} node
@ -632,7 +633,22 @@ 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);
const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
// 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))));
}
}
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));
if (attribute.metadata.expression.has_state) {
if (has_call) {

2
packages/svelte/src/constants.js
Unescape View File

@ -39,6 +39,8 @@ export const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML';
// we use a list of ignorable runtime warnings because not every runtime warning
// can be ignored and we want to keep the validation for svelte-ignore in place
export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
'custom_element_invalid_attribute',
'custom_element_invalid_property',
'state_snapshot_uncloneable',
'binding_property_non_reactive',
'hydration_attribute_changed',

74
packages/svelte/src/internal/client/dom/elements/attributes.js
Unescape View File

@ -126,19 +126,26 @@ export function set_xlink_attribute(dom, attribute, value) {
}
/**
* @param {any} node
* @param {string} prop
* @param {any} value
* @param {HTMLElement} element
* @param {string} name
*/
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);
export function warn_if_attribute(element, name) {
if (!get_setters(element).includes(name)) {
w.custom_element_invalid_property(element.localName, name); // TODO variant with location
}
}
/**
* @param {HTMLElement} element
* @param {string} name
*/
export function warn_if_property(element, name) {
const attributes = /** @type {string} */ (
/** @type {any} */ (element.constructor).observedAttributes
);
if (get_setters(element).includes(name) && !attributes.includes(name)) {
w.custom_element_invalid_attribute(element.localName, name); // TODO variant with location
}
}
@ -173,8 +180,7 @@ export function set_attributes(
next.class = next.class ? next.class + ' ' + css_hash : css_hash;
}
var setters = setters_cache.get(element.nodeName);
if (!setters) setters_cache.set(element.nodeName, (setters = get_setters(element)));
var setters = get_setters(element);
// @ts-expect-error
var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
@ -325,7 +331,12 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
}
for (key in next) {
set_custom_element_data(node, key, next[key]);
// TODO do we need to separate attributes from properties here? probably
if (get_setters(node).includes(key)) {
node[key] = next[key];
} else {
set_attribute(node, key, next[key]);
}
}
return next;
@ -355,22 +366,27 @@ var setters_cache = new Map();
/** @param {Element} element */
function get_setters(element) {
/** @type {string[]} */
var setters = [];
var descriptors;
var proto = get_prototype_of(element);
// Stop at Element, from there on there's only unnecessary setters we're not interested in
while (proto.constructor.name !== 'Element') {
descriptors = get_descriptors(proto);
for (var key in descriptors) {
if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
setters.push(key);
var setters = setters_cache.get(element.nodeName);
if (!setters) {
setters = [];
setters_cache.set(element.nodeName, setters);
var descriptors;
var proto = get_prototype_of(element);
// Stop at Element, from there on there's only unnecessary setters we're not interested in
while (proto.constructor.name !== 'Element') {
descriptors = get_descriptors(proto);
for (var key in descriptors) {
if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
setters.push(key);
}
}
}
proto = get_prototype_of(proto);
proto = get_prototype_of(proto);
}
}
return setters;

5
packages/svelte/src/internal/client/index.js
Unescape View File

@ -28,12 +28,13 @@ export {
remove_input_defaults,
set_attribute,
set_attributes,
set_custom_element_data,
set_dynamic_element_attributes,
set_xlink_attribute,
handle_lazy_img,
set_value,
set_checked
set_checked,
warn_if_attribute,
warn_if_property
} from './dom/elements/attributes.js';
export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
export { apply, event, delegate, replay_events } from './dom/elements/events.js';

30
packages/svelte/src/internal/client/warnings.js
Unescape View File

@ -19,6 +19,36 @@ export function binding_property_non_reactive(binding, location) {
}
}
/**
* `<%name%>` (%location%) has a `%prop%` property, but is specified as an attribute. Use `%prop%={...}`, without surrounding quotes, to treat it as a property instead
* @param {string} name
* @param {string} prop
* @param {string | undefined | null} [location]
*/
export function custom_element_invalid_attribute(name, prop, location) {
if (DEV) {
console.warn(`%c[svelte] custom_element_invalid_attribute\n%c${location ? `\`<${name}>\` (${location}) has a \`${prop}\` property, but is specified as an attribute. Use \`${prop}={...}\`, without surrounding quotes, to treat it as a property instead` : `\`<${name}>\` has a \`${prop}\` property, but it is specified as an attribute. Use \`${prop}={...}\`, without surrounding quotes, to treat it as a property instead`}`, bold, normal);
} else {
// TODO print a link to the documentation
console.warn("custom_element_invalid_attribute");
}
}
/**
* `<%name%>` (%location%) does not have a `%prop%` property. Use `%prop%="..."`, with the surrounding quotes, to treat it as an attribute instead
* @param {string} name
* @param {string} prop
* @param {string | undefined | null} [location]
*/
export function custom_element_invalid_property(name, prop, location) {
if (DEV) {
console.warn(`%c[svelte] custom_element_invalid_property\n%c${location ? `\`<${name}>\` (${location}) does not have a \`${prop}\` property. Use \`${prop}="..."\`, with the surrounding quotes, to treat it as an attribute instead` : `\`<${name}>\` does not have a \`${prop}\` property. Use \`${prop}="..."\`, with the surrounding quotes, to treat it as an attribute instead`}`, bold, normal);
} else {
// TODO print a link to the documentation
console.warn("custom_element_invalid_property");
}
}
/**
* %handler% should be a function. Did you mean to %suggestion%?
* @param {string} handler

3
packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte
Unescape View File

@ -14,7 +14,8 @@
<div>hi</div>
<p>hi</p>
<button on:click={() => (red = false)}>off</button>
<my-widget {red} white></my-widget>
<!-- prettier-ignore -->
<my-widget red="{red || undefined}" white=""></my-widget>
<style>
:host([red]) div {

2
packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/main.svelte
Unescape View File

@ -30,4 +30,4 @@
window.customElements.define('my-custom-inheritance-element', Extended);
</script>
<my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />
<my-custom-inheritance-element camelCase={{ text: 'World' }} text={'!'} />

4
packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
Unescape View File

@ -21,12 +21,12 @@ export default function Main($$anchor) {
var custom_element_1 = $.sibling(svg_1, 2);
$.template_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
$.template_effect(() => custom_element_1.fooBar = y());
$.template_effect(() => {
$.set_attribute(div, "foobar", x);
$.set_attribute(svg, "viewBox", x);
$.set_custom_element_data(custom_element, "fooBar", x);
custom_element.fooBar = x;
});
$.append($$anchor, fragment);

2
packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
Unescape View File

@ -20,7 +20,7 @@ export default function Skip_static_subtree($$anchor, $$props) {
var cant_skip = $.sibling(main, 2);
var custom_elements = $.child(cant_skip);
$.set_custom_element_data(custom_elements, "with", "attributes");
$.set_attribute(custom_elements, "with", "attributes");
$.reset(cant_skip);
$.template_effect(() => $.set_text(text, $$props.title));
$.append($$anchor, fragment);

Write Preview
Loading…
Cancel
Save