The problem --- The rendering process during a page-wide navigation is opaque, and cannot be extended. Proposals have been made to use third-party rendering tools like [morphdom][], or other animation libraries. Outside of the HTML manipulation, Turbo is also responsible for loading script, transposing permanent elements, etc. How might these tools integrate with Turbo in a way that's compliant with permanent elements. The solution --- When publishing a `turbo:before-render` event, dispatch it with a `render()` function property in addition to the `resume()`. This way, consumer applications can override rendering: ```html import morphdom from "morphdom" addEventListener("turbo:before-render", ({ detail }) => { detail.render = (currentElement, newElement) => { morphdom(currentElement, newElement) } // or, more tersely detail.render = morphdom }) ``` Potentially Closes [hotwired#197][] Potentially Closes [hotwired#378][] Potentially Closes [hotwired#218][] [morphdom]: https://github.com/patrick-steele-idem/morphdom [hotwired#218]: hotwired#218 [hotwired#378]: hotwired#378 [hotwired#197]: hotwired#197

Commits

Commits on Jul 18, 2022

Renderer: Extract renderElement()

Extract ViewRenderOptions

Support custom rendering from turbo:before-render

Introduce turbo:before-frame-render event

[Flaky Tests]: Link Form Submission

Renderer: Extract `renderElement()`

Extract `ViewRenderOptions`

Support custom rendering from `turbo:before-render`

Introduce `turbo:before-frame-render` event