1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import {Component} from 'react';
import style from './TraceLine.css';
export class TraceLine extends Component {
render () {
return (
<li className={style.line}>
<p>
<span className={style.file}>{this.props.file || '<<closure>>'}</span>
<span className={style.line}>
{this.props.line ? ' - line ' + this.props.line + ': ' : ''}
</span>
</p>
<p className={style.call}>
{this.props.class}{this.props.type}{this.props.function}({
this.props.args ?
this.props.args
.map((arg, i) => [
<Argument key={i} data={arg}/>,
(i < this.props.args.length - 1) ? ', ' : ''
]) :
[]
})
</p>
</li>
);
}
}
export class Argument extends Component {
state = {
show: false
};
toggle = () => {
this.setState({
show: !this.state.show,
});
};
render () {
const baseFormatted = formatArgument(this.props.data);
const fancyFormatted = formatArgument(this.props.data, 4);
const showInline = baseFormatted.length < 32;
return (
<span className={style.argument}
title={showInline ? null : fancyFormatted}>
{showInline ? baseFormatted : `${baseFormatted.slice(0, 12)} ... ${baseFormatted.slice(-2)}`}
</span>
)
}
}
export function formatArgument (data, whitespace, depth = 0) {
const leadingSpace = ' '.repeat(whitespace * depth);
if (data && data.__class__) {
const {'__class__': className, ...copy} = data;
return `${leadingSpace}${className} ${formatArgument(copy, whitespace, depth).trim()}`;
} else if (Array.isArray(data)) {
if (data.length === 0) {
return `${leadingSpace}[]`;
}
return `${leadingSpace}[\n${
data.map(value =>
formatArgument(value, whitespace, depth + 1)
).join(whitespace ? ',\n' : ',')
}${whitespace ? '\n' : ''}${leadingSpace}]`;
} else if (data !== null && typeof data === 'object') {
if (Object.keys(data).length === 0) {
return `${leadingSpace}{}`;
}
const keyWhitespace = ' '.repeat(whitespace * (depth + 1));
return `${leadingSpace}{\n${
Object.keys(data).map((key) =>
`${keyWhitespace}${key}: ${formatArgument(data[key], whitespace, depth + 1).trim()}`
).join(whitespace ? ',\n' : ',')
}${whitespace ? '\n' : ''}${leadingSpace}}`;
} else {
return leadingSpace + JSON.stringify(data, null, whitespace);
}
}
|
