✨ NEW: pimp logs (#563)

* Update dependency vite to v4.5.1 * ✨ NEW: pimp logs * changeset --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
jycouet · Dec 13, 2023 · 34dfde6 · 34dfde6
1 parent ff6ce5f
commit 34dfde6
Show file tree

Hide file tree

Showing 16 changed files with 350 additions and 107 deletions.
diff --git a/.changeset/dry-pugs-hunt.md b/.changeset/dry-pugs-hunt.md
@@ -0,0 +1,5 @@
+---
+'@kitql/helpers': patch
+---
+
+Pimp default logs look & feel
diff --git a/packages/handles/package.json b/packages/handles/package.json
@@ -41,7 +41,7 @@
     "svelte-check": "3.6.0",
     "tslib": "2.6.2",
     "typescript": "5.3.2",
-    "vite": "4.5.0",
+    "vite": "4.5.1",
     "vitest": "0.34.6"
   },
   "sideEffects": false,

diff --git a/packages/helpers/package.json b/packages/helpers/package.json
@@ -42,7 +42,7 @@
     "svelte-check": "3.6.0",
     "tslib": "2.6.2",
     "typescript": "5.3.2",
-    "vite": "4.5.0",
+    "vite": "4.5.1",
     "vitest": "0.34.0"
   },
   "sideEffects": false,

