fixes for graph-debug.html

evanw · Nov 19, 2023 · 5ff29d5 · 5ff29d5
1 parent 6073a3a
commit 5ff29d5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 20 deletions.
diff --git a/internal/linker/debug.go b/internal/linker/debug.go
@@ -26,6 +26,7 @@ func (c *linkerContext) generateExtraDataForFileJS(sourceIndex uint32) string {
 	file := &c.graph.Files[sourceIndex]
 	repr := file.InputFile.Repr.(*graph.JSRepr)
 	sb := strings.Builder{}
+	isFirstPartWithStmts := true
 
 	quoteSym := func(ref ast.Ref) string {
 		name := fmt.Sprintf("%d:%d [%s]", ref.SourceIndex, ref.InnerIndex, c.graph.Symbols.Get(ref).OriginalName)
@@ -48,16 +49,23 @@ func (c *linkerContext) generateExtraDataForFileJS(sourceIndex uint32) string {
 		} else if ast.MakeIndex32(uint32(partIndex)) == repr.Meta.WrapperPartIndex {
 			sb.WriteString(`,"wrapperPartIndex":true`)
 		} else if len(part.Stmts) > 0 {
-			start := part.Stmts[0].Loc.Start
-			end := len(file.InputFile.Source.Contents)
+			contents := file.InputFile.Source.Contents
+			start := int(part.Stmts[0].Loc.Start)
+			if isFirstPartWithStmts {
+				start = 0
+				isFirstPartWithStmts = false
+			}
+			end := len(contents)
 			if partIndex+1 < len(repr.AST.Parts) {
 				if nextStmts := repr.AST.Parts[partIndex+1].Stmts; len(nextStmts) > 0 {
-					if nextStart := nextStmts[0].Loc.Start; nextStart >= start {
+					if nextStart := int(nextStmts[0].Loc.Start); nextStart >= start {
 						end = int(nextStart)
 					}
 				}
 			}
-			code = file.InputFile.Source.Contents[start:end]
+			start = moveBeforeExport(contents, start)
+			end = moveBeforeExport(contents, end)
+			code = contents[start:end]
 		}
 
 		// importRecords
@@ -122,11 +130,19 @@ func (c *linkerContext) generateExtraDataForFileJS(sourceIndex uint32) string {
 
 		// code
 		sb.WriteString(`,"code":`)
-		sb.Write(helpers.QuoteForJSON(strings.TrimRight(code, "\n"), c.options.ASCIIOnly))
+		sb.Write(helpers.QuoteForJSON(code, c.options.ASCIIOnly))
 
 		sb.WriteByte('}')
 	}
 	sb.WriteString(`]`)
 
 	return sb.String()
 }
+
+func moveBeforeExport(contents string, i int) int {
+	contents = strings.TrimRight(contents[:i], " \t\r\n")
+	if strings.HasSuffix(contents, "export") {
+		return len(contents) - 6
+	}
+	return i
+}
diff --git a/internal/linker/linker.go b/internal/linker/linker.go
@@ -5891,9 +5891,9 @@ func (c *linkerContext) generateChunkJS(chunkIndex int, chunkWaitGroup *sync.Wai
 				for _, output := range pieces[i] {
 					count += c.accurateFinalByteCount(output, finalRelDir)
 				}
-				jMeta.AddString(fmt.Sprintf("\n        %s: {\n          \"bytesInOutput\": %d\n        }",
+				jMeta.AddString(fmt.Sprintf("\n        %s: {\n          \"bytesInOutput\": %d\n        %s}",
 					helpers.QuoteForJSON(c.graph.Files[sourceIndex].InputFile.Source.PrettyPath, c.options.ASCIIOnly),
-					count))
+					count, c.generateExtraDataForFileJS(sourceIndex)))
 			}
 			if len(metaOrder) > 0 {
 				jMeta.AddString("\n      ")

diff --git a/scripts/graph-debugger.html b/scripts/graph-debugger.html
@@ -1,9 +1,4 @@
-<!--
-This is a debugger for some of esbuild's internals. To use:
-1. Set "debugVerboseMetafile = true"
-2. Serve the esbuild repo over localhost
-3. Visit this page with "#metafile=path/to/metafile.json"
--->
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -13,6 +8,16 @@
     body {
       margin: 0;
       overflow: hidden;
+      font: 14px/20px sans-serif;
+      background: #fff;
+      color: #000;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #222;
+        color: #ddd;
+      }
     }
 
     canvas {
@@ -22,10 +27,23 @@
       width: 100%;
       height: 100%;
     }
+
+    #instructions {
+      padding: 20px;
+    }
+
   </style>
 </head>
 
 <body>
+  <div id="instructions">
+    This is a debugger for some of esbuild's internals. To use:
+    <ol>
+      <li>Set "debugVerboseMetafile = true"</li>
+      <li>Serve the esbuild repo over localhost</li>
+      <li>Visit this page with "#metafile=path/to/metafile.json"</li>
+    </ol>
+  </div>
   <canvas></canvas>
   <script type="module">
 
@@ -71,19 +89,30 @@
         this.h += titleLineHeight
 
         // Parts
+        let prevIndent = 0
         c.font = codeFont
         for (const part of this.data.parts) {
-          part.lines = part.code.split('\n')
+          let code = part.code.replace(/\t/g, '  ')
+          const lastNewline = code.lastIndexOf('\n')
+          let nextIndent = 0
+          if (lastNewline >= 0) {
+            const lastLine = code.slice(lastNewline + 1)
+            nextIndent = lastLine.length
+            if (!/\S/.test(lastLine)) code = code.slice(0, lastNewline)
+          }
+          code = ' '.repeat(prevIndent) + code
+          prevIndent = nextIndent
+          part.lines = code.split('\n')
           part.y = this.h
           for (const line of part.lines) {
             this.w = Math.max(this.w, c.measureText(line).width)
             this.h += codeLineHeight
           }
           if (part.nsExportPartIndex) {
-            this.w = Math.max(this.w, c.measureText('// nsExportPartIndex').width)
+            this.w = Math.max(this.w, c.measureText('/* <nsExportPartIndex> */').width)
           }
           if (part.wrapperPartIndex) {
-            this.w = Math.max(this.w, c.measureText('// wrapperPartIndex').width)
+            this.w = Math.max(this.w, c.measureText('/* <wrapperPartIndex> */').width)
           }
           part.h = this.h - part.y
         }
@@ -114,10 +143,10 @@
             c.fillText(part.lines[i], this.x + paddingX, this.y + paddingY + part.y + i * codeLineHeight + codeLineHeight / 2)
           }
           if (part.nsExportPartIndex) {
-            c.fillText('// nsExportPartIndex', this.x + paddingX, this.y + paddingY + part.y + codeLineHeight / 2)
+            c.fillText('/* <nsExportPartIndex> */', this.x + paddingX, this.y + paddingY + part.y + codeLineHeight / 2)
           }
           if (part.wrapperPartIndex) {
-            c.fillText('// wrapperPartIndex', this.x + paddingX, this.y + paddingY + part.y + codeLineHeight / 2)
+            c.fillText('/* <wrapperPartIndex> */', this.x + paddingX, this.y + paddingY + part.y + codeLineHeight / 2)
           }
         }
 
@@ -309,8 +338,20 @@
     let width = 0, height = 0
     let scrollX = 0, scrollY = 0
 
-    if (!location.hash.startsWith('#metafile=')) throw new Error('Expected "#metafile=" in URL')
-    const metafile = await fetch(location.hash.slice('#metafile='.length)).then(r => r.json())
+    let metafile
+    const instructions = document.getElementById('instructions')
+    try {
+      if (!location.hash.startsWith('#metafile=')) throw new Error('Expected "#metafile=" in URL')
+      metafile = await fetch(location.hash.slice('#metafile='.length)).then(r => r.json())
+    } catch (err) {
+      const error = document.createElement('div')
+      error.style.color = 'red'
+      error.textContent = err
+      instructions.append(error)
+      throw err
+    }
+    instructions.remove()
+
     const outputSource = Object.keys(metafile.outputs)[0]
     const output = metafile.outputs[outputSource]
     const inputFiles = Object.entries(output.inputs).map(([source, data]) => new InputFile(source, data)).reverse()