svelte: Svelte typecasting where it shouldn't

Svelte is incorrectly casting numeric strings to numbers when assigned to component properties. This results in strange truthy behavior:

“1” is truthy “true” is truthy “false” is truthy

“0” is falsey “0” is falsey

All of these strings should be truthy, but the number (and html entity for 0) are falsey.

https://svelte.technology/repl?version=1.22.5&gist=b75e1acf7ee81e6fb2b6d0ae0e8349d5

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (14 by maintainers)

Most upvoted comments

@Rich-Harris Both Vue and Moon have workarounds for this that I think can be applied to Svelte. All properties as passed as strings, but when using a special syntax (v-bind or m-literal), you can have a literal value. For Svelte, that might look something like:

<Component value="someString"/> <!-- passes a string "someString" -->
<Component literal:value="item"/> <!-- passes the value of "item" -->
<Component literal:value="true"/> <!-- passes the boolean true -->
<Component literal:value="0"/> <!-- passes the number 0 -->

Basically, items in the literal directive are treated as if they were inside of a mustache expression, and items without it are treated as strings. Optionally, attributes can include mustache templates as well, but not when using the literal directive.

kbrsh on Aug 3, 2017