Merge pull request #88 from pomber/vscode-ext

VS Code extension

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/*/site

cli/git.js

@@ -4,7 +4,7 @@ async function getCommits(path) {
   const format = `{"hash":"%h","author":{"login":"%aN"},"date":"%ad"},`;
   const { stdout } = await execa("git", [
     "log",
-    "--follow",
+    // "--follow",
     "--reverse",
     `--pretty=format:${format}`,
     "--date=iso",
@@ -15,7 +15,7 @@ async function getCommits(path) {
 
   const messagesOutput = await execa("git", [
     "log",
-    "--follow",
+    // "--follow",
     "--reverse",
     `--pretty=format:%s`,
     "--",

cli/server.js

@@ -27,9 +27,9 @@ module.exports = async function runServer(path, commitsPromise) {
       Promise.all([indexPromise, commitsPromise]).then(([index, commits]) => {
         const newIndex = index.replace(
           "<script>window._CLI=null</script>",
-          `<script>window._CLI={commits:${JSON.stringify(
+          `<script>/*<!--*/window._CLI={commits:${JSON.stringify(
             commits
-          )},path:'${path}'}</script>`
+          )},path:'${path}'}/*-->*/</script>`
         );
         var headers = { "Content-Type": "text/html" };
         response.writeHead(200, headers);

src/landing.js

@@ -23,7 +23,7 @@ export default function Landing() {
         <div>
           Quickly browse the history of any GitHub file (GitLab and Bitbucket{" "}
           <a href="https://github.com/pomber/git-history/issues/14">
-            comming soon
+            coming soon
           </a>
           ):
           <ol>

vscode-ext/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+site

vscode-ext/.vscode/launch.json

@@ -0,0 +1,26 @@
+// A launch configuration that launches the extension inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionTestsPath=${workspaceFolder}/test"
+      ]
+    }
+  ]
+}

vscode-ext/extension.js

@@ -0,0 +1,89 @@
+const vscode = require("vscode");
+const path = require("path");
+const fs = require("fs");
+const getCommits = require("./git");
+
+// this method is called when your extension is activated
+// your extension is activated the very first time the command is executed
+
+/**
+ * @param {vscode.ExtensionContext} context
+ */
+function activate(context) {
+  // The command has been defined in the package.json file
+  // Now provide the implementation of the command with  registerCommand
+  // The commandId parameter must match the command field in package.json
+  let disposable = vscode.commands.registerCommand(
+    "extension.git-file-history",
+    function() {
+      // The code you place here will be executed every time your command is executed
+
+      const currentPath = getCurrentPath();
+      if (!currentPath) {
+        vscode.window.showInformationMessage("No active file");
+        return;
+      }
+
+      const panel = vscode.window.createWebviewPanel(
+        "gfh",
+        `${path.basename(currentPath)} (Git History)`,
+        vscode.ViewColumn.One,
+        {
+          enableScripts: true,
+          retainContextWhenHidden: true,
+          localResourceRoots: [
+            vscode.Uri.file(path.join(context.extensionPath, "site"))
+          ]
+        }
+      );
+
+      const indexFile = vscode.Uri.file(
+        path.join(context.extensionPath, "site", "index.html")
+      );
+
+      const index = fs.readFileSync(indexFile.path, "utf-8");
+
+      getCommits(currentPath)
+        .then(commits => {
+          const newIndex = index
+            .replace(
+              "<script>window._CLI=null</script>",
+              `<script>/*<!--*/window._CLI={commits:${JSON.stringify(
+                commits
+              )},path:'${currentPath}'}/*-->*/</script>`
+            )
+            .replace(
+              "<head>",
+              `<head><base href="${vscode.Uri.file(
+                path.join(context.extensionPath, "site")
+              ).with({
+                scheme: "vscode-resource"
+              })}/"/>`
+            );
+
+          panel.webview.html = newIndex;
+        })
+        .catch(console.error);
+    }
+  );
+
+  context.subscriptions.push(disposable);
+}
+
+function getCurrentPath() {
+  return (
+    vscode.window.activeTextEditor &&
+    vscode.window.activeTextEditor.document &&
+    vscode.window.activeTextEditor.document.fileName
+  );
+}
+
+exports.activate = activate;
+
+// this method is called when your extension is deactivated
+function deactivate() {}
+
+module.exports = {
+  activate,
+  deactivate
+};

vscode-ext/git.js

@@ -0,0 +1,64 @@
+const execa = require("execa");
+const pather = require("path");
+
+async function getCommits(path) {
+  const format = `{"hash":"%h","author":{"login":"%aN"},"date":"%ad"},`;
+  const { stdout } = await execa(
+    "git",
+    [
+      "log",
+      // "--follow",
+      "--reverse",
+      `--pretty=format:${format}`,
+      "--date=iso",
+      "--",
+      pather.basename(path)
+    ],
+    { cwd: pather.dirname(path) }
+  );
+  const json = `[${stdout.slice(0, -1)}]`;
+
+  const messagesOutput = await execa(
+    "git",
+    [
+      "log",
+      // "--follow",
+      "--reverse",
+      `--pretty=format:%s`,
+      "--",
+      pather.basename(path)
+    ],
+    { cwd: pather.dirname(path) }
+  );
+
+  const messages = messagesOutput.stdout.replace('"', '\\"').split(/\r?\n/);
+
+  const result = JSON.parse(json)
+    .map((commit, i) => ({
+      ...commit,
+      date: new Date(commit.date),
+      message: messages[i]
+    }))
+    .slice(-20);
+
+  return result;
+}
+
+async function getContent(commit, path) {
+  const { stdout } = await execa(
+    "git",
+    ["show", `${commit.hash}:./${pather.basename(path)}`],
+    { cwd: pather.dirname(path) }
+  );
+  return stdout;
+}
+
+module.exports = async function(path) {
+  const commits = await getCommits(path);
+  await Promise.all(
+    commits.map(async commit => {
+      commit.content = await getContent(commit, path);
+    })
+  );
+  return commits;
+};

