Repository: yoavbls/pretty-ts-errors Branch: main Commit: 89b004805a2d Files: 87 Total size: 113.9 KB Directory structure: gitextract_npj6yo6v/ ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ └── bug_report.md │ └── workflows/ │ └── pr-ci.yml ├── .gitignore ├── .prettierrc ├── .vscode/ │ ├── extensions.json │ ├── launch.json │ ├── settings.json │ └── tasks.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── apps/ │ └── vscode-extension/ │ ├── .gitignore │ ├── LICENSE │ ├── package.json │ ├── scripts/ │ │ ├── build.js │ │ └── process-shim.js │ ├── src/ │ │ ├── commands/ │ │ │ ├── copyError.ts │ │ │ ├── execute.ts │ │ │ ├── pinError.ts │ │ │ ├── revealSelection.ts │ │ │ ├── showErrorInSidebar.ts │ │ │ ├── unpinError.ts │ │ │ └── validate.ts │ │ ├── diagnostics.ts │ │ ├── extension.ts │ │ ├── formattedDiagnosticsStore.ts │ │ ├── globals.d.ts │ │ ├── logger.ts │ │ ├── provider/ │ │ │ ├── hoverProvider.ts │ │ │ ├── markdownWebviewProvider.ts │ │ │ ├── selectedTextHoverProvider.ts │ │ │ └── webviewViewProvider.ts │ │ ├── supportedLanguageIds.ts │ │ └── test/ │ │ ├── runTest.ts │ │ └── suite/ │ │ ├── extension.test.ts │ │ └── index.ts │ ├── syntaxes/ │ │ └── type.tmGrammar.json │ ├── tsconfig.json │ └── webview/ │ ├── index.html │ ├── index.js │ ├── style.css │ └── vendor/ │ └── codicon.css ├── docs/ │ ├── hide-original-errors.md │ ├── pretty-ts-errors-hack.css │ └── vscode-logs.md ├── eslint.config.mjs ├── examples/ │ ├── errors.js │ ├── errors.ts │ ├── errors.vue │ └── examples.type ├── package.json ├── packages/ │ ├── formatter/ │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── addMissingParentheses.ts │ │ │ ├── errorMessagePrettifier.ts │ │ │ ├── formatTypeBlock.ts │ │ │ ├── formatTypeWithPrettier.ts │ │ │ └── index.ts │ │ ├── test/ │ │ │ ├── errorMessageMocks.ts │ │ │ └── formatter.vitest.ts │ │ ├── tsconfig.json │ │ └── vitest.config.ts │ ├── utils/ │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ └── tsconfig.json │ └── vscode-formatter/ │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── components/ │ │ │ ├── actions.ts │ │ │ ├── errorTitle.ts │ │ │ ├── hoverCodeBlock.ts │ │ │ ├── htmlCodeBlock.ts │ │ │ ├── miniLine.ts │ │ │ ├── plainCodeBlock.ts │ │ │ └── spanBreak.ts │ │ ├── format/ │ │ │ ├── embedSymbolLinks.ts │ │ │ ├── identSentences.ts │ │ │ ├── prettifyDiagnosticForHover.ts │ │ │ └── prettifyDiagnosticForSidebar.ts │ │ └── index.ts │ ├── test/ │ │ └── vscode-formatter.vitest.ts │ ├── tsconfig.json │ └── vitest.config.ts ├── tsconfig.base.json ├── tsconfig.json ├── tsdown.config.mjs └── turbo.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ github: [yoavbls, kevinramharak] ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Create a report to help us improve title: "" labels: bug assignees: "" --- ### **Describe the bug** A clear and concise description of what the bug is. ### **Expected behavior** A clear and concise description of what you expected to happen. ### **Original error** If this bug is related to an error that is not formatting well, please attach the original error in a code block: ``` Type 'number' is not assignable to type 'string'.ts(2322) ``` ### **Logs** Add the logs to help debugging what went wrong. See [these instructions](https://github.com/yoavbls/pretty-ts-errors/blob/main/docs/vscode-logs.md) on how to find and export the logs. Either add it as an external file or put them in between these `
` tags below:



Logs








### **Screenshots**

If applicable, add screenshots to help explain your problem.


================================================
FILE: .github/workflows/pr-ci.yml
================================================
name: PR CI

on:
  workflow_dispatch:
  pull_request:
    types: [opened, synchronize, reopened, ready_for_review]

permissions:
  contents: read

concurrency:
  group: pr-ci-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

jobs:
  validate:
    name: Install, Build, and Test
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: Install VSCE CLI
        run: npm install -g @vscode/vsce

      - name: Check formatting
        run: npm run format:check

      - name: Build all workspaces
        run: npm run build

      - name: Run formatter tests
        run: npm -w @pretty-ts-errors/formatter run test -- --reporter=verbose

      - name: Run VS Code formatter tests
        run: npm -w @pretty-ts-errors/vscode-formatter run test -- --reporter=verbose

      - name: Run VS Code extension tests
        run: xvfb-run -a npm --workspace apps/vscode-extension run test


================================================
FILE: .gitignore
================================================
out
dist
node_modules
.vscode-test/
*.vsix
.turbo
.vercel
.idea
**/.DS_Store
tsconfig.tsbuildinfo

================================================
FILE: .prettierrc
================================================
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5"
}


================================================
FILE: .vscode/extensions.json
================================================
{
  // See http://go.microsoft.com/fwlink/?LinkId=827846
  // for the documentation about the extensions.json format
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "connor4312.esbuild-problem-matchers"
  ]
}


================================================
FILE: .vscode/launch.json
================================================
// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/apps/vscode-extension"
      ],
      "outFiles": [
        "${workspaceFolder}/apps/vscode-extension/dist/**/*.js",
        "${workspaceFolder}/apps/vscode-extension/out/**/*.js"
      ],
      "preLaunchTask": "watch - apps/vscode-extension"
    },
    {
      "name": "Run Extension (all extensions disabled)",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--disable-extensions",
        "--extensionDevelopmentPath=${workspaceFolder}/apps/vscode-extension"
      ],
      "outFiles": [
        "${workspaceFolder}/apps/vscode-extension/dist/**/*.js",
        "${workspaceFolder}/apps/vscode-extension/out/**/*.js"
      ],
      "preLaunchTask": "watch - apps/vscode-extension"
    },
    {
      "name": "Extension Tests",
      "type": "extensionHost",
      "request": "launch",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}/apps/vscode-extension",
        "--extensionTestsPath=${workspaceFolder}/apps/vscode-extension/out/test/suite/index"
      ],
      "outFiles": [
        "${workspaceFolder}/apps/vscode-extension/out/**/*.js",
        "${workspaceFolder}/apps/vscode-extension/dist/**/*.js"
      ],
      "preLaunchTask": "tasks: watch-tests"
    }
  ]
}


================================================
FILE: .vscode/settings.json
================================================
// Place your settings in this file to overwrite default and user settings.
{
  "files.exclude": {
    "out": false, // set this to true to hide the "out" folder with the compiled JS files
    "dist": false // set this to true to hide the "dist" folder with the compiled JS files
  },
  "search.exclude": {
    "out": true, // set this to false to include "out" folder in search results
    "dist": true // set this to false to include "dist" folder in search results
  },
  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
  "typescript.tsc.autoDetect": "off",
  "chat.tools.terminal.autoApprove": {
    "npx vitest": true
  }
}


================================================
FILE: .vscode/tasks.json
================================================
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch - apps/vscode-extension",
      "type": "shell",
      "command": "npm run watch --silent",
      "options": {
        "cwd": "${workspaceFolder}/apps/vscode-extension"
      },
      "problemMatcher": {
        "owner": "esbuild",
        "fileLocation": "autoDetect",
        "pattern": [
          {
            "regexp": "^✘ \\[ERROR\\] (.*)$",
            "message": 1
          },
          {
            "regexp": "^\\s*(.*):(\\d+):(\\d+):$",
            "file": 1,
            "line": 2,
            "column": 3
          }
        ],
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^\\[watch\\] build started$",
          "endsPattern": "^\\[watch\\] build finished$"
        }
      },
      "isBackground": true,
      "presentation": {
        "reveal": "never",
        "group": "watchers"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "type": "npm",
      "script": "watch-tests",
      "path": "apps/vscode-extension",
      "problemMatcher": "$tsc-watch",
      "isBackground": true,
      "presentation": {
        "reveal": "never",
        "group": "watchers"
      },
      "group": "build"
    },
    {
      "label": "tasks: watch-tests",
      "dependsOn": ["watch - apps/vscode-extension", "npm: watch-tests"],
      "problemMatcher": []
    }
  ]
}


================================================
FILE: CONTRIBUTING.md
================================================
Contribute good stuff

If you're looking for ideas, check out our [board](https://github.com/users/yoavbls/projects/3) and [open issues](https://github.com/yoavbls/pretty-ts-errors/issues)


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2023 Yoav Balasiano

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================

  
    
    
    Logo
  


# Pretty `TypeScript` Errors

Make TypeScript errors prettier and human-readable in VSCode.

[![GitHub stars](https://img.shields.io/github/stars/yoavbls/pretty-ts-errors.svg?style=social&label=Star)](https://GitHub.com/yoavbls/pretty-ts-errors/stargazers/)
[![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7?logo=visualstudiocode&logoColor=white)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors) [![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE) [![Visual Studio Code](https://img.shields.io/visual-studio-marketplace/i/yoavbls.pretty-ts-errors)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
Webstorm logo
[![Cursor](https://img.shields.io/badge/Cursor-000000?logo=cursor)](https://open-vsx.org/extension/yoavbls/pretty-ts-errors)

TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and `"..."`.
This extension will help you understand what's going on. For example, in this relatively simple error:

    

## Watch this


 Watch theo's video


and others from:
[Web Dev Simplified](https://www.youtube.com/watch?v=ccg-erZYO4k&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=1),
[Josh tried coding](https://www.youtube.com/watch?v=_9y29Cyo9uU&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=3),
[trash dev](https://www.youtube.com/watch?v=WJeD3DKlWT4&list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR&index=4&t=208),
and [more](https://www.youtube.com/playlist?list=PL0rc4JAdEsVpOriHzlAG7KUnhKIK9c7OR)

## Features

- Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes
- A button that leads you to the relevant type declaration next to the type in the error message
- A button that navigates you to the error at [typescript.tv](http://typescript.tv), where you can find a detailed explanation, sometimes with a video
- A button that navigates you to [ts-error-translator](https://ts-error-translator.vercel.app/), where you can read the error in plain English

## Supports

- Node and Deno TypeScript error reporters (in `.ts` files)
- JSDoc type errors (in `.js` and `.jsx` files)
- React, Solid and Qwik errors (in `.tsx` and `.mdx` files)
- Astro, Svelte and Vue files when TypeScript is enabled (in `.astro`, `.svelte` and `.vue` files)
- Ember and Glimmer TypeScript errors and template issues reported by Glint (in `.hbs`, `.gjs`, and `.gts` files)

## Installation

```
code --install-extension yoavbls.pretty-ts-errors
```

Or simply by searching for `pretty-ts-errors` in the [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)

#### How to hide the original errors and make the types copyable

Follow the instructions [there](./docs/hide-original-errors.md). unfortunately, this hack is required because of VSCode limitations.

## Why isn't it trivial

1. TypeScript errors contain types that are not valid in TypeScript.
   Yes, these types include things like `... more ...`, `{ ... }`, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.
2. Types can't be syntax highlighted in code blocks because the part of `type X = ...` is missing, so I needed to create a new TextMate grammar, a superset of TypeScript grammar called `type`.
3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.
   

## Hype section


  
    Winning the Productivity Booster category at JSNation 2023
  


  
    
     
    Tanner's tweet
  


  
    
    
    Theo's tweet
  


  
    
    
    Johnson's tweet
  


### Stars from stars



  
    

      
        
          

          Kent C. Dodds
        
      		
      
        
          

          Matt Pocock
        
      		
      
        
          

          Alex / KATT
        
      		
      
        
          

          Tanner Linsley
        
      		
      
        
          

          Theo Browne
        
      		
    

  



## Sponsorship

Every penny will be invested in other contributors to the project, especially ones that work
on things that I can't be doing myself like adding support to the extension for other IDEs 🫂

## Contribution

Help by upvoting or commenting on issues we need to be resolved [here](https://github.com/yoavbls/pretty-ts-errors/discussions/43)
Any other contribution is welcome. Feel free to open any issue / PR you think.


================================================
FILE: apps/vscode-extension/.gitignore
================================================
README.md

================================================
FILE: apps/vscode-extension/LICENSE
================================================
MIT License

Copyright (c) 2023 Yoav Balasiano

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: apps/vscode-extension/package.json
================================================
{
  "name": "pretty-ts-errors",
  "displayName": "Pretty TypeScript Errors",
  "publisher": "YoavBls",
  "description": "Make TypeScript errors prettier and more human-readable in VSCode",
  "version": "0.8.4",
  "icon": "assets/icon.png",
  "repository": {
    "type": "git",
    "url": "https://github.com/yoavbls/pretty-ts-errors",
    "directory": "apps/vscode-extension"
  },
  "homepage": "https://github.com/yoavbls/pretty-ts-errors",
  "engines": {
    "vscode": "^1.77.0"
  },
  "vsce": {
    "dependencies": false
  },
  "categories": [
    "Programming Languages",
    "Debuggers",
    "Visualization",
    "Other"
  ],
  "galleryBanner": {
    "color": "#133b55",
    "theme": "dark"
  },
  "activationEvents": [
    "onLanguage:typescript",
    "onLanguage:javascript",
    "onLanguage:typescriptreact",
    "onLanguage:javascriptreact",
    "onLanguage:astro",
    "onLanguage:svelte",
    "onLanguage:vue",
    "onLanguage:mdx",
    "onLanguage:glimmer-js",
    "onLanguage:glimmer-ts"
  ],
  "main": "./dist/extension.js",
  "browser": "./dist/extension.js",
  "files": [
    "dist/**/*",
    "assets/**/*",
    "syntaxes/**/*",
    "webview/**/*",
    "LICENSE"
  ],
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "prettyTsErrors",
          "title": "Pretty TypeScript Errors",
          "icon": "./assets/ribbon.svg"
        }
      ]
    },
    "views": {
      "prettyTsErrors": [
        {
          "id": "prettyTsErrors.sidePanel",
          "icon": "./assets/ribbon.svg",
          "name": "Side Panel",
          "type": "webview"
        }
      ]
    },
    "commands": [
      {
        "command": "prettyTsErrors.revealSelection",
        "title": "Reveal the given selection",
        "category": "Pretty TS Errors",
        "enablement": "!isCommandPanel"
      },
      {
        "command": "prettyTsErrors.showErrorInSidebar",
        "title": "Show Error in Sidebar",
        "category": "Pretty TS Errors",
        "icon": "./assets/ribbon.svg",
        "enablement": "!isCommandPanel"
      },
      {
        "command": "prettyTsErrors.pinError",
        "title": "Pin Error",
        "category": "Pretty TS Errors",
        "enablement": "!isCommandPanel"
      },
      {
        "command": "prettyTsErrors.unpinError",
        "title": "Unpin Error",
        "category": "Pretty TS Errors",
        "enablement": "!isCommandPanel"
      }
    ],
    "menus": {
      "editor/title": [
        {
          "command": "prettyTsErrors.showErrorInSidebar",
          "when": "prettyTsErrors.hasErrors && resourceLangId in prettyTsErrors.supportedLanguageIds",
          "group": "navigation"
        }
      ]
    },
    "languages": [
      {
        "id": "type",
        "extensions": [
          ".type"
        ]
      }
    ],
    "grammars": [
      {
        "language": "type",
        "scopeName": "source.type",
        "path": "./syntaxes/type.tmGrammar.json"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "cp ../../README.md README.md && npm run package",
    "compile": "node scripts/build",
    "watch": "npm run compile -- --watch",
    "dev": "npm-run-all --parallel _dev:*",
    "_dev:ext": "npm run watch",
    "_dev:formatter": "npm run -w @pretty-ts-errors/formatter dev",
    "_dev:vscode-formatter": "npm run -w @pretty-ts-errors/vscode-formatter dev",
    "build": "vsce package",
    "package": "node scripts/build -- --production",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "lint": "tsc -p . --noEmit",
    "test": "node ./out/test/runTest.js",
    "webview": "npx http-server ./webview -o -a localhost -p 8080"
  },
  "devDependencies": {
    "@shikijs/types": "^3.13.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "^16.11.68",
    "@types/vscode": "^1.77.0",
    "@types/vscode-webview": "^1.57.5",
    "@vscode/codicons": "^0.0.41",
    "@vscode/test-electron": "^2.5.2",
    "esbuild": "^0.25.11",
    "glob": "^13.0.6",
    "mocha": "12.0.0-beta-10",
    "npm-run-all": "^4.1.5"
  },
  "dependencies": {
    "@pretty-ts-errors/formatter": "*",
    "@pretty-ts-errors/utils": "*",
    "@pretty-ts-errors/vscode-formatter": "*",
    "shiki": "^3.13.0",
    "vscode-languageclient": "^9.0.1",
    "vscode-shiki-bridge": "^0.5.2"
  }
}


================================================
FILE: apps/vscode-extension/scripts/build.js
================================================
const process = require("node:process");
const console = require("node:console");
const fs = require("node:fs");
const path = require("node:path");
const production = process.argv.includes("--production");
const watch = process.argv.includes("--watch");

/**
 * @see https://code.visualstudio.com/api/working-with-extensions/bundling-extension#using-esbuild
 */
async function main() {
  const ctx = await require("esbuild").context({
    entryPoints: {
      extension: "./src/extension.ts",
    },
    bundle: true,
    outdir: "./dist",
    external: ["vscode"],
    format: "cjs",
    inject: ["./scripts/process-shim.js"],
    tsconfig: "./tsconfig.json",
    define: production ? { "process.env.NODE_ENV": '"production"' } : undefined,
    minify: production,
    sourcemap: !production,
    plugins: [workspacePackagesPlugin, esbuildProblemMatcherPlugin],
  });
  if (watch) {
    await ctx.watch();
  } else {
    fs.rmSync("./dist", { recursive: true, force: true });
    await ctx.rebuild();
    await ctx.dispose();
  }
}

/**
 * @type {import('esbuild').Plugin}
 */
const esbuildProblemMatcherPlugin = {
  name: "esbuild-problem-matcher",
  setup(build) {
    build.onStart(() => {
      console.log("[watch] build started");
    });
    build.onEnd((result) => {
      result.errors.forEach(({ text, location }) => {
        console.error(`✘ [ERROR] ${text}`);
        console.error(
          `    ${location.file}:${location.line}:${location.column}:`
        );
      });
      console.log("[watch] build finished");
    });
  },
};

/**
 * Resolve internal workspace packages to their source files so we bundle them in watch/debug.
 * This makes changes in packages/* reflected immediately without separate watchers.
 * @type {import('esbuild').Plugin}
 */
const workspacePackagesPlugin = {
  name: "workspace-packages",
  setup(build) {
    const pkgRoot = path.resolve(__dirname, "../../../packages");
    /** @type {Record} */
    const alias = {
      "@pretty-ts-errors/utils": path.join(pkgRoot, "utils/src/index.ts"),
      "@pretty-ts-errors/formatter": path.join(
        pkgRoot,
        "formatter/src/index.ts"
      ),
      "@pretty-ts-errors/vscode-formatter": path.join(
        pkgRoot,
        "vscode-formatter/src/index.ts"
      ),
    };
    build.onResolve(
      { filter: /^@pretty-ts-errors\/(utils|formatter|vscode-formatter)$/ },
      (args) => {
        const target = alias[args.path];
        return target ? { path: target } : undefined;
      }
    );
  },
};

main().catch((e) => {
  console.error(e);
  process.exit(1);
});


================================================
FILE: apps/vscode-extension/scripts/process-shim.js
================================================
// https://esbuild.github.io/api/#inject

let _cwd = "/";

export let process = {
  cwd: () => _cwd,
  chdir: (newCwd) => (_cwd = newCwd),
  env: {},
};


================================================
FILE: apps/vscode-extension/src/commands/copyError.ts
================================================
import { commands, env, window, type ExtensionContext } from "vscode";
import { execute } from "./execute";

const COMMAND_ID = "prettyTsErrors.copyError";

export function registerCopyError(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(COMMAND_ID, async (errorMessage: unknown) =>
      execute(COMMAND_ID, async () => {
        if (typeof errorMessage !== "string") {
          throw new Error("cannot write non-string value to clipboard", {
            cause: errorMessage,
          });
        }
        await env.clipboard.writeText(errorMessage);
        window.showInformationMessage("Copied error message to clipboard!");
      })
    )
  );
}


================================================
FILE: apps/vscode-extension/src/commands/execute.ts
================================================
import { window } from "vscode";
import { logger } from "../logger";

/**
 * A wrapper function to execute command tasks while providing user feedback and logging on errors.
 */
export async function execute(
  commandName: string,
  task: (...args: unknown[]) => unknown | Promise
) {
  try {
    return await task();
  } catch (error) {
    if (error instanceof Error) {
      logger.error(error);
    } else if (typeof error === "string") {
      logger.error(error);
    } else {
      logger.error("caught non-string or error value: ", error);
    }
    window.showErrorMessage(`Failed to execute command: '${commandName}'`);
    throw error;
  }
}


================================================
FILE: apps/vscode-extension/src/commands/pinError.ts
================================================
import { commands, type ExtensionContext } from "vscode";
import { execute } from "./execute";
import { tryEnsureRange } from "./validate";
import { getViewProvider } from "../provider/webviewViewProvider";

const COMMAND_ID = "prettyTsErrors.pinError";

export function registerPinError(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(
      COMMAND_ID,
      async (maybeRangeLike: unknown, maybeMessage?: unknown) =>
        execute(COMMAND_ID, async () => {
          const { isValidRange, range } = tryEnsureRange(maybeRangeLike);
          if (!isValidRange) {
            throw new Error("cannot pin error with an invalid range", {
              cause: maybeRangeLike,
            });
          }
          const message =
            typeof maybeMessage === "string" ? maybeMessage : undefined;

          const viewProvider = getViewProvider();
          await viewProvider?.pinDiagnostic(range, message);

          try {
            await commands.executeCommand("prettyTsErrors.sidePanel.focus");
          } catch {}
        })
    )
  );
}


================================================
FILE: apps/vscode-extension/src/commands/revealSelection.ts
================================================
import { type ExtensionContext, commands } from "vscode";
import { tryEnsureRange, tryEnsureUri } from "./validate";
import { execute } from "./execute";

const COMMAND_ID = "prettyTsErrors.revealSelection";

export function registerRevealSelection(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(
      COMMAND_ID,
      async (maybeUriLike: unknown, maybeRangeLike: unknown) =>
        execute(COMMAND_ID, async () => {
          const { isValidUri, uri } = tryEnsureUri(maybeUriLike);
          const { isValidRange, range } = tryEnsureRange(maybeRangeLike);
          if (!isValidUri || !isValidRange) {
            throw new Error(
              "cannot reveal selection with invalid range or uri",
              {
                cause: {
                  range: maybeRangeLike,
                  uri: maybeUriLike,
                },
              }
            );
          }
          return commands.executeCommand("vscode.open", uri, {
            selection: range,
          });
        })
    )
  );
}


================================================
FILE: apps/vscode-extension/src/commands/showErrorInSidebar.ts
================================================
import { commands, type ExtensionContext } from "vscode";
import { execute } from "./execute";
import { tryEnsureRange } from "./validate";
import { getViewProvider } from "../provider/webviewViewProvider";

const COMMAND_ID = "prettyTsErrors.showErrorInSidebar";

export function registerShowErrorInSidebar(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(
      COMMAND_ID,
      async (maybeRangeLike?: unknown, maybeMessage?: unknown) =>
        execute(COMMAND_ID, async () => {
          if (maybeRangeLike !== undefined) {
            const { isValidRange, range } = tryEnsureRange(maybeRangeLike);
            const message =
              typeof maybeMessage === "string" ? maybeMessage : undefined;
            const viewProvider = getViewProvider();
            if (isValidRange && viewProvider) {
              await viewProvider.lockToDiagnostic(range, message);
            }
          }

          try {
            await commands.executeCommand(
              "workbench.view.extension.prettyTsErrors"
            );
          } catch {}
        })
    )
  );
}


================================================
FILE: apps/vscode-extension/src/commands/unpinError.ts
================================================
import { commands, type ExtensionContext } from "vscode";
import { execute } from "./execute";
import { getViewProvider } from "../provider/webviewViewProvider";

const COMMAND_ID = "prettyTsErrors.unpinError";

export function registerUnpinError(context: ExtensionContext) {
  context.subscriptions.push(
    commands.registerCommand(COMMAND_ID, async () =>
      execute(COMMAND_ID, async () => {
        const viewProvider = getViewProvider();
        viewProvider?.unpinDiagnostic();
      })
    )
  );
}


================================================
FILE: apps/vscode-extension/src/commands/validate.ts
================================================
import { Range, Uri } from "vscode";

export function tryEnsureUri(
  maybeUriLike: unknown
): { isValidUri: true; uri: Uri } | { isValidUri: false; uri?: undefined } {
  if (maybeUriLike instanceof Uri) {
    return { isValidUri: true, uri: maybeUriLike };
  }
  if (typeof maybeUriLike === "string") {
    try {
      return { isValidUri: true, uri: Uri.parse(maybeUriLike, true) };
    } catch (error) {
      return { isValidUri: false };
    }
  }
  if (isUriLike(maybeUriLike)) {
    return { isValidUri: true, uri: Uri.from(maybeUriLike) };
  }
  return { isValidUri: false };
}

type UriLike = Parameters[0];

function isUriLike(value: unknown): value is UriLike {
  return (
    typeof value === "object" &&
    value != null &&
    "scheme" in value &&
    typeof value.scheme === "string"
  );
}

export function tryEnsureRange(
  maybeRangeLike: unknown
):
  | { isValidRange: true; range: Range }
  | { isValidRange: false; range?: undefined } {
  if (maybeRangeLike instanceof Range) {
    return { isValidRange: true, range: maybeRangeLike };
  }
  if (isRangeLike(maybeRangeLike)) {
    return {
      isValidRange: true,
      range: new Range(
        maybeRangeLike.start.line,
        maybeRangeLike.start.character,
        maybeRangeLike.end.line,
        maybeRangeLike.end.character
      ),
    };
  }
  return { isValidRange: false };
}

type RangeLike = { start: PositionLike; end: PositionLike };

function isRangeLike(value: unknown): value is RangeLike {
  return (
    typeof value === "object" &&
    value != null &&
    "start" in value &&
    isPositionLike(value.start) &&
    "end" in value &&
    isPositionLike(value.end)
  );
}

type PositionLike = { line: number; character: number };

function isPositionLike(value: unknown): value is PositionLike {
  return (
    typeof value === "object" &&
    value !== null &&
    "line" in value &&
    typeof value.line === "number" &&
    "character" in value &&
    typeof value.character === "number"
  );
}


================================================
FILE: apps/vscode-extension/src/diagnostics.ts
================================================
import { has } from "@pretty-ts-errors/utils";
import { prettifyDiagnosticForHover } from "@pretty-ts-errors/vscode-formatter";
import {
  ExtensionContext,
  languages,
  MarkdownString,
  window,
  Uri,
  type Diagnostic,
} from "vscode";
import {
  createConverter,
  type Converter,
} from "vscode-languageclient/lib/common/codeConverter";
import { hoverProvider } from "./provider/hoverProvider";
import {
  formattedDiagnosticsStore,
  type FormattedDiagnostic,
} from "./formattedDiagnosticsStore";
import { logger } from "./logger";

/**
 * The list of diagnostic sources that pretty-ts-errors supports
 */
const supportedDiagnosticSources = [
  "ts",
  "ts-plugin",
  "deno-ts",
  "js",
  "glint",
];

export function registerOnDidChangeDiagnostics(context: ExtensionContext) {
  const converter = createConverter();
  context.subscriptions.push(
    languages.onDidChangeDiagnostics(async (e) => {
      await logger.measure("onDidChangeDiagnostics", async () => {
        for (const uri of e.uris) {
          await logger.measure(
            `diagnostics for: ${uri.toString(true)}`,
            async () => {
              const diagnostics = languages.getDiagnostics(uri);
              const supportedDiagnostics = diagnostics.filter(
                (diagnostic) =>
                  diagnostic.source &&
                  has(supportedDiagnosticSources, diagnostic.source)
              );

              const items: FormattedDiagnostic[] = await Promise.all(
                supportedDiagnostics.map((diagnostic) =>
                  getFormattedDiagnostic(diagnostic, converter)
                )
              );

              // TODO: we should check if never deleting the entries is a performance issue
              //       probably not, since solving all diagnostics for a file should set its value to an empty collection, but we should check anyway
              //       see: https://github.com/yoavbls/pretty-ts-errors/issues/139
              formattedDiagnosticsStore.set(uri.fsPath, items);

              if (items.length > 0) {
                ensureHoverProviderIsRegistered(uri, context);
              }
            }
          );
        }
      });
    })
  );
}

/**
 * To prevent infinite memory consumption use a max size for the cache
 *
 * TODO: consider making this configurable to the end user with a sensible `min` and `max`
 */
const CACHE_SIZE_MAX = 100;

/**
 * A local cache that maps TS diagnostics as `string` to their formatted `MarkdownString` counter part.
 * @see https://github.com/yoavbls/pretty-ts-errors/pull/62
 *
 * One reason this cache is critical is because the TypeScript Language Features extension is very noisy and will constantly push all diagnostics for a file,
 * even if there were no actual changes.
 * @see https://github.com/yoavbls/pretty-ts-errors/issues/139#issuecomment-3401279357
 *
 * TODO: create a proper LRU cache, to prevent exceeding the cache size being a bottleneck
 * @see https://github.com/yoavbls/pretty-ts-errors/issues/104
 */
const cache = new Map();

async function getFormattedDiagnostic(
  diagnostic: Diagnostic,
  converter: Converter
): Promise {
  // formatDiagnosticForHover converts message based on LSP Diagnostic type, not VSCode Diagnostic type, so it can be used in other IDEs.
  // Here we convert VSCode Diagnostic to LSP Diagnostic to make formatDiagnosticForHover recognize it.
  const lspDiagnostic = converter.asDiagnostic(diagnostic);

  let formattedMessage = cache.get(diagnostic.message);
  if (!formattedMessage) {
    const formattedDiagnostic = await prettifyDiagnosticForHover(lspDiagnostic);
    const markdownString = new MarkdownString(formattedDiagnostic);

    // TODO: consider using the `{ enabledCommands: string[] }` variant, to only allow whitelisted commands
    markdownString.isTrusted = true;
    markdownString.supportHtml = true;

    formattedMessage = markdownString;
    if (cache.size > CACHE_SIZE_MAX) {
      const firstCacheKey = cache.keys().next().value!;
      cache.delete(firstCacheKey);
    }
    cache.set(diagnostic.message, formattedMessage);
  }

  return {
    range: diagnostic.range,
    contents: [formattedMessage],
    lspDiagnostic,
  };
}

/**
 * A set to prevent registering duplicate hover providers.
 */
const registeredLanguages = new Set();

/**
 * Ensure a hover provider is registered for any visible editors where pretty-ts-errors has a formatted diagnostic
 */
function ensureHoverProviderIsRegistered(uri: Uri, context: ExtensionContext) {
  const editor = window.visibleTextEditors.find(
    (editor) => editor.document.uri.toString() === uri.toString()
  );
  const languageId = editor?.document.languageId;
  if (languageId && !registeredLanguages.has(languageId)) {
    logger.debug(`registering hover provider for language id: ${languageId}`);
    registeredLanguages.add(languageId);
    context.subscriptions.push(
      languages.registerHoverProvider(
        {
          language: languageId,
        },
        hoverProvider
      )
    );
  }
}


================================================
FILE: apps/vscode-extension/src/extension.ts
================================================
import { ExtensionContext, commands } from "vscode";
import { registerOnDidChangeDiagnostics } from "./diagnostics";
import { logger } from "./logger";
import { registerCopyError } from "./commands/copyError";
import { registerRevealSelection } from "./commands/revealSelection";
import { registerShowErrorInSidebar } from "./commands/showErrorInSidebar";
import { registerPinError } from "./commands/pinError";
import { registerUnpinError } from "./commands/unpinError";
import { registerSelectedTextHoverProvider } from "./provider/selectedTextHoverProvider";
import { registerWebviewViewProvider } from "./provider/webviewViewProvider";
import { SUPPORTED_LANGUAGE_IDS } from "./supportedLanguageIds";

export function activate(context: ExtensionContext) {
  logger.info("activating");

  void commands.executeCommand(
    "setContext",
    "prettyTsErrors.supportedLanguageIds",
    SUPPORTED_LANGUAGE_IDS
  );

  // logging and debug features
  logger.register(context);
  registerSelectedTextHoverProvider(context);

  // prettify diagnostics feature
  registerOnDidChangeDiagnostics(context);

  // UI elements that show the prettified diagnostics
  registerWebviewViewProvider(context);

  // register commands
  registerCopyError(context);
  registerShowErrorInSidebar(context);
  registerPinError(context);
  registerUnpinError(context);
  registerRevealSelection(context);
}

export function deactivate() {
  logger.info("deactivating");
}


================================================
FILE: apps/vscode-extension/src/formattedDiagnosticsStore.ts
================================================
import { MarkdownString, Range, Uri } from "vscode";
import type { Diagnostic } from "vscode-languageserver-types";

type StoreKey = Uri["fsPath"];

export interface FormattedDiagnostic {
  range: Range;
  contents: MarkdownString[];
  /** Original LSP diagnostic for on-demand sidebar formatting */
  lspDiagnostic: Diagnostic;
}

/**
 * A store for formatted diagnostics, where the key is the file path to a file, and the value a collection of formatted diagnostics for that file.
 *
 * The `onDidChangeDiagnostics` event handler will fill the store with formatted diagnostics, while other components will query the store to display these diagnostics.
 */
export const formattedDiagnosticsStore = new Map<
  StoreKey,
  FormattedDiagnostic[]
>();


================================================
FILE: apps/vscode-extension/src/globals.d.ts
================================================
// "@types/node": "^16.11.68" misses a bunch of global declarations, this file fixes the one's we use.

declare global {
  declare const TextDecoder: new (
    encoding?: string,
    options?: {
      fatal?: boolean | undefined;
      ignoreBOM?: boolean | undefined;
    }
  ) => import("util").TextDecoder;
}

export {};


================================================
FILE: apps/vscode-extension/src/logger.ts
================================================
import {
  ExtensionMode,
  LogOutputChannel,
  window,
  type ExtensionContext,
  LogLevel as VSLogLevel,
} from "vscode";

let instance: null | LogOutputChannel = null;

function getLogger(): LogOutputChannel {
  if (instance !== null) {
    return instance;
  }
  instance = window.createOutputChannel("Pretty TypeScript Errors", {
    log: true,
  });
  return instance;
}

function info(...args: Parameters) {
  getLogger().info(...args);
}

function trace(...args: Parameters) {
  getLogger().trace(...args);
}

function debug(...args: Parameters) {
  getLogger().debug(...args);
}
function warn(...args: Parameters) {
  getLogger().warn(...args);
}

function error(...args: Parameters) {
  getLogger().error(...args);
}

type LogLevel = "info" | "trace" | "debug" | "warn" | "error";
type LogLevelThresholds = Record;
type SortedLogLevelThresholds = [LogLevel, number][];

const defaultThresholds: LogLevelThresholds = {
  error: 5000,
  warn: 1000,
  info: 100,
  debug: 50,
  trace: 0,
};

/**
 * Both in the browser and Node >= 16 (vscode 1.77 has node >= 16) have `performance` available as a global
 * But `@types/node` is missing its global declaration, this fixes the type error we get from using it
 */
declare const performance: import("perf_hooks").Performance;

/**
 * Measures the time it took to run `task` and reports it to the `logger` based on `logLevelThresholds`.
 *
 * @see {@link defaultThresholds} for the default thresholds
 */
function measure(
  name: string,
  task: () => Promise,
  logLevelThresholds?: Partial
): Promise;
function measure(
  name: string,
  task: () => T,
  logLevelThresholds?: Partial
): T;
function measure(
  name: string,
  task: () => T | Promise,
  logLevelThresholds: Partial = {}
): T | Promise {
  const start = performance.now();
  const thresholds = normalizeThresholds(logLevelThresholds);

  try {
    const result = task();
    if (isPromiseLike(result)) {
      return result.then(
        (value) => {
          logMeasuredDuration(name, start, thresholds);
          return value;
        },
        (error) => {
          logMeasuredDuration(name, start, thresholds);
          throw error;
        }
      );
    }
    logMeasuredDuration(name, start, thresholds);
    return result;
  } catch (error) {
    logMeasuredDuration(name, start, thresholds);
    throw error;
  }
}

function logMeasuredDuration(
  name: string,
  start: number,
  thresholds: SortedLogLevelThresholds
) {
  const duration = performance.now() - start;
  const level = findLogLevel(thresholds, duration);
  getLogger()[level](`task ${name} took ${duration.toFixed(3)}ms`);
}

function normalizeThresholds(
  logLevelThresholds: Partial
): SortedLogLevelThresholds {
  logLevelThresholds = Object.assign({}, defaultThresholds, logLevelThresholds);
  // sort thresholds from high to low
  // { info: 100, warn: 1000, trace: 0 } => [[warn, 1000], [info, 100], [trace, 0]]
  return Object.entries(logLevelThresholds).sort(
    ([_a, a], [_b, b]) => b - a
  ) as SortedLogLevelThresholds;
}

function findLogLevel(
  thresholds: SortedLogLevelThresholds,
  duration: number,
  defaultLogLevel: LogLevel = "debug"
): LogLevel {
  return (
    thresholds.find(([_, threshold]) => duration > threshold)?.[0] ??
    defaultLogLevel
  );
}

function dispose() {
  if (instance !== null) {
    instance.dispose();
    instance = null;
  }
}

function isPromiseLike(value: unknown): value is PromiseLike {
  return (
    value != null &&
    typeof value === "object" &&
    "then" in value &&
    typeof value["then"] === "function"
  );
}

function register(context: ExtensionContext) {
  if (context.extensionMode === ExtensionMode.Development) {
    const instance = getLogger();
    instance.show();
    if (instance.logLevel !== VSLogLevel.Trace) {
      instance.appendLine(
        `To see more verbose logging, set this output's log level to "Trace" (gear icon next to the dropdown).`
      );
    }
  }
  context.subscriptions.push({ dispose });
}

