Skip to content

Don't always stringify attrs #4440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Crisfole opened this issue Feb 21, 2020 · 2 comments · Fixed by #4498
Closed

Don't always stringify attrs #4440

Crisfole opened this issue Feb 21, 2020 · 2 comments · Fixed by #4498

Comments

@Crisfole
Copy link
Contributor

Crisfole commented Feb 21, 2020

Is your feature request related to a problem? Please describe.

It's irritating that html elements being rendered with attrs get stringified when the value being passed them is falsey. Specifically in the null | undefined | false case. Currently null and undefined act as expected (they just skip the attr), but false gets serialized as "false" which is actually truthy.

<a {href} {download}>Download</a>

Describe the solution you'd like

Treat false like undefined and null are currently. Warn when a non-string value is being automatically stringified for an html element. You almost never want [Object object] in your html. You almost never want the elements of your array indiscriminately joined with commas in your html.

Describe alternatives you've considered
I can easily fix this by using {download || undefined} but I'd really rather not.

How important is this feature to you?
I don't think it's important to me personally because the fix is easy. I do think it's a gotcha that could affect adoption.

Additional context

Link.svelte

<script>
  export href;
  export let download = false;
</script>

<a {href} {download}>Download</a>

Consumer.svelte

<script>
  import Link from './Link.svelte'
</script>

<Link href='www.google.com'>Google</Link>
<Link href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' download>Video</Link>

Above, the google link gets a download=false attr, and the video gets a download=true. In both cases they're considered download links. Even worse, passing download={false} still fails the same way.

@Conduitry
Copy link
Member

As described in this comment and the one after it, treating false as a missing/skipped attribute would probably be a breaking change, and would also prevent the usage Josh mentions in the second comment.

What I recall from going through the known attributes for #3013 is that download is not a boolean attribute, and so doesn't (and shouldn't) have the special handling we have for some other attributes like disabled or selected.

I really don't think we want to change the behavior here, but it should be mentioned somewhere in the docs.

@Conduitry Conduitry added the docs label Feb 24, 2020
@Conduitry
Copy link
Member

Adding the 'docs' label so we have something to remind us to mention which how to get certain attributes to not render.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants