Merge branch 'main' into main

yoavbls · Apr 29, 2023 · 7c1762d · 7c1762d
2 parents b48b2d6 + 90ab9b5
commit 7c1762d
Show file tree

Hide file tree

Showing 19 changed files with 392 additions and 113 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,24 @@
+---
+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:
+<code>
+Type 'number' is not assignable to type 'string'.ts(2322)
+</code>
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -3,33 +3,32 @@
 // 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}"
-			],
-			"outFiles": [
-				"${workspaceFolder}/dist/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		},
-		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/**/*.js",
-				"${workspaceFolder}/dist/**/*.js"
-			],
-			"preLaunchTask": "tasks: watch-tests"
-		}
-	]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}",
+      "env": {
+        "VSCODE_DEBUG_MODE": "true"
+      }
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/out/**/*.js",
+        "${workspaceFolder}/dist/**/*.js"
+      ],
+      "preLaunchTask": "tasks: watch-tests"
+    }
+  ]
 }
diff --git a/README.md b/README.md
@@ -13,12 +13,18 @@
 [![Visual Studio Code](https://img.shields.io/badge/--007ACC?logo=visual%20studio%20code&logoColor=ffffff)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)&nbsp;[![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE)&nbsp;![visitor badge](https://visitor-badge.glitch.me/badge?page_id=pretty-ts-errors)
 [![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/)
 
-
+<a href="https://github.com/yoavbls/pretty-ts-errors/discussions/43"><img src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/vote.png" width="490px" /></a>  
 
 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:
 
-<img src="./assets/this.png" style="max-height: 350px"  height="350px" />&nbsp; &nbsp; <img src="./assets/instead-of-that.png" height="350px"  width="350px" style="max-height: 350px" />
+<img src="./assets/this.png" width="340.438px" />&nbsp; &nbsp; <img src="./assets/instead-of-that.png" width="350px" />  
+
+
+## Watch this
+<a href="https://www.youtube.com/watch?v=9RM2aErJs-s" target="_blank">
+ <img src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-video.png" alt="Watch theo's video" width="600" />
+</a>
 
 ## Features
 - Syntax highlighting with your theme colors for types in error messages, supporting both light and dark themes
@@ -31,39 +37,92 @@ This extension will help you understand what's going on. For example, in this re
 - 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)
-
-## Watch it
-<a href="https://www.youtube.com/watch?v=9RM2aErJs-s" target="_blank">
- <img src="http://img.youtube.com/vi/9RM2aErJs-s/0.jpg" alt="Watch the video" />
-</a>
-
-
+
+
+## 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)  
+
+
 ## 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.  
 <img src="./assets/errors-hover.png" width="600" /> 
 
-## Contribution
-Every contribution is welcome.  
-Feel free to ask anything and open any issue / PR you desire.
-
-## WTF
-<a href="https://star-history.com/#yoavbls/pretty-ts-errors&Date" target="_blank">
-<img src="https://api.star-history.com/svg?repos=yoavbls/pretty-ts-errors&type=Date" width="500px" />
+## Hype section
+<a href="https://twitter.com/t3dotgg/status/1647759462709747713">
+  <picture>    
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-light.png#gh-light-mode-only">
+    <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/theo-dark.png#gh-dark-mode-only">
+  </picture>
+</a>
+<a href="https://twitter.com/johnsoncodehk/status/1646214711204286465">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-light.png#gh-light-mode-only">
+    <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/johnson-dark.png#gh-dark-mode-only">
+  </picture>
+</a>
+<a href="https://twitter.com/tannerlinsley/status/1647982562026090496">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-light-mode-only">
+     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-light.png#gh-light-mode-only">
+    <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/assets/assets/mentions/tanner-dark.png#gh-dark-mode-only">
+  </picture>
 </a>
 
-Thanks to these amazing folks and anyone else that help it reach so many people 💙
-
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">That&#39;s great! <a href="https://t.co/gGX2TNKFqO">https://t.co/gGX2TNKFqO</a> <a href="https://t.co/xu3i5GjC7H">pic.twitter.com/xu3i5GjC7H</a></p>&mdash; Johnson Chu (@johnsoncodehk) <a href="https://twitter.com/johnsoncodehk/status/1646214711204286465?ref_src=twsrc%5Etfw">April 12, 2023</a></blockquote>
-
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">s/o <a href="https://twitter.com/yoavbls?ref_src=twsrc%5Etfw">@yoavbls</a> - this is dope <a href="https://t.co/wsI7gOxqC4">https://t.co/wsI7gOxqC4</a></p>&mdash; Theo - t3.gg (@t3dotgg) 
-<a href="https://twitter.com/t3dotgg/status/1647752075969974272?ref_src=twsrc%5Etfw">April 17, 2023</a></blockquote>
 
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Typescript just got way better 
-<a href="https://t.co/y8BQERWz7h">https://t.co/y8BQERWz7h</a></p>&mdash; Tanner Linsley (@tannerlinsley) 
-<a href="https://twitter.com/tannerlinsley/status/1647982562026090496?ref_src=twsrc%5Etfw">April 17, 2023</a></blockquote>
-
-
+### Stars from stars  
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://github.com/kentcdodds">
+          <img src="https://images.weserv.nl/?url=github.com/kentcdodds.png&fit=cover&mask=circle" width="80"><br>
+          Kent C. Dodds  
+        <a/>
+      </td>
+      <td align="center">
+        <a href="https://github.com/mattpocock">
+          <img src="https://images.weserv.nl/?url=github.com/mattpocock.png&fit=cover&mask=circle" width="80"><br>
+          Matt Pocock  
+        <a/>
+      </td>
+      <td align="center">
+        <a href="https://github.com/katt">
+          <img src="https://images.weserv.nl/?url=github.com/katt.png&fit=cover&mask=circle" width="80"><br>
+          Alex / KATT
+        <a/>
+      </td>
+      <td align="center">
+        <a href="https://github.com/tannerlinsley">
+          <img src="https://images.weserv.nl/?url=github.com/tannerlinsley.png&fit=cover&mask=circle" width="80"><br>
+          Tanner Linsley  
+        <a/>
+      </td>
+      <td align="center">
+        <a href="https://github.com/t3dotgg">
+          <img src="https://images.weserv.nl/?url=github.com/t3dotgg.png&fit=cover&mask=circle" width="80"><br>
+          Theo Browne
+        <a/>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
+
+## 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.
+
+
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "homepage": "https://github.com/yoavbls/pretty-ts-errors",
   "engines": {
-    "vscode": "^1.70.0"
+    "vscode": "^1.77.0"
   },
   "categories": [
     "Programming Languages",
@@ -77,7 +77,6 @@
     "eslint": "^8.20.0",
     "glob": "^8.0.3",
     "mocha": "^10.0.0",
-    "ts-loader": "^9.3.1",
     "typescript": "^5.0.4"
   },
   "dependencies": {

diff --git a/src/components/codeBlock.ts b/src/components/codeBlock.ts
@@ -23,10 +23,14 @@ export const inlineCodeBlock = (code: string, language: string) =>
   codeBlock(` ${code} `, language);
 
 export const multiLineCodeBlock = (code: string, language: string) => {
-  const maxLineChars = Math.max(...code.split("\n").map((line) => line.length));
-  // codicon class align the code to the center so we must padd it with spaces
-  const paddedCode = code
-    .split("\n")
+  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");
 

diff --git a/src/components/consts/knownErrorNumbers.ts b/src/components/consts/knownErrorNumbers.ts
@@ -9,7 +9,7 @@ import { Diagnostic } from "vscode-languageserver-types";
  * .map(node => Number(node.textContent.match(/TS([0-9]+)/)[1]))
  * ```
  */
-export const KNOWN_ERROR_NUMBERS: Diagnostic["code"][] = [
+export const KNOWN_ERROR_NUMBERS: Set<Diagnostic["code"]> = new Set([
   1002, 1005, 1006, 1015, 1016, 1029, 1036, 1038, 1039, 1046, 1055, 1056, 1064,
   1066, 1068, 1070, 1095, 1103, 1109, 1117, 1127, 1128, 1149, 1155, 1160, 1183,
   1192, 1196, 1202, 1208, 1218, 1219, 1225, 1228, 1243, 1244, 1254, 1259, 1308,
@@ -28,4 +28,4 @@ export const KNOWN_ERROR_NUMBERS: Diagnostic["code"][] = [
   5087, 5101, 6053, 6059, 6133, 6138, 6196, 6198, 6504, 7006, 7008, 7009, 7010,
   7016, 7017, 7022, 7023, 7026, 7027, 7030, 7031, 7034, 7041, 7044, 7053, 8020,
   17000, 17004, 17009, 18004, 18016, 80005,
-];
+]);
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,4 +2,4 @@ export * from "./codeBlock";
 export * from "./miniLine";
 export * from "./spanBreak";
 export * from "./title";
-export * from "./unstyledCodeBlock";
+export * from "./unStyledCodeBlock";
diff --git a/src/components/miniLine.ts b/src/components/miniLine.ts
@@ -1,4 +1,4 @@
 import { spanBreak } from "./spanBreak";
 
-/** May be usefull for line separations */
+/** May be useful for line separations */
 export const miniLine = spanBreak(/*html*/ `<p></p>`);
diff --git a/src/components/title.ts b/src/components/title.ts
@@ -14,12 +14,13 @@ export const title = (diagnostic: Diagnostic) => d/*html*/ `
           `
         : ""
     }
+    <br>
     <span>
 
 `;
 
 export const errorCodeExplanationLink = (errorCode: Diagnostic["code"]) =>
-  KNOWN_ERROR_NUMBERS.includes(errorCode)
+  KNOWN_ERROR_NUMBERS.has(errorCode)
     ? d/*html*/ `
         <a title="See detailed explanation" href="https://typescript.tv/errors/#TS${errorCode}">
           <span class="codicon codicon-link-external">

diff --git a/src/components/unstyledCodeBlock.ts → src/components/unStyledCodeBlock.ts b/src/components/unstyledCodeBlock.ts → src/components/unStyledCodeBlock.ts
@@ -1,10 +1,10 @@
-import dedent from "ts-dedent";
 import { inlineCodeBlock, multiLineCodeBlock } from "./codeBlock";
+import {d} from "../utils";
 
 /**
  * Code block without syntax highlighting like.
  * For syntax highlighting, use {@link inlineCodeBlock} or {@link multiLineCodeBlock}
  */
-export const unstyledCodeBlock = (content: string) => dedent/*html*/ `
+export const unStyledCodeBlock = (content: string) => d/*html*/ `
   <code>${content}</code>
 `;
diff --git a/src/extension.ts b/src/extension.ts
@@ -5,17 +5,20 @@ import {
   Range,
   window,
 } from "vscode";
+import { createConverter } from "vscode-languageclient/lib/common/codeConverter";
 import { formatDiagnostic } from "./format/formatDiagnostic";
+import { prettify } from "./format/prettify";
 import { hoverProvider } from "./provider/hoverProvider";
+import { registerSelectedTextHoverProvider } from "./provider/selectedTextHoverProvider";
 import { uriStore } from "./provider/uriStore";
 import { has } from "./utils";
-import { createConverter } from "vscode-languageclient/lib/common/codeConverter";
-import { format } from "prettier";
 
 export function activate(context: ExtensionContext) {
   const registeredLanguages = new Set<string>();
   const converter = createConverter();
 
+  registerSelectedTextHoverProvider(context);
+
   context.subscriptions.push(
     languages.onDidChangeDiagnostics(async (e) => {
       e.uris.forEach((uri) => {
@@ -35,10 +38,11 @@ export function activate(context: ExtensionContext) {
               : false
           )
           .forEach(async (diagnostic) => {
-
             // formatDiagnostic 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 formatDiagnostic recognize it.
-            const markdownString = new MarkdownString(formatDiagnostic(converter.asDiagnostic(diagnostic), prettify));
+            const markdownString = new MarkdownString(
+              formatDiagnostic(converter.asDiagnostic(diagnostic), prettify)
+            );
 
             markdownString.isTrusted = true;
             markdownString.supportHtml = true;
@@ -51,7 +55,7 @@ export function activate(context: ExtensionContext) {
           });
         uriStore[uri.path] = items;
 
-        if (hasTsDiagnostic && uri.scheme === "file") {
+        if (hasTsDiagnostic) {
           const editor = window.visibleTextEditors.find(
             (editor) => editor.document.uri.toString() === uri.toString()
           );
@@ -60,7 +64,6 @@ export function activate(context: ExtensionContext) {
             context.subscriptions.push(
               languages.registerHoverProvider(
                 {
-                  scheme: "file",
                   language: editor.document.languageId,
                 },
                 hoverProvider
@@ -72,12 +75,3 @@ export function activate(context: ExtensionContext) {
     })
   );
 }
-
-function prettify(text: string) {
-  return format(text, {
-    parser: "typescript",
-    printWidth: 60,
-    singleAttributePerLine: false,
-    arrowParens: "avoid",
-  });
-}