export const logger = {
  trace,
  debug,
  info,
  warn,
  error,
  measure,
  register,
  dispose,
};


================================================
FILE: apps/vscode-extension/src/provider/hoverProvider.ts
================================================
import { HoverProvider } from "vscode";
import { formattedDiagnosticsStore } from "../formattedDiagnosticsStore";

export const hoverProvider: HoverProvider = {
  provideHover(document, position, _token) {
    const items = formattedDiagnosticsStore.get(document.uri.fsPath);

    if (!items) {
      return null;
    }

    const itemInRange = items.filter((item) => item.range.contains(position));

    if (itemInRange.length === 0) {
      return null;
    }

    const first = itemInRange[0];
    if (!first) {
      return null;
    }
    return {
      range: first.range,
      contents: itemInRange.flatMap((item) => item.contents),
    };
  },
};


================================================
FILE: apps/vscode-extension/src/provider/markdownWebviewProvider.ts
================================================
import * as vscode from "vscode";

/**
 * @see https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample
 */
export class MarkdownWebviewProvider {
  private webviewRootUri: vscode.Uri;
  private webviewHtmlTemplate: Promise;

  constructor(private readonly context: vscode.ExtensionContext) {
    this.webviewRootUri = vscode.Uri.joinPath(
      this.context.extensionUri,
      "webview"
    );
    this.webviewHtmlTemplate = this.loadWebviewHtmlTemplate();
  }

