MIRROR: javascript for 🐜's, a tiny runtime with big ambitions
improve escaping of text
+14
-8
+14
-8
docs/reports/src/og.ts
+14
-8
docs/reports/src/og.ts
···
1
-
import { html, raw } from 'hono/html';
2
1
import { crashDetail } from './format';
3
2
import type { CrashReport } from './schema';
3
+
import { html as honoHtml, raw } from 'hono/html';
4
4
import { initWasm, Resvg } from '@resvg/resvg-wasm';
5
5
import resvgWasm from '@resvg/resvg-wasm/index_bg.wasm';
6
6
···
16
16
return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
17
17
}
18
18
19
-
function text(x: number, y: number, value: string, className = ''): string {
20
-
if (className) return String(html`<text x="${x}" y="${y}" class="${className}">${value}</text>`);
21
-
return String(html`<text x="${x}" y="${y}">${value}</text>`);
19
+
type SvgChunk = ReturnType<typeof raw>;
20
+
21
+
function html(strings: TemplateStringsArray, ...values: unknown[]): SvgChunk {
22
+
return honoHtml(strings, ...values) as SvgChunk;
23
+
}
24
+
25
+
function text(x: number, y: number, value: string, className = ''): SvgChunk {
26
+
if (className) return html`<text x="${x}" y="${y}" class="${className}">${value}</text>`;
27
+
return html`<text x="${x}" y="${y}">${value}</text>`;
22
28
}
23
29
24
30
function renderOgSvg(report: CrashReport, logoDataUrl: string): string {
···
30
36
.map((frame, index) => {
31
37
const y = 402 + index * 28;
32
38
return [
33
-
text(46, y, `${index + 1}.`, 'frame-index'),
34
-
text(94, y, truncate(frame, 96), 'frame'),
39
+
String(text(46, y, `${index + 1}.`, 'frame-index')),
40
+
String(text(94, y, truncate(frame, 96), 'frame')),
35
41
].join('');
36
42
})
37
43
.join('');
···
84
90
${text(46, 149, `${report.reason}.`, 'title')}
85
91
${text(46, 196, `${detail} at ${report.addr}`, 'subtitle muted')}
86
92
${text(46, 256, 'Runtime:', 'meta label')}
87
-
${text(196, 256, `Ant ${truncate(report.version, 40)}`, 'meta')}
93
+
${text(180, 256, `Ant ${truncate(report.version, 40)}`, 'meta')}
88
94
${text(46, 294, 'Platform:', 'meta label')}
89
-
${text(196, 294, `${truncate(report.os, 36)} ${report.arch}`, 'meta')}
95
+
${text(180, 294, `${truncate(report.os, 36)} ${report.arch}`, 'meta')}
90
96
${text(46, 352, 'Native backtrace:', 'meta')} ${raw(frameSvg)}
91
97
<rect x="46" y="540" width="1108" height="64" fill="url(#backtrace-fade)" />
92
98
</svg>`,