liberty-prettydiff/test/samples_correct/beautification_javascript_jsx.txt

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

/*prettydiff.com spaceclose:false, varword:list*/
var ListItem = React.createClass({
        render: function () {
            return (
                <li className="ListItem">
                    <a href={"/items/" + this.props.item.id}>
                        this.props.item.name
                    </a>
                </li>
            );
        }
    }),

    List     = React.createClass({
        render    : function () {
            return <ul className="List">
                this.renderList()
            </ul>;
        },
        renderList: function () {
            return this
                .props
                .items
                .map(function (item) {
                    return <ListItem item={item} key={item.id}/>;
                });
        }
    }),
    Mist     = React.createClass({
        renderList: function () {
            return this
                .props
                .items
                .map(function (item) {
                    return <ListItem item={return <tag>{item}</tag>} key={item.id}/>;
                });
        }
    }),
    content  = (
        <Nav>
            {/* child comment, put {} around */}
            <Person
                /* multi
                line
                comment */

                //attr="test"
                name={window.isLoggedIn
                    ? window.name
                    : ""}
                // end of line comment
            />
        </Nav>
    ),
    qwer     = <Dropdown>
        A dropdown list
        <Menu>
            <MenuItem>Do Something</MenuItem>
            <MenuItem>Do Something Fun!</MenuItem>
            <MenuItem>Do Something Else</MenuItem>
        </Menu>
    </DropDown>;
render(dropdown);

// JSX
var box          = <Box>
    {
        shouldShowAnswer(user)
            ? <Answer value={false}>no</Answer>
            : <Box.Comment>
                    Text Content
                </Box.Comment>
    }
</Box>,
    a            = function () {
        return <tsdf>asdf</tsdf>;
    },

    HelloMessage = React.createClass({
        render: function () {
            return <div>Hello {this.props.name}</div>;
        }
    });
React.render(<HelloMessage name="John"/>, mountNode);


var Timer = React.createClass({
    componentDidMount   : function () {
        this.interval = setInterval(this.tick, 1000);
    },
    componentWillUnmount: function () {
        clearInterval(this.interval);
    },
    getInitialState     : function () {
        return {secondsElapsed: 0};
    },
    render              : function () {
        return (
            <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
        );
    },
    tick                : function () {
        this.setState({
            secondsElapsed: this.state.secondsElapsed + 1
        });
    }
});
React.render(<Timer/>, mountNode);


var Timer = React.createClass({
    componentDidMount   : function () {
        this.interval = setInterval(this.tick, 1000);
    },
    componentWillUnmount: function () {
        clearInterval(this.interval);
    },
    getInitialState     : function () {
        return {secondsElapsed: 0};
    },
    render              : function () {
        return (
            <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
        );
    },
    tick                : function () {
        this.setState({
            secondsElapsed: this.state.secondsElapsed + 1
        });
    }
});
React.render(<Timer/>, mountNode);


var TodoList = React.createClass({
        render: function () {
            var createItem = function (itemText) {
                return <li>{itemText}</li>;
            };
            return <ul>{
                    this
                        .props
                        .items
                        .map(createItem)
                }</ul>;
        }
    }),
    TodoApp  = React.createClass({
        getInitialState: function () {
            return {items: [], text: ""};
        },
        handleSubmit   : function (e) {
            e.preventDefault();
            var nextItems = this
                    .state
                    .items
                    .concat([this.state.text]),
                nextText  = "";
            this.setState({items: nextItems, text: nextText});
        },
        onChange       : function (e) {
            this.setState({text: e.target.value});
        },
        render         : function () {
            return (
                <div>
                    <h3>TODO</h3>
                    <TodoList items={this.state.items}/>
                    <form onSubmit={this.handleSubmit}>
                        <input onChange={this.onChange} value={this.state.text}/>
                        <button>{"Add #" + (this.state.items.length + 1)}</button>
                    </form>
                </div>
            );
        }
    });
React.render(<TodoApp/>, mountNode);


var converter      = new Showdown.converter(),
    MarkdownEditor = React.createClass({
        getInitialState: function () {
            return {value: "Type some *markdown* here!"};
        },
        handleChange   : function () {
            this.setState({
                value: this
                    .refs
                    .textarea
                    .getDOMNode()
                    .value
            });
        },
        render         : function () {
            return (
                <div className="MarkdownEditor">
                    <h3>Input</h3>
                    <textarea
                        onChange={this.handleChange}
                        ref="textarea"
                        defaultValue={this.state.value}/>
                    <h3>Output</h3>
                    <div
                        className="content"
                        dangerouslySetInnerHTML={{
                            __html: converter.makeHtml(this.state.value)
                        }}/>
                </div>
            );
        }
    });
React.render(<MarkdownEditor/>, mountNode);

import React from "react";
class MyComponent extends React.Component {
    render() {
        var a = 1;
        return (
            <h1 style={{
                    margin: 0
                }}>
                Test
            </h1>
        );
    }
}
export const Welcome = ({name}) => (
    <div>
        Hello, {name}.
    </div>
);
ReactDOM.render(
    <Voting hasVoted="Trainspotting" winner="Trainspotting" pair={pair}/>,
    document.getElementById("app"),
    asdf
);

class Header extends Component {
    renderLinks() {
        if (this.props.authenticated) {
            return (a);
        } else {
            return [
                <li key="signin" className="nav-item">
                    <Link className="nav-link" to="/signin">Sign in</Link>
                </li>,
                <li key="signout" className="nav-item">
                    <Link className="nav-link" to="/signup ">Sign Up</Link>
                </li>
            ];
        }
    }
}
export default class kisharNine extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Navigator
                initialRoute={{
                    title: "My Initial Scene",
                    index: 0
                }}
                renderScene={(route, navigator) => <MyScene title={route.title}
                    // Function to call when a new scene should be displayed
                    onForward={() => {
                        const nextIndex = route.index + 1;
                        navigator.push({
                            index: nextIndex,
                            title: "Scene " + nextIndex
                        });
                    }}
                    // Function to call to go back to the previous scene
                    onBack={() => {
                        if (route.index > 0) {
                            navigator.pop();
                        }
                    }}/>
                }
            />
        );
    }
}