`@astrojs/alpinejs` Lacks TypeScript Support For Alpine Shorthand Directives

[neelsudhakaran]

What version of astro are you using?

1.6.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

macOS Big Sur v11.4

Describe the Bug

When using the @astrojs/alpinejs integration (v0.1.2) in an Astro project with strict TypeScript config, using shorthand attributes (i.e. @click instead of x-on:click), I get the following VS Code TypeScript error:

Property _click does not exist on type ButtonHTMLAttributes

It's not really reproducible outside of VSCode as StackBlitz doesn't really do the same level of error checking, but I left a link anyways.

Some Commentary & Ideas to Fix It

In my mind the fix for this is to have the Alpine integration modify the astro-jsx.d.ts file to account for all of the various Alpine attributes. In addition to fixing this error, this should (hopefully?) also add VS Code autocomplete support for those attributes—which I think would be really neat!

I'm more than happy to go in and write typings for the different attributes (that seems straightforward enough)—I'm just not sure how to patch into the Astro Integrations API to modify the typings that VS Code / Astro is looking at. If someone could point me in the right direction though, I'm more than willing to figure it out!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-pf1rr5-egafck

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks! I see that you're willing to submit a PR for this. That would be majorly appreciated!

[neelsudhakaran]

No problem @matthewp!

Any advice in how to go about overriding the default Astro JSX types via the Integration API? Maybe I missed it, but I don't recall seeing that in the api docs. Thanks!

[matthewp]

paging @Princesseuh who can give you a better explanation than me.

My assumption is that if you include your own .d.ts file that TypeScript will pick that up. Then you can augment the Astro types.

[Princesseuh]

Hey, you can extend the JSX definitions by redefining the attributes interface in a .d.ts file

Something to note is that our VS Code extension does not currently support attributes starting with @ and with dots in them, so even with definitions, you'll run into issues. See withastro/language-tools#312 for more information

EDIT: This is now supported in 0.29.0 of the extension

[matthewp]

@neelsudhakaran do you still plan on submitting a PR for this? Happy to keep the issue open for a while if you are planning on doing this, but considering this is a feature request and not a bug, want to avoid keeping it open forever if there isn't someone willing to work on it. Thanks!

[neelsudhakaran]

Yes, I had been playing around with things for a bit to find a workaround, but with this new (and amazing!) information from @Princesseuh, I should be able to get something working in the next day or so!

[natemoo-re]

I'm moving this over to the roadmap repo since it's a feature request. Would be nice to add this but I'm not sure if we'll have time to prioritize it ourselves!