Early on, there was no support for shorthand attributes in the language tools, so it didn’t play nice in the editor, but that hasn’t been the case for a while now. Maybe we didn’t include it at the time due to that?

That makes sense, because I remember Erika being involved in the conversation. Looks like we should be good to go then!

Yeah and this shorthand is specific to Astro — it’s not something you can do in other flavours of JSX, so I do think it’s on us to document it.

Yeah and this shorthand is specific to Astro — it’s not something you can do in other flavours of JSX, so I do think it’s on us to document it.

You can do it in React allegedly

https://docureacten.github.io/Props/3-6-How%20to%20Use%20Shorthand%20Props#understanding-shorthand-props

That being said I think if we want to include it, a small mention in the suggested section is definitely fine by me 👍

this shorthand is specific to Astro

I actually didn't think it was! I thought I remembered this from React, too. But maybe I'm thinking of what Matthew linked (they use the prop as an attribute, but not in curly braces).

Is the thing unique to us that this works in HTML elements? (and therefore, we require curly braces to say "This is JavaScript now!"?) Is the syntax exactly the same in components, e.g.:

<a href={href}></a>
<MyLinkComponent {href} />

Because if the shorthand syntax is different in a component (e.g. no curly braces: <MyLinkComponent href />), we would need to point that out!

I know that we use the prop shorthand in components for boolean values: <Image priority />

So, if it's also used for values that are the same as the variable name, is Astro just smart enough to know that? (You can tell I don't use shorthand syntax myself 😅 ): is this <Image width priority /> proper shorthand for <Image width={width} priority /> ?

Is the thing unique to us that this works in HTML elements? (and therefore, we require curly braces to say "This is JavaScript now!"?) Is the syntax exactly the same in components...

The curly braces are required for Astro syntax. The syntax without braces is a HTML feature for booleans, which works on both components and normal HTML tags. Even if a variable exists, it won't use it, otherwise it'd override HTML behaviour.
e.g.

---
const foo = "bar";
---
<a foo></a>
<MyComponent foo />

results in (assume mycomponent contains a div)

<a foo></a>
<div foo="true"></div>

It seems astro does do extra processing for boolean shorthands on components, even though in my test case MyComponent didn't take the foo property. (another weird thing, but that's maybe for another discussion 😄 )

Yeah, Astro requires {attribute}, which is not valid in React.