jsdom+WebRxでサーバーサイドレンダリングする

3895 ワード
server-side-rendering jsdom RxJS WebRx isomorphic RxJS テキストリンク

jsdom+WebRxでサーバーサイドレンダリングする

jsdom + React.js でサーバーサイドレンダリングして isomorphic っていうネタがあるらしく、それなら WebRx でもできればうれしいなと思って試してみました。

インストールする

$ npm i jsdom rx webrx coffee-script --save

個人的な好みでCoffeeScriptです。普通に使うならES6/ES2015もしくはTypeScriptをおすすめします。

疑似ブラウザ環境を作る

jsdom = require("jsdom").jsdom
global.document = jsdom("""<html><head></head><body><div data-bind="text: main"></div></body></html>""")
global.window = global.document.defaultView
global.navigator = global.window.navigator

まずjsdomをrequireしてきます。で、次に初期HTML文とともにjsdomのオブジェクトを作成してglobalのdocumentに入れます。global.documentというのはCoffeeScriptの書き方なのでES6とかだとvarをつけないdocument = jsdom(...)でいいです。同様にglobalのwindow navigatorも初期化します。

Rx, WebRx を読み込む

Rxは簡単にrequireできるんですが、webrxはdist下のjsを直接指定しないとrequireできません。

global.Rx = require 'rx'
wx = require './node_modules/webrx/dist/web.rx.js'

あとは普通にWebRxで書く

class MainModel
  constructor: ->
    @main = wx.property 'hello world, WebRx'

mainModel = new MainModel()
wx.applyBindings mainModel

最後はinnerHTMLを取り出す

console.log global.document.documentElement.innerHTML

もうちょっといろいろ試してみて遊んでみようと思います。