diff --git a/packages/helpers/src/lib/Log.browser.spec.ts b/packages/helpers/src/lib/Log.browser.spec.ts
@@ -2,18 +2,47 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { Log } from './Log.js'
 import {
+  bgBlack,
+  bgBlackBright,
+  bgBlue,
+  bgBlueBright,
+  bgCyan,
+  bgCyanBright,
+  bgGreen,
+  bgGreenBright,
+  bgMagenta,
+  bgMagentaBright,
+  bgRed,
+  bgRedBright,
+  bgWhite,
+  bgWhiteBright,
+  bgYellow,
+  bgYellowBright,
   black,
+  blackBright,
   blue,
+  blueBright,
   bold,
   cyan,
+  cyanBright,
+  dim,
   gray,
   green,
+  greenBright,
+  hidden,
+  inverse,
   italic,
   magenta,
+  magentaBright,
   red,
+  redBright,
+  reset,
   strikethrough,
+  underline,
   white,
+  whiteBright,
   yellow,
+  yellowBright,
 } from './colors/index.js'
 
 describe('kitql - helper - Log', () => {
@@ -27,65 +56,181 @@ describe('kitql - helper - Log', () => {
     const log = new Log('tool name')
 
     const msg = `with all colors: 
-    ${black('black')},   
-    ${red('red')}, 
-    ${green('green')}, 
-    ${yellow('yellow')}
+    ${bgBlack('bgBlack')}
+    ${bgBlackBright('bgBlackBright')}
+    ${bgBlue('bgBlue')}
+    ${bgBlueBright('bgBlueBright')}
+    ${bgCyan('bgCyan')}
+    ${bgCyanBright('bgCyanBright')}
+    ${bgGreen('bgGreen')}
+    ${bgGreenBright('bgGreenBright')}
+    ${bgMagenta('bgMagenta')}
+    ${bgMagentaBright('bgMagentaBright')}
+    ${bgRed('bgRed')}
+    ${bgRedBright('bgRedBright')}
+    ${bgWhite('bgWhite')}
+    ${bgWhiteBright('bgWhiteBright')}
+    ${bgYellow('bgYellow')}
+    ${bgYellowBright('bgYellowBright')}
+    ${black('black')}
+    ${blackBright('blackBright')}
     ${blue('blue')}
-    ${magenta('magenta')}, 
-    ${cyan('cyan')} 
-    ${white('white')} 
-    ${gray('gray')} 
-    ${bold('bold')} 
-    ${italic('italic')} 
-    ${strikethrough('strikethrough')} 
+    ${blueBright('blueBright')}
+    ${bold('bold')}
+    ${cyan('cyan')}
+    ${cyanBright('cyanBright')}
+    ${dim('dim')}
+    ${gray('gray')}
+    ${green('green')}
+    ${greenBright('greenBright')}
+    ${hidden('hidden')}
+    ${inverse('inverse')}
+    ${italic('italic')}
+    ${magenta('magenta')}
+    ${magentaBright('magentaBright')}
+    ${red('red')}
+    ${redBright('redBright')}
+    ${reset('reset')}
+    ${strikethrough('strikethrough')}
+    ${underline('underline')}
+    ${white('white')}
+    ${whiteBright('whiteBright')}
+    ${yellow('yellow')}
+    ${yellowBright('yellowBright')}
   `
 
     const result = log.info(msg)
 
     expect(result).toMatchInlineSnapshot(
       `
       [
-        "%c[tool name]%c with all colors: 
-          %cblack%c,   
-          %cred%c, 
-          %cgreen%c, 
-          %cyellow%c
+        "%c tool name %c with all colors: 
+          %cbgBlack%c
+          %cbgBlackBright%c
+          %cbgBlue%c
+          %cbgBlueBright%c
+          %cbgCyan%c
+          %cbgCyanBright%c
+          %cbgGreen%c
+          %cbgGreenBright%c
+          %cbgMagenta%c
+          %cbgMagentaBright%c
+          %cbgRed%c
+          %cbgRedBright%c
+          %cbgWhite%c
+          %cbgWhiteBright%c
+          %cbgYellow%c
+          %cbgYellowBright%c
+          %cblack%c
+          %cblackBright%c
           %cblue%c
-          %cmagenta%c, 
-          %ccyan%c 
-          %cwhite%c 
-          %cgray%c 
-          %cbold%c 
-          %citalic%c 
-          %cstrikethrough%c 
+          %cblueBright%c
+          %cbold%c
+          %ccyan%c
+          %ccyanBright%c
+          %cdim%c
+          %cgray%c
+          %cgreen%c
+          %cgreenBright%c
+          %chidden%c
+          %cinverse%c
+          %citalic%c
+          %cmagenta%c
+          %cmagentaBright%c
+          %cred%c
+          %credBright%c
+          %creset%c
+          %cstrikethrough%c
+          %cunderline%c
+          %cwhite%c
+          %cwhiteBright%c
+          %cyellow%c
+          %cyellowBright%c
         ",
-        "color: #ff00ff",
+        "background-color: #00ffff",
         "",
-        "color: black",
+        "background-color: black",
         "",
-        "color: red",
+        "background-color: #a9a9a9",
         "",
-        "color: green",
+        "background-color: blue",
         "",
-        "color: yellow",
+        "background-color: #1e90ff",
+        "",
+        "background-color: cyan",
+        "",
+        "background-color: #00ffff",
+        "",
+        "background-color: green",
+        "",
+        "background-color: #7fff00",
+        "",
+        "background-color: #ff00ff",
+        "",
+        "background-color: #ff69b4",
+        "",
+        "background-color: red",
+        "",
+        "background-color: #ff4500",
+        "",
+        "background-color: white",
+        "",
+        "background-color: #ffffff",
+        "",
+        "background-color: yellow",
+        "",
+        "background-color: #ffd700",
+        "",
+        "color: black",
+        "",
+        "color: #a9a9a9",
         "",
         "color: blue",
         "",
-        "color: #ff00ff",
+        "color: #1e90ff",
+        "",
+        "font-weight: bold",
         "",
         "color: cyan",
         "",
-        "color: white",
+        "color: #00ffff",
+        "",
+        "opacity: 0.5",
         "",
         "color: gray",
         "",
-        "font-weight: bold",
+        "color: green",
+        "",
+        "color: #7fff00",
+        "",
+        "visibility: hidden",
+        "",
+        "filter: invert(1)",
         "",
         "font-style: italic",
         "",
+        "color: #ff00ff",
+        "",
+        "color: #ff69b4",
+        "",
+        "color: red",
+        "",
+        "color: #ff4500",
+        "",
+        "",
+        "",
         "text-decoration: line-through",
         "",
+        "text-decoration: underline",
+        "",
+        "color: white",
+        "",
+        "color: #ffffff",
+        "",
+        "color: yellow",
+        "",
+        "color: #ffd700",
+        "",
       ]
     `,
     )
@@ -100,8 +245,8 @@ describe('kitql - helper - Log', () => {
 
     expect(result).toMatchInlineSnapshot(`
       [
-        "%c[tool name]%c with red: %cred%c and another %cred2%c",
-        "color: #ff00ff",
+        "%c tool name %c with red: %cred%c and another %cred2%c",
+        "background-color: #00ffff",
         "",
         "color: red",
         "",
@@ -120,8 +265,8 @@ describe('kitql - helper - Log', () => {
 
     expect(result).toMatchInlineSnapshot(`
       [
-        "%c[tool name]%c with red: %cred%c and another %cred2%c",
-        "color: #ff00ff",
+        "%c tool name %c with red: %cred%c and another %cred2%c",
+        "background-color: #00ffff",
         "",
         "color: red",
         "",