  private async loadWebviewHtmlTemplate(): Promise {
    const htmlTemplateUri = vscode.Uri.joinPath(
      this.webviewRootUri,
      "index.html"
    );
    const htmlTemplateBytes =
      await vscode.workspace.fs.readFile(htmlTemplateUri);
    const htmlTemplate = new TextDecoder("utf-8").decode(htmlTemplateBytes);
    return htmlTemplate;
  }

  getWebviewOptions(): vscode.WebviewOptions {
    return {
      enableCommandUris: [
        "prettyTsErrors.revealSelection",
        "prettyTsErrors.copyError",
        "prettyTsErrors.pinError",
        "prettyTsErrors.unpinError",
      ],
      enableScripts: true,
      enableForms: false,
      localResourceRoots: [this.webviewRootUri],
    };
  }

  createOnDidReceiveMessage() {
    return (message: { command: string; [key: string]: unknown }) => {
      if (message && message.command) {
        switch (message.command) {
          case "notify": {
            if (typeof message["text"] === "string") {
              vscode.window.showInformationMessage(message["text"]);
            }
            break;
          }
        }
      }
    };
  }

  async getWebviewContent(
    webview: vscode.Webview,
    content: string,
    classList: string[] = []
  ): Promise {
    const template = await this.webviewHtmlTemplate;
    const html = this.patchCspSafeAttrs(template, webview);
    return html.replace(
      '
',
      `
${content}
`
    );
  }

