search

ssorallen / turbo-react

A JavaScript library that transitions between static HTML pages on navigation; no app server required.
https://turbo-react.herokuapp.com/
Apache License 2.0
274 stars 16 forks source link

Edge Turbolinks disables turbo-react #24

Closed sicks closed 7 years ago

sicks commented 8 years ago

The master branch of turbolinks includes internal stylesheets which break the HTML to JSX parser, effectively disabling turbo-react. see reactjs/react-magic#35

glennfu commented 8 years ago

I just updated to the latest 0.8.3 release and I think this is closer. However upon inspection I believe Turbolinks is using Element.prototype.replaceChild to make changes, which is a different function from what turbo-react replaces: document.documentElement.replaceChild. This might be just in my case of it performing a "changes" operation instead of loading the full page.

glennfu commented 8 years ago

I tried updating turbo-react to also overwrite Element.prototype.replaceChild and then trigger with Turbolinks.replace(html, { change: ['target'] }) but got this error:

"Warning: React attempted to reuse markup..."

However, it seems it just removes my element #target from the dom entirely. I'm not savvy enough with React to guess a solution for this.

For any Turbolinks action other than 'change' it looks like Turbolinks now calls document.body = body. I think the monkeypatch from here on out isn't a viable option. Bummer!

ssorallen commented 8 years ago

Thanks for looking into edge Turbolinks, @glennfu. I am going to figure out how to build on top of it.

glennfu commented 8 years ago

@ssorallen On a related note, check this conversation: https://github.com/rails/turbolinks/issues/628

Turbolinks 5 will be coming by the end of the year along with Rails 5, and they're debating whether or not to even bother continuing with Turbolinks 3. So with that in mind, by the time you (or I) figure out how to properly integrate with Turbolinks 3, Turbolinks 5 will be out! I get the sense that because it's a complete rewrite, the difference between 3 and 5 won't just be about updating the code, but about re-thinking for a new strategy of behavior.

It's still in very early development if you check out the current code here: https://github.com/basecamp/turbolinks. The way they describe the effort, I think it'll include much better hooks for interacting with it. This might give us what we need for dropping in React to do the rendering, vs trying to hack Turbolinks 3 into having those kinds of hooks. Since the dev is so early I'm not certain about that point, though.

ssorallen commented 7 years ago

This was fixed in react-magic#35 and is not an issue with the released Turbolinks v5.0.0.