JSX autocompletes as `class={}` instead of `class=""`

[marvinhagemeister]

🔎 Search Terms

JSX, Preact, autocomplete

🕗 Version & Regression Information

• This changed between versions ______ and _______
• This changed in commit or PR _______
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

No response

💻 Code

const a = <div />

🙁 Actual behavior

const a = <div class={} />

🙂 Expected behavior

const a = <div class="" />

Additional information about the issue

https://x.com/adamwathan/status/1953618165042180388

There is so much to love about Preact but the fact that cl(tab) autocompletes to class={} instead of class="" is going to be the death of me 🫠

@_developit
any tricks to get string-ish props to default to empty strings instead of curlies?

I assume this is the TypeScript LSP under the hood doing it? I see it with JSX across frameworks. Super annoying

Yeah, it seems to give me the expected completions in React though (i.e. id="" instead of id={}), think it's the Signalish type in Preact that's causing it.

Type definition in Preact:
https://github.com/preactjs/preact/blob/f3430e0cff27755cff84373e18387aaafdfc7912/src/jsx.d.ts#L1277

[IAmArthurAdams]

Issue addressed in #62242

[jakebailey]

I wrote this in #62242 (comment), but just to put it here, the way completions work is that if the type of the prop is assignable to string | undefined, then we suggest "". But Preact's prop here is string | undefined | SignalLike<string>, which is not all strings, so we don't offer up "".

This isn't a "bug" per se, but it is a design choice we'd have to rethink. #62242 effectively just changes the rule from "if it's all string" to "if there's any string", which is certainly a noticeable change that could affect other completions.

[RyanCavanaugh]

effectively just changes the rule from "if it's all string" to "if there's any string", which is certainly a noticeable change that could affect other completions.

This intuitively seems desirable to me. The only counterexample I can think of is ref in React where using a string is the legacy behavior. Should we just try it?