  private patchCspSafeAttrs(html: string, webview: vscode.Webview) {
    // replace stylesheet href's to webview uri's
    html = html.replaceAll(
      //gm,
      (match, filePath) => {
        const path = vscode.Uri.joinPath(this.webviewRootUri, filePath);
        const uri = webview.asWebviewUri(path);
        return match.replace(filePath, uri.toString());
      }
    );

    // replace script src's to webiew uri's
    html = html.replaceAll(
      //gm,
      (match, filePath) => {
        const path = vscode.Uri.joinPath(this.webviewRootUri, filePath);
        const uri = webview.asWebviewUri(path);
        return match.replace(filePath, uri.toString());
      }
    );

    // replace the local development csp header with `webview.cspSource`
    // @see https://code.visualstudio.com/api/extension-guides/webview#content-security-policy
    html = html.replace(
      //m,
      (match, content) => {
        return match.replace(
          content,
          content
            .replaceAll(
              "style-src http://localhost:8080",
              // TODO: remove `unsafe-inline` if vscode ever fixes their styles and api injection
              `style-src ${webview.cspSource} 'unsafe-inline'`
            )
            .replaceAll(
              "script-src http://localhost:8080",
              // TODO: remove `unsafe-inline` if vscode ever fixes their styles and api injection
              `script-src ${webview.cspSource} 'unsafe-inline'`
            )
            .replaceAll(
              "font-src http://localhost:8080",
              `font-src ${webview.cspSource}`
            )
        );
      }
    );
    return html;
  }
}


================================================
FILE: apps/vscode-extension/src/provider/selectedTextHoverProvider.ts
================================================
import { d } from "@pretty-ts-errors/utils";
import { prettifyDiagnosticForHover } from "@pretty-ts-errors/vscode-formatter";
import {
  ExtensionContext,
  ExtensionMode,
  MarkdownString,
  languages,
  window,
} from "vscode";
import { createConverter } from "vscode-languageclient/lib/common/codeConverter";
import { formattedDiagnosticsStore } from "../formattedDiagnosticsStore";

/**
 * Register an hover provider in debug only.
 * It format selected text and help test things visually easier.
 */
export function registerSelectedTextHoverProvider(context: ExtensionContext) {
  if (context.extensionMode !== ExtensionMode.Development) {
    return;
  }

  const converter = createConverter();
  context.subscriptions.push(
    languages.registerHoverProvider(
      {
        language: "typescript",
        pattern: "**/test/**/*.ts",
      },
      {
        async provideHover(document, position) {
          const editor = window.activeTextEditor;

          if (!editor) {
            return;
          }

          const range = document.getWordRangeAtPosition(position);
          const message = editor ? document.getText(editor.selection) : "";

          if (!range || !message) {
            return null;
          }

          const lspDiagnostic = converter.asDiagnostic({
            message,
            range,
            severity: 0,
            source: "ts",
            code: 1337,
          });

          const markdown = new MarkdownString(
            debugHoverHeader + (await prettifyDiagnosticForHover(lspDiagnostic))
          );

          markdown.isTrusted = true;
          markdown.supportHtml = true;

          formattedDiagnosticsStore.set(document.uri.fsPath, [
            {
              range,
              contents: [markdown],
              lspDiagnostic,
            },
          ]);

          return {
            contents: [markdown],
          };
        },
      }
    )
  );
}

const debugHoverHeader = d /*html*/ `
  
    
    Formatted selected text (debug only)
  
  

  

  

`;


================================================
FILE: apps/vscode-extension/src/provider/webviewViewProvider.ts
================================================
import type { ExtensionContext } from "vscode";
import * as vscode from "vscode";
import { getUserLangs, getUserTheme } from "vscode-shiki-bridge";
import { createHighlighterCore } from "shiki/core";
import { createOnigurumaEngine } from "shiki/engine/oniguruma";
import { MarkdownWebviewProvider } from "./markdownWebviewProvider";
import {
  formattedDiagnosticsStore,
  type FormattedDiagnostic,
} from "../formattedDiagnosticsStore";
import { has } from "@pretty-ts-errors/utils";
import {
  prettifyDiagnosticForSidebar,
  initHighlighter,
} from "@pretty-ts-errors/vscode-formatter";
import { SUPPORTED_LANGUAGE_IDS } from "../supportedLanguageIds";

const NO_DIAGNOSTICS_MESSAGE =
  "Select code with an error to show the prettified diagnostic in this view.";

type ViewMode = "cursor" | "locked";

interface DiagnosticItem {
  html: string;
  range: vscode.Range;
}

interface PinnedError {
  html: string;
}

let viewProviderInstance: MarkdownWebviewViewProvider | null = null;

export function getViewProvider() {
  return viewProviderInstance;
}

function updateHasErrorsContext() {
  const editor = vscode.window.activeTextEditor;
  if (editor && has(SUPPORTED_LANGUAGE_IDS, editor.document.languageId)) {
    const diagnostics = vscode.languages.getDiagnostics(editor.document.uri);
    const hasErrors = diagnostics.length > 0;
    vscode.commands.executeCommand(
      "setContext",
      "prettyTsErrors.hasErrors",
      hasErrors
    );
  } else {
    vscode.commands.executeCommand(
      "setContext",
      "prettyTsErrors.hasErrors",
      false
    );
  }
}

export function registerWebviewViewProvider(context: ExtensionContext) {
  viewProviderInstance = new MarkdownWebviewViewProvider(
    new MarkdownWebviewProvider(context)
  );
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider(
      "prettyTsErrors.sidePanel",
      viewProviderInstance
    ),
    vscode.languages.onDidChangeDiagnostics(() => updateHasErrorsContext()),
    vscode.window.onDidChangeActiveTextEditor(() => updateHasErrorsContext())
  );
  updateHasErrorsContext();
}

async function diagnosticToItem(
  formattedDiagnostic: FormattedDiagnostic
): Promise {
  return {
    html: await prettifyDiagnosticForSidebar(formattedDiagnostic.lspDiagnostic),
    range: formattedDiagnostic.range,
  };
}

// TODO: adding a `MarkdownWebviewView` class would make this provider a lot simpler
class MarkdownWebviewViewProvider implements vscode.WebviewViewProvider {
  private disposables = new Map();
  private webview: vscode.Webview | null = null;
  private mode: ViewMode = "cursor";
  private lockedContent: DiagnosticItem | null = null;
  private pinnedError: PinnedError | null = null;
  private lastContent: string | null = null;
  private skipNextSelectionChange = false;
  private skipNextEditorChange = false;
  private initialized = false;

  constructor(private readonly provider: MarkdownWebviewProvider) {}

  private async ensureInitialized() {
    if (!this.initialized) {
      const [theme, themes] = await getUserTheme();

      const langs = await getUserLangs(["type", "ts"]);
      const highlighter = await createHighlighterCore({
        themes,
        langs,
        engine: createOnigurumaEngine(import("shiki/wasm")),
      });
      initHighlighter({
        codeToHtml: (code: string, options: { lang: string }) =>
          highlighter.codeToHtml(code, { ...options, theme }),
      });
      this.initialized = true;
    }
  }

  async lockToDiagnostic(range: vscode.Range, message?: string) {
    const activeEditor = vscode.window.activeTextEditor;
    if (activeEditor) {
      const diagnostics =
        formattedDiagnosticsStore.get(activeEditor.document.uri.fsPath) ?? [];
      const diagnostic = diagnostics.find(
        (diagnostic) =>
          diagnostic.range.isEqual(range) &&
          (!message || diagnostic.lspDiagnostic.message === message)
      );
      if (diagnostic) {
        await this.ensureInitialized();
        this.mode = "locked";
        this.lockedContent = await diagnosticToItem(diagnostic);
        this.skipNextSelectionChange = true;
        this.skipNextEditorChange = true;
        this.lastContent = null;
        if (this.webview) {
          this.refresh(this.webview);
        }
      }
    }
  }

  async pinDiagnostic(range: vscode.Range, message?: string) {
    const activeEditor = vscode.window.activeTextEditor;
    if (!activeEditor) return;

    const diagnostics =
      formattedDiagnosticsStore.get(activeEditor.document.uri.fsPath) ?? [];
    const diagnostic = diagnostics.find(
      (diagnostic) =>
        diagnostic.range.isEqual(range) &&
        (!message || diagnostic.lspDiagnostic.message === message)
    );
    if (!diagnostic) return;

    await this.ensureInitialized();
    const item = await diagnosticToItem(diagnostic);

    // Toggle: if already pinned, unpin instead
    if (this.pinnedError && this.pinnedError.html === item.html) {
      this.pinnedError = null;
    } else {
      this.pinnedError = { html: item.html };
    }

    if (this.webview) {
      this.refresh(this.webview);
    }
  }

  unpinDiagnostic() {
    this.pinnedError = null;
    if (this.webview) {
      this.refresh(this.webview);
    }
  }

  async resolveWebviewView(
    webviewView: vscode.WebviewView,
    _context: vscode.WebviewViewResolveContext
  ): Promise {
    this.webview = webviewView.webview;

    const initialContent = await this.getActiveContentHtml();
    webviewView.webview.html = await this.provider.getWebviewContent(
      webviewView.webview,
      initialContent,
      ["webview-panel"]
    );

    const disposables = this.ensureDisposables(webviewView);

    webviewView.webview.options = this.provider.getWebviewOptions();
    disposables.push(
      webviewView.webview.onDidReceiveMessage(
        this.provider.createOnDidReceiveMessage()
      ),
      vscode.languages.onDidChangeDiagnostics(() =>
        // TODO: since `onDidChangeDiagnostics` fires often, we should try and avoid calling refresh based on the event uris
        this.refresh(webviewView.webview)
      ),
      vscode.window.onDidChangeActiveTextEditor((editor) => {
        if (this.skipNextEditorChange) {
          this.skipNextEditorChange = false;
          return;
        }
        if (editor) {
          if (this.mode === "locked") {
            this.mode = "cursor";
          }
          this.refresh(webviewView.webview);
        }
      }),
      vscode.window.onDidChangeTextEditorSelection((event) => {
        const document = event.textEditor.document;
        // this event fires often, including selecting text in output windows and terminal windows
        // avoid doing unnessesary work, because it will cause noticable delays in the UI
        if (!has(SUPPORTED_LANGUAGE_IDS, document.languageId)) {
          return;
        }
        if (this.skipNextSelectionChange) {
          this.skipNextSelectionChange = false;
          return;
        }
        if (this.mode === "locked") {
          this.mode = "cursor";
        }
        if (this.mode === "cursor") {
          this.refresh(webviewView.webview);
        }
      }),
      webviewView.onDidChangeVisibility(() => {
        if (webviewView.visible) {
          this.lastContent = null;
          this.refresh(webviewView.webview);
        }
      })
    );

    webviewView.onDidDispose(() => {
      const disposables = this.disposables.get(webviewView);
      disposables?.forEach((disposable) => disposable.dispose());
      this.disposables.delete(webviewView);
      this.webview = null;
    });
  }

  private ensureDisposables(webviewView: vscode.WebviewView) {
    let disposables = this.disposables.get(webviewView);
    if (!disposables) {
      disposables = [];
      this.disposables.set(webviewView, disposables);
    }
    return disposables;
  }

