aboutsummaryrefslogtreecommitdiff
path: root/packages/bun-vscode/src/features/lockfile/index.ts
blob: cef9a17686bec3e0c193e8d730d3e2476215f33e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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(private context: vscode.ExtensionContext) {}

  async openCustomDocument(
    uri: vscode.Uri,
    openContext: vscode.CustomDocumentOpenContext,
    token: vscode.CancellationToken,
  ): Promise<BunLockfile> {
    const preview = await previewLockfile(uri, token);
    return {
      uri,
      preview,
      dispose() {},
    };
  }

  async resolveCustomEditor(
    document: BunLockfile,
    webviewPanel: vscode.WebviewPanel,
    token: vscode.CancellationToken,
  ): Promise<void> {
    const { preview } = document;
    webviewPanel.webview.options = {
      localResourceRoots: [this.context.extensionUri],
    };
    renderLockfile(webviewPanel, preview, this.context.extensionUri);
  }
}

function renderLockfile({ webview }: vscode.WebviewPanel, preview: string, extensionUri: vscode.Uri): void {
  const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, "assets", "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> {
  return new Promise((resolve, reject) => {
    const process = spawn("bun", [uri.fsPath], {
      stdio: ["ignore", "pipe", "pipe"],
    });
    token?.onCancellationRequested(() => {
      process.kill();
    });
    let stdout = "";
    process.stdout.on("data", (data: Buffer) => {
      stdout += data.toString();
    });
    let stderr = "";
    process.stderr.on("data", (data: Buffer) => {
      stderr += data.toString();
    });
    process.on("error", error => {
      reject(error);
    });
    process.on("exit", code => {
      if (code === 0) {
        resolve(stdout);
      } else {
        reject(new Error(`Bun exited with code: ${code}\n${stderr}`));
      }
    });
  });
}

export function registerBunlockEditor(context: vscode.ExtensionContext): void {
  const viewType = "bun.lockb";
  const provider = new BunLockfileEditorProvider(context);

  context.subscriptions.push(
    vscode.window.registerCustomEditorProvider(viewType, provider, {
      supportsMultipleEditorsPerDocument: true,
      webviewOptions: {
        enableFindWidget: true,
        retainContextWhenHidden: true,
      },
    }),
  );
}