liberty-prettydiff/test/samples_correct/beautification_tsx.txt

Language aware code comparison tool for several web based languages. It also beautifies, minifies, and a few other things.

declare namespace JSX JSX {
    interface ElementClass {
        render: any;
    }
}

class MyComponent {
    render() {}
}
function MyFactoryFunction() {
    return {
        render: () => {}
    };
}

<MyComponent />; // ok
<MyFactoryFunction />; // ok

class NotAValidComponent {}
function NotAValidFactoryFunction() {
    return {};
}

<NotAValidComponent />; // error
<NotAValidFactoryFunction />; // error

class MyComponent {
    render() {}
}

// use a construct signature
var myComponent = new MyComponent();

function MyFactoryFunction() {
    return {
        render: () => {}
    };
}

// use a call signature
var myComponent = MyFactoryFunction();

declare namespace JSX {
    interface ElementAttributesProperty {
        props; // specify the property name to use
    }
}

class MyComponent {
    // specify the property on the element instance type
    props: {
        foo?: string;
    };
}

// element attributes type for 'MyComponent' is '{foo?: string}'
<MyComponent foo="bar" />;

declare namespace JSX {
    interface IntrinsicElements {
        foo: {
            requiredProp : string;
            optionalProp?: number
        };
    }
}

<foo requiredProp="bar" />; // ok
<foo requiredProp="bar" optionalProp={0} />; // ok
<foo />; // error, requiredProp is missing
<foo requiredProp={0} />; // error, requiredProp should be a string
<foo requiredProp="bar" unknownProp="unknownProp" />; // error, unknownProp does not exist
<foo requiredProp="bar" some-unknown-prop="some-unknown-prop" />; // ok, because 'some-unknown-prop' is not a valid identifier

var a = <div>
    {
        ["foo", "bar"].map(function (i) {
            return <span>{i / 2}</span>;
        });
    }
</div>