  private async getActiveContentHtml(): Promise {
    const items = await this.getActiveDiagnosticItems();
    if (items.length === 0) return NO_DIAGNOSTICS_MESSAGE;
    return items.map((item) => item.html).join("
");
  }

  private async getActiveDiagnosticItems(): Promise {
    await this.ensureInitialized();
    switch (this.mode) {
      case "cursor":
        return this.getCursorDiagnosticItems();
      case "locked":
        return this.lockedContent ? [this.lockedContent] : [];
    }
  }

  private async getCursorDiagnosticItems(): Promise {
    const activeEditor = vscode.window.activeTextEditor;
    const selection = activeEditor?.selection;
    if (!activeEditor || !selection) return [];

    const diagnostics =
      formattedDiagnosticsStore.get(activeEditor.document.uri.fsPath) ?? [];
    const selectedDiagnostics = diagnostics.filter(
      (diagnostic) => diagnostic.range.intersection(selection) !== undefined
    );
    return Promise.all(selectedDiagnostics.map((d) => diagnosticToItem(d)));
  }

  async refresh(webview: vscode.Webview) {
    const sections: string[] = [];

    // Render pinned error section
    if (this.pinnedError) {
      sections.push(
        `
` +
          `
` +
          `` +
          `` +
          ` Pinned error` +
          `` +
          `` +
          `
` +
          this.pinnedError.html +
          `
`
      );
      sections.push(`
`);
    }

    // Render active diagnostic items
    const items = await this.getActiveDiagnosticItems();
    if (items.length === 0) {
      sections.push(NO_DIAGNOSTICS_MESSAGE);
    } else {
      for (let i = 0; i < items.length; i++) {
        if (i > 0) sections.push(`
`);
        const item = items[i]!;
        if (this.pinnedError && item.html === this.pinnedError.html) {
          sections.push(
            `
` +
              `This item is pinned on top.` +
              `
`
          );
        } else {
          sections.push(`
${item.html}
`);
        }
      }
    }

    const fullHtml = sections.join("");
    if (fullHtml !== this.lastContent) {
      webview.postMessage({ command: "update-content", html: fullHtml });
      this.lastContent = fullHtml;
    }
  }
}


================================================
FILE: apps/vscode-extension/src/supportedLanguageIds.ts
================================================
export const SUPPORTED_LANGUAGE_IDS = [
  "typescript",
  "typescriptreact",
  "javascript",
  "javascriptreact",
  "astro",
  "svelte",
  "vue",
  "mdx",
  "glimmer-js",
  "glimmer-ts",
];


================================================
FILE: apps/vscode-extension/src/test/runTest.ts
================================================
import * as path from "path";

import { runTests } from "@vscode/test-electron";

async function main() {
  try {
    // The folder containing the Extension Manifest package.json
    // Passed to `--extensionDevelopmentPath`
    const extensionDevelopmentPath = path.resolve(__dirname, "../../");

    // The path to test runner
    // Passed to --extensionTestsPath
    const extensionTestsPath = path.resolve(__dirname, "./suite/index");

    // Download VS Code, unzip it and run the integration test
    await runTests({
      version: "1.77.0",
      extensionDevelopmentPath,
      extensionTestsPath,
      launchArgs: ["--disable-extensions"],
    });
  } catch (err) {
    console.error("Failed to run tests");
    process.exit(1);
  }
}

main();


================================================
FILE: apps/vscode-extension/src/test/suite/extension.test.ts
================================================
// You can import and use all API from the 'vscode' module
// as well as import your extension to test it
import * as vscode from "vscode";

suite("Extension Test Suite", () => {
  /**
   * The tests moved to the formatter package, I'm leaving
   * this here for future tests to the VSCode extension
   */
  vscode.window.showInformationMessage("Start all tests.");
});


================================================
FILE: apps/vscode-extension/src/test/suite/index.ts
================================================
import * as path from "path";
import Mocha from "mocha";
import { glob } from "glob";

export function run(
  testsRoot: string,
  cb: (error: unknown | null, failures?: number) => void
): void {
  // Create the mocha test
  const mocha = new Mocha({
    ui: "tdd",
    color: true,
  });

  glob("**/**.test.js", { cwd: testsRoot })
    .then((files) => {
      // Add files to the test suite
      files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f)));

      try {
        // Run the mocha test
        mocha.run((failures) => {
          cb(null, failures);
        });
      } catch (err) {
        console.error(err);
        cb(err);
      }
    })
    .catch((err) => {
      return cb(err);
    });
}


================================================
FILE: apps/vscode-extension/syntaxes/type.tmGrammar.json
================================================
{
  "$schema": "https://raw.githubusercontent.com/RedCMD/TmLanguage-Syntax-Highlighter/main/vscode.tmLanguage.schema.json",
  "name": "TypeScript Type",
  "scopeName": "source.type",
  "patterns": [
    {
      "include": "source.ts#type"
    },
    {
      "include": "source.ts#directives"
    },
    {
      "include": "source.ts#statements"
    },
    {
      "include": "source.ts#shebang"
    }
  ]
}


================================================
FILE: apps/vscode-extension/tsconfig.json
================================================
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "module": "nodenext",
    "target": "ES2022",
    "rootDir": "src",
    "outDir": "out",
    "moduleResolution": "nodenext"
  },
  "include": ["src/**/*.ts"],
  "references": [
    { "path": "../../packages/utils" },
    { "path": "../../packages/vscode-formatter" }
  ]
}


================================================
FILE: apps/vscode-extension/webview/index.html
================================================


  
    
    
    
    
    
    Pretty TS Errors - Markdown Preview
    
    
    
  
  
    
    

    
  



================================================
FILE: apps/vscode-extension/webview/index.js
================================================
// @ts-check

// wrap this in IIFE because `vscode` should **NEVER** be leaked into the global scope
// @see https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-a-webview-to-an-extension
const api = (function () {
  // fallback logs to console, keep it for local development
  const vscode =
    typeof acquireVsCodeApi === "function"
      ? acquireVsCodeApi()
      : {
          /**
           * @param {unknown} message
           */
          postMessage(message) {
            console.log(`message: `, message);
          },
        };
  return {
    /**
     * Show a notification message in vscode
     * @param {string} text
     */
    notify(text) {
      vscode.postMessage({ command: "notify", text });
    },
  };
})();

const $content = window.document.querySelector("#content");

window.addEventListener("message", (event) => {
  const message = event.data;
  switch (message.command) {
    case "update-content": {
      if ($content) {
        $content.innerHTML = message.html;
      }
    }
  }
});

window.document.addEventListener("click", (event) => {
  const element = /** @type {HTMLElement} */ (event.target);
  if (
    element.tagName.toLowerCase() === "button" &&
    element.hasAttribute("data-copy-content")
  ) {
    handleCopyContentEvent(element);
  }
});

/**
 *
 * @param {HTMLElement} element
 */
function handleCopyContentEvent(element) {
  const parent = element.parentElement;
  if (parent?.classList.contains("code-container")) {
    const pre = parent.querySelector("pre");
    const code = pre?.querySelector("code");
    const content = code?.innerText;
    if (content) {
      copyToClipboard(content);
    }
  }
}

/**
 * Copy `text` to the user's clipboard
 * @param {string} text
 */
async function copyToClipboard(text) {
  await navigator.clipboard.writeText(text);
  api.notify("Copied type to clipboard!");
}


================================================
FILE: apps/vscode-extension/webview/style.css
================================================
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 4px 0 12px;
  color: var(--vscode-editor-foreground);
}

#content {
  padding: 0 12px;
}

/* Tables from identSentences */
#content table {
  width: 100%;
}

#content table td:first-child {
  white-space: nowrap;
}

#content table td:last-child {
  width: 100%;
  max-width: 0;
  word-break: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--vscode-foreground);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

pre {
  background-color: var(--vscode-textCodeBlock-background) !important;
  border: 1px solid var(--vscode-widget-border);
  border-radius: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 0.75em 0;
  line-height: 1.5;
}

/* Override Shiki's background to match VS Code */
pre code {
  background-color: transparent !important;
  border-radius: 3px;
  padding: 0 !important;
  font-weight: var(--vscode-editor-font-weight, normal);
  font-size: var(--vscode-editor-font-size, medium);
  font-family:
    var(--vscode-editor-font-family), "SF Mono", Monaco, "Cascadia Code",
    "Roboto Mono", Consolas, "Courier New", monospace;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-container {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
}

.code-container pre {
  margin: 0;
}

.code-container:hover .copy-button {
  opacity: 1;
}

.copy-button:hover {
  background: var(--vscode-button-hoverBackground);
}

#content a {
  text-decoration: none;
}

#content hr {
  border: none;
  border-top: 1px solid var(--vscode-widget-border, rgba(128, 128, 128, 0.2));
  margin: 12px 0;
}

.webview-panel .title-actions {
  float: right;
}

.pinned-section {
  margin: 0 -12px;
  background-color: rgba(255, 235, 59, 0.04);
  padding: 4px 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.pinned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
}

.pinned-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--vscode-descriptionForeground);
}

.unpin-button {
  color: var(--vscode-icon-foreground);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.pinned-message {
  color: var(--vscode-descriptionForeground);
}


================================================
FILE: apps/vscode-extension/webview/vendor/codicon.css
================================================
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
  font-family: "codicon";
  font-display: block;
  src: url("./codicon.ttf?eb10abb8b9291201e2c39eced5bd6993") format("truetype");
}

.codicon[class*="codicon-"] {
  font: normal normal normal 12px/1 codicon;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/*---------------------
 *  Modifiers
 *-------------------*/

@keyframes codicon-spin {
  100% {
    transform: rotate(360deg);
  }
}

.codicon-sync.codicon-modifier-spin,
.codicon-loading.codicon-modifier-spin,
.codicon-gear.codicon-modifier-spin {
  /* Use steps to throttle FPS to reduce CPU usage */
  animation: codicon-spin 1.5s steps(30) infinite;
}

.codicon-modifier-disabled {
  opacity: 0.5;
}

.codicon-modifier-hidden {
  opacity: 0;
}

/* custom speed & easing for loading icon */
.codicon-loading {
  animation-duration: 1s !important;
  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
}

/*---------------------
 *  Icons
 *-------------------*/
.codicon-link-external:before {
  content: "\eb14";
}
.codicon-globe:before {
  content: "\eb01";
}
.codicon-layout-sidebar-left-dock:before {
  content: "\ec4a";
}
.codicon-copy:before {
  content: "\ebcc";
}
.codicon-go-to-file:before {
  content: "\ea94";
}
.codicon-indent:before {
  content: "\ebf9";
}
.codicon-debug:before {
  content: "\ead8";
}
.codicon-close:before {
  content: "\ea76";
}
.codicon-pinned:before {
  content: "\eba0";
}


================================================
FILE: docs/hide-original-errors.md
================================================
To hide the original errors, display only the prettified ones, and make type blocks copyable, you can use the following hack:

## The Hack

1. Install the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension from the VSCode marketplace.

2. Follow the installation instructions provided by the extension, and use [this CSS file](./pretty-ts-errors-hack.css).

## Why Do We Need This Hack?

### Hiding Original Errors

Unfortunately, VSCode doesn't currently support formatted diagnostics. Once it does, we'll be able to convert the extension to a TypeScript LSP Plugin that replaces the original error with the prettified version.  
For updates on this feature, follow [this issue](https://github.com/yoavbls/pretty-ts-errors/issues/3).

### Making Type Blocks Copyable

VSCode sanitizes and removes most CSS properties for security reasons. We've opened an [issue](https://github.com/microsoft/vscode/issues/180496) and submitted a [PR](https://github.com/microsoft/vscode/pull/180498) to allow the use of the `display` property. This would enable us to layout the types in a way that allows copying.

Until this change is approved, you can use the hack described above as a workaround.


================================================
FILE: docs/pretty-ts-errors-hack.css
================================================
/* Allow copying */
.codicon-none {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Hide errors */
div.monaco-hover-content:has(.codicon-none) > .hover-row:first-child {
  display: none !important;
}
div.monaco-hover-content:has([style="color:#f96363;"])
  > .hover-row:first-child {
  display: none !important;
}

/* Change order */
.monaco-hover .monaco-hover-content {
  display: flex;
  flex-direction: column;
}
.monaco-hover .monaco-hover-content .hover-row {
  order: 2;
}
.monaco-hover .monaco-hover-content .hover-row:has(.codicon-none) {
  order: 1;
}
.monaco-hover .monaco-hover-content .hover-row:has([style="color:#f96363;"]) {
  order: 1;
}


================================================
FILE: docs/vscode-logs.md
================================================
# Instructions to find and export the VS Code logs for Pretty TypeScript Errors

1. Open the output window to the `Pretty TypeScript Errors` channel
   ![Navigate to the `Pretty TypeScript Errors` output channel](./vscode-logs/1-output-window.png)
2. Set the log level of the `Pretty TypeScript Errors` output channel to `Trace`
   ![Set the log level to `Trace`](vscode-logs/2-log-level.png)
3. **Reproduce your bug or error**, this should generate verbose logging output.
4. Either copy the output by selecting it or use one of the options in the menu shown:
   ![Choose a method of copying or exporting the logs](vscode-logs/4-export-logs.png)
5. Either paste the output or add the logfile to the GitHub issue
   ![Add the otuput to the GitHub issue](vscode-logs/5-add-logs-to-gh.png)


================================================
FILE: eslint.config.mjs
================================================
// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import globals from "globals";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strict,
  ...tseslint.configs.stylistic,
  {
    ignores: [
      "apps/*/scripts/*",
      "apps/*/dist/*",
      "packages/*/scripts/*",
      "packages/*/dist/*",
      "examples/*",
      ".vscode-test/*",
    ],
  },
  {
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
      globals: {
        ...globals.node,
        /**
         * @see https://www.npmjs.com/package/@types/vscode-webview
         */
        acquireVsCodeApi: false,
        window: false,
      },
    },
    plugins: {
      "@typescript-eslint": tseslint.plugin,
    },
    rules: {
      "@typescript-eslint/no-unused-vars": "off",
      "@typescript-eslint/no-non-null-assertion": "off",
      curly: "warn",
      eqeqeq: ["warn", { smart: true }],
      "no-throw-literal": "warn",
      semi: "off",
    },
  }
);


================================================
FILE: examples/errors.js
================================================
// @ts-check

/**
 * @typedef {Object} Person
 * @property {string} name
 * @property {number} age
 * @property {Object} address
 * @property {string} address.street
 * @property {string} address.city
 * @property {string} address.country
 */

/**
 * @type {Person}
 */
const john = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
  },
};

/**
 * @typedef {Function} GetUserFunction
 * @returns {{ user: { name: string, email: string, age: number } }}
 */

const getPerson = () => ({
  person: {
    username: "usr",
    email: "usr@usr.io",
  },
});

/**
 * @typedef {Object} JSAnimal
 * @property {string} name
 * @property {number} age
 */

/**
 * @template {JSAnimal} T
 * @param {T} animal
 * @returns
 */
function run(animal) {
  return animal;
}

