omit props from SSR output, fix now-erroneous warning

gh-12624
Rich Harris 4 months ago
parent 58f00292a0
commit 07fc7d7e5c

@ -16,7 +16,7 @@
## attribute_quoted ## attribute_quoted
> Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes > Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
## bind_invalid_each_rest ## bind_invalid_each_rest

@ -31,8 +31,7 @@ export function validate_attribute(attribute, parent) {
attribute.value[0].type === 'ExpressionTag' && attribute.value[0].type === 'ExpressionTag' &&
(parent.type === 'Component' || (parent.type === 'Component' ||
parent.type === 'SvelteComponent' || parent.type === 'SvelteComponent' ||
parent.type === 'SvelteSelf' || parent.type === 'SvelteSelf')
(parent.type === 'RegularElement' && is_custom_element_node(parent)))
) { ) {
w.attribute_quoted(attribute); w.attribute_quoted(attribute);
} }

@ -24,6 +24,7 @@ import {
is_content_editable_binding, is_content_editable_binding,
is_load_error_element is_load_error_element
} from '../../../../../../utils.js'; } from '../../../../../../utils.js';
import { is_array } from '../../../../../../internal/shared/utils.js';
const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style']; const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
@ -239,16 +240,18 @@ export function build_element_attributes(node, context) {
continue; continue;
} }
const name = get_attribute_name(node, attribute, context); if (is_array(attribute.value) || !node.name.includes('-')) {
const value = build_attribute_value( const name = get_attribute_name(node, attribute, context);
attribute.value, const value = build_attribute_value(
context, attribute.value,
WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name) context,
); WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
);
context.state.template.push( context.state.template.push(
b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true) b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
); );
}
} }
} }

@ -701,11 +701,11 @@ export function attribute_invalid_property_name(node, wrong, right) {
} }
/** /**
* Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes * Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
* @param {null | NodeLike} node * @param {null | NodeLike} node
*/ */
export function attribute_quoted(node) { export function attribute_quoted(node) {
w(node, "attribute_quoted", "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes"); w(node, "attribute_quoted", "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes");
} }
/** /**

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

@ -4,11 +4,11 @@
let y = $state(() => 'test'); let y = $state(() => 'test');
</script> </script>
<div fooBar={x}></div> <div fooBar="{x}"></div>
<svg viewBox={x}></svg> <svg viewBox="{x}"></svg>
<custom-element fooBar={x}></custom-element> <custom-element fooBar="{x}"></custom-element>
<!-- force them into singular render effects by using function invocations --> <!-- force them into singular render effects by using function invocations -->
<div fooBar={y()}></div> <div fooBar="{y()}"></div>
<svg viewBox={y()} ></svg> <svg viewBox="{y()}" ></svg>
<custom-element fooBar={y()}></custom-element> <custom-element fooBar="{y()}"></custom-element>

@ -1,7 +1,7 @@
[ [
{ {
"code": "attribute_quoted", "code": "attribute_quoted",
"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes", "message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
"start": { "start": {
"column": 11, "column": 11,
"line": 13 "line": 13
@ -25,7 +25,7 @@
}, },
{ {
"code": "attribute_quoted", "code": "attribute_quoted",
"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes", "message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
"start": { "start": {
"column": 29, "column": 29,
"line": 15 "line": 15
@ -37,7 +37,7 @@
}, },
{ {
"code": "attribute_quoted", "code": "attribute_quoted",
"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes", "message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
"start": { "start": {
"column": 14, "column": 14,
"line": 18 "line": 18
@ -46,17 +46,5 @@
"column": 27, "column": 27,
"line": 18 "line": 18
} }
},
{
"code": "attribute_quoted",
"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
"start": {
"column": 16,
"line": 21
},
"end": {
"column": 29,
"line": 21
}
} }
] ]

Loading…
Cancel
Save