vscode-ext/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "checkJs": false /* Typecheck .js files. */,
+    "lib": ["es6"]
+  },
+  "exclude": ["node_modules"]
+}

vscode-ext/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "git-file-history",
+  "displayName": "Git File History",
+  "description": "Modern, fast and intuitive tool for browsing the history and files in any git repository",
+  "version": "0.0.1",
+  "repository": "pomber/git-history",
+  "publisher": "pomber",
+  "license": "MIT",
+  "keywords": [
+    "git",
+    "history",
+    "log",
+    "file",
+    "commit",
+    "show"
+  ],
+  "engines": {
+    "vscode": "^1.30.2"
+  },
+  "categories": [
+    "Other"
+  ],
+  "icon": "images/icon.png",
+  "galleryBanner": {
+    "color": "#011627",
+    "theme": "dark"
+  },
+  "activationEvents": [
+    "onCommand:extension.git-file-history"
+  ],
+  "main": "./extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "extension.git-file-history",
+        "title": "Git File History"
+      }
+    ]
+  },
+  "scripts": {
+    "build-site": "cd .. && cross-env PUBLIC_URL=. yarn build && rm -fr vscode-ext/site/ && cp -r build/ vscode-ext/site/",
+    "build": " yarn build-site",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "test": "node ./node_modules/vscode/bin/test",
+    "vscode:prepublish": "yarn build"
+  },
+  "devDependencies": {
+    "@types/mocha": "^2.2.42",
+    "@types/node": "^10.12.21",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.13.0",
+    "typescript": "^3.3.1",
+    "vscode": "^1.1.28"
+  },
+  "dependencies": {
+    "execa": "^1.0.0"
+  }
+}

vscode-ext/readme.md

@@ -0,0 +1,5 @@
+# Git File History
+
+Quickly browse the history of a file from any git repository
+
+![feature X](https://user-images.githubusercontent.com/1911623/52807635-d5043480-306a-11e9-9b03-351b7cda4936.gif)

vscode-ext/test/extension.test.js

@@ -0,0 +1,23 @@
+/* global suite, test */
+
+//
+// Note: This example test is leveraging the Mocha test framework.
+// Please refer to their documentation on https://mochajs.org/ for help.
+//
+
+// The module 'assert' provides assertion methods from node
+const assert = require("assert");
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+// const vscode = require('vscode');
+// const myExtension = require('../extension');
+
+// Defines a Mocha test suite to group tests of similar kind together
+suite("Extension Tests", function() {
+  // Defines a Mocha unit test
+  test("Something 1", function() {
+    assert.equal(-1, [1, 2, 3].indexOf(5));
+    assert.equal(-1, [1, 2, 3].indexOf(0));
+  });
+});

vscode-ext/test/index.js

@@ -0,0 +1,23 @@
+//
+// PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING
+//
+// This file is providing the test runner to use when running extension tests.
+// By default the test runner in use is Mocha based.
+//
+// You can provide your own test runner if you want to override it by exporting
+// a function run(testRoot: string, clb: (error:Error) => void) that the extension
+// host can call to run the tests. The test runner is expected to use console.log
+// to report the results back to the caller. When the tests are finished, return
+// a possible error to the callback or null if none.
+
+const testRunner = require("vscode/lib/testrunner");
+
+// You can directly control Mocha options by configuring the test runner below
+// See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options
+// for more info
+testRunner.configure({
+  ui: "tdd", // the TDD UI is being used in extension.test.js (suite, test, etc.)
+  useColors: true // colored output from test results
+});
+
+module.exports = testRunner;

vscode-ext/vsc-extension-quickstart.md

@@ -0,0 +1,33 @@
+## What's in the folder
+
+- This folder contains all of the files necessary for your extension.
+- `package.json` - this is the manifest file in which you declare your extension and command.
+  - The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+- `extension.js` - this is the main file where you will provide the implementation of your command.
+  - The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+  - We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+
+## Get up and running straight away
+
+- Press `F5` to open a new window with your extension loaded.
+- Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Git File History`.
+- Set breakpoints in your code inside `extension.js` to debug your extension.
+- Find output from your extension in the debug console.
+
+## Make changes
+
+- You can relaunch the extension from the debug toolbar after changing code in `extension.js`.
+- You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+## Explore the API
+
+- You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`.
+
+## Run tests
+
+- Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`.
+- Press `F5` to run the tests in a new window with your extension loaded.
+- See the output of the test result in the debug console.
+- Make changes to `test/extension.test.js` or create new test files inside the `test` folder.
+  - By convention, the test runner will only consider files matching the name pattern `**.test.js`.
+  - You can create folders inside the `test` folder to structure your tests any way you want.