swc/crates/swc_ecma_parser/tests/tsc/tsxStatelessFunctionComponentOverload6.tsx

// @filename: file.tsx
// @jsx: preserve
// @module: amd
// @noLib: true
// @skipLibCheck: true
// @libFiles: react.d.ts,lib.d.ts

import React = require('react')

export interface ClickableProps {
    children?: string;
    className?: string;
}

export interface ButtonProps extends ClickableProps {
    onClick: React.MouseEventHandler<any>;
}

export interface LinkProps extends ClickableProps {
    to: string;
}

export interface HyphenProps extends ClickableProps {
    "data-format": string;
}

let obj = {
    children: "hi",
    to: "boo"
}
let obj1: any;
let obj2 = {
    onClick: () => {}
}

export function MainButton(buttonProps: ButtonProps): JSX.Element;
export function MainButton(linkProps: LinkProps): JSX.Element;
export function MainButton(hyphenProps: HyphenProps): JSX.Element;
export function MainButton(props: ButtonProps | LinkProps | HyphenProps): JSX.Element {
    const linkProps = props as LinkProps;
    if(linkProps.to) {
        return this._buildMainLink(props);
    }

    return this._buildMainButton(props);
}

// OK
const b0 = <MainButton to='/some/path'>GO</MainButton>;
const b1 = <MainButton onClick={(e) => {}}>Hello world</MainButton>;
const b2 = <MainButton {...obj} />;
const b3 = <MainButton {...{to: 10000}} {...obj} />;
const b4 = <MainButton {...obj1} />;  // any; just pick the first overload
const b5 = <MainButton {...obj1} to="/to/somewhere" />;  // should pick the second overload
const b6 = <MainButton {...obj2} />;
const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
const b8 = <MainButton {...{onClick() {}}} />;  // OK; method declaration get retained (See GitHub #13365)
const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
const b12 = <MainButton data-format="Hello world" />