v0.14.0 - JSX Intellisense

What's Changed

feat: improve the ElementAttributes and ReactElementAttributes JSX type helpers. by @trusktr in #34

This improves JSX types for Custom Elements in Solid JSX, React JSX, and Preact JSX, especially in React/Preact JSX whereas previously the React/Preact JSX prop types only accepted string values for dash-cased attributes.

If you have a getter/setter property in your element class, you can now define a dummy property prefixed with __set__<name-of-the-setter> to specify the type of the setter, and this will be picked up and lead to improved types in JSX. For example, you can start using like so:

Before:

@element('some-element')
class SomeElement extends Element {
    @attribute get someProp(): number {...}
    @attribute set someProp(n: number | 'foo' | 'bar') {...}
}

declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            'some-element': ReactElementAttributes<SomeElement, 'someProp'>
        }
    }
}

and this JSX would have a type error:

return <some-element some-prop={'foo'} /> // Error: string is not assignable to number

After:

@element('some-element')
class SomeElement extends Element {
    @attribute get someProp(): number {...}
    @attribute set someProp(n: this['__set__someProp']) {...}

    /** don't use this property, it is for JSX types. */
    __set__someProp!: number | 'foo' | 'bar'
}

// ... the same React JSX definition as before ...

and now JSX prop types will allow setting the setter types:

return <some-element someProp={'foo'} /> // No error, yay!

Note, the property is camelCase instead of dash-case now.

BREAKING: This may introduce type errors into existing JSX templates, tested with React 19 (not tested with React 18 or below), but it is an inevitable upgrade for the better.
To migrate, there's likely nothing to do in Solid JSX, but in React JSX the selected properties are no longer converted to dash-case, so you'll want to use the original JS property names in React JSX templates. For example this,

return <some-element some-prop={...} />

becomes

return <some-element someProp={...} />

If you have any issues, please reach out here on GitHub or on Discord!

---

Full Changelog: v0.13.1...v0.14.0