Skip to content

Commit 7da679b

Browse files
megothmegoth
authored
Merge pull request SolidOS#269 from solid/log-cleanup
Log cleanup
2 parents b9b5651 + b0e2cd1 commit 7da679b

19 files changed

Lines changed: 672 additions & 212 deletions

‎examples/log/index.html‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>solid-ui UI.log examples page</title>
6+
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7+
<script>
8+
function showSource (widgetName) {
9+
document.querySelector(`#viewSource-${widgetName}`).innerHTML = document.querySelector(`#script-${widgetName}`).innerText
10+
.replace(/&/g, '&amp;')
11+
.replace(/</g, '&lt;')
12+
.replace(/>/g, '&gt;')
13+
.replace(/"/g, '&quot;')
14+
.replace(/'/g, '&#039;')
15+
}
16+
17+
window.addEventListener('DOMContentLoaded', () => {
18+
Array.from(document.querySelectorAll('article')).forEach(title => {
19+
const section = title.id
20+
showSource(section)
21+
})
22+
})
23+
</script>
24+
</head>
25+
<body style="padding-right: 300px;">
26+
27+
<h1>The log module</h1>
28+
29+
<p>
30+
On this page you'll find some examples from the log module. See
31+
<a href="https://solid.github.io/solid-ui/Documentation/api/modules/_log_">API documentation</a> for more
32+
information.
33+
</p>
34+
35+
<div style="background: white; border: 0.5em solid black; position: fixed; top: 0; right: 0; width: 300px; padding: 0.5em;">
36+
<p>
37+
<strong>Status area:</strong> This is the playground which the examples will interact with. Click the various
38+
buttons to see their effect here.
39+
</p>
40+
<div id="status" style="border: 1px solid red; padding: 0.5em; max-height: 50vh; overflow: auto;"></div>
41+
<p>
42+
Note that by default only <code>msg</code>, <code>warn</code> and <code>error</code> will add messages to the
43+
status area. You can change this by using <a href="#log-setLevel"><code>setLevel</code></a>.
44+
</p>
45+
</div>
46+
47+
<article id="log-msg">
48+
<h2>
49+
<a href="#log-msg">
50+
<code>log.msg</code>: A simple message
51+
</a>
52+
</h2>
53+
<script id="script-log-msg">
54+
window.addEventListener('DOMContentLoaded', () => {
55+
const button = document.createElement('button')
56+
button.innerText = 'Add a message'
57+
button.addEventListener('click', () => UI.log.msg('A simple message'))
58+
document.querySelector('#demo-log-msg').appendChild(button)
59+
})
60+
</script>
61+
<pre id="viewSource-log-msg"></pre>
62+
<div id="demo-log-msg"></div>
63+
</article>
64+
65+
<article id="log-warn">
66+
<h2>
67+
<a href="#log-warn">
68+
<code>log.warn</code>: A warning message
69+
</a>
70+
</h2>
71+
<script id="script-log-warn">
72+
window.addEventListener('DOMContentLoaded', () => {
73+
const button = document.createElement('button')
74+
button.innerText = 'Add a warning'
75+
button.addEventListener('click', () => UI.log.warn('A warning message'))
76+
document.querySelector('#demo-log-warn').appendChild(button)
77+
})
78+
</script>
79+
<pre id="viewSource-log-warn"></pre>
80+
<div id="demo-log-warn"></div>
81+
</article>
82+
83+
<article id="log-debug">
84+
<h2>
85+
<a href="#log-debug">
86+
<code>log.debug</code>: A debug message
87+
</a>
88+
</h2>
89+
<script id="script-log-debug">
90+
window.addEventListener('DOMContentLoaded', () => {
91+
const button = document.createElement('button')
92+
button.innerText = 'Add a debugging message'
93+
button.addEventListener('click', () => UI.log.debug('A debugging message'))
94+
document.querySelector('#demo-log-debug').appendChild(button)
95+
})
96+
</script>
97+
<pre id="viewSource-log-debug"></pre>
98+
<div id="demo-log-debug"></div>
99+
</article>
100+
101+
<article id="log-info">
102+
<h2>
103+
<a href="#log-info">
104+
<code>log.info</code>: An info message
105+
</a>
106+
</h2>
107+
<script id="script-log-info">
108+
window.addEventListener('DOMContentLoaded', () => {
109+
const button = document.createElement('button')
110+
button.innerText = 'Add an info message'
111+
button.addEventListener('click', () => UI.log.info('An info message'))
112+
document.querySelector('#demo-log-info').appendChild(button)
113+
})
114+
</script>
115+
<pre id="viewSource-log-info"></pre>
116+
<div id="demo-log-info"></div>
117+
</article>
118+
119+
<article id="log-error">
120+
<h2>
121+
<a href="#log-error">
122+
<code>log.error</code>: An error message
123+
</a>
124+
</h2>
125+
<script id="script-log-error">
126+
window.addEventListener('DOMContentLoaded', () => {
127+
const button = document.createElement('button')
128+
button.innerText = 'Add an error message'
129+
button.addEventListener('click', () => UI.log.error('An error message'))
130+
document.querySelector('#demo-log-error').appendChild(button)
131+
})
132+
</script>
133+
<pre id="viewSource-log-error"></pre>
134+
<div id="demo-log-error"></div>
135+
</article>
136+
137+
<article id="log-success">
138+
<h2>
139+
<a href="#log-success">
140+
<code>log.success</code>: A success message
141+
</a>
142+
</h2>
143+
<script id="script-log-success">
144+
window.addEventListener('DOMContentLoaded', () => {
145+
const button = document.createElement('button')
146+
button.innerText = 'Add a success message'
147+
button.addEventListener('click', () => UI.log.success('A success message'))
148+
document.querySelector('#demo-log-success').appendChild(button)
149+
})
150+
</script>
151+
<pre id="viewSource-log-success"></pre>
152+
<div id="demo-log-success"></div>
153+
</article>
154+
155+
<article id="log-alert">
156+
<h2>
157+
<a href="#log-alert">
158+
<code>log.alert</code>: An alert message
159+
</a>
160+
</h2>
161+
<p>
162+
This example uses alert to notify user of a message. It will not log in the status area unless
163+
<code>window.alert</code> is not available.
164+
</p>
165+
<script id="script-log-alert">
166+
window.addEventListener('DOMContentLoaded', () => {
167+
const button = document.createElement('button')
168+
button.innerText = 'Trigger an alert message'
169+
button.addEventListener('click', () => UI.log.alert('An alert message'))
170+
document.querySelector('#demo-log-alert').appendChild(button)
171+
})
172+
</script>
173+
<pre id="viewSource-log-alert"></pre>
174+
<div id="demo-log-alert"></div>
175+
</article>
176+
177+
<article id="log-clear">
178+
<h2>
179+
<a href="#log-clear">
180+
<code>log.clear</code>: Clear messages
181+
</a>
182+
</h2>
183+
<p>
184+
Using this method you can clear the existing messages in the status area.
185+
</p>
186+
<script id="script-log-clear">
187+
window.addEventListener('DOMContentLoaded', () => {
188+
const button = document.createElement('button')
189+
button.innerText = 'Clear status area'
190+
button.addEventListener('click', () => UI.log.clear())
191+
document.querySelector('#demo-log-clear').appendChild(button)
192+
})
193+
</script>
194+
<pre id="viewSource-log-clear"></pre>
195+
<div id="demo-log-clear"></div>
196+
</article>
197+
198+
<article id="log-setLevel">
199+
<h2>
200+
<a href="#log-setLevel">
201+
<code>log.setLevel</code>: Configure which messages that are to be shown
202+
</a>
203+
</h2>
204+
<p>
205+
The module uses <a href="https://en.wikipedia.org/wiki/Mask_(computing)">bitmask</a> to filter which types
206+
of messages that will be shown. It assigns the following 10-based number to each type (binaries in
207+
parenthesis):
208+
</p>
209+
<ul>
210+
<li>Error: 1 (000001)</li>
211+
<li>Warning: 2 (000010)</li>
212+
<li>Message: 4 (000100)</li>
213+
<li>Success: 8 (001000)</li>
214+
<li>Info: 16 (010000)</li>
215+
<li>Debug: 32 (100000)</li>
216+
</ul>
217+
<p>
218+
By default only error, warning, and normal messages will be shown, hence the number 7 that is shown by default
219+
in this example. You can set it to show all types of messages by passing 63 (which is the sum of all, and is
220+
111111 in binary).
221+
</p>
222+
<script id="script-log-setLevel">
223+
window.addEventListener('DOMContentLoaded', () => {
224+
const input = document.createElement('input')
225+
input.type = 'text'
226+
input.inputmode = 'numeric'
227+
input.pattern = '[0-9]*'
228+
input.value = 7
229+
document.querySelector('#demo-log-setLevel').appendChild(input)
230+
const button = document.createElement('button')
231+
button.innerText = 'Set level'
232+
button.addEventListener('click', () => UI.log.setLevel(parseInt(input.value, 10)))
233+
document.querySelector('#demo-log-setLevel').appendChild(button)
234+
})
235+
</script>
236+
<pre id="viewSource-log-setLevel"></pre>
237+
<div id="demo-log-setLevel"></div>
238+
</article>
239+
240+
<article id="log-dumpHTML">
241+
<h2>
242+
<a href="#log-dumpHTML">
243+
<code>log.dumpHTML</code>: Dump all HTML in body in a log message
244+
</a>
245+
</h2>
246+
<script id="script-log-dumpHTML">
247+
window.addEventListener('DOMContentLoaded', () => {
248+
const button = document.createElement('button')
249+
button.innerText = 'Dump HTML'
250+
button.addEventListener('click', () => UI.log.dumpHTML())
251+
document.querySelector('#demo-log-dumpHTML').appendChild(button)
252+
})
253+
</script>
254+
<pre id="viewSource-log-dumpHTML"></pre>
255+
<div id="demo-log-dumpHTML"></div>
256+
</article>
257+
258+
<article id="log-logAscending">
259+
<h2>
260+
<a href="#log-logAscending">
261+
<code>log.logAscending</code>: Start logging all messages in ascending order
262+
</a>
263+
</h2>
264+
<script id="script-log-logAscending">
265+
window.addEventListener('DOMContentLoaded', () => {
266+
const button = document.createElement('button')
267+
button.innerText = 'Log ascending'
268+
button.addEventListener('click', () => UI.log.logAscending())
269+
document.querySelector('#demo-log-logAscending').appendChild(button)
270+
})
271+
</script>
272+
<pre id="viewSource-log-logAscending"></pre>
273+
<div id="demo-log-logAscending"></div>
274+
</article>
275+
276+
<article id="log-logDescending">
277+
<h2>
278+
<a href="#log-logDescending">
279+
<code>log.logDescending</code>: Start logging all messages in descending order
280+
</a>
281+
</h2>
282+
<script id="script-log-logDescending">
283+
window.addEventListener('DOMContentLoaded', () => {
284+
const button = document.createElement('button')
285+
button.innerText = 'Log descending'
286+
button.addEventListener('click', () => UI.log.logDescending())
287+
document.querySelector('#demo-log-logDescending').appendChild(button)
288+
})
289+
</script>
290+
<pre id="viewSource-log-logDescending"></pre>
291+
<div id="demo-log-logDescending"></div>
292+
</article>
293+
294+
</body>
295+
</html>

‎src/authn/authn.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import solidAuthClient from 'solid-auth-client'
2626
import ns from '../ns.js'
2727
import kb from '../store.js'
2828
import utils from '../utils.js'
29-
import log from '../log.js'
29+
import { alert } from '../log'
3030
import { AppDetails, AuthenticationContext } from './types'
3131
import { PaneDefinition } from 'pane-registry'
3232

@@ -1069,7 +1069,7 @@ export function loginStatusBox (
10691069
const message = `Your WebID was ${me}. It has been forgotten.`
10701070
me = null
10711071
try {
1072-
log.alert(message)
1072+
alert(message)
10731073
} catch (e) {
10741074
window.alert(message)
10751075
}

‎src/chat/bookmarks.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
const UI = {
88
authn: require('../authn/authn'),
99
icons: require('../iconBase'),
10-
log: require('../log'),
1110
ns: require('../ns'),
1211
media: require('../media-capture'),
1312
pad: require('../pad'),

‎src/chat/infinite.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const SERVER_MKDIRP_BUG = true
1414
const UI = {
1515
authn: require('../authn/authn'),
1616
icons: require('../iconBase'),
17-
log: require('../log'),
1817
ns: require('../ns'),
1918
media: require('../media-capture'),
2019
pad: require('../pad'),

‎src/chat/message.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { messageToolbar, sentimentStripLinked } from './messageTools'
1111
const UI = {
1212
authn: require('../authn/authn'),
1313
icons: require('../iconBase'),
14-
log: require('../log'),
1514
ns: require('../ns'),
1615
media: require('../media-capture'),
1716
pad: require('../pad'),

‎src/chat/messageTools.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
const UI = {
1414
authn: require('../authn/authn'),
1515
icons: require('../iconBase'),
16-
log: require('../log'),
1716
ns: require('../ns'),
1817
media: require('../media-capture'),
1918
pad: require('../pad'),

‎src/chat/thread.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
var UI = {
77
authn: require('../authn/authn'),
88
icons: require('../iconBase'),
9-
log: require('../log'),
109
ns: require('../ns'),
1110
pad: require('../'),
1211
rdf: require('rdflib'),

‎src/create.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
const UI = {
1111
authn: require('./authn/authn'),
1212
icons: require('./iconBase'),
13-
log: require('./log'),
1413
ns: require('./ns'),
1514
store: require('./store'),
1615
style: require('./style'),

‎src/folders.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
/* global confirm */
55
const UI = {
66
icons: require('./iconBase'),
7-
log: require('./log'),
87
ns: require('./ns'),
98
pad: require('./'),
109
rdf: require('rdflib'),

‎src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,7 @@ import { authn } from './authn/index'
4646
import create from './create'
4747
// @ts-ignore
4848
import icons from './iconBase'
49-
// @ts-ignore
50-
import log from './log'
49+
import * as log from './log'
5150
// @ts-ignore
5251
import matrix from './matrix'
5352
// @ts-ignore

0 commit comments

Comments
 (0)