MIRROR: javascript for 🐜's, a tiny runtime with big ambitions
render frames in code block
+75
-32
docs/reports/public/assets/BerkeleyMono-Regular.woff2
docs/reports/public/assets/BerkeleyMono-Regular.woff2
This is a binary file and will not be displayed.
+30
-18
docs/reports/public/assets/report.css
+30
-18
docs/reports/public/assets/report.css
···
1
+
@font-face {
2
+
font-family: 'Berkeley Mono';
3
+
src: url('/assets/BerkeleyMono-Regular.woff2') format('woff2');
4
+
}
5
+
1
6
* {
2
7
margin: 0;
3
8
padding: 0;
···
18
23
19
24
body {
20
25
margin: 7% auto 0;
21
-
max-width: 405px;
26
+
max-width: 410px;
22
27
min-height: 180px;
23
28
padding: 30px 0 15px;
24
29
}
···
42
47
}
43
48
44
49
code {
45
-
background: #f8f8f8;
46
-
border: 1px solid #eee;
47
-
border-radius: 2px;
48
-
padding: 0 3px;
49
-
}
50
-
51
-
ol {
52
-
margin: 11px 0 22px 22px;
53
-
}
54
-
55
-
li {
56
-
margin: 3px 0;
57
-
overflow-wrap: anywhere;
50
+
padding: 2px 5px;
51
+
background-color: #f2f2f2;
58
52
}
59
53
60
54
#logo {
···
83
77
color: #777;
84
78
}
85
79
86
-
.frames code {
87
-
background: transparent;
88
-
border: 0;
89
-
padding: 0;
80
+
.frames {
81
+
padding-inline: 0.7rem;
82
+
padding-block: 0.3rem;
83
+
color: #333;
84
+
background-color: #fcfcfc !important;
85
+
font-family: 'Berkeley Mono', monospace;
86
+
margin: 5px 0 11px;
87
+
max-height: 320px;
88
+
overflow: auto;
89
+
white-space: pre;
90
+
}
91
+
92
+
.frames > code {
93
+
all: unset;
94
+
}
95
+
96
+
.frame-index {
97
+
color: #999;
90
98
}
91
99
92
100
.url {
93
101
overflow-wrap: anywhere;
102
+
}
103
+
104
+
.copy-url {
105
+
cursor: copy;
94
106
}
95
107
96
108
.footer {
+26
docs/reports/public/assets/report.js
+26
docs/reports/public/assets/report.js
···
1
+
function copyText(text) {
2
+
if (!navigator.clipboard || !window.isSecureContext) {
3
+
return Promise.reject(new Error('Clipboard API is unavailable'));
4
+
}
5
+
return navigator.clipboard.writeText(text);
6
+
}
7
+
8
+
document.addEventListener('click', event => {
9
+
const link = event.target.closest('[data-copy-url]');
10
+
11
+
if (!link) return;
12
+
event.preventDefault();
13
+
14
+
const url = link.getAttribute('data-copy-url');
15
+
if (!url) return;
16
+
17
+
copyText(url)
18
+
.then(() => {
19
+
const original = link.textContent;
20
+
link.textContent = 'Copied URL to clipboard.';
21
+
window.setTimeout(() => {
22
+
link.textContent = original;
23
+
}, 1200);
24
+
})
25
+
.catch(() => (window.location.href = url));
26
+
});
+19
-14
docs/reports/src/view.tsx
+19
-14
docs/reports/src/view.tsx
···
29
29
}
30
30
}
31
31
32
+
function renderFrames(frames: string[]): Child {
33
+
if (!frames.length) return 'No native frames were captured.';
34
+
return frames.map((frame, index) => (
35
+
<>
36
+
<span class="frame-index">{index + 1}.</span> {frame}
37
+
{index < frames.length - 1 ? '\n' : ''}
38
+
</>
39
+
));
40
+
}
41
+
32
42
const Shell = ({ title, children }: { title: string; children: Child }) => (
33
43
<html lang="en">
34
44
<head>
···
36
46
<meta name="viewport" content="width=device-width,initial-scale=1" />
37
47
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
38
48
<link rel="stylesheet" href="/assets/report.css" />
49
+
<script src="/assets/report.js" defer></script>
39
50
<title>{title}</title>
40
51
</head>
41
52
<body>{children}</body>
···
104
115
105
116
<div class="meta">
106
117
<i>Native backtrace:</i>
107
-
<ol class="frames">
108
-
{report.frames.length ? (
109
-
report.frames.map(frame => (
110
-
<li>
111
-
<code>{frame}</code>
112
-
</li>
113
-
))
114
-
) : (
115
-
<li>
116
-
<ins>No native frames were captured.</ins>
117
-
</li>
118
-
)}
119
-
</ol>
118
+
<pre class="frames" tabindex={0}>
119
+
<code>{renderFrames(report.frames)}</code>
120
+
</pre>
120
121
</div>
121
122
122
123
<p class="url">
123
-
<span class="label">This report URL:</span> <a href={url}>{url}</a>
124
+
<span class="label">This report URL:</span>{' '}
125
+
<a href={url} class="copy-url" data-copy-url={url}>
126
+
{url}
127
+
</a>
124
128
</p>
129
+
125
130
<ReportFooter />
126
131
</Shell>
127
132
);