feat: add shell, title and source link support in HTML formatter

examples/html.ts

@@ -10,4 +10,15 @@
 import { dump, themes } from '../formatters/html/main.js'
 import { obj } from './values.js'
 
-console.log(dump(obj, { styles: themes.minLight }))
+console.log(
+  dump(obj, {
+    styles: themes.minLight,
+    head: {
+      title: 'DUMPER',
+      source: {
+        link: '',
+        text: 'pages/posts/index.edge(32:2)',
+      },
+    },
+  })
+)

formatters/html/formatter.ts

@@ -42,7 +42,7 @@ export let nanoid = (length = 15) => {
  * ```
  */
 export class HTMLFormatter {
-  #cspNonce?: string
+  #config: HTMLFormatterConfig
 
   /**
    * Styles for output elements
@@ -92,7 +92,7 @@ export class HTMLFormatter {
 
   constructor(config?: HTMLFormatterConfig, context?: Record<string, any>) {
     this.context = context || {}
-    this.#cspNonce = config?.cspNonce
+    this.#config = config || {}
     this.styles = Object.freeze({ ...themes.nightOwl, ...config?.styles })
   }
 
@@ -102,9 +102,31 @@ export class HTMLFormatter {
    */
   #wrapOutput(code: string) {
     const id = `dump-${nanoid()}`
-    const nonce = this.#cspNonce ? ` nonce="${this.#cspNonce}"` : ''
+    const nonce = this.#config.cspNonce ? ` nonce="${this.#config.cspNonce}"` : ''
+
+    let head = ''
+    const title = this.#config.head?.title
+    const source = this.#config.head?.source
+
+    /**
+     * Constructing the head elements when source or the
+     * title are provided
+     */
+    if (title || source) {
+      head =
+        `<div class="dumper-head" style="${this.styles.head}">` +
+        (title ? `<div class="dumper-title">${title}</div>` : '') +
+        (source
+          ? '<div class="dumper-source">' +
+            `<a style="${this.styles.sourceLink}" href="${source.link}">${source.text}</a>` +
+            '</div>'
+          : '') +
+        '</div>'
+    }
+
     return (
-      `<div id="${id}" class="dumper-dump">` +
+      `<div id="${id}" class="dumper-dump" style="${this.styles.shell}">` +
+      head +
       `<pre style="${this.styles.pre}"><code>${code}</code></pre>` +
       `<script${nonce}>dumperActivate('${id}')</script>` +
       '</div>'

formatters/html/head.ts

@@ -3,19 +3,48 @@
  * of the document
  */
 export function createStyleSheet() {
-  return `pre samp {
+  return `.dumper-dump {
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: Menlo, Monaco, Consolas, monospace;
+}
+.dumper-dump .dumper-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 8px 6px 8px;
+}
+.dumper-dump .dumper-source {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+}
+.dumper-dump pre {
+  font-family: Menlo, Monaco, Consolas, monospace;
+  line-height: 24px;
+  font-size: 15px;
+  overflow-x: scroll;
+  position:relative;
+  z-index:99999;
+  padding: 10px 15px;
+  border-radius: 4px;
+  margin: 0;
+}
+.dumper-dump pre samp {
   position: relative;
 }
-pre samp[hidden="true"] {
+.dumper-dump pre samp[hidden="true"] {
   display: none;
 }
-.dumper-prototype-group {
+.dumper-dump .dumper-prototype-group {
   opacity: 0.5;
 }
-.dumper-toggle span {
+.dumper-dump .dumper-toggle span {
   display: inline-block;
 }
-.dumper-toggle[aria-expanded="true"] span {
+.dumper-dump .dumper-toggle[aria-expanded="true"] span {
   transform: rotate(90deg);
 }`
 }

formatters/html/themes.ts

@@ -15,7 +15,10 @@ import type { HTMLPrinterStyles } from './types.js'
  */
 export const themes = {
   nightOwl: {
-    pre: 'background-color: #061626; color: #c792ea; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
+    pre: 'background-color: #061626; color: #c792ea;',
+    shell: 'background-color: #0c2f4c;',
+    head: 'color: #cdd6f4;',
+    sourceLink: 'color: #cdd6f4; font-style: italic;',
     toggle: 'color: #978f63; background: none; border: none;',
     braces: 'color: #ffd700;',
     brackets: 'color: #ffd700;',
@@ -48,7 +51,10 @@ export const themes = {
     unknownLabel: 'color: #7fdbca;',
   },
   minLight: {
-    pre: 'background-color: #fff; color: #212121; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
+    pre: 'background-color: #fff; color: #212121;',
+    shell: 'background-color: #eeeeee;',
+    head: 'color: #212121;',
+    sourceLink: 'color: #1976d2; font-style: italic;',
     toggle: 'color: #8992be; background: none; border: none;',
     braces: 'color: #0431fa;',
     brackets: 'color: #0431fa;',
@@ -81,7 +87,10 @@ export const themes = {
     unknownLabel: 'color: #7b3814;',
   },
   catppuccin: {
-    pre: 'background-color: #1e1e2e; color: #94e2d5; font-family: Menlo, Monaco, Consolas, monospace; line-height: 24px; font-size: 15px; overflow-x: scroll; position:relative; z-index:99999;',
+    pre: 'background-color: #1e1e2e; color: #94e2d5;',
+    shell: 'background-color: #35354b;',
+    head: 'color: #cdd6f4;',
+    sourceLink: 'color: #cdd6f4; font-style: italic;',
     toggle: 'color: #85656e; background: none; border: none;',
     braces: 'color: #f38ba8;',
     brackets: 'color: #f38ba8;',

formatters/html/types.ts

@@ -22,6 +22,24 @@ import type { HTMLFormatter } from './main.js'
  * ```
  */
 export type HTMLPrinterStyles = {
+  /**
+   * The shell div contains the head and the
+   * pre tags
+   */
+  shell: string
+
+  /**
+   * Styles for the dumper head element that contains
+   * the title and the source link anchor tag
+   */
+  head: string
+
+  /**
+   * Styles for the anchor tag that displays
+   * the source file info
+   */
+  sourceLink: string
+
   pre: string
   braces: string
   brackets: string
@@ -131,4 +149,17 @@ export type TokenPrinters = {
 export type HTMLFormatterConfig = {
   styles?: Partial<HTMLPrinterStyles>
   cspNonce?: string
+
+  /**
+   * The head section contains the metadata about the
+   * dumped values. It can have a title and a link
+   * to the source file that printed the dump
+   */
+  head?: {
+    title?: string
+    source?: {
+      link: string
+      text: string
+    }
+  }
 }