Ignore undefined/falsey properties on components and elements

[TehShrike]

Brought up in chat by @arxpoetica: when using spread to apply an object's properties to an element, it is desirable to be able to say "apply everything except these specific properties".

Say, for example, something like <svelte:component this={MyComponent} {...all} />, which would result in a MyComponent property being set on the component.

If the spread operator ignored falsey values (or more safely, just ignored undefined values) on the object, it would be relatively easy to use something like Object.assign to specifically exclude some properties, say with this computed property:

computed: {
  forSpread: all => Object.assign({}, all, { MyComponent: undefined })
}

[dxlbnl]

I'd advice against changing the semantics of spread. I think comprehensions in js could have solved this issue: {...{key: value for key, value in obj if value}}. But it didn't land.
So I'd still advice for making a new object with it's properties filtered using computed.

[Rich-Harris]

I think the proposal in Gitter wasn't spread-specific, but would rather apply here as well:

<div aria-hidden={hidden}>...</div>

That currently renders as <div aria-hidden="false"> which is incorrect.

If we removed attributes with falsy values other than "", that would probably count as a breaking change. If we only removed attributes that were undefined, it probably counts as a bugfix.

[TehShrike]

It may be bad practice, but I do expect to be able to write styles using selectors like [some-state=false], so I'd rather the new behavior only applied to undefined.

[arxpoetica]

I'm leaning toward @TehShrike's answer, especially since one could still get undefined in an attribute through a string:

// foo = "undefined"
input: <elem class={foo}/>
output: <elem class="undefined"/>

// bar = undefined
input: <elem class={bar}/>
output: <elem/>

input: <elem class="undefined"/>
output: <elem class="undefined"/>

input: <elem class=undefined/>
output: <elem/>

[TehShrike]

I like undefined being ignored for all attributes, not just spread. It's more consistent. 👍

[kaisermann]

I also like undefined being ignored. In some cases, the browser resolves undefined to some undesirable things, like with the maxlength attribute.

About ignoring falsy values, I think false and 0 shouldn't be ignored.

[TehShrike]

To clarify: is the correct implementation of this proposal (to ignore all properties with value undefined) to make the change in the set code?

I thiiiink that might be my preference, so I could do

component.set(Object.assign({}, someObject, { ignoreThisProperty: undefined ))

but that might break everything for folks who actually do want to set values to undefined inside component code, so that might not be viable.

The alternative would be to change update to remove all undefined properties before calling _set on children.

[Rich-Harris]

Huh. As of 2.15, undefined and null attribute values are unset, though I've just realised that it doesn't make a difference in most cases since we use property access instead of setAttribute:

div.className = ctx.foo;

So I guess we should reopen this?