liberty-prettydiff/test/samples_raw/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>
        );
    }
});

var List = React.createClass({
    renderList: function () {
        return this.props.items.map(function (item) {
            return <ListItem item={item} key={item.id} />;
        });
    },

    render: function () {
        return <ul className="List">
                this.renderList()
            </ul>
    }
});
var Mist = React.createClass({
    renderList: function () {
        return this.props.items.map(function (item) {
            return <ListItem item={return <tag>{item}</tag>} key={item.id} />;
        });
    }
});
var content = (
        <Nav>
            {/* child comment, put {} around */}
            <Person
                /* multi
         line
         comment */
         //attr="test"
                name={window.isLoggedIn ? window.name : ''} // end of line comment
            />
        </Nav>
    );
var 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>;
var a = function () {return <tsdf>asdf</tsdf>;};

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


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


var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});
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>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  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();
var 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({
                title: 'Scene ' + nextIndex,
                index: nextIndex,
              });
            }}

            // Function to call to go back to the previous scene
            onBack={() => {
              if (route.index > 0) {
                navigator.pop();
              }
            }}
          />
        }
      />
        );
    }
}