run({ firstName: "John", weight: 20 });

/**
 * @typedef {Object} MyError
 * @property {number} code
 */

try {
  // ...
} catch (/** @type {MyError} */ error) {
  console.log(error.code);
}

export {};


================================================
FILE: examples/errors.ts
================================================
interface Person {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

const john: Person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
  },
};

type GetUserFunction = () => {
  user: {
    name: string;
    email: `${string}@${string}.${string}`;
    age: number;
  };
};

const getPerson: GetUserFunction = () => ({
  person: {
    username: "usr",
    email: "usr@usr.io",
  },
});

interface Animal {
  name: string;
  age: number;
}

function run(animal: T) {
  return animal;
}

run({ firstName: "John", weight: 20 });

type MyError = {
  code: number;
};

try {
  // ...
} catch (error: MyError) {
  console.log(error.code);
}

export {};


================================================
FILE: examples/errors.vue
================================================




================================================
FILE: examples/examples.type
================================================
{
  fistName: string;
  lastName: string;
  age: number;  
} | undefined | null;

{
  x: string;
  y: number;
}[]

================================================
FILE: package.json
================================================
{
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,js,mjs,cjs,json,md,yml,yaml,css,html}\"",
    "format:check": "prettier --check \"**/*.{ts,tsx,js,mjs,cjs,json,md,yml,yaml,css,html}\""
  },
  "engines": {
    "node": ">=20"
  },
  "devDependencies": {
    "@eslint/js": "^9.15.0",
    "@types/node": "^20.19.21",
    "eslint": "^9.15.0",
    "globals": "^16.4.0",
    "prettier": "^3.6.2",
    "turbo": "^2.1.3",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.15.0"
  },
  "name": "pretty-ts-errors-mono",
  "packageManager": "npm@10.0.0",
  "workspaces": [
    "packages/*",
    "apps/*"
  ]
}


================================================
FILE: packages/formatter/README.md
================================================
# Pretty TypeScript Error formatter

The formatting package of [pretty-ts-errors](https://github.com/yoavbls/pretty-ts-errors)

# Usage

```typescript
import { createErrorMessagePrettifier } from "@pretty-ts-errors/formatter";

function codeBlock(code: string, language?: string, multiLine?: boolean) {
  return `\`\`\`${language}
${code}
\`\`\`
`;
}

const prettifyErrorMessage = createErrorMessagePrettifier(codeBlock);

prettifyErrorMessage(`Type 'string' is not assignable to type 'number'.`);
```


================================================
FILE: packages/formatter/package.json
================================================
{
  "name": "@pretty-ts-errors/formatter",
  "version": "0.1.8",
  "description": "Pretty TypeScript Errors Formatter",
  "files": [
    "src/**",
    "dist/**"
  ],
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsdown src/index.ts --format cjs,esm --dts",
    "dev": "tsdown src/index.ts --format cjs,esm --dts --watch",
    "lint": "tsc -p . --noEmit",
    "test": "vitest run",
    "test:watch": "vitest",
    "publish": "npm run build && npm publish --access public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yoavbls/pretty-ts-errors.git"
  },
  "keywords": [
    "typescript",
    "errors"
  ],
  "author": "yoavbls",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/yoavbls/pretty-ts-errors/issues"
  },
  "homepage": "https://github.com/yoavbls/pretty-ts-errors#readme",
  "devDependencies": {
    "tsdown": "^0.15.6",
    "vitest": "^3.2.4"
  },
  "dependencies": {
    "@pretty-ts-errors/utils": "*",
    "prettier": "^3.6.2"
  }
}


================================================
FILE: packages/formatter/src/addMissingParentheses.ts
================================================
import { has, invert, objectKeys } from "@pretty-ts-errors/utils";

const parentheses = {
  "(": ")",
  "{": "}",
  "[": "]",
} as const;

const openParentheses = objectKeys(parentheses);
const closeParentheses = Object.values(parentheses);

export function addMissingParentheses(type: string): string {
  const openStack: (typeof openParentheses)[number][] = [];
  const missingClosingChars: string[] = [];

  for (const char of type) {
    if (has(openParentheses, char)) {
      openStack.push(char);
    } else if (has(closeParentheses, char)) {
      const lastOpen = openStack[openStack.length - 1];
      if (lastOpen === undefined || parentheses[lastOpen] !== char) {
        // Add the correct opening character before the current closing character
        openStack.push(invert(parentheses)[char]);
      } else {
        openStack.pop();
      }
    }
  }

  // Add the missing closing characters at the end of the string
  while (openStack.length > 0) {
    const openChar = openStack.pop()!;
    const closingChar = parentheses[openChar];
    missingClosingChars.push(closingChar);
  }

  let validType = type;

  // Close the last string if it's not closed
  const quoteMatches = validType.match(/['"]/g);
  if (quoteMatches) {
    const lastQuote = quoteMatches[quoteMatches.length - 1];
    if (quoteMatches.length % 2 === 1) {
      validType += `...${lastQuote}`;
    }
  }

  if (validType.endsWith(":")) {
    validType += "...";
  }

  validType = (validType + "\n..." + missingClosingChars.join("")).replace(
    // Change (param: ...) to (param) => __RETURN_TYPE__ if needed
    /(\([a-zA-Z0-9]*:[^)]*\))/,
    (p1) => `${p1} => ...`
  );

  return validType;
}


================================================
FILE: packages/formatter/src/errorMessagePrettifier.ts
================================================
import { formatTypeBlock } from "./formatTypeBlock";

export type CodeBlockFn = (
  code: string,
  language?: string,
  multiLine?: boolean
) => string;

export function createErrorMessagePrettifier(
  codeBlock: CodeBlockFn
): (message: string) => Promise {
  return async (message: string) => {
    const rules = await getRules(codeBlock);
    let output = message;

    for (const { pattern, replacer } of rules) {
      let result = "";
      let lastIndex = 0;
      for (const match of output.matchAll(pattern)) {
        const [fullMatch, ...captures] = match;
        const matchIndex = match.index ?? 0;
        result += output.slice(lastIndex, matchIndex);
        result += await replacer(...captures);
        lastIndex = matchIndex + fullMatch.length;
      }
      result += output.slice(lastIndex);
      output = result;
    }
    return output;
  };
}

type Rule = {
  pattern: RegExp;
  replacer: (...args: any[]) => string | Promise;
};

async function getRules(codeBlock: CodeBlockFn): Promise {
  const formatTypeScriptBlock = (code: string) => codeBlock(code, "typescript");

  const formatSimpleTypeBlock = (code: string) => codeBlock(code, "type");

  const formatTypeOrModuleBlock = (prefix: string, code: string) =>
    formatTypeBlock(
      prefix,
      ["module", "file", "file name"].includes(prefix.toLowerCase())
        ? `"${code}"`
        : code,
      codeBlock
    );

  return [
    {
      pattern: /(?:\s)'"(.*?)(? formatTypeBlock("", `"${p1}"`, codeBlock),
    },
    {
      pattern: /['“](declare module )['”](.*)['“];['”]/g,
      replacer: (p1: string, p2: string) =>
        formatTypeScriptBlock(`${p1} "${p2}"`),
    },
    {
      pattern:
        /(is missing the following properties from type\s?)'(.*)': ((?:#?\w+, )*(?:(?!and)\w+)?)/g,
      replacer: async (pre: string, type: string, post: string) => {
        const formattedType = await formatTypeBlock("", type, codeBlock);
        const list = post
          .split(", ")
          .filter(Boolean)
          .map((prop: string) => `
  • ${prop}
    • `)
          .join("");
        return `${pre}${formattedType}: 
      ${list}
    `;
      },
    },
    {
      pattern: /(types) ['“](.*?)['”] and ['“](.*?)['”][.]?/gi,
      replacer: async (p1: string, p2: string, p3: string) => {
        const [left, right] = await Promise.all([
          formatTypeBlock(p1, p2, codeBlock),
          formatTypeBlock("", p3, codeBlock),
        ]);
        return `${left} and ${right}`;
      },
    },
    {
      pattern: /type annotation must be ['“](.*?)['”] or ['“](.*?)['”][.]?/gi,
      replacer: async (p1: string, p2: string, p3: string | number) => {
        if (typeof p3 === "string") {
          const [left, right] = await Promise.all([
            formatTypeBlock(p1, p2, codeBlock),
            formatTypeBlock("", p3, codeBlock),
          ]);
          return `${left} or ${right}`;
        }
        const [left, right] = await Promise.all([
          formatTypeBlock("", p1, codeBlock),
          formatTypeBlock("", p2, codeBlock),
        ]);
        return `${left} or ${right}`;
      },
    },
    {
      pattern: /(Overload \d of \d), ['“](.*?)['”], /gi,
      replacer: async (p1: string, p2: string) =>
        `${p1}${await formatTypeBlock("", p2, codeBlock)}`,
    },
    {
      pattern: /^['“]"[^"]*"['”]$/g,
      replacer: formatTypeScriptBlock,
    },
    {
      pattern: /(module )'([^"]*?)'/gi,
      replacer: (p1: string, p2: string) => `${p1}"${p2}"`,
    },
    {
      pattern:
        /(module|file|file name|imported via) ['"“](.*?)['"“](?=[\s(.|,]|$)/gi,
      replacer: async (p1: string, p2: string) =>
        formatTypeBlock(p1, `"${p2}"`, codeBlock),
    },
    {
      pattern:
        /(type|type alias|interface|module|file|file name|class|method's|subtype of constraint) ['“](.*?)['“](?=[\s(.|,)]|$)/gi,
      replacer: (p1: string, p2: string) => formatTypeOrModuleBlock(p1, p2),
    },
    {
      pattern:
        /(.*)['“]([^>]*)['”] (type|interface|return type|file|module|is (not )?assignable)/gi,
      replacer: async (p1: string, p2: string, p3: string) =>
        `${p1}${await formatTypeOrModuleBlock("", p2)} ${p3}`,
    },
    {
      pattern:
        /['“]((void|null|undefined|any|boolean|string|number|bigint|symbol)(\[\])?)['”]/g,
      replacer: formatSimpleTypeBlock,
    },
    {
      pattern:
        /['“](import|export|require|in|continue|break|let|false|true|const|new|throw|await|for await|[0-9]+)( ?.*?)['”]/g,
      replacer: (p1: string, p2: string) => formatTypeScriptBlock(`${p1}${p2}`),
    },
    {
      pattern: /(return|operator) ['“](.*?)['”]/gi,
      replacer: (p1: string, p2: string) =>
        `${p1} ${formatTypeScriptBlock(p2)}`,
    },
    {
      pattern: /(? ` ${codeBlock(p1)} `,
    },
  ];
}


================================================
FILE: packages/formatter/src/formatTypeBlock.ts
================================================
import { addMissingParentheses } from "./addMissingParentheses";
import { formatTypeWithPrettier } from "./formatTypeWithPrettier";

export async function formatTypeBlock(
  prefix: string,
  type: string,
  codeBlock: (code: string, language?: string, multiLine?: boolean) => string
) {
  // Return a simple code block if it's just a parenthesis
  if (type.match(/^(\[\]|\{\})$/)) {
    return `${prefix} ${codeBlock(type)}`;
  }

  if (
    // Skip formatting if it's a simple type
    type.match(
      /^((void|null|undefined|any|number|string|bigint|symbol|readonly|typeof)(\[\])?)$/
    )
  ) {
    return `${prefix} ${codeBlock(type, "type")}`;
  }

  const formattedType = await formatType(type);

  if (formattedType.includes("\n")) {
    return `${prefix}: ${codeBlock(formattedType, "type", true)}`;
  } else {
    return `${prefix} ${codeBlock(formattedType, "type")}`;
  }
}
/**
 * Try to format type with prettier
 */
export async function formatType(
  type: string,
  options?: { throwOnError?: boolean }
) {
  try {
    // Wrap type with valid statement, format it and extract the type back
    return convertToOriginalType(
      await formatTypeWithPrettier(convertToValidType(type))
    );
  } catch (e) {
    if (options?.throwOnError) {
      throw e;
    }
    return type;
  }
}

const convertToValidType = (type: string) =>
  `type x = ${type
    // Add missing parentheses when the type ends with "...""
    .replace(/^(.*)\.\.\.$/, (_, p1) => addMissingParentheses(p1))
    // Replace single parameter function destructuring because it's not a valid type
    // .replaceAll(/\((\{.*\})\:/g, (_, p1) => `(param: /* ${p1} */`)
    // Change `(...): return` which is invalid to `(...) => return`
    .replace(/^(\(.*\)): /, (_, p1) => `${p1} =>`)
    .replaceAll(/... (\d{0,}) more .../g, (_, p1) => `___${p1}MORE___`)
    .replaceAll(/... (\d{0,}) more ...;/g, (_, p1) => `___MORE___: ${p1};`)
    .replaceAll("...;", "___KEY___: ___THREE_DOTS___;")
    .replaceAll("...", "__THREE_DOTS__")};`;

const convertToOriginalType = (type: string) =>
  type
    .replaceAll("___KEY___: ___THREE_DOTS___", "...;")
    .replaceAll("__THREE_DOTS__", "...")
    .replaceAll(/___MORE___: (\d{0,});/g, (_, p1) => `... ${p1} more ...;`)
    .replaceAll(/___(\d{0,})MORE___/g, (_, p1) => `... ${p1} more ...`)
    .replaceAll(/'([^']+)'(?=\s*:)/g, '"$1"')
    .replaceAll(/... (\d{0,}) more .../g, (_, p1) => `/* ${p1} more */`) // ... x more ... not shown sell
    // .replaceAll(/\(param\: \/\* (\{ .* \}) \*\//g, (_, p1) => `(${p1}: `)
    .replace(/^type x =[ ]?([\s\S]*?);?$/g, "$1")
    .trim();


================================================
FILE: packages/formatter/src/formatTypeWithPrettier.ts
================================================
import { format } from "prettier/standalone";
import * as parserEstree from "prettier/plugins/estree";
import * as parserTypescript from "prettier/plugins/typescript";

export async function formatTypeWithPrettier(text: string) {
  return format(text, {
    plugins: [parserTypescript, parserEstree],
    parser: "typescript",
    printWidth: 60,
    arrowParens: "avoid",
    semi: false,
    singleQuote: false,
  });
}


================================================
FILE: packages/formatter/src/index.ts
================================================
export {
  createErrorMessagePrettifier,
  type CodeBlockFn,
} from "./errorMessagePrettifier";


================================================
FILE: packages/formatter/test/errorMessageMocks.ts
================================================
/**
 * This file contains mocks of error messages, only some of them
 * are used in tests but all of them can be used to test and debug
 * the formatting visually, you can try to select them on debug and check the hover.
 */

import { d } from "@pretty-ts-errors/utils";

export const errorWithSpecialCharsInObjectKeys = d`
Type 'string' is not assignable to type '{ 'abc*bc': string; }'.
`;

export const errorWithDashInObjectKeys = d`
Type '{ person: { 'first-name': string; }; }' is not assignable to type 'string'.
`;

/**
 * Formatting error from this issue: https://github.com/yoavbls/pretty-ts-errors/issues/20
 */
export const errorWithMethodsWordInIt = d`
The 'this' context of type 'ElementHandle' is not assignable to method's 'this' of type 'ElementHandle'.
  Type 'Node' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 114 more.
`;

export const errorWithParamsDestructuring = d`
Argument of type '{ $ref: null; ref: (ref: any) => any; columns: ({ label: string; prop: string; } | { label: string; formatter: ({ ip_type }: any) => any; } | { actions: { label: string; disabled: ({ contract_id }: any) => boolean; handler({ contract_id }: any): void; }[]; })[]; ... 4 more ...; load(): Promise<...>; }' is not assignable to parameter of type 'VTableConfig'.
  Property 'data' is missing in type '{ $ref: null; ref: (ref: any) => any; columns: ({ label: string; prop: string; } | { label: string; formatter: ({ ip_type }: any) => any; } | { actions: { label: string; disabled: ({ contract_id }: any) => boolean; handler({ contract_id }: any): void; }[]; })[]; ... 4 more ...; load(): Promise<...>; }' but required in type 'VTableConfig'.
`;

export const errorWithLongType = d`
Property 'isFlying' is missing in type '{ animal: { __typename?: "Animal" | undefined; id: string; name: string; age: number; isAlived: boolean; ... 8 more ...; attributes: { ...; } | ... 3 more ... | { ...; }; }; }' but required in type '{ animal: { __typename?: "Animal" | undefined; id: string; name: string; age: number; isAlived: boolean; isFlying: boolean; ... 8 more ...; attributes: { ...; } | ... 3 more ... | { ...; }; }; }'.
`;

export const errorWithTruncatedType2 = d`
Type '{ '!top': string[]; 'xsl:declaration': { attrs: { 'default-collation': null; 'exclude-result-prefixes': null; 'extension-element-prefixes': null; 'use-when': null; 'xpath-default-namespace': null; }; }; 'xsl:instruction': { ...; }; ... 49 more ...; 'xsl:literal-result-element': {}; }' is missing the following properties from type 'GraphQLSchema': description, extensions, astNode, extensionASTNodes, and 21 more.
`;

export const variableNotUsedEror = d`
'a' is declared but its value is never read.
`;

export const errorWithSimpleIndentations = d`
Type '(newIds: number[]) => void' is not assignable to type '(selectedId: string[]) => void'.
  Types of parameters 'newIds' and 'selectedId' are incompatible.
    Type 'string[]' is not assignable to type 'number[]'.
      Type 'string' is not assignable to type 'number'.
`;

export const errorWithComma = d`
Argument of type '{ filters: Filters; } & T' is not assignable to parameter of type 'T & F'.
  Type '{ filters: Filters; } & T' is not assignable to type 'F'.
    '{ filters: Filters; } & T' is assignable to the constraint of type 'F', but 'F' could be instantiated with a different subtype of constraint '{ filters: Filters; }'.
`;

export const missingPropertyError =
  "\
Property 'user' is missing in type '{ person: { username: string; email: string; }; }' but required in type '{ user: { name: string; email: `${string}@${string}.${string}`; age: number; }; }'.\
";

export const missingReactPropsError = d`
Type '{ style: { backgroundColor: string; }; }' is not assignable to type 'DropDownPickerProps'.
  Type '{ style: { backgroundColor: string; }; }' is not assignable to type 'DropDownPickerMultipleProps & DropDownPickerBaseProps': multiple, setValue, value
`;

export const leftSideAritmeticError = d`
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
`;

export const theosError = d`
Exported variable 'uploadRouter' has or is using name 'Uploader' from external module "/Users/theo/Code/Work/filething/packages/uploadthing/dist/types-dbaf1b46" but cannot be named.
`;

export const ts1378Error = d`
Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.
`;

export const ts2304Error = d`
Cannot find name 'varname'.
`;

export const ts2305Error = d`
Module '"@pretty-ts-errors/formatter"' has no exported member 'values'.
`;

export const ts2307Error = d`
Cannot find module 'events' or its corresponding type declarations.
`;

export const ts1360Error = d`
Property 'a' is missing in type '{ b: { name: string; icon: undefined; }; c: { name: string; icon: undefined; }; d: { name: string; icon: undefined; }; e: { name: string; icon: undefined; }; f: { ...; }; g: { ...; }; h:...' but required in type '{a: {name: string; icon: undefined}}'.
`;

export const errorWithStringChars = d`
Type '"' 'Oh no"' is not assignable to type '"'  'Oh n\"o\"'   "'.
`;

export const ts2322ErrorWithPrivateProperty = d`
Type 'Ref<{ name: string; readonly type: "json"; mm: (px: T) => T; px: (mm: T) => T; ... 18 more ...; toJson: () => string; }>' is not assignable to type 'Ref'.
  Type '{ name: string; readonly type: "json"; mm: (px: T) => T; px: (mm: T) => T; ... 18 more ...; toJson: () => string; }' is missing the following properties from type 'MpcdiConfiguration': ratio, #overlaps, download
`;

export const ts4113Error = d`
This member cannot have an 'override' modifier because it is not declared in the base class 'A'.
`;

export const ts4117Error = d`
This member cannot have an 'override' modifier because it is not declared in the base class 'A'. Did you mean 'testA'?
`;


================================================
FILE: packages/formatter/test/formatter.vitest.ts
================================================
import { describe, it, expect } from "vitest";
import {
  createErrorMessagePrettifier,
  type CodeBlockFn,
} from "../src/errorMessagePrettifier";
import { addMissingParentheses } from "../src/addMissingParentheses";
import { formatType } from "../src/formatTypeBlock";
import { d } from "@pretty-ts-errors/utils";
import {
  errorWithDashInObjectKeys,
  errorWithSpecialCharsInObjectKeys,
} from "./errorMessageMocks";
import * as errorMessageMocks from "./errorMessageMocks";

// Simple stub that marks code blocks without any rendering logic
const stubCodeBlock: CodeBlockFn = (code, language, multiLine) => {
  if (multiLine) return `\n\`\`\`${language}\n${code}\n\`\`\`\n`;
  return `\`${code}\``;
};

