Update Turbolinks to 5.0.0.beta4 and update turbo-react for those changes

[glennfu]

Changed the function names that needed changing, otherwise the strategy remains the same. Key differences are the access to cache size: Turbolinks.controller.cache.size = 0; and hooking into the SnapshotRenderer.assignNewBody function. I didn't actually test whether or not the cache size thing is still necessary, or working at all, but the demo provided in turbo-react works as expected!

[sirscriptalot]

I found this project this weekend and was absolutely amazed by the possibilities. I read through a lot of the old comments and noticed one of the issues was with caching. My understanding was the cache was broken by the data-reactid's added to the dom by React, so I started to explore other virtual dom implementations and after a failed attempt with snabbdom, I was finally able clone turbo-react using virtual-dom instead of React.

I think the cache issues are fixed using virtual-dom, and another nice benefit might come from vdom-virtualizer as I believe the rendering process cuts out a step of having to be converted to JSX as vdom-virtualize converts DOM nodes into some sort of object literal tokens.

Anyway, I have no idea how to do any of this open source stuff but just wanted to share what I did if you all would ever find it useful: https://github.com/sirscriptalot/turbo-react/tree/turbo-dom

[ssorallen]

Awesome, thanks for the pull request. I want to test this out and then get it merged.

[glennfu]

NP!

@sirscriptalot - I checked out the project's turbo-dom branch and got the server running, but I don't actually see Turbolinks in action. However, I love the idea and would love to see it hooked up to a demo page using Turbolinks!

[sirscriptalot]

@glennfu Thanks so much for taking a look! Sorry it isn't working, that's a drag. I took a quick look and noticed it was broken for me on Firefox/Opera as well. This was due to me having the CSS screwed up and have since updated that branch. Opera is still a no-go however so maybe this wasn't the real problem.

[glennfu]

@sirscriptalot I got inspired and started to play with what you had provided some more. Unfortunately I started to notice some oddities when going forward/back in history that changed the normal behavior. I tried cutting the code down to a simpler form I could call on a node and do some tests like so:

var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var parser = require('vdom-parser');
var select = require("vtree-select");

Turbolinks.SnapshotRenderer.prototype.assignNewBody = function() {
  document.body = this.newBody
  tree = parser(this.newBody);
}

window.fastReplace = function(selector, html) {
  var thisTree = select(selector)(tree)[0];
  var newTree = parser(html);
  var patches = diff(thisTree, newTree);
  patch($(selector).get(0), patches);
}

This seems to "work", but also if I call something like window.fastReplace("body .main", $("body .main").get(0).outerHTML) I find that it replaces the whole node, even though there's not actually any changes. Also, if I try to delete some children of "body .main" and then use fastReplace to set the HTML back to how it was before, it doesn't re-add the missing elements. I don't know what to make of that. Is there something about virtual-dom that maybe you are familiar with that you could suggest here?