feat: add more color tokens and print collpase token

poppinss · Sep 8, 2024 · 67727de · 67727de
1 parent 88c19e6
commit 67727de
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 28 deletions.
diff --git a/examples/console.ts b/examples/console.ts
@@ -13,5 +13,6 @@ import { obj } from './values.js'
 console.log(
   dump(obj, {
     styles: themes.default,
+    collapse: ['DateTime'],
   })
 )
diff --git a/examples/html.ts b/examples/html.ts
@@ -11,7 +11,8 @@ import { createScript, createStyleSheet, dump, themes } from '../formatters/html
 import { obj } from './values.js'
 
 const html = dump(obj, {
-  styles: themes.catppuccin,
+  styles: themes.nightOwl,
+  collapse: ['DateTime'],
 })
 
 const output = `<!DOCTYPE html>

diff --git a/examples/values.ts b/examples/values.ts
@@ -7,10 +7,14 @@
  * file that was distributed with this source code.
  */
 
+import { DateTime } from 'luxon'
+
 const fooSymbol = Symbol.for('foo')
 const blob = new Blob(['hello'])
 
 class User {
+  createdAt = DateTime.local()
+
   constructor() {
     Object.defineProperty(this, 'bar', {
       get() {

diff --git a/formatters/console/printers/main.ts b/formatters/console/printers/main.ts
@@ -28,6 +28,21 @@ function closingBrackets(formatter: ConsoleFormatter) {
  * Console printers to pretty print parser tokens
  */
 export const ConsolePrinters: TokenPrinters = {
+  'collapse': (token, formatter) => {
+    const styles =
+      token.token.type === 'object-start'
+        ? formatter.styles.objectLabel
+        : formatter.styles.arrayLabel
+
+    const collpaseStyles = formatter.styles.collapseLabel
+    return (
+      `${styles(token.name)} ` +
+      (token.token.type === 'object-start' ? openingBrace(formatter) : openingBrackets(formatter)) +
+      ` ${collpaseStyles('collpased')} ` +
+      (token.token.type === 'object-start' ? closingBrace(formatter) : closingBrackets(formatter))
+    )
+  },
+
   'object-start': (token, formatter) => {
     formatter.indentation.increment()
     const styles = formatter.styles.objectLabel
@@ -72,8 +87,8 @@ export const ConsolePrinters: TokenPrinters = {
   },
 
   'object-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.objectLabel
-    return styles('[Object *Circular]')
+    const styles = formatter.styles.circularLabel
+    return styles('[*Circular]')
   },
 
   'object-max-depth-ref': (_, formatter) => {
@@ -82,8 +97,8 @@ export const ConsolePrinters: TokenPrinters = {
   },
 
   'object-value-getter': (_, formatter) => {
-    const styles = formatter.styles.objectLabel
-    return styles('[Object Getter]')
+    const styles = formatter.styles.getterLabel
+    return styles('[Getter]')
   },
 
   'object-value-start': () => {
@@ -124,8 +139,8 @@ export const ConsolePrinters: TokenPrinters = {
   },
 
   'array-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.arrayLabel
-    return styles('[Array *Circular]')
+    const styles = formatter.styles.circularLabel
+    return styles('[*Circular]')
   },
 
   'array-max-depth-ref': (_, formatter) => {
@@ -210,8 +225,8 @@ export const ConsolePrinters: TokenPrinters = {
   },
 
   'map-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.mapLabel
-    return styles('[Map *Circular]')
+    const styles = formatter.styles.circularLabel
+    return styles('[*Circular]')
   },
 
   'map-max-depth-ref': (_, formatter) => {
@@ -254,8 +269,8 @@ export const ConsolePrinters: TokenPrinters = {
   },
 
   'set-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.setLabel
-    return styles('[Set *Circular]')
+    const styles = formatter.styles.circularLabel
+    return styles('[*Circular]')
   },
 
   'set-max-depth-ref': (_, formatter) => {

diff --git a/formatters/console/themes.ts b/formatters/console/themes.ts
@@ -32,15 +32,18 @@ export const themes = {
     date: (value) => colors.magenta(value),
     buffer: (value) => colors.magenta(value),
     functionLabel: (value) => colors.cyan().italic(value),
-    arrayLabel: (value) => colors.cyan().underline(value),
-    objectLabel: (value) => colors.cyan().underline(value),
+    arrayLabel: (value) => colors.cyan(value),
+    objectLabel: (value) => colors.cyan(value),
     mapLabel: (value) => colors.cyan(value),
     setLabel: (value) => colors.cyan(value),
     objectKey: (value) => colors.blue(value),
     objectKeyPrefix: (value) => colors.dim(value),
     classLabel: (value) => colors.cyan(value),
     weakSetLabel: (value) => colors.cyan(value),
     weakRefLabel: (value) => colors.cyan(value),
+    collapseLabel: (value) => colors.dim(value),
+    circularLabel: (value) => colors.cyan(value),
+    getterLabel: (value) => colors.cyan(value),
     weakMapLabel: (value) => colors.cyan(value),
     observableLabel: (value) => colors.cyan(value),
     promiseLabel: (value) => colors.blue(value),

diff --git a/formatters/console/types.ts b/formatters/console/types.ts
@@ -83,6 +83,9 @@ export type ConsolePrinterStyles = {
    */
   setLabel: (value: string) => string
 
+  collapseLabel: (value: string) => string
+  circularLabel: (value: string) => string
+  getterLabel: (value: string) => string
   weakSetLabel: (value: string) => string
   weakRefLabel: (value: string) => string
   weakMapLabel: (value: string) => string

diff --git a/formatters/html/printers/main.ts b/formatters/html/printers/main.ts
@@ -30,6 +30,21 @@ function closingBrackets(formatter: HTMLFormatter) {
  * HTML printers to pretty print parser tokens
  */
 export const HTMLPrinters: TokenPrinters = {
+  'collapse': (token, formatter) => {
+    const styles =
+      token.token.type === 'object-start'
+        ? formatter.styles.objectLabel
+        : formatter.styles.arrayLabel
+
+    const collpaseStyles = formatter.styles.collapseLabel
+    return (
+      `<span style="${styles}">${token.name}</span> ` +
+      (token.token.type === 'object-start' ? openingBrace(formatter) : openingBrackets(formatter)) +
+      ` <span style="${collpaseStyles}">collapsed</span> ` +
+      (token.token.type === 'object-start' ? closingBrace(formatter) : closingBrackets(formatter))
+    )
+  },
+
   'object-start': (token, formatter) => {
     formatter.indentation.increment()
     const styles = formatter.styles.objectLabel
@@ -90,8 +105,8 @@ export const HTMLPrinters: TokenPrinters = {
   },
 
   'object-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.objectLabel
-    return `<span style="${styles}">[Object *Circular]</span>`
+    const styles = formatter.styles.circularLabel
+    return `<span style="${styles}">[*Circular]</span>`
   },
 
   'object-max-depth-ref': (_, formatter) => {
@@ -100,8 +115,8 @@ export const HTMLPrinters: TokenPrinters = {
   },
 
   'object-value-getter': (_, formatter) => {
-    const styles = formatter.styles.objectLabel
-    return `<span style="${styles}">[Object Getter]</span>`
+    const styles = formatter.styles.getterLabel
+    return `<span style="${styles}">[Getter]</span>`
   },
 
   'object-value-start': () => {
@@ -156,8 +171,8 @@ export const HTMLPrinters: TokenPrinters = {
   },
 
   'array-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.arrayLabel
-    return `<span style="${styles}">[Array *Circular]</span>`
+    const styles = formatter.styles.circularLabel
+    return `<span style="${styles}">[*Circular]</span>`
   },
 
   'array-max-depth-ref': (_, formatter) => {
@@ -262,9 +277,9 @@ export const HTMLPrinters: TokenPrinters = {
 
   'map-circular-ref': (_, formatter) => {
     const indent = `${formatter.newLine}${formatter.indentation.getSpaces()}`
-    const styles = formatter.styles.mapLabel
+    const styles = formatter.styles.circularLabel
 
-    return `${indent}<span style="${styles}">[Map *Circular]</span>`
+    return `${indent}<span style="${styles}">[*Circular]</span>`
   },
 
   'map-max-depth-ref': (_, formatter) => {
@@ -318,9 +333,8 @@ export const HTMLPrinters: TokenPrinters = {
   },
 
   'set-circular-ref': (_, formatter) => {
-    const styles = formatter.styles.setLabel
-
-    return `<span style="${styles}">[Set *Circular]</span>`
+    const styles = formatter.styles.circularLabel
+    return `<span style="${styles}">[*Circular]</span>`
   },
 
   'set-max-depth-ref': (_, formatter) => {

diff --git a/formatters/html/themes.ts b/formatters/html/themes.ts
@@ -23,8 +23,8 @@ export const themes = {
     bigInt: 'color: #f78c6c; font-weight: bold;',
     boolean: 'color: #ff5874; font-style: italic;',
     string: 'color: #ecc48d;',
-    null: 'color: #7fdbca;',
-    undefined: 'color: #7fdbca;',
+    null: 'color: #637777;',
+    undefined: 'color: #637777;',
     prototypeLabel: 'color: #637777;',
     symbol: 'color: #82aaff;',
     regex: 'color: #ff5874;',
@@ -38,6 +38,9 @@ export const themes = {
     objectKey: 'color: #c792ea;',
     objectKeyPrefix: 'color: #637777; font-style: italic; font-weight: bold',
     classLabel: 'color: #82aaff;',
+    collapseLabel: 'color: #7fdbca; font-style: italic;',
+    getterLabel: 'color: #7fdbca;',
+    circularLabel: 'color: #7fdbca;',
     weakSetLabel: 'color: #7fdbca;',
     weakRefLabel: 'color: #7fdbca;',
     weakMapLabel: 'color: #7fdbca;',
@@ -71,6 +74,9 @@ export const themes = {
     objectKey: 'color: #212121;',
     objectKeyPrefix: 'color: #9c9c9d; font-style: italic; font-weight: bold',
     classLabel: 'color: #6f42c1;',
+    collapseLabel: 'color: #9c9c9d; font-style: italic;',
+    getterLabel: 'color: #7b3814;',
+    circularLabel: 'color: #7b3814;',
     weakSetLabel: 'color: #7b3814;',
     weakRefLabel: 'color: #7b3814;',
     weakMapLabel: 'color: #7b3814;',
@@ -89,8 +95,8 @@ export const themes = {
     bigInt: 'color: #fab387; font-weight: bold;',
     boolean: 'color: #cba6f7; font-style: italic;',
     string: 'color: #a6e3a1;',
-    null: 'color: #94e2d5;',
-    undefined: 'color: #94e2d5;',
+    null: 'color: #6c7086;',
+    undefined: 'color: #6c7086;',
     prototypeLabel: 'color: #6c7086;',
     symbol: 'color: #f9e2af;',
     regex: 'color: #cba6f7;',
@@ -104,6 +110,9 @@ export const themes = {
     objectKey: 'color: #89b4fa;',
     objectKeyPrefix: 'color: #6c7086; font-style: italic; font-weight: bold',
     classLabel: 'color: #cba6f7;',
+    collapseLabel: 'color: #6c7086; font-style: italic;',
+    getterLabel: 'color: #94e2d5;',
+    circularLabel: 'color: #94e2d5;',
     weakSetLabel: 'color: #94e2d5;',
     weakRefLabel: 'color: #94e2d5;',
     weakMapLabel: 'color: #94e2d5;',

diff --git a/formatters/html/types.ts b/formatters/html/types.ts
@@ -84,6 +84,9 @@ export type HTMLPrinterStyles = {
    */
   setLabel: string
 
+  collapseLabel: string
+  circularLabel: string
+  getterLabel: string
   weakSetLabel: string
   weakRefLabel: string
   weakMapLabel: string

diff --git a/package.json b/package.json
@@ -43,8 +43,10 @@
     "@poppinss/utils": "^6.7.3",
     "@release-it/conventional-changelog": "^8.0.1",
     "@swc/core": "^1.7.23",
+    "@types/luxon": "^3.4.2",
     "del-cli": "^5.1.0",
     "eslint": "^9.10.0",
+    "luxon": "^3.5.0",
     "prettier": "^3.3.3",
     "pretty-format": "^29.7.0",
     "release-it": "^17.6.0",