copy

README.md

@@ -4,22 +4,19 @@
 <h1 align="center" style="font-weight: bold; font-size: 40px;">Type Buddy 🤝</h1>
 
 <p align="center" style="font-size: 30px">Finally make <i>sense</i> of your complex types</p>
-<p align="center" style="font-size: 30px"><a href="">💻 VSCode Extension</a> | <a href="https://typed-rocks.github.
-io/type-buddy">🌐 
-Web 
-App</a></p>
+<p align="center" style="font-size: 30px"><a href="">💻 VSCode Extension</a> | <a href="https://typed-rocks.github.io/type-buddy">🌐 Web App</a></p>
 <div align="center">
 <p style="font-size:25px">Just <b><i>hover over</i></b> your complex type and reveal the ✨beautiful function✨...</p>
-<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/hover.png?raw=true" alt="Type Buddy Hover" height="300">
+<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/hover.png?raw=true" alt="Type Buddy Hover" height="400">
 <br /><br />
 <p style="font-size:2rem">🕵️‍♂️ <b>Show Type Functions</b></p>
 <p style="font-size: 1.25rem">
 Open any TypeScript file, Use the 🎨 command <code>Type Buddy: Show Type Functions</code>, Update your code and the viewer will show you the results as functions.</p>
-<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/show-functions.png?raw=true" alt="Type Buddy: Show Functions" height="300" />
+<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/show-functions.png?raw=true" alt="Type Buddy: Show Functions" height="400px" />
 
 <p style="font-size:2rem">👀 <b>Type Viewer</b></p>
 <p style="font-size: 1.25rem">
-Either use the command <code>Type Buddy: Create Type Buddy Document</code> to create a new <code>.tb</code> file or use an existing one and run the <code>Type Buddy: Open Type Viewer</code> command to start the viewer. Then update your code and the viewer will show you the types as functions.</p>
+Either use the command <code>Type Buddy: Open Type Buddy File</code> to create a new <code>.tb</code> file or use an existing one and run the <code>Type Buddy: Open Type Viewer</code> command to start the viewer. Then update your code and the viewer will show you the types as functions.</p>
 
-<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/type-preview.png?raw=true" alt="Type Preview" height="300">
+<img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/type-preview.png?raw=true" alt="Type Preview" height="400">
 </div>

agnostic/agnostic.ts

@@ -263,8 +263,8 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
         const returnExpr = singleStmt.getExpression();
         if (!returnExpr) {
           throw new Error(
-            "there needs to be a EXACTLY ONE return inside of if, else if or else blocks. NOTHING else.\nLine: " +
-              singleStmt.getStartLineNumber()
+            "There needs to be a EXACTLY ONE return inside of if, else if or else blocks. NOTHING else.\nLine: " +
+            singleStmt.getStartLineNumber()
           );
         }
         return returnExpr.getText();
@@ -274,7 +274,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
       }
     }
     // If there's more complexity here, you'd need more logic.
-    throw new Error("Expected a single return or a nested if in the block. \nLine: " + block.getStartLineNumber());
+    throw new Error("Expected a single return or a nested if in the block. \nLine: " + block.getEndLineNumber());
   } else if (block.isKind(SyntaxKind.ReturnStatement)) {
     // Direct return, no block
     const returnExpr = block.getExpression();
@@ -286,7 +286,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
 
   throw new Error(
     "This block structure is not supported. Only if, else if or else blocks with exactly one return in there are supported\n Line: " +
-      block.getStartLineNumber()
+    block.getEndLineNumber()
   );
 }
 

copy-down.sh

@@ -0,0 +1,3 @@
+cp README.md ./extension/README.md
+cp ./agnostic/agnostic.ts ./extension/src/agnostic.ts
+cp ./agnostic/agnostic.ts ./page/src/agnostic.ts

extension/README.md

@@ -16,7 +16,7 @@ Open any TypeScript file, Use the 🎨 command <code>Type Buddy: Show Type Funct
 
 <p style="font-size:2rem">👀 <b>Type Viewer</b></p>
 <p style="font-size: 1.25rem">
-Either use the command <code>Type Buddy: Create Type Buddy Document</code> to create a new <code>.tb</code> file or use an existing one and run the <code>Type Buddy: Open Type Viewer</code> command to start the viewer. Then update your code and the viewer will show you the types as functions.</p>
+Either use the command <code>Type Buddy: Open Type Buddy File</code> to create a new <code>.tb</code> file or use an existing one and run the <code>Type Buddy: Open Type Viewer</code> command to start the viewer. Then update your code and the viewer will show you the types as functions.</p>
 
 <img src="https://github.com/typed-rocks/type-buddy/blob/main/extension/imgs/type-preview.png?raw=true" alt="Type Preview" height="400">
 </div>

extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "type-buddy",
-  "displayName": "type-buddy",
-  "description": "",
+  "displayName": "Type Buddy",
+  "description": "A simple extension to help you understand TypeScript types",
   "version": "0.0.1",
   "engines": {
     "vscode": "^1.85.0"
@@ -45,11 +45,11 @@
       },
       {
         "command": "type-buddy.openEditor",
-        "title": "Type Buddy: Create Type Buddy Doc"
+        "title": "Type Buddy: Open Type Buddy File"
       },
       {
         "command": "type-buddy.showFunctionTypes",
-        "title": "Type Buddy: Show Function Types"
+        "title": "Type Buddy: Show Type Functions"
       }
     ]
   },

extension/src/agnostic.ts

@@ -264,7 +264,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
         if (!returnExpr) {
           throw new Error(
             "There needs to be a EXACTLY ONE return inside of if, else if or else blocks. NOTHING else.\nLine: " +
-              singleStmt.getStartLineNumber()
+            singleStmt.getStartLineNumber()
           );
         }
         return returnExpr.getText();
@@ -286,7 +286,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
 
   throw new Error(
     "This block structure is not supported. Only if, else if or else blocks with exactly one return in there are supported\n Line: " +
-      block.getEndLineNumber()
+    block.getEndLineNumber()
   );
 }
 

extension/src/extension.ts

@@ -107,6 +107,10 @@ export function activate(context: vscode.ExtensionContext) {
   const changeTextDocumentDisposable = vscode.workspace.onDidChangeTextDocument((event) => updateViews(event));
 	context.subscriptions.push(changeTextDocumentDisposable);
 
+  function extractFileName(fileName?: string) {
+    const parts = fileName?.split("/");
+    return parts ? parts[parts.length - 1] : "Untitled";
+  }
 
   function updateViews(event: vscode.TextDocumentChangeEvent | vscode.TextEditor | undefined) {
     if (!event?.document) {
@@ -141,7 +145,8 @@ export function activate(context: vscode.ExtensionContext) {
 
 
   function updateTypeText(title: string, newText: string) {
-    post(`Type Preview for: ${title}`, typeWebViewPanel().webview, () => fnsToTernaries(newText).join("\n\n"));
+    const fileName = extractFileName(title);
+    post(`Type Preview for: ${fileName}`, typeWebViewPanel().webview, () => fnsToTernaries(newText).join("\n\n"));
   }
 
   function post(title: string, webview: vscode.Webview, fn: () => string) {

page/src/agnostic.ts

@@ -84,7 +84,6 @@ function unwrapParenthesizedType(node: Node | undefined): Node {
     throw new Error("Node is undefined");
   }
   if (node?.isKind(SyntaxKind.ParenthesizedType)) {
-    console.log('unwrapping', node.getText());
     return unwrapParenthesizedType(node.getFirstChildByKind(SyntaxKind.ConditionalType));
   }
   return node;
@@ -244,7 +243,6 @@ function transformFnToTernary(func: FunctionDeclaration) {
   const ternaryExpr = transformIfStatementToTernary(ifStatement, 2);
 
   const fnName = func.getName();
-  console.log(fnName);
   const fnParameters = func
     .getParameters()
     .map((p) => p.getText().trim())
@@ -265,8 +263,8 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
         const returnExpr = singleStmt.getExpression();
         if (!returnExpr) {
           throw new Error(
-            "there needs to be a EXACTLY ONE return inside of if, else if or else blocks. NOTHING else.\nLine: " +
-              singleStmt.getStartLineNumber()
+            "There needs to be a EXACTLY ONE return inside of if, else if or else blocks. NOTHING else.\nLine: " +
+            singleStmt.getStartLineNumber()
           );
         }
         return returnExpr.getText();
@@ -276,7 +274,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
       }
     }
     // If there's more complexity here, you'd need more logic.
-    throw new Error("Expected a single return or a nested if in the block. \nLine: " + block.getStartLineNumber());
+    throw new Error("Expected a single return or a nested if in the block. \nLine: " + block.getEndLineNumber());
   } else if (block.isKind(SyntaxKind.ReturnStatement)) {
     // Direct return, no block
     const returnExpr = block.getExpression();
@@ -288,7 +286,7 @@ function getBlockReturnExpression(block: Statement, indent: number): string {
 
   throw new Error(
     "This block structure is not supported. Only if, else if or else blocks with exactly one return in there are supported\n Line: " +
-      block.getStartLineNumber()
+    block.getEndLineNumber()
   );
 }
 

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "esnext"]
+  }
+}