const prettifyErrorMessage = createErrorMessagePrettifier(stubCodeBlock);

describe("formatter", () => {
  it("adds missing parentheses", () => {
    expect(addMissingParentheses("Hello, {world! [This] is a (test.")).toBe(
      "Hello, {world! [This] is a (test.\n...)}"
    );
  });

  it("formats Special characters in object keys", async () => {
    expect(await prettifyErrorMessage(errorWithSpecialCharsInObjectKeys)).toBe(
      'Type `string` is not assignable to type `{ "abc*bc": string }`.'
    );
  });

  it("formats method's word in the error", async () => {
    expect(await prettifyErrorMessage(errorWithDashInObjectKeys)).toBe(
      'Type `{ person: { "first-name": string } }` is not assignable to type `string`.'
    );
  });

  it("prettifies type with params destructuring", async () => {
    await expect(
      formatType(
        d` { $ref: null; ref: (ref: any) => any; columns: ({ label: string; prop: string; } | { label: string; formatter: ({ ip_type }: any) => any; } | { actions: { label: string; disabled: ({ contract_id }: any) => boolean; handler({ contract_id }: any): void; }[]; })[]; ... 4 more ...; load(): Promise<...>; }
        `,
        { throwOnError: true }
      )
    ).resolves.toBeTypeOf("string");
  });

  it("prettifies truncated type", async () => {
    await expect(
      formatType(
        d` { b: { name: string; icon: undefined; }; c: { name: string; icon: undefined; }; d: { name: string; icon: undefined; }; e: { name: string; icon: undefined; }; f: { ...; }; g: { ...; }; h:...`,
        { throwOnError: true }
      )
    ).resolves.toBeTypeOf("string");
  });

  it.each(Object.entries(errorMessageMocks))(
    "prettifies mock error message: %s",
    async (_name, message) => {
      await expect(prettifyErrorMessage(message)).resolves.toBeTypeOf("string");
    }
  );
});


================================================
FILE: packages/formatter/tsconfig.json
================================================
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "noEmit": false,
    "outDir": "dist",
    "rootDir": "src",
    "composite": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "references": [{ "path": "../utils" }]
}


================================================
FILE: packages/formatter/vitest.config.ts
================================================
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "node",
    globals: true,
    include: ["test/**/*.vitest.{ts,tsx}", "test/**/*.spec.{ts,tsx}"],
  },
});


================================================
FILE: packages/utils/package.json
================================================
{
  "private": true,
  "name": "@pretty-ts-errors/utils",
  "files": [
    "dist/**"
  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc -p ."
  },
  "devDependencies": {},
  "dependencies": {
    "ts-dedent": "^2.2.0"
  }
}


================================================
FILE: packages/utils/src/index.ts
================================================
import dedent from "ts-dedent";

export function objectKeys>(
  obj: T
): (keyof T & string)[] {
  return Object.keys(obj) as (keyof T & string)[];
}

export function invert>(
  obj: T
): Partial<{
  [K in T[keyof T]]: { [P in keyof T]: K extends T[P] ? P : never }[keyof T];
}> {
  const result: Partial<{
    [K in T[keyof T]]: { [P in keyof T]: K extends T[P] ? P : never }[keyof T];
  }> = {};
  for (const key in obj) {
    const value = obj[key];
    if (value !== undefined) {
      result[value] = key;
    }
  }
  return result;
}

/**
 * d stands for dedent.
 * it allow us to indent html in template literals without affecting the output
 */
export const d = dedent;

/**
 * Check if an array contains a string.
 * Type guard the string if it does.
 */
export const has = (
  array: unknown[],
  item: string
): item is Extract<(typeof array)[number], string> => array.includes(item);


================================================
FILE: packages/utils/tsconfig.json
================================================
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "noEmit": false,
    "outDir": "dist",
    "rootDir": "src",
    "composite": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"]
}


================================================
FILE: packages/vscode-formatter/README.md
================================================
# Pretty TypeScript Errors - Formatter for VSCode hovers


================================================
FILE: packages/vscode-formatter/package.json
================================================
{
  "name": "@pretty-ts-errors/vscode-formatter",
  "version": "0.1.0",
  "description": "Pretty TypeScript Errors Formatter for VSCode hovers",
  "files": [
    "src/**",
    "dist/**"
  ],
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsdown  src/index.ts --format cjs,esm --dts",
    "dev": "tsdown src/index.ts --format cjs,esm --dts --watch",
    "lint": "tsc -p . --noEmit",
    "test": "vitest run",
    "test:watch": "vitest",
    "publish": "npm run build && npm publish --access public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yoavbls/pretty-ts-errors.git"
  },
  "keywords": [
    "typescript",
    "errors"
  ],
  "author": "yoavbls",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/yoavbls/pretty-ts-errors/issues"
  },
  "homepage": "https://github.com/yoavbls/pretty-ts-errors#readme",
  "devDependencies": {
    "tsdown": "^0.15.6",
    "vitest": "^3.2.4"
  },
  "dependencies": {
    "@pretty-ts-errors/formatter": "*",
    "@pretty-ts-errors/utils": "*",
    "lz-string": "^1.5.0",
    "vscode-languageserver-types": "^3.17.5",
    "vscode-uri": "^3.1.0"
  }
}


================================================
FILE: packages/vscode-formatter/src/components/actions.ts
================================================
import { compressToEncodedURIComponent } from "lz-string";
import { Diagnostic, Range } from "vscode-languageserver-types";
import { d } from "@pretty-ts-errors/utils";

export const divider = `|`;

export const errorCodeExplanationLink = (errorCode: Diagnostic["code"]) =>
  d /*html*/ `
    
      
      
    `;

export const showErrorInSidebarLink = (range: Range, message?: string) => {
  const args = encodeURIComponent(
    JSON.stringify(message != null ? [range, message] : [range])
  );
  return d /*html*/ `
    
      
      
    `;
};

export const pinErrorLink = (range: Range, message?: string) => {
  const args = encodeURIComponent(
    JSON.stringify(message != null ? [range, message] : [range])
  );
  return d /*html*/ `
    
      
      
    `;
};

export const copyErrorLink = (message: Diagnostic["message"]) => {
  const args = encodeURIComponent(JSON.stringify(message));
  return d /*html*/ `
    
      
      
    `;
};

