forked from hotwired/turbo
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extract
Morph class, then use it in FrameRenderer
Declaring all `Idiomorph`-related logic in the `MorphRenderer` limits
its accessibility to other parts of the system. For example,
`<turbo-frame refresh="morph">` elements are unable to morph their
renders when driven by `<a>` navigations or `<form>` submissions.
This commit extracts the bulk of the morphing logic into a new `Morph`
class. The `Morph` encapsulates the call to `Idiomorph`, along with the
remote `<turbo-frame>` reloading and `[data-turbo-permanent]` checking.
With this extraction, the `MorphRenderer` is implemented in terms of
delegating to the static `Morph.render` method.
With that extraction in place, the `FrameRenderer.renderElement` method
can incorporate the `element.src && element.refresh === "morph"` check,
calling `FrameRenderer.morph` when true, then falling back to the
default `FrameRenderer.replace` when false.
For the sake of consistency, declare all `Renderer` subclasses'
`renderElement` methods in terms of `static replace` and `static morph`
methods to be explicit about which styles they support.
This commit includes test coverage for morphing `<turbo-frame
refresh="morph">` elements driven by typical navigation.
The potential for `<turbo-stream action="morph">`
---
With the `Morph.render` function existing separately from
`MorphRenderer`, there's the potential to add a new
`StreamAction.morph`.
The implementation would look something like:
```js
morph() {
this.targetElements.forEach((targetElement) => {
Morph.render(targetElement, this.templateContent)
})
}
```
I've omitted that from this commit because I'm not sure if that's an
interface we're interested in introducing, but I did want to highlight
the possibility here. It'd be an Idiomorph-powered version of the
[turbo-morph][] package.
[turbo-morph]: https://github.com/marcoroth/turbo-morph- Loading branch information
1 parent
2fb0190
commit fae93de
Showing
6 changed files
with
107 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,20 @@ | ||
| import Idiomorph from "idiomorph" | ||
| import { dispatch, nextAnimationFrame } from "../../util" | ||
| import { Renderer } from "../renderer" | ||
| import { Morph } from "../morph" | ||
|
|
||
| export class MorphRenderer extends Renderer { | ||
| static renderElement(currentElement, newElement) { | ||
| MorphRenderer.morph(currentElement, newElement) | ||
| } | ||
|
|
||
| static morph(currentElement, newElement) { | ||
| Morph.render(currentElement, newElement) | ||
| } | ||
|
|
||
| async render() { | ||
| if (this.willRender) await this.#morphBody() | ||
| if (this.willRender) this.renderElement(this.currentElement, this.newElement) | ||
| } | ||
|
|
||
| get renderMethod() { | ||
| return "morph" | ||
| } | ||
|
|
||
| // Private | ||
|
|
||
| async #morphBody() { | ||
| this.#morphElements(this.currentElement, this.newElement) | ||
| this.#reloadRemoteFrames() | ||
|
|
||
| dispatch("turbo:morph", { | ||
| detail: { | ||
| currentElement: this.currentElement, | ||
| newElement: this.newElement | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| #morphElements(currentElement, newElement, morphStyle = "outerHTML") { | ||
| Idiomorph.morph(currentElement, newElement, { | ||
| morphStyle: morphStyle, | ||
| callbacks: { | ||
| beforeNodeMorphed: this.#shouldMorphElement, | ||
| beforeNodeRemoved: this.#shouldRemoveElement, | ||
| afterNodeMorphed: this.#reloadStimulusControllers | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| #reloadRemoteFrames() { | ||
| this.#remoteFrames().forEach((frame) => { | ||
| if (this.#isFrameReloadedWithMorph(frame)) { | ||
| this.#renderFrameWithMorph(frame) | ||
| } | ||
| frame.reload() | ||
| }) | ||
| } | ||
|
|
||
| #renderFrameWithMorph(frame) { | ||
| frame.addEventListener("turbo:before-frame-render", (event) => { | ||
| event.detail.render = this.#morphFrameUpdate | ||
| }, { once: true }) | ||
| } | ||
|
|
||
| #morphFrameUpdate = (currentElement, newElement) => { | ||
| dispatch("turbo:before-frame-morph", { | ||
| target: currentElement, | ||
| detail: { currentElement, newElement } | ||
| }) | ||
| this.#morphElements(currentElement, newElement, "innerHTML") | ||
| } | ||
|
|
||
| #shouldRemoveElement = (node) => { | ||
| return this.#shouldMorphElement(node) | ||
| } | ||
|
|
||
| #shouldMorphElement = (node) => { | ||
| if (node instanceof HTMLElement) { | ||
| return !node.hasAttribute("data-turbo-permanent") | ||
| } else { | ||
| return true | ||
| } | ||
| } | ||
|
|
||
| #reloadStimulusControllers = async (node) => { | ||
| if (node instanceof HTMLElement && node.hasAttribute("data-controller")) { | ||
| const originalAttribute = node.getAttribute("data-controller") | ||
| node.removeAttribute("data-controller") | ||
| await nextAnimationFrame() | ||
| node.setAttribute("data-controller", originalAttribute) | ||
| } | ||
| } | ||
|
|
||
| #isFrameReloadedWithMorph(element) { | ||
| return element.src && element.refresh === "morph" | ||
| } | ||
|
|
||
| #remoteFrames() { | ||
| return document.querySelectorAll("turbo-frame[src]") | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import Idiomorph from "idiomorph" | ||
| import { nextAnimationFrame } from "../util" | ||
|
|
||
| export class Morph { | ||
| static render(currentElement, newElement, morphStyle) { | ||
| const morph = new this(currentElement, newElement) | ||
|
|
||
| morph.render(morphStyle) | ||
| } | ||
|
|
||
| constructor(currentElement, newElement) { | ||
| this.currentElement = currentElement | ||
| this.newElement = newElement | ||
| } | ||
|
|
||
| render(morphStyle = "outerHTML") { | ||
| Idiomorph.morph(this.currentElement, this.newElement, { | ||
| morphStyle: morphStyle, | ||
| callbacks: { | ||
| beforeNodeMorphed: shouldMorphElement, | ||
| beforeNodeRemoved: shouldRemoveElement, | ||
| afterNodeMorphed: reloadStimulusControllers | ||
| } | ||
| }) | ||
|
|
||
| this.#remoteFrames.forEach((frame) => frame.reload()) | ||
| } | ||
|
|
||
| get #remoteFrames() { | ||
| return this.currentElement.querySelectorAll("turbo-frame[src]") | ||
| } | ||
| } | ||
|
|
||
| function shouldRemoveElement(node) { | ||
| return shouldMorphElement(node) | ||
| } | ||
|
|
||
| function shouldMorphElement(node) { | ||
| if (node instanceof HTMLElement) { | ||
| return !node.hasAttribute("data-turbo-permanent") | ||
| } else { | ||
| return true | ||
| } | ||
| } | ||
|
|
||
| async function reloadStimulusControllers(node) { | ||
| if (node instanceof HTMLElement && node.hasAttribute("data-controller")) { | ||
| const originalAttribute = node.getAttribute("data-controller") | ||
| node.removeAttribute("data-controller") | ||
| await nextAnimationFrame() | ||
| node.setAttribute("data-controller", originalAttribute) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters