bouzuya/virtual-dom-ssr に pillarjs/path-to-regexp を入れてみたことを書く。

path-to-regexp は express like な path を regexp に変換する npm package 。これは 2016-02-01 に書いた。 virtual-dom-ssr は virtual-dom で server-side rendering をためしている application 。これは 2016-02-04 に書いた。 今回はその path-to-regexp を virtual-dom-ssr に組み込もうとした。ただ、まだ server-side にしか導入できていない。

目的は server-side と client-side で同じ routing を使うためだ。express の routing をそのまま使ってしまうと client-side でその routing を使えなくなり困る。共有して使えるように path-to-regexp で自作しようというねらいだ。

commit は https://github.com/bouzuya/virtual-dom-ssr/commit/4cca209b4383bd6d61f1faa3852e553eae96a176 がそうだ。

このあとの commit で随分修正している。特に実装として面白いと感じるのは static routing を app の routing より前に持ってくる点だ。

https://github.com/bouzuya/virtual-dom-ssr/commit/8ce248136c2f8c39c9e357dde9493b53e34dd775

// ...
export default function main() {
  const app = express();
  app.use(express.static(__dirname + '/../dist/'));
  app.use((req: any, res: any) => {
    model(req.path)
      .then(state => {
        const vtree = view(state, true);
        const html = renderToHTML(vtree);
        res.send(html);
      }, (error: Error) => {
        res.send(error.message);
      });
  });
  app.listen(3000);
}

なぜか static を後ろに持ってくるべきだと思い込んでいた。静的な file として存在しないものを routing すべきなのでこの形で問題ない。最後の express middleware で 404 を含めて routing する。