export const errorMessageTranslationLink = (message: Diagnostic["message"]) => {
  const encodedMessage = compressToEncodedURIComponent(message);
  return d /*html*/ `
    
      
      
    `;
};


================================================
FILE: packages/vscode-formatter/src/components/errorTitle.ts
================================================
import { d } from "@pretty-ts-errors/utils";
import { Diagnostic } from "vscode-languageserver-types";

export const errorTitle = (
  code: Diagnostic["code"],
  actions: string,
  suffix = ""
) => d /*html*/ `
    ⚠ Error ${
      typeof code === "number"
        ? d /*html*/ `
            
            (TS${code})
            
            ${actions}
            
            
          `
        : ""
    }
    
    
    ${suffix}
`;


================================================
FILE: packages/vscode-formatter/src/components/hoverCodeBlock.ts
================================================
import { d } from "@pretty-ts-errors/utils";
import { miniLine } from "./miniLine";
import { spanBreak } from "./spanBreak";
import { CodeBlockFn } from "@pretty-ts-errors/formatter";
import { plainCodeBlock } from "./plainCodeBlock";

/**
 * @returns markdown string that will be rendered as a code block (`supportHtml` required)
 * We're using codicon here since it's the only thing that can be `inline-block`
 * and have a background color in hovers due to strict sanitization of markdown on
 * VSCode [code](https://github.com/microsoft/vscode/blob/735aff6d962db49423e02c2344e60d418273ae39/src/vs/base/browser/markdownRenderer.ts#L372)
 */
const codeBlock = (code: string, language: string) =>
  spanBreak(d /*html*/ `
  

    \`\`\`${language}
    ${code}
    \`\`\`

  
`);

const inlineHoverCodeBlock = (code: string, language: string) =>
  codeBlock(` ${code} `, language);

const multiLineHoverCodeBlock = (code: string, language: string) => {
  const codeLines = code.split("\n");
  //this line is finding the longest line
  const maxLineChars = codeLines.reduce(
    (acc, curr) => (curr.length > acc ? curr.length : acc),
    0
  );
  // codicon class align the code to the center, so we must pad it with spaces
  const paddedCode = codeLines
    .map((line) => line.padEnd(maxLineChars + 2))
    .join("\n");

  return d /*html*/ `    
    ${miniLine}
    ${codeBlock(paddedCode, language)}
    ${miniLine}
    `;
};

export const hoverCodeBlock: CodeBlockFn = (code, language, multiLine) => {
  if (!language) {
    return plainCodeBlock(code);
  }
  if (multiLine) {
    return multiLineHoverCodeBlock(code, language);
  }
  return inlineHoverCodeBlock(code, language);
};


================================================
FILE: packages/vscode-formatter/src/components/htmlCodeBlock.ts
================================================
import { CodeBlockFn } from "@pretty-ts-errors/formatter";

interface Highlighter {
  codeToHtml(code: string, options: { lang: string }): string;
}

let highlighter: Highlighter | null = null;

export function initHighlighter(h: Highlighter) {
  highlighter = h;
}

export const htmlCodeBlock: CodeBlockFn = (code, language, multiLine) => {
  if (!language) {
    return `${code}`;
  }

  if (!highlighter) {
    throw new Error(
      "htmlCodeBlock not initialized. Call initHighlighter() first."
    );
  }

  const highlighted = highlighter.codeToHtml(code.trim(), {
    lang: language,
  });

  if (multiLine) {
    return (
      `
    ` +
      `
    ` +
      `` +
      highlighted +
      `
    ` +
      `
    `
    );
  }

  // Inline: strip 
     wrapper, keep as inline element
  const inlineHtml = highlighted
    .replace(/^]*>]*>/, "")
    .replace(/<\/code><\/pre>$/, "");
  return `${inlineHtml}`;
};


================================================
FILE: packages/vscode-formatter/src/components/miniLine.ts
================================================
import { spanBreak } from "./spanBreak";

/** May be useful for line separations */
export const miniLine = spanBreak(/*html*/ `
    `);


================================================
FILE: packages/vscode-formatter/src/components/plainCodeBlock.ts
================================================
import { d } from "@pretty-ts-errors/utils";

/**
 * Code block without syntax highlighting like.
 * For syntax highlighting, use {@link inlineCodeBlock} or {@link multiLineCodeBlock}
 */
export const plainCodeBlock = (content: string) => d /*html*/ `
  ${content}
`;


================================================
FILE: packages/vscode-formatter/src/components/spanBreak.ts
================================================
import { d } from "@pretty-ts-errors/utils";

/**
 * Since every thing in the extension hover split into spans,
 * we need to close the previous span before we're opening a new one
 * Note: the line breaks is important here
 */
export const spanBreak = (children: string) => d /*html*/ `
  
  ${children}
  
`;


================================================
FILE: packages/vscode-formatter/src/format/embedSymbolLinks.ts
================================================
import { Diagnostic } from "vscode-languageserver-types";
import { URI } from "vscode-uri";

export function embedSymbolLinks(diagnostic: Diagnostic): Diagnostic {
  if (
    !diagnostic?.relatedInformation?.[0]?.message?.includes("is declared here")
  ) {
    return diagnostic;
  }
  const ref = diagnostic.relatedInformation[0];
  const symbol = ref?.message.match(/(?'[^']*') is declared here./)
    ?.groups?.["symbol"];

  if (!symbol) {
    return diagnostic;
  }

  const args = [URI.parse(ref.location.uri), ref.location.range];
  const href = URI.parse(
    `command:prettyTsErrors.revealSelection?${encodeURIComponent(
      JSON.stringify(args)
    )}`
  );

  return {
    ...diagnostic,
    message: diagnostic.message.replaceAll(
      symbol,
      `${symbol}  `
    ),
  };
}


================================================
FILE: packages/vscode-formatter/src/format/identSentences.ts
================================================
import { d } from "@pretty-ts-errors/utils";

export const identSentences = (message: string): string =>
  message
    .split("\n")
    .map((line) => {
      let whiteSpacesCount = line.search(/\S/);
      if (whiteSpacesCount === -1) {
        whiteSpacesCount = 0;
      }
      if (whiteSpacesCount === 0) {
        return line;
      }
      if (whiteSpacesCount >= 2) {
        whiteSpacesCount -= 2;
      }

      return d /*html*/ `
        
        
    
        
        
    
        
    
        
        ${" ".repeat(3).repeat(whiteSpacesCount)}
        
          
        
        ${line}
        
    
        
    
    `;
    })
    .join("");


================================================
FILE: packages/vscode-formatter/src/format/prettifyDiagnosticForHover.ts
================================================
import { createErrorMessagePrettifier } from "@pretty-ts-errors/formatter";
import { Diagnostic } from "vscode-languageserver-types";
import {
  divider,
  showErrorInSidebarLink,
  pinErrorLink,
  copyErrorLink,
  errorCodeExplanationLink,
} from "../components/actions";
import { errorTitle } from "../components/errorTitle";
import { miniLine } from "../components/miniLine";
import { d } from "@pretty-ts-errors/utils";
import { embedSymbolLinks } from "./embedSymbolLinks";
import { identSentences } from "./identSentences";
import { hoverCodeBlock } from "../components/hoverCodeBlock";

const prettifyErrorMessageForHover =
  createErrorMessagePrettifier(hoverCodeBlock);

/**
 * Prettify a diagnostic for display in hover tooltips.
 * Uses markdown fenced code blocks (required by VS Code's MarkdownString).
 */
export async function prettifyDiagnosticForHover(
  diagnostic: Diagnostic
): Promise {
  const newDiagnostic = embedSymbolLinks(diagnostic);
  const identedSentences = identSentences(newDiagnostic.message);
  const prettifiedMessage =
    await prettifyErrorMessageForHover(identedSentences);

  return d /*html*/ `
    ${errorTitle(
      newDiagnostic.code,
      d`${showErrorInSidebarLink(newDiagnostic.range, diagnostic.message)} ${divider}
        ${pinErrorLink(newDiagnostic.range, diagnostic.message)} ${divider}
        ${copyErrorLink(newDiagnostic.message)} ${divider}
        ${errorCodeExplanationLink(newDiagnostic.code)}`,
      miniLine
    )}
    
    ${prettifiedMessage}
    
  `;
}


================================================
FILE: packages/vscode-formatter/src/format/prettifyDiagnosticForSidebar.ts
================================================
import { createErrorMessagePrettifier } from "@pretty-ts-errors/formatter";
import { Diagnostic } from "vscode-languageserver-types";
import { htmlCodeBlock } from "../components/htmlCodeBlock";
import {
  divider,
  pinErrorLink,
  copyErrorLink,
  errorMessageTranslationLink,
  errorCodeExplanationLink,
} from "../components/actions";
import { errorTitle } from "../components/errorTitle";
import { d } from "@pretty-ts-errors/utils";
import { embedSymbolLinks } from "./embedSymbolLinks";
import { identSentences } from "./identSentences";

const prettifyErrorMessageForSidebar =
  createErrorMessagePrettifier(htmlCodeBlock);

/**
 * Prettify a diagnostic for display in the sidebar webview.
 * Uses shiki HTML code blocks (must call initHtmlCodeBlock before first use).
 */
export async function prettifyDiagnosticForSidebar(
  diagnostic: Diagnostic
): Promise {
  const newDiagnostic = embedSymbolLinks(diagnostic);
  const identedSentences = identSentences(newDiagnostic.message);
  const prettifiedMessage =
    await prettifyErrorMessageForSidebar(identedSentences);

  return d /*html*/ `
    ${errorTitle(
      newDiagnostic.code,
      d`${pinErrorLink(newDiagnostic.range, diagnostic.message)} ${divider}
        ${copyErrorLink(newDiagnostic.message)} ${divider}
        ${errorMessageTranslationLink(newDiagnostic.message)} ${divider}
        ${errorCodeExplanationLink(newDiagnostic.code)}`
    )}
    
    
    ${prettifiedMessage}
    
    
  `;
}


================================================
FILE: packages/vscode-formatter/src/index.ts
================================================
export { prettifyDiagnosticForHover } from "./format/prettifyDiagnosticForHover";
export { prettifyDiagnosticForSidebar } from "./format/prettifyDiagnosticForSidebar";
export { initHighlighter } from "./components/htmlCodeBlock";


================================================
FILE: packages/vscode-formatter/test/vscode-formatter.vitest.ts
================================================
import { describe, it, expect } from "vitest";
import { createErrorMessagePrettifier } from "@pretty-ts-errors/formatter";
import { hoverCodeBlock } from "../src/components/hoverCodeBlock";
import { plainCodeBlock } from "../src/components/plainCodeBlock";
import {
  errorWithSpecialCharsInObjectKeys,
  errorWithDashInObjectKeys,
} from "../../formatter/test/errorMessageMocks";

const prettifyErrorMessage = createErrorMessagePrettifier(hoverCodeBlock);

describe("hoverCodeBlock", () => {
  it("renders inline code with language", () => {
    const result = hoverCodeBlock("string", "type", false);
    expect(result).toContain("```type");
    expect(result).toContain("string");
    expect(result).toContain("```");
  });

  it("renders multiline code with padding", () => {
    const code = "{\n  name: string\n}";
    const result = hoverCodeBlock(code, "type", true);
    expect(result).toContain("```type");
    expect(result).toContain("
    ");
  });

  it("falls back to plainCodeBlock when no language", () => {
    const result = hoverCodeBlock("someCode", undefined, false);
    expect(result).toContain("");
    expect(result).toContain("someCode");
  });
});

describe("plainCodeBlock", () => {
  it("wraps content in a code tag", () => {
    const result = plainCodeBlock("hello");
    expect(result).toContain("hello");
  });
});

describe("formatDiagnosticMessage with hoverCodeBlock", () => {
  it("formats special characters in object keys", async () => {
    const result = await prettifyErrorMessage(
      errorWithSpecialCharsInObjectKeys
    );
    expect(result).toContain("```type");
    expect(result).toContain("string");
    expect(result).toContain("abc*bc");
  });

  it("formats dash in object keys", async () => {
    const result = await prettifyErrorMessage(errorWithDashInObjectKeys);
    expect(result).toContain("```type");
    expect(result).toContain("first-name");
    expect(result).toContain("string");
  });
});


================================================
FILE: packages/vscode-formatter/tsconfig.json
================================================
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "noEmit": false,
    "outDir": "dist",
    "rootDir": "src",
    "composite": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "references": [
    {
      "path": "../formatter"
    },
    {
      "path": "../utils"
    }
  ]
}


================================================
FILE: packages/vscode-formatter/vitest.config.ts
================================================
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "node",
    globals: true,
    include: ["test/**/*.vitest.{ts,tsx}", "test/**/*.spec.{ts,tsx}"],
  },
});


================================================
FILE: tsconfig.base.json
================================================
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "lib": ["ES2022", "ES2021.String"],
    "baseUrl": ".",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "useDefineForClassFields": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "allowJs": true,
    "checkJs": true,
    "moduleDetection": "force",
    "declaration": true,
    "declarationMap": true,
    "composite": true
  }
}


================================================
FILE: tsconfig.json
================================================
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./tsconfig.base.json",
  "files": [],
  "references": [
    { "path": "packages/utils" },
    { "path": "packages/formatter" },
    { "path": "packages/vscode-formatter" },
    { "path": "apps/vscode-extension" }
  ]
}


================================================
FILE: tsdown.config.mjs
================================================
import { defineConfig } from "tsdown";

export default defineConfig({
  ignoreWatch: [".turbo/"],
});


================================================
FILE: turbo.json
================================================
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}