Skip to content

Commit add003f

Browse files
thetarnavthetarnav
committed
Improve logging by adding place names to all messages.
1 parent 0159eec commit add003f

File tree

10 files changed

+81
-47
lines changed

10 files changed

+81
-47
lines changed

‎.changeset/famous-turtles-sniff.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@solid-devtools/shared": minor
3+
---
4+
5+
Add some ANSI color constants.

‎.changeset/khaki-houses-doubt.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@solid-devtools/extension": patch
3+
---
4+
5+
Improve logging by adding place names to all messages.

‎extension/src/background.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@ It has to coordinate the communication between the different scripts based on th
66
77
*/
88

9-
import {assert, error, log} from '@solid-devtools/shared/utils'
9+
import {assert} from '@solid-devtools/shared/utils'
1010

1111
import {
1212
Place_Name, ConnectionName, type Port,
1313
type DetectionState, type Versions, type Message,
1414
port_on_message, port_post_message, port_post_message_obj,
15+
place_error, place_log,
1516
ICONS_BLUE, ICONS_GRAY,
1617
} from './shared.ts'
1718

1819

19-
log(Place_Name.Background+' loaded.')
20+
place_log(Place_Name.Background, 'loaded.')
2021

2122

2223
type Tab_Id = number & {__Tab_Id__: true}
@@ -98,7 +99,7 @@ function toggle_action_icon(tab_id: Tab_Id) {
9899

99100
function on_connected(port: Port) {
100101

101-
DEV: {log('Port connected', port)}
102+
DEV: {place_log(Place_Name.Background, 'Port connected', port)}
102103

103104
switch (port.name) {
104105
case ConnectionName.Popup: {
@@ -163,7 +164,7 @@ function on_connected(port: Port) {
163164

164165
function on_disconnected(port: Port) {
165166

166-
DEV: {log('Port disconnected', port)}
167+
DEV: {place_log(Place_Name.Background, 'Port disconnected', port)}
167168

168169
switch (port.name) {
169170
case ConnectionName.Popup: {
@@ -226,7 +227,7 @@ function on_disconnected(port: Port) {
226227

227228
function on_message(port: Port, e: Message) {
228229

229-
DEV: {log('Message', e, 'from', port)}
230+
DEV: {place_log(Place_Name.Background, 'Message', e, 'from', port)}
230231

231232
switch (port.name) {
232233
case ConnectionName.Popup: {
@@ -291,7 +292,7 @@ function on_message(port: Port, e: Message) {
291292
if (content) {
292293
port_post_message_obj(content.port, e)
293294
} else {
294-
error(`Cannot forward ${Place_Name.Panel} -> ${Place_Name.Content} - ${e.kind}:`, e.data)
295+
place_error(Place_Name.Background, `Cannot forward ${Place_Name.Panel} -> ${Place_Name.Content} - ${e.kind}:`, e.data)
295296
}
296297

297298
break

‎extension/src/content.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,18 @@ This script is injected into every page and is responsible for:
99
1010
*/
1111

12-
import {error, log} from '@solid-devtools/shared/utils'
13-
1412
import {
1513
Place_Name, ConnectionName,
1614
port_on_message, port_post_message_obj, port_post_message,
1715
window_post_message_obj, window_on_message, window_post_message,
16+
place_error, place_log,
1817
} from './shared.ts'
1918

2019
// @ts-expect-error ?script&module query ensures output in ES module format and only import the script path
2120
import real_world_path from './real_world.ts?script&module'
2221

2322

24-
DEV: {log(Place_Name.Content+' loaded.')}
25-
23+
DEV: {place_log(Place_Name.Content, 'loaded.')}
2624

2725
function loadScriptInRealWorld(path: string): Promise<void> {
2826
return new Promise((resolve, reject) => {
@@ -60,7 +58,9 @@ function on_loaded() {
6058
*/
6159

6260
loadScriptInRealWorld(real_world_path)
63-
.catch(err => error(`Real_World script (${real_world_path}) failed to load.`, err))
61+
.catch(err => {
62+
place_error(Place_Name.Content, `Real_World script (${real_world_path}) failed to load.`, err)
63+
})
6464
}
6565

6666

‎extension/src/devtools.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@ It connects to the background script.
77
88
*/
99

10-
import {error, log} from '@solid-devtools/shared/utils'
11-
1210
import {
13-
Place_Name, ConnectionName, port_on_message, ICON_OUTLINE_32
11+
Place_Name, ConnectionName, port_on_message, ICON_OUTLINE_32,
12+
place_error, place_log,
1413
} from './shared.ts'
1514

1615

17-
log(Place_Name.Devtools+' loaded.')
16+
place_log(Place_Name.Devtools, 'loaded.')
1817

1918

2019
// Create a connection to the background page
@@ -34,7 +33,7 @@ port_on_message(port, e => {
3433
if (e.kind === 'Versions' && e.data && !panel_creating && !panel) {
3534
panel_creating = true
3635

37-
log('Debugger connected -> Creating Devtools_Panel...')
36+
place_log(Place_Name.Devtools, 'Debugger connected -> Creating Devtools_Panel...')
3837

3938
chrome.devtools.panels.create(
4039
'Solid',
@@ -45,9 +44,9 @@ port_on_message(port, e => {
4544
panel = _panel
4645

4746
if (chrome.runtime.lastError) {
48-
error('Creating Devtools_Panel Failed', chrome.runtime.lastError)
47+
place_error(Place_Name.Devtools, 'Creating Devtools_Panel Failed', chrome.runtime.lastError)
4948
} else {
50-
log('Devtools_Panel created.')
49+
place_log(Place_Name.Devtools, 'Devtools_Panel created.')
5150
}
5251
},
5352
)

‎extension/src/panel.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44

55
import * as s from 'solid-js'
66
import * as web from 'solid-js/web'
7-
import {error, log, warn} from '@solid-devtools/shared/utils'
87
import * as frontend from '@solid-devtools/frontend'
98
import * as debug from '@solid-devtools/debugger/types'
109

1110
import {
1211
ConnectionName, Place_Name, port_on_message, port_post_message_obj,
12+
place_log, place_error, place_warn,
1313
type Message, type Versions,
1414
} from './shared.ts'
1515

1616
import '@solid-devtools/frontend/dist/styles.css'
1717

18-
log(Place_Name.Panel+' loaded.')
18+
place_log(Place_Name.Panel, 'loaded.')
1919

2020

2121
function App() {
@@ -55,12 +55,12 @@ function App() {
5555
if (connecting) return
5656

5757
connecting = true
58-
log('Attempting to connect port...')
58+
place_log(Place_Name.Panel, 'Attempting to connect port...')
5959

6060
try {
6161
let new_port = chrome.runtime.connect({name: ConnectionName.Panel})
6262
setPort(new_port)
63-
log('Port connected successfully')
63+
place_log(Place_Name.Panel, 'Port connected successfully')
6464

6565
// Flush queued messages
6666
for (let m of message_queue.splice(0, message_queue.length)) {
@@ -89,7 +89,7 @@ function App() {
8989
}
9090
})
9191
} catch (err) {
92-
error('Failed to connect port:', err)
92+
place_error(Place_Name.Panel, 'Failed to connect port:', err)
9393
}
9494

9595
connecting = false
@@ -116,7 +116,7 @@ function App() {
116116
})()`,
117117
(_, err?: chrome.devtools.inspectedWindow.EvaluationExceptionInfo) => {
118118
if (err && (err.isError || err.isException)) {
119-
error(err.description)
119+
place_error(Place_Name.Panel, err.description)
120120
}
121121
})
122122
break
@@ -125,7 +125,7 @@ function App() {
125125
/* Devtools -> Client */
126126
let curr_port = port()
127127
if (curr_port == null) {
128-
warn('Port not available, message queued')
128+
place_warn(Place_Name.Panel, 'Port not available, message queued')
129129
message_queue.push(e)
130130
connect_port()
131131
return
@@ -134,7 +134,7 @@ function App() {
134134
try {
135135
port_post_message_obj(curr_port, e)
136136
} catch (err) {
137-
warn('Message failed to send:', err)
137+
place_warn(Place_Name.Panel, 'Message failed to send:', err)
138138
message_queue.push(e)
139139
connect_port()
140140
}

‎extension/src/popup.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22

33
import * as s from 'solid-js'
44
import {render} from 'solid-js/web'
5-
import {log} from '@solid-devtools/shared/utils'
65

76
import {
87
ConnectionName, Place_Name, port_on_message,
9-
type DetectionState, type Versions
8+
place_log,
9+
type DetectionState, type Versions,
1010
} from './shared.ts'
1111

1212
import './popup.css'
1313

14-
log(Place_Name.Popup+' loaded.')
14+
place_log(Place_Name.Popup, 'loaded.')
1515

1616
// Create a connection to the background page
1717
const port = chrome.runtime.connect({name: ConnectionName.Popup})

‎extension/src/real_world.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
*/
1111

1212
import * as detect from '@solid-devtools/shared/detect'
13-
import {log, warn} from '@solid-devtools/shared/utils'
1413

1514
import {
1615
Place_Name, type DetectionState,
1716
window_post_message, window_on_message, window_post_message_obj,
17+
place_log, place_warn,
1818
} from './shared.ts'
1919

2020

21-
DEV: {log(Place_Name.Detector_Real_World+' loaded.')}
21+
DEV: {place_log(Place_Name.Detector_Real_World, 'loaded.')}
2222

2323
function main() {
2424

@@ -31,9 +31,9 @@ function main() {
3131
detect.detectSolid().then(detected => {
3232
if (import.meta.env.DEV) {
3333
if (detected) {
34-
log('Solid detected.')
34+
place_log(Place_Name.Detector_Real_World, 'Solid detected.')
3535
} else {
36-
warn('Solid NOT detected.')
36+
place_warn(Place_Name.Detector_Real_World, 'Solid NOT detected.')
3737
}
3838
}
3939
if (detected && !detect_state.solid) {
@@ -44,7 +44,7 @@ function main() {
4444

4545
detect.onSolidDevDetect(() => {
4646
if (import.meta.env.DEV) {
47-
log('Solid_Dev_Mode detected.')
47+
place_log(Place_Name.Detector_Real_World, 'Solid_Dev_Mode detected.')
4848
}
4949
detect_state.solid_dev = true
5050
detect_state.solid = true
@@ -53,7 +53,7 @@ function main() {
5353

5454
detect.onSolidDevtoolsDetect(() => {
5555
if (import.meta.env.DEV) {
56-
log('Devtools_Client detected.')
56+
place_log(Place_Name.Detector_Real_World, 'Devtools_Client detected.')
5757
}
5858
detect_state.setup = true
5959
update_detected()
@@ -147,24 +147,24 @@ function warn_on_version_mismatch(
147147
title: string,
148148
) {
149149
if (!actual_str) {
150-
return warn(`No actual ${title} version found!`)
150+
return place_warn(Place_Name.Detector_Real_World, `No actual ${title} version found!`)
151151
}
152152
if (!expected_str) {
153-
return warn(`No expected ${title} version found!`)
153+
return place_warn(Place_Name.Detector_Real_World, `No expected ${title} version found!`)
154154
}
155155

156156
// warn if the matching adapter version is not the same minor version range as the actual adapter
157157
let [actual, actual_ok] = version_from_string(actual_str)
158158
let [expected, expected_ok] = version_from_string(expected_str)
159159

160160
if (!actual_ok) {
161-
warn(`Actual version ${title}@${actual_str} cannot be parsed.`)
161+
place_warn(Place_Name.Detector_Real_World, `Actual version ${title}@${actual_str} cannot be parsed.`)
162162
}
163163
if (!expected_ok) {
164-
warn(`Expected version ${title}@${expected_str} cannot be parsed.`)
164+
place_warn(Place_Name.Detector_Real_World, `Expected version ${title}@${expected_str} cannot be parsed.`)
165165
}
166166
if (!match_version_patch(actual, expected)) {
167-
warn(`VERSION MISMATCH!
167+
place_warn(Place_Name.Detector_Real_World, `VERSION MISMATCH!
168168
Current version: ${title}@${actual_str}
169169
Expected version: ${title}@${expected_str}`)
170170
}

‎extension/src/shared.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ File for utilities, constants and types related to the communication between the
55
*/
66

77
import * as debug from '@solid-devtools/debugger/types'
8-
import {type Union} from '@solid-devtools/shared/utils'
8+
import * as utils from '@solid-devtools/shared/utils'
99

1010

1111
export const ICON_SOLID_BLUE_16 = 'solid-normal-16.png'
@@ -34,7 +34,6 @@ export const ICONS_GRAY: chrome.runtime.ManifestIcons = {
3434
128: ICON_SOLID_GRAY_128,
3535
}
3636

37-
3837
export const DEVTOOLS_ID_PREFIX = '[solid-devtools]_'
3938

4039
export const enum Place_Name {
@@ -88,12 +87,20 @@ export type Channels = debug.InputChannels
8887
& debug.OutputChannels
8988
& GeneralChannels
9089

91-
export type Message = Union<Channels>
90+
export type Message = utils.Union<Channels>
91+
92+
export function place_log(place: Place_Name, message: string, ...args: any[]): void {
93+
utils.log(`${utils.ANSI_CYAN}${place}${utils.ANSI_RESET}: ${message}`, ...args)
94+
}
95+
export function place_error(place: Place_Name, message: string, ...args: any[]): void {
96+
utils.error(`${utils.ANSI_CYAN}${place}${utils.ANSI_RESET}: ${message}`, ...args)
97+
}
98+
export function place_warn(place: Place_Name, message: string, ...args: any[]): void {
99+
utils.warn(`${utils.ANSI_CYAN}${place}${utils.ANSI_RESET}: ${message}`, ...args)
100+
}
92101

93102
export function to_message(e: any): Message | null {
94-
return e && typeof e === 'object' && typeof e['kind'] === 'string'
95-
? e
96-
: null
103+
return e && typeof e === 'object' && typeof e['kind'] === 'string' ? e : null
97104
}
98105

99106
export type Port = chrome.runtime.Port

‎packages/shared/src/utils.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,23 @@ export function msg<T, K extends keyof T>(kind: K, data: T[K]): UnionMember<T, K
1919
return {kind, data}
2020
}
2121

22+
export const ANSI_RESET = '\x1b[0m'
23+
export const ANSI_BOLD = '\x1b[1m'
24+
export const ANSI_RED = '\x1b[31m'
25+
export const ANSI_GREEN = '\x1b[32m'
26+
export const ANSI_YELLOW = '\x1b[33m'
27+
export const ANSI_BLUE = '\x1b[34m'
28+
export const ANSI_MAGENTA = '\x1b[35m'
29+
export const ANSI_CYAN = '\x1b[36m'
30+
export const ANSI_GRAY = '\x1b[90m'
31+
export const ANSI_BG_CYAN = '\x1b[46m'
32+
export const ANSI_BG_RED = '\x1b[41m'
33+
export const ANSI_BG_YELLOW = '\x1b[43m'
34+
export const ANSI_BG_GREEN = '\x1b[42m'
35+
export const ANSI_BG_MAGENTA = '\x1b[45m'
36+
export const ANSI_BG_BLUE = '\x1b[44m'
37+
export const ANSI_BG_GRAY = '\x1b[100m'
38+
2239
export const LOG_LABEL_CYAN = `\x1b[1;30m\x1b[46msolid-devtools\x1b[0m`
2340

2441
export function info<T>(data: T): T {
@@ -46,7 +63,7 @@ export function error(message: string, ...args: any[]): undefined {
4663

4764
export function log_message(to: string, from: string, e: {kind: string, data: any}) {
4865
// eslint-disable-next-line no-console
49-
console.log(`${LOG_LABEL_CYAN} \x1b[36m${to}\x1b[0m <- \x1b[36m${from}\x1b[0m: \x1b[35m${e.kind}\x1b[0m:`, e.data)
66+
console.log(`${LOG_LABEL_CYAN} ${ANSI_CYAN}${to}${ANSI_RESET} <- ${ANSI_CYAN}${from}${ANSI_RESET}: ${ANSI_MAGENTA}${e.kind}${ANSI_RESET}:`, e.data)
5067
}
5168

5269
export function formatTime(d: Date = new Date()): string {

0 commit comments

Comments
 (0)