Improve JSX definitions

[Princesseuh]

Changes

This does many things to our JSX definitions, all improvements, hopefully!

• Fixed attributes needing numbers not accepting strings, especially ARIA attributes
• Added element-specific attributes instead of just a list of all possible attributes, this allow for better type checking (adding an attribute not allowed on a specific element but allowed on others will now show an error)
• Added some missing attributes

Testing

Types aren't tested at the moment. When astro check get upgraded to use the latest language-server, it would be possible to create an absolutely MASSIVE Astro file with ALL the HTML elements attributes (with their possible values) and run the checks on it to make sure there's no errors

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: bbe49e0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
astro	Patch
@e2e/astro-component	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[carlcs]

Hi @Princesseuh, another attribute that is currently missing is inert. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

I added it manually to my project, but would appreciate if it was there by default.

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes {
      /**
       * The HTMLElement property inert is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events
       * and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs
       * such as modals where you would want to "trap" the focus inside the modal when it's visible.
       * @see https://github.com/WICG/inert
       */
      inert?: boolean | string | undefined | null
    }
  }
}

[Princesseuh]

Hi @Princesseuh, another attribute that is currently missing is inert. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

I added it manually to my project, but would appreciate if it was there by default.

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes {
      /**
       * The HTMLElement property inert is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events
       * and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs
       * such as modals where you would want to "trap" the focus inside the modal when it's visible.
       * @see https://github.com/WICG/inert
       */
      inert?: boolean | string | undefined | null
    }
  }
}

Thank you very much, I'll add it!

[tony-sull]

Is the idea here that an Astro component will always have a string here rather than the actual EventHandler<T> object inlined from frontmatter? Would this break XElement?

[Princesseuh]

I doubt it would break XElement, because it doesn't make you write HTML events

However, yes, the following now result in an error in the editor:

---
function hello() {
	alert("Hey")
}
---

<div onclick={hello}></div>

But then again, this code does not work in Astro either - the serialized function you get is wrong, so I'm not sure how to proceed.

Either way using TypeScript's DOM types feels weird in Astro, they're much more intended for when you're manipulating events through JavaScript and not when you're writing HTML. If we want to allow serialized functions, updating the type to onclick?: () => any | string | undefined | null; would probably do it, I think