feat(frontend): colorize terminal output of logger

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-09-02 19:11:03 +02:00
parent 1f0439b618
commit 94cf510736
4 changed files with 16 additions and 8 deletions

View file

@ -98,6 +98,7 @@
"markdown-it-sup": "1.0.0", "markdown-it-sup": "1.0.0",
"mermaid": "10.4.0", "mermaid": "10.4.0",
"next": "13.4.19", "next": "13.4.19",
"picocolors": "1.0.0",
"react": "18.2.0", "react": "18.2.0",
"react-bootstrap": "2.8.0", "react-bootstrap": "2.8.0",
"react-bootstrap-icons": "1.10.3", "react-bootstrap-icons": "1.10.3",

View file

@ -96,7 +96,7 @@ describe('Logger', () => {
expect(debugLogMock).toHaveBeenCalledWith( expect(debugLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 01:02:03] %c(prefix)', '%c[2021-10-25 01:02:03] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'muffin' 'muffin'
) )
expect(defaultLogMock).not.toBeCalled() expect(defaultLogMock).not.toBeCalled()
@ -129,7 +129,7 @@ describe('Logger', () => {
expect(debugLogMock).toHaveBeenCalledWith( expect(debugLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 03:04:05] %c(prefix)', '%c[2021-10-25 03:04:05] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'muffin' 'muffin'
) )
expect(defaultLogMock).not.toBeCalled() expect(defaultLogMock).not.toBeCalled()
@ -148,7 +148,7 @@ describe('Logger', () => {
expect(debugLogMock).toHaveBeenCalledWith( expect(debugLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 04:05:06] %c(prefix)', '%c[2021-10-25 04:05:06] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'muffin' 'muffin'
) )
expect(defaultLogMock).not.toBeCalled() expect(defaultLogMock).not.toBeCalled()
@ -163,7 +163,7 @@ describe('Logger', () => {
expect(infoLogMock).toHaveBeenCalledWith( expect(infoLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 05:06:07] %c(prefix)', '%c[2021-10-25 05:06:07] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'toast' 'toast'
) )
expect(warnLogMock).not.toBeCalled() expect(warnLogMock).not.toBeCalled()
@ -182,7 +182,7 @@ describe('Logger', () => {
expect(warnLogMock).toHaveBeenCalledWith( expect(warnLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 06:07:08] %c(prefix)', '%c[2021-10-25 06:07:08] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'eggs' 'eggs'
) )
expect(errorLogMock).not.toBeCalled() expect(errorLogMock).not.toBeCalled()
@ -200,7 +200,7 @@ describe('Logger', () => {
expect(errorLogMock).toHaveBeenCalledWith( expect(errorLogMock).toHaveBeenCalledWith(
'%c[2021-10-25 07:08:09] %c(prefix)', '%c[2021-10-25 07:08:09] %c(prefix)',
'color: yellow', 'color: yellow',
'color: orange', 'color: green',
'bacon' 'bacon'
) )
expect(debugLogMock).not.toBeCalled() expect(debugLogMock).not.toBeCalled()

View file

@ -5,6 +5,7 @@
*/ */
import { isDevMode, isTestMode } from './test-modes' import { isDevMode, isTestMode } from './test-modes'
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
import pico from 'picocolors'
/** /**
* Simple logger that prefixes messages with a timestamp and a name. * Simple logger that prefixes messages with a timestamp and a name.
@ -70,6 +71,11 @@ export class Logger {
private prefix(): string[] { private prefix(): string[] {
const timestamp = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss') const timestamp = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss')
return [`%c[${timestamp}] %c(${this.scope})`, 'color: yellow', 'color: orange']
if (typeof window === 'undefined') {
return [pico.yellow(`[${timestamp}]`), pico.green(`(${this.scope})`)]
} else {
return [`%c[${timestamp}] %c(${this.scope})`, 'color: yellow', 'color: green']
}
} }
} }

View file

@ -2504,6 +2504,7 @@ __metadata:
markdown-it-sup: 1.0.0 markdown-it-sup: 1.0.0
mermaid: 10.4.0 mermaid: 10.4.0
next: 13.4.19 next: 13.4.19
picocolors: 1.0.0
prettier: 3.0.3 prettier: 3.0.3
react: 18.2.0 react: 18.2.0
react-bootstrap: 2.8.0 react-bootstrap: 2.8.0
@ -14561,7 +14562,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"picocolors@npm:^1.0.0": "picocolors@npm:1.0.0, picocolors@npm:^1.0.0":
version: 1.0.0 version: 1.0.0
resolution: "picocolors@npm:1.0.0" resolution: "picocolors@npm:1.0.0"
checksum: a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981 checksum: a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981