【Vue.js + isomorphic-git.js】コミット中のファイルを取得する

やりたいこと

Vue.jsでisomorphic-gitを利用したいと思います。そのための環境構築し、コミットの中のファイルを表示しようと思います。

やりたいこと
必要なもの
環境構築
コード修正。
- App.vue
実行
解説
作成したリポジトリ
参考

必要なもの

Node.js v14.5.0
npm v6.14.6

環境構築

初めに、Vue.jsを利用するための環境を作ります。そのために、@vue/cliをnpmでインストールします。

npm install -g @vue/cli

npxコマンドを利用してVue.jsのプロジェクトを作成します。お使いのパソコンで正しくvueのパスをが通っていればvue create vue-isomorphic-gitでも動作すると思います。しかし、私の環境ではなぜか通らなかったらので、npxコマンドを利用しています。

Please pick a presetと聞かれるので、今回はdefault (babel, eslint)を選択しました。

npx vue create vue-isomorphic-git

Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)

しばらく時間が経つとインストールが終わるのでプロジェクトの中に移動します。

cd vue-isomorphic-git

最後に、isomorphic-git.js関連のモジュールをプロジェクトにインストールします。これでインストール関連は終わりです。

npm install isomorphic-git @isomorphic-git/lightning-fs

インストール後のpackage.jsonの依存関係については以下の通りになっています。

"dependencies": {
  "@isomorphic-git/lightning-fs": "^4.3.0",
  "core-js": "^3.6.5",
  "isomorphic-git": "^1.7.3",
  "vue": "^2.6.11"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.4.0",
  "@vue/cli-plugin-eslint": "~4.4.0",
  "@vue/cli-service": "~4.4.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "vue-template-compiler": "^2.6.11"
},

※筆者はここでViteを利用しようと思いましたが、isomorphic-gitには、safe-bufferが利用されているらしくVite v1.0.0-beta.12での環境構築は叶いませんでした。

コード修正。

srcの中に、App.vueというファイルがあるので、こちらを修正していきます。

App.vue

以下のように修正しました。こちらのコードを実行するだけで、なんと指定リポジトリの1番最新のコミットを読み取りファイルの一覧を表示します。解説は後ほど。

<template>
  <div id="app">
    <ul>
      <li v-for="(file, i) in files" :key="i">
        {{ file.path }}
      </li>
    </ul>
  </div>
</template>

<script>
import LightningFS from '@isomorphic-git/lightning-fs'
import { clone, log, readTree } from 'isomorphic-git'
import http from "isomorphic-git/http/web"

export default {
  name: 'App',
  data() {
    return {
      files: []
    }
  },
  async mounted() {
    const fs = new LightningFS('my-app')

    await clone({
      fs,
      http,
      dir: '/tutorial',
      corsProxy: 'https://cors.isomorphic-git.org',
      url: 'https://github.com/isomorphic-git/isomorphic-git',
      singleBranch: true,
      depth: 1,
      onProgress: event => {
        console.log("phase: ", event.phase)
        if (event.total) {
          console.log("ProgressBar: ", event.loaded / event.total)
        } else {
          console.log("IndeterminateProgressBar: ", event.loaded)
        }
      }
    })
    console.log('done')

    const commits = await log({
      fs,
      dir: '/tutorial',
      depth: 1,
      ref: 'main'
    })
    console.log(commits)

    const commitObject = commits.pop()
    const oid = commitObject.commit.tree
    const treeObject = await readTree({ fs, dir: '/tutorial', oid })
    console.log(treeObject)

    this.files = treeObject.tree.filter(o => o.type === 'blob')
  }
}
</script>

実行

コードを書くことができたので、あとは実行するだけです。

npm run serve

Local: http://localhost:8080/と表示されるので、ブラウザを開いてアクセスします。ブラウザを開いたあとは、しばらく待ちます。

待っている間に、開発者ツールのApplication欄を見てみます。正しく動いている場合には、StorageのIndexedDBの欄にmy-appというDBが作成されているはずです。下図のようなイメージになります。

また、ApplicationのClear storageという欄をクリックして開いてみると、git clone中であるならば段々と利用している容量が増えていることを確認できるはずです。私の場合は、0Bから17.8MBまで増えていました。gitリポジトリまるごとがIndexedDBに保存されることになるので、それなりの容量になります。

git cloneが終わるとページにはファイルの一覧が表示されていると思います。これは、git cloneする対象のリポジトリとコミットの内容によって変わると思います。

解説

App.vueに書かれてあるコードの中からピックアップして解説しようと思います。

ファイルシステム

isomorphic-gitですが、これ単体で動くというわけではありません。ファイルシステムが必要になります。今回はブラウザで動く必要があるため、LightningFSを選択しましたが他にもBrowserFSのようなものでも大丈夫です。

const fs = new LightningFS('my-app')

リバースプロキシ

isomorphic-gitには、リバースプロキシが必要になります。なんと公式でもリバースプロキシがサポートされているので、今回はそれを利用しました。もちろん自前で用意することもできます。その場合には、corsProxyプロパティにリバプロのurlを設定する必要があります。

corsProxy: 'https://cors.isomorphic-git.org',

プログレスバー

ブラウザ上で行われる git cloneはローカル環境に比べてとても時間がかかります。本当にgit cloneが進んでいるのか不安になるかと思います。そんな人のためにプログレスバーが一応はサポートされています。これを使うことで進捗度をUIで表示できるようになります。ただし、git cloneは様々な要素を組み合わせているため正しく進捗度を表すことができません。そのため、event.phaseを利用して今はどの段階のことをしているのかを示してあげるなどの工夫が必要になるかもしれません。

onProgress

作成したリポジトリ

tomatoaiu/vue-isomorphic-git

参考

Vue.js, 入手先 https://jp.vuejs.org/
isomorphic-git/isomorphic-git: A pure JavaScript implementation of git for node and browsers!, 入手先 https://github.com/isomorphic-git/isomorphic-git