emacs/test/manual/indent/js-jsx.js

// -*- mode: js-jsx; -*-

var foo = <div></div>;

return (
  <div>
  </div>
  <div>
    <div></div>
    <div>
      <div></div>
    </div>
  </div>
);

React.render(
  <div>
    <div></div>
  </div>,
  {
    a: 1
  },
  <div>
    <div></div>
  </div>
);

return (
  // Sneaky!
  <div></div>
);

return (
  <div></div>
  // Sneaky!
);

React.render(
  <input
    />,
  {
    a: 1
  }
);

return (
  <div>
    {array.map(function () {
      return {
        a: 1
      };
    })}
  </div>
);

return (
  <div attribute={array.map(function () {
         return {
           a: 1
         };

         return {
           a: 1
         };

         return {
           a: 1
         };
       })}>
  </div>
);

// Indent void expressions (no need for contextual parens / commas)
// (https://github.com/mooz/js2-mode/issues/140#issuecomment-166250016).
<div className="class-name">
  <h2>Title</h2>
  {array.map(() => {
    return <Element />;
  })}
  {message}
</div>
// Another example of above issue
// (https://github.com/mooz/js2-mode/issues/490).
<App>
  <div>
    {variable1}
    <Component/>
  </div>
</App>

// Comments and arrows can break indentation (Bug#24896 /
// https://github.com/mooz/js2-mode/issues/389).
const Component = props => (
  <FatArrow a={e => c}
            b={123}>
  </FatArrow>
);
const Component = props => (
  <NoFatArrow a={123}
              b={123}>
  </NoFatArrow>
);
const Component = props => ( // Parse this comment, please.
  <FatArrow a={e => c}
            b={123}>
  </FatArrow>
);
const Component = props => ( // Parse this comment, please.
  <NoFatArrow a={123}
              b={123}>
  </NoFatArrow>
);
// Another example of above issue (Bug#30225).
class {
  render() {
    return (
      <select style={{paddingRight: "10px"}}
              onChange={e => this.setState({value: e.target.value})}
              value={this.state.value}>
        <option>Hi</option>
      </select>
    );
  }
}

// JSX attributes of an arrow function’s expression body’s JSX
// expression should be indented with respect to the JSX opening
// element (Bug#26001 /
// https://github.com/mooz/js2-mode/issues/389#issuecomment-271869380).
class {
  render() {
    const messages = this.state.messages.map(
      message => <Message key={message.id}
                          text={message.text}
                          mine={message.mine} />
    );    return messages;
  }
  render() {
    const messages = this.state.messages.map(message =>
      <Message key={message.timestamp}
               text={message.text}
               mine={message.mine} />
    );    return messages;
  }
}

// Users expect tag closers to align with the tag’s start; this is the
// style used in the React docs, so it should be the default.
// - https://github.com/mooz/js2-mode/issues/389#issuecomment-390766873
// - https://github.com/mooz/js2-mode/issues/482
// - Bug#32158
const foo = (props) => (
  <div>
    <input
      cat={i => i}
    />
    <button
      className="square"
    >
      {this.state.value}
    </button>
  </div>
);

// Embedded JSX in parens breaks indentation
// (https://github.com/mooz/js2-mode/issues/411).
let a = (
  <div>
    {condition && <Component/>}
    {condition && <Component/>}
    <div/>
  </div>
)
let b = (
  <div>
    {condition && (<Component/>)}
    <div/>
  </div>
)
let c = (
  <div>
    {condition && (<Component/>)}
    {condition && "something"}
  </div>
)
let d = (
  <div>
    {(<Component/>)}
    {condition && "something"}
  </div>
)
// Another example of the above issue (Bug#27000).
function testA() {
  return (
    <div>
      <div> { ( <div/> ) } </div>
    </div>
  );
}
function testB() {
  return (
    <div>
      <div> { <div/> } </div>
    </div>
  );
}
// Another example of the above issue
// (https://github.com/mooz/js2-mode/issues/451).
class Classy extends React.Component {
  render () {
    return (
      <div>
        <ul className="tocListRoot">
          { this.state.list.map((item) => {
            return (<div />)
          })}
        </ul>
      </div>
    )
  }
}

// Self-closing tags should be indented properly
// (https://github.com/mooz/js2-mode/issues/459).
export default ({ stars }) => (
  <div className='overlay__container'>
    <div className='overlay__header overlay--text'>
      Congratulations!
    </div>
    <div className='overlay__reward'>
      <Icon {...createIconProps(stars > 0)} size='large' />
      <div className='overlay__reward__bottom'>
        <Icon {...createIconProps(stars > 1)} size='small' />
        <Icon {...createIconProps(stars > 2)} size='small' />
      </div>
    </div>
    <div className='overlay__description overlay--text'>
      You have created <large>1</large> reminder
    </div>
  </div>
)

// JS expressions should not break indentation
// (https://github.com/mooz/js2-mode/issues/462).
return (
  <Router>
    <Bar>
      <Route exact path="/foo" render={() => (
        <div>nothing</div>
      )} />
      <Route exact path="/bar" />
    </Bar>
  </Router>
)

// Local Variables:
// indent-tabs-mode: nil
// js-indent-level: 2
// End: