refactor, clickable hover list, replace command. and new gif

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to the "crates" extension will be documented in this file.
 
+### 0.0.9 
+* Version list (hover) is clickable now. Easier to navigate between versions.
+
 ### 0.0.8
 * Better activation event. Listens for "Cargo.toml" as a rool level file.
 * Refreshes after each save.

package.json

@@ -2,7 +2,7 @@
   "name": "crates",
   "displayName": "crates",
   "description": "Aims to help developers to manage dependencies while using Cargo.toml. It is only helpful if you are using dependencies from crates.io.",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "publisher": "serayuzgur",
   "engines": {
     "vscode": "^1.23.0"
@@ -32,6 +32,13 @@
     "onLanguage:toml",
     "workspaceContains:Cargo.toml"
   ],
+  "contributes": {
+    "commands": [{
+        "command": "crates.replaceVersion",
+        "title": "crates: Replace Version"
+    }]
+},
+
   "main": "./out/extension",
   "scripts": {
     "build":"npm run compile",

src/extension.ts

@@ -2,17 +2,25 @@
 /**
  * This extension helps to manage crate dependency versions.
  */
-import { window, workspace, ExtensionContext } from "vscode";
+import {
+  window,
+  workspace,
+  ExtensionContext,
+} from "vscode";
 import tomlListener from "./toml/listener";
+import TomlCommands from "./toml/commands";
 
 export function activate(context: ExtensionContext) {
   // Add active text editor listener and run once on start.
   context.subscriptions.push(window.onDidChangeActiveTextEditor(tomlListener));
   workspace.onDidSaveTextDocument(() => {
     tomlListener(window.activeTextEditor);
   });
-
   tomlListener(window.activeTextEditor);
+
+  // Add commands
+  context.subscriptions.push(TomlCommands.replaceVersion);
+
 }
 
 export function deactivate() {}

src/toml/commands.ts

@@ -0,0 +1,25 @@
+/**
+ * Commands related to TOML files.
+ */
+import { commands, TextEditor, TextEditorEdit, Range } from "vscode";
+
+export const replaceVersion = commands.registerTextEditorCommand(
+  "crates.replaceVersion",
+  (editor: TextEditor, edit: TextEditorEdit, info) => {
+    if (editor && info) {
+      const { fileName } = editor.document;
+      if (fileName.toLocaleLowerCase().endsWith("cargo.toml")) {
+        console.log("Replacing", info.item);
+        edit.replace(
+          new Range(
+            editor.document.positionAt(info.start),
+            editor.document.positionAt(info.end),
+          ),
+          info.item,
+        );
+      }
+    }
+  },
+);
+
+export default { replaceVersion };

src/toml/decorations.ts

@@ -1,7 +1,7 @@
 /**
  * Helps to manage decorations for the TOML files.
  */
-import { DecorationOptions, Range, TextEditor } from "vscode";
+import { DecorationOptions, Range, TextEditor, MarkdownString } from "vscode";
 import { versions } from "../api";
 import { statusBarItem } from "../ui/indicators";
 
@@ -27,12 +27,25 @@ function decoration(
   const end = regex.lastIndex;
   const start = regex.lastIndex - match.length;
   const hasLatest = versions[0] === version;
+  const versionLinks = versions.map(
+    item =>
+      `[${item}](command:crates.replaceVersion?${JSON.stringify({
+        item: `${crate} = "${item}"`,
+        start,
+        end,
+      })})`,
+  );
+  const hoverMessage = new MarkdownString(
+    `**Available Versions** \t \n * ${versionLinks.join("\n * ")}`,
+  );
+  hoverMessage.isTrusted = true;
+
   return {
     range: new Range(
       editor.document.positionAt(start),
       editor.document.positionAt(end),
     ),
-    hoverMessage: `**Available Versions** \t \n * ${versions.join("\n * ")}`,
+    hoverMessage,
     renderOptions: {
       after: {
         contentText: hasLatest ? "👍" : `Latest: ${versions[0]}`,

src/ui/decorations/latestVersion.ts → src/ui/decorations.ts

@@ -1,13 +1,18 @@
 /**
- * Decoration to show latest vesion at the right side of the
- * depencency.
+ * Holds common decorations.
  */
 import { window } from "vscode";
 
-export default (text: string) =>
+/**
+ * Decoration to show latest vesion at the right side of the
+ * depencency.
+ */
+export const latestVersion = (text: string) =>
   window.createTextEditorDecorationType({
     after: {
       contentText: text,
       margin: "2em",
-    }
+    },
   });
+
+export default { latestVersion };