autocomplete and import vals

README.md

@@ -10,19 +10,23 @@ Use the `Val Town: Set Token` command to set your api token, that you can get fr
 
 ### Author Vals from VS Code
 
-![val demo](https://raw.githubusercontent.com/pomdtr/valtown-vscode/master/img/vals.png)
+![val demo](https://raw.githubusercontent.com/val-town/val-town-vscode/main/img/vals.png)
 
 ## Preview Web Endpoints
 
-![preview demo](https://raw.githubusercontent.com/pomdtr/valtown-vscode/master/img/preview.png)
+![preview demo](https://raw.githubusercontent.com/val-town/val-town-vscode/main/img/preview.png)
 
 ### Edit/Manage your Blobs
 
-![blob demo](https://raw.githubusercontent.com/pomdtr/valtown-vscode/master/img/blobs.png)
+![blob demo](https://raw.githubusercontent.com/val-town/val-town-vscode/main/img/blobs.png)
 
 ### Run SQLite Queries
 
-![sqlite demo](https://raw.githubusercontent.com/pomdtr/valtown-vscode/master/img/sqlite.png)
+![sqlite demo](https://raw.githubusercontent.com/val-town/val-town-vscode/main/img/sqlite.png)
+
+### Quick Import Vals
+
+![autocomplete demo](https://raw.githubusercontent.com/val-town/val-town-vscode/main/img/autocomplete.png)
 
 ## Sidebar Configuration
 

package.json

@@ -2,7 +2,7 @@
 	"name": "valtown",
 	"displayName": "Val Town",
 	"description": "VS Code integration for val.town",
-	"version": "0.8.10",
+	"version": "0.8.12",
 	"publisher": "pomdtr",
 	"private": true,
 	"icon": "assets/icon.png",
@@ -358,6 +358,26 @@
 								"url": "https://api.val.town/v1/users/${user:me}/vals"
 							}
 						]
+					},
+					"valtown.autoImport.staticVersion": {
+						"type": "boolean",
+						"markdownDescription": "Use a static version when automatically importing vals, like this.\n\n| Option | Example |\n|--------|---------|\n| `false` | `import \"https://esm.town/v/steveKrouse/helloWorld\"` |\n| `true`  | `import \"https://esm.town/v/steveKrouse/helloWorld?v=14\"` |\n\nThis is useful for ensuring that your code doesn't break when the val is updated.",
+						"default": false
+					},
+					"valtown.autoImport.upgradeBehavior": {
+						"type": "string",
+						"markdownDescription": "What to do when a val which has already been imported is auto-imported again with a different version.\n\n| Option  | Description |\n|---------|-------------|\n| `prompt` | Prompt the user to upgrade the val. |\n| `upgrade` | Automatically upgrade the val. |\n| `nothing` | Do nothing. |",
+						"enum": [
+							"prompt",
+							"upgrade",
+							"nothing"
+						],
+						"default": "prompt"
+					},
+					"valtown.autoImport.showUpgradeNotifications": {
+						"type": "boolean",
+						"markdownDescription": "Show notifications when a val which has already been imported is auto-imported again with a different version.",
+						"default": true
 					}
 				}
 			}
@@ -719,7 +739,15 @@
 				"id": "valtown.privacy",
 				"label": "Set Privacy"
 			}
-		]
+		],
+		"completionItemProvider": {
+			"selector": [
+				{
+					"language": "typescriptreact",
+					"scheme": "vt+val"
+				}
+			]
+		}
 	},
 	"scripts": {
 		"vscode:prepublish": "npm run package",
@@ -739,4 +767,4 @@
 		"webpack": "^5.89.0",
 		"webpack-cli": "^5.1.4"
 	}
-}
+}

src/client.ts

@@ -55,6 +55,16 @@ export type Version = {
   createdAt: string;
 };
 
