Property syntax using curly braces and quotes is inconsistent.

[brunnerh]

Describe the bug

There is this special syntax prop="{value}" that does not cause string interpolation but instead just passes the value of the expression as is. This is inconsistent with how properties and string interpolation behave in all other cases.

As I see it, as soon as quotes are used, the value should be an interpolated string, no magic. Obviously, this would be a significant breaking change, so this is more of a suggestion for the future.

Reproduction

<Child value="42" /> <!-- string -->
<Child value={42} /> <!-- number -->
<Child value="{42}" /> <!-- (magically) number -->
<Child value="{42} " /> <!-- string -->

REPL

Logs

No response

System Info

REPL (Svelte Version 3.51.0)
Windows 10, 64bit
Chrome 106.0.5249.103

Severity

annoyance

[Conduitry]

This dates back a long time ago (I think Svelte 1?) where people would generally use HTML syntax highlighting when editing Svelte components, so we encouraged people to use foo="{bar}" rather than foo={bar} so that their file would be highlighted correctly. I wouldn't be against changing this in Svelte 4.

[dummdidumm]

A counter argument to changing this is that you can do this today: class="{foo} some string"

[brunnerh]

How is that a counter argument? This is just string interpolation in exactly the way I expect it to work.
(Same as in element text content.)

[dummdidumm]

I'm sorry, forget my comment, didn't read thoroughly enough. Note to self: this would also need adjustment in prettier-plugin-svelte

[dummdidumm]

Given how big of a breaking change this is I suggest to first adjust prettier-plugin-svelte rules around this in a major that aligns with the Svelte 4 release to never have quotes in that scenario, and then see if we do it for Svelte 5.

[koodeau]

Either add some types or configure your prettier/linter to format or yell at you.

[koodeau]

If you’re passing the string value to a component property which expects a number then you’d get an error message immediately. I guess jsdoc can solve this problem by specifying property types if you’re not using typescript.

[dummdidumm]

Revisiting this, I still don't think we should change this behavior. It's arguably an edge case and AFAIK some people still use the prettier plugin's HTML strict mode due to editor limitations which means quotes are always applied. I'm in favor of kicking this can down the road further.

[brunnerh]

Sure, it's just a minor thing anyway.