-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
79 lines (68 loc) · 1.86 KB
/
index.ts
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
import { LitElement, html, customElement, property, css, internalProperty } from 'lit-element'
export type LogEntry = any
declare global {
interface HTMLElementEventMap {
log: CustomEvent<LogEntry>
}
}
/**
* Stores events in a log.
* Listens to events of type `log` and the `entry` attribute.
*/
@customElement('lit-log')
export default class extends LitElement {
@internalProperty()
private entries: Array<{ date: Date, entry: LogEntry }> = []
@property({ type: Boolean })
open = false
@property()
entry: LogEntry
static readonly styles = css`
:host([hidden]) {
display: none;
}
:host {
display: block;
margin: 0.5em;
}
:host details {
margin-top: 1em;
}
.error {
color: darkred
}`
protected updated(attrs: Map<string, string>) {
if (attrs.has('entry') && this.entry && this.entry != attrs.get('entry'))
this.prependEntry(this.entry)
}
protected prependEntry(entries: LogEntry[] | LogEntry) {
if (typeof entries == 'object' && Symbol.iterator in entries)
for (const entry of entries)
this.prependEntry(entry)
else
this.entries = [
{
entry: entries,
date: new Date,
},
...this.entries
]
return true
}
protected readonly render = () => html`
<slot @log=${(e: CustomEvent<LogEntry>) => this.prependEntry(e.detail) && e.stopPropagation()}></slot>
<details ?open=${this.open}>
<summary>
<slot name="summary">Log</slot>
</summary>
${this.entries.map(({ date, entry }) => html`
<pre
title="${date.toLocaleTimeString()}"
class=${entry instanceof Error ? 'error' : ''}
>${
entry instanceof Error
? entry.stack ? entry.stack : entry.message // Stack isn't always available
: entry}
</pre>`)}
</details>`
}