Improve rending of lockfiles in VSCode extension (#4652)

* Fix VSCode extension configuration documentation

* Fix config descriptions

* Fix typo

* Implement bun.lockb highlighter

* Update style

* Improve styling

* Revert bunlock change

6 files changed, 157 insertions, 21 deletions

diff --git a/packages/bun-vscode/README.md b/packages/bun-vscode/README.md
index c3d94924c..6848f8977 100644
--- a/packages/bun-vscode/README.md
+++ b/packages/bun-vscode/README.md
@@ -73,7 +73,7 @@ You can use the following configurations to debug JavaScript and TypeScript file
       "name": "Attach to Bun",
 
       // The URL of the WebSocket inspector to attach to.
-      // This value can be retreived by using `bun --inspect`.
+      // This value can be retrieved by using `bun --inspect`.
       "url": "ws://localhost:6499/",
     }
   ]
@@ -89,12 +89,10 @@ You can use the following configurations to customize the behavior of the Bun ex
   // The path to the `bun` executable.
   "bun.runtime": "/path/to/bun",
 
-  "bun.debugTerminal": {
-    // If support for Bun should be added to the default "JavaScript Debug Terminal".
-    "enabled": true,
-
-    // If the debugger should stop on the first line of the program.
-    "stopOnEntry": false,
-  }
+  // If support for Bun should be added to the default "JavaScript Debug Terminal".
+  "bun.debugTerminal.enabled": true,
+  
+  // If the debugger should stop on the first line of the program.
+  "bun.debugTerminal.stopOnEntry": false,
 }
 ```
\ No newline at end of file
diff --git a/packages/bun-vscode/bun.lockb b/packages/bun-vscode/bun.lockb
index c879b518e..c879b518e 100755..100644
--- a/packages/bun-vscode/bun.lockb
+++ b/packages/bun-vscode/bun.lockb
diff --git a/packages/bun-vscode/media/vscode.css b/packages/bun-vscode/media/vscode.css
new file mode 100644
index 000000000..4420d06e8
--- /dev/null
+++ b/packages/bun-vscode/media/vscode.css
@@ -0,0 +1,70 @@
+.mtk1 { color: #cccccc; }
+.mtk2 { color: #1f1f1f; }
+.mtk3 { color: #d4d4d4; }
+.mtk4 { color: #000080; }
+.mtk5 { color: #6a9955; }
+.mtk6 { color: #569cd6; }
+.mtk7 { color: #b5cea8; }
+.mtk8 { color: #646695; }
+.mtk9 { color: #d7ba7d; }
+.mtk10 { color: #9cdcfe; }
+.mtk11 { color: #f44747; }
+.mtk12 { color: #ce9178; }
+.mtk13 { color: #6796e6; }
+.mtk14 { color: #808080; }
+.mtk15 { color: #d16969; }
+.mtk16 { color: #dcdcaa; }
+.mtk17 { color: #4ec9b0; }
+.mtk18 { color: #c586c0; }
+.mtk19 { color: #4fc1ff; }
+.mtk20 { color: #c8c8c8; }
+.mtk21 { color: #606060; }
+.mtk22 { color: #ffffff; }
+.mtk23 { color: #cd9731; }
+.mtk24 { color: #b267e6; }
+.mtki { font-style: italic; }
+.mtkb { font-weight: bold; }
+.mtku { text-decoration: underline; text-underline-position: under; }
+.mtks { text-decoration: line-through; }
+.mtks.mtku { text-decoration: underline line-through; text-underline-position: under; }
+
+
+
+.bunlock {
+    display: flex;
+    flex-direction: row;
+}
+
+.lines {
+    display: flex;
+    flex-direction: column;
+    width: 30px;
+    margin-right: 15px;
+    text-align: right;
+    opacity: 0.5;
+
+	font-size: var(--vscode-editor-font-size);
+	font-weight: var(--vscode-editor-font-weight);
+	font-family: var(--vscode-editor-font-family);
+	background-color: var(--vscode-editor-background);
+}
+.lines > span {
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+
+code {
+    white-space: pre;
+
+	font-size: var(--vscode-editor-font-size);
+	font-weight: var(--vscode-editor-font-weight);
+	font-family: var(--vscode-editor-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+code > span {
+    display: inline-block;
+    width: 100%;
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
\ No newline at end of file
diff --git a/packages/bun-vscode/package.json b/packages/bun-vscode/package.json
index 39b5d37de..f0a9e065e 100644
--- a/packages/bun-vscode/package.json
+++ b/packages/bun-vscode/package.json
@@ -95,7 +95,7 @@
         },
         "bun.debugTerminal.stopOnEntry": {
           "type": "boolean",
-          "description": "If Bun should stop on entry when used in the JavaScript Debug Terminal.",
+          "description": "If the debugger should stop on the first line when used in the JavaScript Debug Terminal.",
           "scope": "window",
           "default": false
         }
@@ -177,12 +177,12 @@
             "properties": {
               "runtime": {
                 "type": "string",
-                "description": "The path to Bun.",
+                "description": "The path to the `bun` executable. Defaults to `PATH` environment variable.",
                 "default": "bun"
               },
               "runtimeArgs": {
                 "type": "array",
-                "description": "The command-line arguments passed to Bun.",
+                "description": "The command-line arguments passed to the `bun` executable. Unlike `args`, these arguments are not passed to the program, but to the `bun` executable itself.",
                 "items": {
                   "type": "string"
                 },
@@ -208,7 +208,7 @@
               },
               "env": {
                 "type": "object",
-                "description": "The environment variables passed to Bun.",
+                "description": "The environment variables to pass to Bun.",
                 "default": {}
               },
               "strictEnv": {
@@ -218,7 +218,7 @@
               },
               "stopOnEntry": {
                 "type": "boolean",
-                "description": "If a breakpoint should be set at the first line.",
+                "description": "If the debugger should stop on the first line of the program.",
                 "default": false
               },
               "noDebug": {
@@ -231,7 +231,7 @@
                   "boolean",
                   "string"
                 ],
-                "description": "If the process should be restarted when files change.",
+                "description": "If the process should be restarted when files change. Equivalent to passing `--watch` or `--hot` to the `bun` executable.",
                 "enum": [
                   true,
                   false,
@@ -245,7 +245,7 @@
             "properties": {
               "url": {
                 "type": "string",
-                "description": "The URL of the Bun process to attach to."
+                "description": "The URL of the WebSocket inspector to attach to."
               },
               "noDebug": {
                 "type": "boolean",
@@ -254,7 +254,7 @@
               },
               "stopOnEntry": {
                 "type": "boolean",
-                "description": "If a breakpoint should when the program is attached.",
+                "description": "If the debugger should stop on the first line of the program.",
                 "default": false
               }
             }
diff --git a/packages/bun-vscode/src/features/lockfile.style.ts b/packages/bun-vscode/src/features/lockfile.style.ts
new file mode 100644
index 000000000..76af4801b
--- /dev/null
+++ b/packages/bun-vscode/src/features/lockfile.style.ts
@@ -0,0 +1,37 @@
+export function styleLockfile(preview: string) {
+    // Match all lines that don't start with a whitespace character
+    const lines = preview.split(/\n(?!\s)/);
+
+    return lines.map(styleSection).join('\n')
+}
+
+function styleSection(section: string) {
+    const lines = section.split(/\n/);
+
+    return lines.map(styleLine).join('\n')
+}
+
+function styleLine(line: string) {
+    if(line.startsWith('#')){
+        return `<span class="mtk5">${line}</span>`
+    }
+
+    const parts = line.trim().split(' ')
+    if(line.startsWith('    ')){
+        return `<span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;${parts[0]}&nbsp;</span><span class="mtk16">${parts[1]}</span></span>`
+    }
+    if(line.startsWith('  ')){
+        const leftPart = `<span class="mtk6">&nbsp;&nbsp;${parts[0]}&nbsp;</span>`
+
+        if(parts.length === 1)
+            return `<span>${leftPart}</span>`
+        
+        if(parts[1].startsWith('"http://') || parts[1].startsWith('"https://'))
+            return `<span>${leftPart}<span class="mtk12 detected-link">${parts[1]}</span></span>`
+        if(parts[1].startsWith('"'))
+            return `<span>${leftPart}<span class="mtk16">${parts[1]}</span></span>`
+        
+        return `<span>${leftPart}<span class="mtk6">${parts[1]}</span></span>`
+    }
+    return `<span class="mtk1">${line}&nbsp;</span>`
+}
diff --git a/packages/bun-vscode/src/features/lockfile.ts b/packages/bun-vscode/src/features/lockfile.ts
index 81adf5b9e..777649270 100644
--- a/packages/bun-vscode/src/features/lockfile.ts
+++ b/packages/bun-vscode/src/features/lockfile.ts
@@ -1,12 +1,13 @@
 import * as vscode from "vscode";
 import { spawn } from "node:child_process";
+import { styleLockfile } from "./lockfile.style";
 
 export type BunLockfile = vscode.CustomDocument & {
   readonly preview: string;
 };
 
 export class BunLockfileEditorProvider implements vscode.CustomReadonlyEditorProvider {
-  constructor(context: vscode.ExtensionContext) {}
+  constructor(private context: vscode.ExtensionContext) {}
 
   async openCustomDocument(
     uri: vscode.Uri,
@@ -27,13 +28,43 @@ export class BunLockfileEditorProvider implements vscode.CustomReadonlyEditorPro
     token: vscode.CancellationToken,
   ): Promise<void> {
     const { preview } = document;
-    renderLockfile(webviewPanel, preview);
+    webviewPanel.webview.options = {
+      localResourceRoots: [this.context.extensionUri],
+    };
+    renderLockfile(webviewPanel, preview, this.context.extensionUri);
   }
 }
 
-function renderLockfile(webviewPanel: vscode.WebviewPanel, preview: string): void {
-  // TODO: Improve syntax highlighting to match that of yarn.lock
-  webviewPanel.webview.html = `<pre><code class="language-yaml">${preview}</code></pre>`;
+function renderLockfile({ webview }: vscode.WebviewPanel, preview: string, extensionUri: vscode.Uri): void {
+  const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, "media", "vscode.css"));
+  const lockfileContent = styleLockfile(preview);
+  
+  const lineNumbers: string[] = []
+  for(let i = 0; i < lockfileContent.split('\n').length; i++){
+    lineNumbers.push(`<span class="line-number">${i + 1}</span>`)
+  }
+
+  webview.html = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource};">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <link href="${styleVSCodeUri}" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="bunlock">
+      <div class="lines">
+        ${lineNumbers.join('\n')}
+      </div>
+      <code>${lockfileContent}</code>
+    </div>
+  </body>
+</html>`;
 }
 
 function previewLockfile(uri: vscode.Uri, token?: vscode.CancellationToken): Promise<string> {