search

withastro / roadmap

Ideas, suggestions, and formal RFC proposals for the Astro project.
292 stars 29 forks source link

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

Closed neelsudhakaran closed 1 year ago

neelsudhakaran commented 1 year ago

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

matthewp commented 1 year ago

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

neelsudhakaran commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 https://github.com/withastro/language-tools/issues/312 for more information

EDIT: This is now supported in 0.29.0 of the extension

matthewp commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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!