Nuxtが監視していないファイルの更新をトリガーに再レンダリングしたい

Nuxtでプレゼンツールが作れないもんかと試してみたときにたどり着いた副産物。

作ったのはこれ。（数ヶ月前に作ってもう飽きてる

github.com

スクショ

f:id:nakajmg:20180925001859p:plain

TL;DR

Nuxtをexpressのmiddlewareで動かす
コンテンツの取得はexpressでAPI
ファイルの監視はchokidar
クライアントへの通知にServer Sent Events

プレゼンツールの概要

Markdownファイルでスライドが作れる
generate でSSRしたやつが静的HTMLとして吐き出せる
pdfで保存できる

もろもろ

Nuxtはexpressのmiddlewareとして動かす
スライドは --- でページ区切り
Markdownのパースとかはexpress側でやる
パースした内容はAPIで取得
/talks/awesometalk/2 みたいな感じでページごとに取得

Markdownが更新されたら再レンダリングしたい

本題。Markdownの更新をトリガーにAPIから再fetchして画面を更新したい。

使ったのはServer Sent Events (SSE)

developer.mozilla.org

その辺りのソースはこれ

https://github.com/nakajmg/vresentation/blob/master/scripts/devServer.js

expressでSSE用のエンドポイント作る
chokidarでMarkdown ディレクトリを監視
クライアントからEventSourceを作成。通知を受け取ったら再fetch

https://github.com/nakajmg/vresentation/blob/master/store/actions.js#L23-L34

EventSourceはVuexのactionsで作成するようにした。

  async [types.WATCH_MARKDOWN]({ commit, state }) {
    if (!es) {
      es = new EventSource('/stream')
      es.addEventListener('updated', async ({ data }) => {
        const { slug } = JSON.parse(data)
        if (slug !== state.slug) return
        const filePath = baseURL(`/${state.slug}/${state.page}`)
        const response = await request(filePath)
        return commit(types.SET_RESPONSE, response)
      })
    }
  },

これでNuxtの監視してないファイルの更新をトリガーにして再レンダリング成功

Nuxt便利

VuePressみたいなツール、Nuxt使えばわりと低コストで作れそうだなという感触。

SSR環境を自前でつくるの、思ってるより数倍はめんどくさいから、Nuxt使って楽していこう。

じまろぐ

めめ