+export type CompletionVal = {
+  handle: string;
+  name: string;
+  author: string;
+  createdAt: string;
+  code: string;
+  version: number;
+  exportedName: string;
+};
+
 const templates = {
   http: `export default async function (req: Request): Promise<Response> {
   return Response.json({ ok: true })
@@ -122,8 +132,12 @@ export class ValtownClient {
       throw new Error("No token");
     }
 
-    const { hostname } = new URL(url);
-    if (hostname !== "api.val.town") {
+    const { hostname, pathname } = new URL(url);
+    if (
+      hostname !== "api.val.town" &&
+      // completions are fetched from the frontend API
+      !(hostname === "www.val.town" && pathname.startsWith("/api/"))
+    ) {
       return fetch(url, init);
     }
 
@@ -463,4 +477,27 @@ export class ValtownClient {
 
     return res.json();
   }
+
+  async autocomplete(
+    handle: string | undefined,
+    name: string | undefined
+  ): Promise<CompletionVal[]> {
+    const params = new URLSearchParams({
+      batch: "1",
+      input: JSON.stringify({
+        "0": {
+          handle: handle === "me" ? (await this.user()).username : handle ?? "",
+          name: name || null,
+        },
+      }),
+    });
+    const url = new URL("https://www.val.town/api/trpc/autocomplete");
+    url.search = params.toString();
+    const res = await this.fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return ((await res.json()) as any)[0].result.data;
+  }
 }

src/commands.ts

@@ -1,6 +1,7 @@
 import * as vscode from "vscode";
 import { clearToken, saveToken } from "./secrets";
 import { BaseVal, ValTemplate, ValtownClient } from "./client";
+import importValCommand from "./importValCommand";
 
 export function registerCommands(
   context: vscode.ExtensionContext,
@@ -272,5 +273,6 @@ export function registerCommands(
         httpEndpoint,
       );
     }),
+    vscode.commands.registerCommand("valtown.importVal", importValCommand)
   );
 }

src/completions.ts

@@ -0,0 +1,95 @@
+import * as vscode from "vscode";
+import { ValtownClient } from "./client";
+
+enum ValImportKind {
+  Default,
+  Named,
+  SideEffect,
+}
+
+// TODO: are we hammering the API? should we try to debounce or throttle?
+export function registerCompletions(
+  context: vscode.ExtensionContext,
+  client: ValtownClient
+) {
+  context.subscriptions.push(
+    vscode.languages.registerCompletionItemProvider(
+      { scheme: "vt+val", language: "typescriptreact" },
+      {
+        async provideCompletionItems(
+          document: vscode.TextDocument,
+          position: vscode.Position
+        ) {
+          // see if we can match backwards from the cursor to find @[<handle>[/<val>]]
+          const atImportMatch = /@([a-zA-Z0-9]*)(?:\/([a-zA-Z0-9_]*))?$/.exec(
+            document.getText(
+              new vscode.Range(
+                position.line,
+                0,
+                position.line,
+                position.character
+              )
+            )
+          );
+
+          // if we can't match, don't provide any completions
+          if (!atImportMatch) {
+            return [];
+          }
+
+          const [atImport, typedHandle, name] = atImportMatch;
+          const startOfAtImport = position.translate(0, -atImport.length);
+
+          // get completions from the API
+          const data = await client.autocomplete(typedHandle, name);
+
+          return data.map((completionVal) => {
+            const { handle, name, code, version, exportedName } = completionVal;
+            let importKind: ValImportKind = ValImportKind.SideEffect;
+            if (exportedName === "default") {
+              importKind = ValImportKind.Default;
+            } else if (exportedName) {
+              importKind = ValImportKind.Named;
+            }
+
+            const snippetCompletion = new vscode.CompletionItem({
+              label: `@${typedHandle === "me" ? "me" : handle}/${name}`,
+              detail: ` ${exportedName ?? "(no export)"}`,
+              description: `v${version}`,
+            });
+            snippetCompletion.documentation = new vscode.MarkdownString(
+              "```tsx\n" + code + "\n```"
+            );
+            let insertText = "";
+            if (importKind === ValImportKind.Default) {
+              insertText = name;
+            } else if (importKind === ValImportKind.Named) {
+              insertText = exportedName;
+            }
+            snippetCompletion.insertText = insertText;
+            snippetCompletion.range = new vscode.Range(
+              startOfAtImport,
+              position
+            );
+            // might not be a function, but we can't tell
+            snippetCompletion.kind = vscode.CompletionItemKind.Function;
+            snippetCompletion.command = {
+              title: "Import Val",
+              command: "valtown.importVal",
+              arguments: [
+                completionVal,
+                // this is the range of the replaced text
+                new vscode.Range(
+                  startOfAtImport,
+                  startOfAtImport.translate(insertText.length)
+                ),
+              ],
+            };
+            return snippetCompletion;
+          });
+        },
+      }
+      // "@", "/"
+    )
+  );
+}

src/extension.ts

@@ -13,6 +13,7 @@ import { registerCommands } from "./commands";
 import { registerUriHandler } from "./uri";
 import * as sqliteDoc from "./sqlite/document";
 import * as definition from "./definition";
+import { registerCompletions } from "./completions";
 
 export async function activate(context: vscode.ExtensionContext) {
   // set output channel
@@ -78,6 +79,8 @@ export async function activate(context: vscode.ExtensionContext) {
   definition.register(client, context);
   outputChannel.appendLine("Registering commands");
   registerCommands(context, client);
+  outputChannel.appendLine("Registering completions");
+  registerCompletions(context, client);
   outputChannel.appendLine("ValTown extension activated");
 }