hotwired / turbo

The speed of a single-page web application without having to write any JavaScript
https://turbo.hotwired.dev
MIT License
6.71k stars 426 forks source link

Define custom renderer #197

Closed tbo closed 2 years ago

tbo commented 3 years ago

Turbo drive doesn't offer any option to define custom rendering logic AFAIK. The current implementation simply replaces an old node with a new one. This can lead to unwanted side-effects (e.g. flickering content or losing dirty input states). I want to be able to define a renderer that uses a DOM diffing library like morphdom. The easiest way would have been to use inheritance to create a custom PageView with a custom Renderer, but the necessary classes are not being exported (probably for good reasons).

Is there any clean way to implement a DOM diffing renderer?

ghost commented 3 years ago

@tbo , awesome idea! This will allow transition to turbo frames in a lot of places where previously JS was required. Looks like someone should try to implement such behavior in separated PR, which will add ability to "register" custom renderer.

tbo commented 3 years ago

@kirin121 I could do that. But I'd like to know from a core developer upfront, if this has any chance to be merged and how they want it to be implemented.

sstephenson commented 3 years ago

Yes, this is something we'd like to support, but not in the form of custom renderer classes that plug into Turbo core. We'd rather support something like preventDefault() on turbo:before-render events with a mechanism to call back into Turbo when you've finished rendering.

tbo commented 3 years ago

@sstephenson I created a PR for it.