/
log.js
171 lines (134 loc) · 4.3 KB
/
log.js
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/*-
Logging
=======
Unpoly can print debugging information to the [browser console](https://developer.chrome.com/docs/devtools/console/).
The information in the log includes:
- Which [events](/up.event) are called
- When we're [making requests to the network](/up.request)
- Which [compilers](/up.script) are applied to which elements
By default only errors are logged. You can enable debug logging through `up.log.enable()`:
![Screenshot of Unpoly logging to the browser console](images/log-interaction-event.png){:width='800'}
@see up.log.enable
@see up.log.disable
@module up.log
*/
up.log = (function() {
const u = up.util
/*-
Configures the logging output on the developer console.
@property up.log.config
@param {boolean} [config.enabled=false]
Whether Unpoly will print debugging information to the developer console.
Debugging information includes which elements are being [compiled](/up.script)
and which [events](/up.event) are being emitted.
Note that errors will always be printed, regardless of this setting.
@param {boolean} [config.banner=true]
Print the Unpoly banner to the developer console.
@param {boolean} [config.format=true]
Format output using CSS.
@stable
*/
const config = new up.LogConfig()
/*-
Prints a logging message to the browser console.
@function up.puts
@param {string} message
@param {Array} ...args
@internal
*/
function printToStandard(...args) {
if (config.enabled) {
printToStream('log', ...args)
}
}
/*-
@function up.warn
@internal
*/
const printToWarn = (...args) => printToStream('warn', ...args)
/*-
@function up.log.error
@internal
*/
const printToError = (...args) => printToStream('error', ...args)
function printToStream(stream, trace, message, ...args) {
printToStreamStyled(stream, trace, '', message, ...args)
}
function printToStreamStyled(stream, trace, customStyles, message, ...args) {
if (message) {
if (config.format) {
console[stream](
`%c${trace}%c ${message}`,
'color: #666666; padding: 1px 3px; border: 1px solid #bbbbbb; border-radius: 2px; font-size: 90%; display: inline-block;' + customStyles,
'', // reset for message after trace
...args
)
} else {
console[stream](`[${trace}] ${u.sprintf(message, ...args)}`)
}
}
}
function printUserEvent(event) {
if (config.enabled) {
event = event.originalEvent || event
let color = '#5566cc'
printToStreamStyled('log', event.type, `color: white; border-color: ${color}; background-color: ${color}`, 'Interaction on %o', event.target)
}
}
function printBanner() {
if (!config.banner) { return }
// The ASCII art looks broken in code since we need to escape backslashes
const logo =
" __ _____ ___ ___ / /_ __\n" +
`/ // / _ \\/ _ \\/ _ \\/ / // / ${up.version}\n` +
"\\___/_//_/ .__/\\___/_/\\_. / \n" +
" / / / /\n\n"
let text = ""
if (!up.migrate.loaded) {
text += "Load unpoly-migrate.js to polyfill deprecated APIs.\n\n"
}
if (config.enabled) {
text += "Call `up.log.disable()` to disable logging for this session."
} else {
text += "Call `up.log.enable()` to enable logging for this session."
}
const color = 'color: #777777'
if (config.format) {
console.log('%c' + logo + '%c' + text, 'font-family: monospace;' + color, color)
} else {
console.log(logo + text)
}
}
up.on('up:framework:boot', printBanner)
/*-
Starts printing debugging information to the developer console.
Debugging information includes which elements are being [compiled](/up.script)
and which [events](/up.event) are being emitted.
Errors will always be printed, regardless of this setting.
@function up.log.enable
@stable
*/
function enable() {
config.enabled = true
}
/*-
Stops printing debugging information to the developer console.
Errors will still be printed, even with logging disabled.
@function up.log.disable
@stable
*/
function disable() {
config.enabled = false
}
return {
puts: printToStandard,
putsEvent: printUserEvent,
error: printToError,
warn: printToWarn,
config,
enable,
disable,
}
})()
up.puts = up.log.puts
up.warn = up.log.warn