ブラウザで isomorphic-git を使って git repository を作成する #isomorphic-git

やりたいこと

Chromebook のために PWAで完結するエディタを作りたい。markdown の履歴管理程度でいい、ぐらいの気持ちで調べ始めた。

やる

browserfs を webpack でビルドするのは大変なので、次の js を書いてしまうか、このJSをローカルに落として普通に読み込む。

<script src="https://unpkg.com/browserfs"></script>

ここから先は webpack でビルドすることを前提。
browserfs は fs.~Sync を持たないので, pify を使って promise API 化する。
IndexedDB をバックエンドに fs モジュールを初期化して、isomorphic-git から使う

const git = require("isomorphic-git")
const pify = require("pify")

export function setupBrowserFS(): Promise<any> {
  return new Promise(resolve => {
    BrowserFS.configure({ fs: "IndexedDB", options: {} }, (err: any) => {
      if (err) {
        throw err
      }
      const fs = BrowserFS.BFSRequire("fs")
      resolve(window.fs)
    })
  })
}

const main = async () => {
  const fs = await setupBrowserFS(fs)
  const repo = { fs, dir: "/foo" }

  // directory 初期化
  await pify(fs.mkdir)(repo.dir)

  // directory README.md 作成
  await pify(fs.writeFile)("/foo/README.md", `# TEST`)

  // 確認
  const files = await pify(fs.readdir)("/foo")
  console.log("fs files", files) // => ["README.md"]

  // git init
  await git.init(repo)

  // git add README.md
  await git.add({ ...repo, filename: "README.md" })

  // git commit -m "Init"
  const sha = await git.commit({
    ...repo,
    author: {
      email: "miz404@gmail.com",
      name: "mizchi"
    },
    message: "Init"
  })
  console.log(sha)
}

main()

これで README.md を持つ git repository が作成できた。

GitHub に Push できるか

現状CORSの制限で不可能

Gogs: Supported in v0.11.43
Gitlab: PR Add CORS headers to git clone and git push #219
Bitbucket: PR TODO
Github: PR TODO

とりあえず次は gogs を調べる。self hosted な git service ということで、とりあえず localhost に立ててしまって、ローカルに push できそうな気がする。あとはなんか頑張ればいけそう。