React code for a post I'll never publish.

rust-highlighter-react.js

// jshint unused:true, esnext:true, expr:true

var Stack = React.createClass({
  getInitialState() {
    return {
      showProcess: false,
      stackProgress: 0,
      activeCell: [0,0],
      functions: [
        {
          name: 'main',
          highlighted: false,
          args: [],
          anonymous: false,
          variables: [
            {
              className: '3',
              indentLevel: 2,
              chunks: [
                { text: 'let', className: 'let-bind' },
                { text: ' mut', className: 'let-bind' },
                { text: ' a', className: 'var-name' },
                { text: ' =', className: 'filler' },
                { text: ' 3', className: 'integer-binding' }
              ]
            },
            {
              className: '[1,2,3,4]',
              indentLevel: 2,
              chunks: [
                { text: 'let mut', className: 'let-bind' },
                { text: ' numbers', className: 'var-name' },
                { text: ' = ', className: 'filler' },
                { text: '1,2,3,4', className: 'list-integer' }
              ]
            },
            {
              className: '-> 3',
              indentLevel: 2,
              chunks: [
                { text: 'another_function', className: 'func-name' },
                { text: '()', className: 'filler' }
              ]
            },
            {
              className: '5',
              indentLevel: 2,
              chunks: [
                { text: 'let mut', className: 'let-bind' },
                { text: ' b', className: 'var-name' },
                { text: ' =', className: 'filler' },
                { text: ' 5', className: 'integer-binding' }
              ]
            },
            {
              className: '\"a string\"',
              indentLevel: 2,
              chunks: [
                { text: 'let', className: 'let-bind' },
                { text: ' c', className: 'var-name' },
                { text: ' =', className: ' filler' },
                { text: ' \"a string\"', className: 'string' }
              ]
            },
            {
              className: '-> 2',
              indentLevel: 2,
              chunks: [
                { text: 'foo', className: 'func-name' },
                { text: '(&b)', className: 'filler' }
              ]
            }
          ]
        },
        {
          name: 'another_function',
          args: [],
          anonymous: false,
          variables: [
            {
              className: '30',
              indentLevel: 2,
              chunks: [
                { text: 'let', className: 'let-bind' },
                { text: ' mut', className: 'let-bind' },
                { text: ' some_variable', className: 'var-name' },
                { text: ' =', className: 'filler' },
                { text: ' 30', className: 'integer-binding' }
              ]
            }
          ]
        },
        {
          name: 'foo',
          args: [{ name: 'number', modifier: '&', type: 'i32', className: 'let-bind' }],
          anonymous: false,
          variables: [
            {
              className: '100',
              indentLevel: 2,
              chunks: [
                { text: 'let', className: 'let-bind' },
                { text: ' double_number', className: 'var-name' },
                { text: ' = ', className: 'filler' },
                { text: '2 ', className: 'integer-binding' },
                { text: '* number', className: 'filler' },
              ]
            },
            {
              className: '-> 5',
              indentLevel: 2,
              chunks: [
                { text: 'let', className: 'let-bind' },
                { text: ' a_reference_to', className: 'var-name' },
                { text: ' = &double_number', className: 'filler' },
              ]
            }
          ]
        }
      ]
    };
  },

  handleMouseOver(tuple) {
    this.setState({ activeCell: tuple });
  },

  showStack() {
    var interval = setInterval(()=> this.setState({ stackProgress: this.state.stackProgress + 1 }), 1000);
    this.setState({ interval: interval });
  },

  render() {
    var funcs = this.state.functions;
    var variables = [];

    var flatten = (f) => variables = variables.concat(f.variables);
    funcs.forEach(flatten);

    if (this.state.stackProgress === variables.length) {
      clearInterval(this.state.interval);
    }

    return (
      <div className='code-stuff'>
        <input type='button' onClick={this.showStack} className='btn btn-default' value='Show Stack'></input>

        <section className='col-md-6'>
          <CodeSnippet current={this.state.stackProgress} mouseOver={this.handleMouseOver} functions={this.state.functions} />
        </section>

        <section className='col-md-6'>
          <StackTrace current={this.state.stackProgress} variables={variables} functions={this.state.functions} activeCell={this.state.activeCell} />
        </section>
      </div>
    );
  }
});

var StackTrace = React.createClass({
  render() {
    var body = this.props.variables.map((c,i)=>{
      var className = this.props.current === i ? 'address' : 'address active';
      var refPointer;
      var value = c.className;
      if (value[0] === '-') {
        value = value[value.length - 1];
        refPointer = <span className='glyphicon glyphicon-arrow-right'></span>;
      }
      return (
        <tr key={i} className={className}>
          <td>{i}</td>
          <td>{refPointer} {value}</td>
        </tr>
      );
    });
    return (
      <div>
        <table className='table t-head table-hover'>
          <thead>
            <tr>
              <td>address</td>
              <td>value</td>
            </tr>
          </thead>

          <tbody>
            {body}
          </tbody>
        </table>
      </div>
    );
  }
});

var CodeSnippet = React.createClass({
  handleMouseOver(tuple) {
    this.props.mouseOver(tuple);
  },

  render() {
    var codeLineCount = 0;
    var current = this.props.current;
    var code = this.props.functions.map((f, idx)=>{
      var fkey = `${idx}-f`;
      var body = f.variables.map((v, i)=>{
        var style = { paddingLeft: v.indentLevel * 10 };
        console.log(codeLineCount);
        if (codeLineCount === current) {
          style.backgroundColor = 'white';
        } else {
          codeLineCount += 1;
        }
        var vkey = `${i}-v`;
        var chunks = v.chunks.map((chunk, n)=>{
          n = `${n}-c`;
          return <CodeChunk chunk={chunk} key={n} />;
        });
        var tuple = [idx, i];
        return (
          <div style={style} onMouseOver={this.handleMouseOver.bind(this, tuple)} key={vkey} className='code-line'>
            {chunks}{';'}
          </div>
        );
      });
      return (
        <RustFunction key={fkey} name={f.name} args={f.args} anon={f.anonymous}>
          {body}
        </RustFunction>
      );
    });
    return (
      <div className='code-snippet'>
        <pre>
          <code className='rust-lang'>
            {code}
          </code>
        </pre>
      </div>
    );
  }
});

var RustFunction = React.createClass({
  render() {
    var args = this.props.args;
    var argSet;
    if (args.length > 0) {
      argSet = args.map((arg,i)=>{
        var type = <span className='let-bind'>{arg.type}</span>;
        return <span className='filler' key={i + '-arg'}>({arg.name}: {arg.modifier}{type})</span>;
      });
    } else {
      argSet = '()';
    }
    return (
      <div key={this.props.idx} className='code-func'>
        <span className='let-bind'>fn </span><span className='func-name'>{this.props.name}</span>{argSet} {'{'}
          {this.props.children}
        {'}'}
        <br></br>
      </div>
    );
  }
});

var CodeChunk = React.createClass({
  render() {
    var chunk = this.props.chunk;
    var body;
    if (chunk.className === 'list-integer') {
      var parts = chunk.text.split(',');
      parts = parts.map((c, i)=>{
        var comma = (i + 1) < parts.length ? ',' : '';
        return (
          <span key={i + '-list'}>
            <span  className='integer-binding'>
              {c}
            </span>
            <span>
              {comma}
            </span>
          </span>
        );
      });
      body = <span>[{parts}]</span>;
    } else {
      body = chunk.text;
    }
    return (
      <span key={this.props.key} className={chunk.className}>{body}</span>
    );
  }
});


React.render(
  <Stack />,
  document.getElementById('example-right')
);