Add Vyper language support (#30)

* Add Vyper extension

* Stop assuming file extension is .sol

Author: hasparus

.eslintignore

@@ -1,2 +1,3 @@
 *.md
 *.js
+**/node_modules

packages/ethereum-viewer/src/explorer/fetchFiles.ts

@@ -4,6 +4,7 @@ import { assert, StrictOmit } from "ts-essentials";
 import { fetch as _fetch } from "../util/fetch";
 import { prettyStringify } from "../util/stringify";
 import * as types from "./api-types";
+import { fileExtension } from "./fileExtension";
 import { ApiName, explorerApiKeys, explorerApiUrls } from "./networks";
 
 interface FetchFilesOptions {
@@ -80,7 +81,7 @@ export async function fetchFiles(
 
     files = prefixFiles(files, info.ContractName);
   } else {
-    files[info.ContractName + ".sol"] = sourceCode;
+    files[info.ContractName + fileExtension(info)] = sourceCode;
   }
 
   if (

packages/ethereum-viewer/src/explorer/fileExtension.ts

@@ -0,0 +1,4 @@
+export function fileExtension(info: { CompilerVersion: string }) {
+  if (info.CompilerVersion.startsWith("vyper:")) return ".vy";
+  return ".sol";
+}

packages/ethereum-viewer/src/extension.ts

@@ -1,5 +1,4 @@
 import * as vscode from "vscode";
-import { addresses } from "./addresses";
 
 import { registerContributedCommands } from "./contributedCommands";
 import { executeHostCommand } from "./executeHostCommand";

packages/ethereum-viewer/src/openContractSource.ts

@@ -8,6 +8,7 @@ import {
 } from "vscode";
 
 import * as explorer from "./explorer";
+import { fileExtension } from "./explorer/fileExtension";
 import {
   FileSystem,
   MemFSTextSearchProvider,
@@ -86,15 +87,17 @@ function getMainContractFile(
   files: [string, ...unknown[]][],
   info: explorer.FetchFilesResult["info"]
 ): string {
+  const ext = fileExtension(info);
+
   let fileToShow =
     info.implementation &&
     files.find(([path]) =>
-      path.endsWith(`/${info.implementation!.ContractName}.sol`)
+      path.endsWith(`/${info.implementation!.ContractName}${ext}`)
     );
 
   if (!fileToShow)
     fileToShow = files.find(([path]) =>
-      path.endsWith(`/${info.ContractName}.sol`)
+      path.endsWith(`/${info.ContractName}${ext}`)
     );
 
   if (!fileToShow) fileToShow = files.sort(byPathLength)[0];

packages/vscode-host/scripts/copyExtensions.js

@@ -12,23 +12,26 @@ const {
   log,
 } = require("./util");
 
+const { additionalExtensions } = require("./prepareAdditionalExtensions");
+
 function copyExtensions() {
   log.info("Copying extensions to ./dist directory...");
 
   chdir(__dirname, "../vscode");
 
   const extensions = [
-    // our additional built-in extensions
+    // main built-in extension, responsible for fetching and displaying contracts
     {
       extensionPath: "ethereum-viewer",
       packageJSON: require("../../ethereum-viewer/package.json"),
       packageNLS: null,
     },
-    {
-      extensionPath: "solidity-lang",
-      packageJSON: require("../additional-extensions/solidity-lang/package.json"),
+    // additional built-in extensions, Solidity and Vyper language support
+    ...additionalExtensions.map((ext) => ({
+      extensionPath: ext.name,
+      packageJSON: ext.getPackageJSON(),
       packageNLS: null,
-    },
+    })),
   ];
 
   // copy our additional built-in extensions

packages/vscode-host/scripts/prepareAdditionalExtensions.js

@@ -3,20 +3,31 @@
 const { chdir, execSync, existsSync, log, rimraf } = require("./util");
 const { argv } = require("./argv");
 
+const additionalExtensions = [
+  {
+    name: "solidity-lang",
+    repo: "https://github.com/hasparus/vscode-solidity-extenstion.git",
+    branchOrTag: "v1.3.0",
+    getPackageJSON: () =>
+      // @ts-ignore
+      require("../additional-extensions/solidity-lang/package.json"),
+  },
+  {
+    name: "vscode-vyper-syntax",
+    repo: "https://github.com/dethcrypto/vscode-vyper.git",
+    branchOrTag: "minimal-extension",
+    getPackageJSON: () =>
+      // @ts-ignore
+      require("../additional-extensions/vscode-vyper-syntax/package.json"),
+  },
+];
+
 function prepareAdditionalExtensions() {
   log.info("Cloning additional built-in extensions...");
 
   chdir(__dirname, "../additional-extensions");
 
-  const extensions = [
-    {
-      name: "solidity-lang",
-      repo: "https://github.com/hasparus/vscode-solidity-extenstion.git",
-      tag: "v1.3.0",
-    },
-  ];
-
-  for (const ext of extensions) {
+  for (const ext of additionalExtensions) {
     if (argv.force) rimraf(`./${ext.name}`);
 
     if (existsSync(ext.name)) {
@@ -25,17 +36,27 @@ function prepareAdditionalExtensions() {
       );
     } else {
       execSync(
-        `git clone --depth 1 --branch ${ext.tag} ${ext.repo} ${ext.name}`,
+        `git clone --depth 1 --branch ${ext.branchOrTag} ${ext.repo} ${ext.name}`,
         { stdio: "inherit" }
       );
-      execSync(["yarn --production", argv.verbose && "--verbose"], {
-        stdio: "inherit",
-        cwd: `./${ext.name}`,
-      });
+
+      /** @type {import("child_process").ExecSyncOptions} */
+      const options = { stdio: "inherit", cwd: `./${ext.name}` };
+
+      const packageJSON = ext.getPackageJSON();
+      if ("package-web" in packageJSON.scripts) {
+        log.info(`Installing dependencies for ${ext.name}...`);
+        execSync(["yarn", argv.verbose && "--verbose"], options);
+        log.info(`Compiling ${ext.name}...`);
+        execSync(["yarn package-web", argv.verbose && "--verbose"], options);
+      } else {
+        log.info(`Installing production dependencies for ${ext.name}...`);
+        execSync(["yarn --production", argv.verbose && "--verbose"], options);
+      }
     }
   }
 }
 
-module.exports = { prepareAdditionalExtensions };
+module.exports = { prepareAdditionalExtensions, additionalExtensions };
 
 if (require.main === module) prepareAdditionalExtensions();

packages/vscode-host/src/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts

@@ -1076,6 +1076,7 @@ export class GettingStartedPage extends EditorPane {
           return `src="${src}"`;
         }
 
+        console.log(">> joinPath", { base, src })
         const path = joinPath(base, src);
         const transformed = asWebviewUri(path).toString();
         return `src="${transformed}"`;

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   - "packages/*"
   - "!packages/vscode-host"
+  - "!packages/vscode-host/**"