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
もうちょっといろいろ試してみて遊んでみようと思います。