Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
React code for a post I'll never publish.
// 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')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment