Is it possible to specify a custom h.JSX declaration instead of using global.JSX? How can I achieve this?
The playground example provided fails, what steps should be taken to fix it?
Although the TypeScript documentation states that h.JSX should take precedence over global.JSX, it doesn't seem to work as intended. Here's a quote from the TS docs:
If the factory is defined as React.createElement (the default), the compiler will check for React.JSX before checking for a global JSX. If the factory is defined as h, it will check for h.JSX before a global JSX.
/** @jsx h */
interface ElBuilder {
(tag: any, attrs: Record<string, any> | null, ...content: any[]): any
JSX(tag: any, attrs: Record<string, any> | null, ...content: any[]): any
}
const h: ElBuilder = function(tag, attrs, ...content) {
console.log('h', tag, attrs, content)
}
h.JSX = h
console.log(<div></div>)
// ^Error: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)