Add documentation to extend JSX typing

[elpupi]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

It is possible that they are missing JSX.IntrinsicElements definitions leading to jsx typing errors.
For instance, if one is willing to add the attribute xmlns-link in an svg element, typescript will emit the following error is not assignable to type 'SVGAttributes<SVGElement>.
It is not possible to consider all typings. Especially for specific use cases. A good solution is to extend the stencil JSX typing in an ambient declaration module as follow:

// anyname-you-wish.ts anywhere in the src directory
import { VNodeData, VNode, JSX as LocalJSX, JSXBase } from '@stencil/core/internal';

declare module '@stencil/core' {
    export namespace h {
        function h(sel: any): VNode;
        function h(sel: Node, data: VNodeData): VNode;
        function h(sel: any, data: VNodeData): VNode;
        function h(sel: any, text: string): VNode;
        function h(sel: any, children: Array<VNode | undefined | null>): VNode;
        function h(sel: any, data: VNodeData, text: string): VNode;
        function h(sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
        function h(sel: any, data: VNodeData, children: VNode): VNode;
        namespace JSX {
            interface IntrinsicElements extends LocalJSX.IntrinsicElements, Omit<JSXBase.IntrinsicElements, 'svg' | 'div'> {
                svg: JSXBase.SVGAttributes<SVGElement> & { viewbox?: string; xmlnsXlink?: string; };
                div: JSXBase.HTMLAttributes<HTMLDivElement> & { field?: string; };
            }
        }
    }
}

Unfortunately, it is not documented anywhere and someone can struggle a lot to find out a way to make it work.

Furthermore, it is strange to be obliged to import a function not used in the code but injected during compilation. Wouldn't be nicer to add the import { h } from '@stencil/core' dynamically before ts is compiled and add the namespace h in an ambient global definition?

Expected behavior:
Extended JSX typing working.

Related code:

@Component({
    tag: 'svg-wrapper',
    shadow: true,
})
export class SvgWrapper implements ComponentInterface {
    render() {
        return (
            <svg width="24px" height="24px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                <slot></slot>
            </svg>
        );
    }
}

[elpupi]

It would be nice to have a feedback.