Extract `Morph` class, then use it in `FrameRenderer` #1029

seanpdoyle · 2023-10-09T15:23:38Z

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:

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.

This commit introduces the concept of page refresh. A page refresh happens when Turbo renders the current page again. We will offer two new options to control behavior when a page refresh happens: - The method used to update the page: with a new option to use morphing (Turbo currently replaces the body). - The scroll strategy: with a new option to keep it (Turbo currently resets scroll to the top-left). The combination of morphing and scroll-keeping results in smoother updates that keep the screen state. For example, this will keep both horizontal and vertical scroll, the focus, the text selection, CSS transition states, etc. We will also introduce a new turbo stream action that, when broadcasted, will request a page refresh. This will offer a simplified alternative to fine-grained broadcasted turbo-stream actions. Co-Authored-By: Jorge Manrubia <[email protected]>

seanpdoyle · 2023-10-09T23:27:32Z

src/tests/functional/rendering_tests.js

+  assert.equal(await input.count(), 1)
+  assert.equal(await frame.count("#permanent-form-in-frame"), 1)
+  assert.equal(await frame.count("#permanent-descendant-input-in-frame"), 1)


Something is off, I can't figure out a way to pass these. When the morph occurs, it duplicates the [data-turbo-permanent] elements.

src/core/frames/frame_renderer.js

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

seanpdoyle · 2023-10-12T00:23:19Z

src/core/morph.js

+
+  render(morphStyle = "outerHTML") {
+    window.Idiomorph.morph(this.currentElement, this.newElement, {
+      ignoreActiveValue: true,


The ignoreActiveValue: option was introduced in 0.0.9, and feels important enough to include as a default for the sake of focus preservation and to minimize disruptions to the element with focus.

Progressing this branch forward hinges on bigskysoftware/idiomorph#12 being merged. Without it, the package needs to depend on window.Idiomorph.

afcapel and others added 3 commits October 4, 2023 22:37

Introduce refresh attribute for frame element

3f45254

Use dispatch util function in MorphRenderer

a653d12

seanpdoyle changed the base branch from main to morph-refreshes October 9, 2023 15:25

[IGNORE]: extracted in hotwired#1028

2fb0190

seanpdoyle force-pushed the morph-refreshes-morph-renderer branch from 642c3ef to fae93de Compare October 9, 2023 15:28

seanpdoyle mentioned this pull request Oct 9, 2023

Page refreshes #1019

Merged

2 tasks

seanpdoyle force-pushed the morph-refreshes-morph-renderer branch from fae93de to 5196762 Compare October 9, 2023 22:46

seanpdoyle commented Oct 9, 2023

View reviewed changes

palkan reviewed Oct 10, 2023

View reviewed changes

src/core/frames/frame_renderer.js Outdated Show resolved Hide resolved

seanpdoyle force-pushed the morph-refreshes-morph-renderer branch from 5196762 to 2fd95cf Compare October 12, 2023 00:20

seanpdoyle commented Oct 12, 2023

View reviewed changes

jorgemanrubia force-pushed the morph-refreshes branch 5 times, most recently from 9125652 to 00b3015 Compare October 27, 2023 07:13

jorgemanrubia force-pushed the morph-refreshes branch from c75d4bc to 25b9db0 Compare October 30, 2023 13:42

jorgemanrubia force-pushed the morph-refreshes branch from 25b9db0 to 9944490 Compare November 6, 2023 20:58

afcapel deleted the branch hotwired:morph-refreshes November 14, 2023 15:06

afcapel closed this Nov 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extract `Morph` class, then use it in `FrameRenderer` #1029

Extract `Morph` class, then use it in `FrameRenderer` #1029

seanpdoyle commented Oct 9, 2023

seanpdoyle Oct 9, 2023

seanpdoyle Oct 12, 2023

Extract Morph class, then use it in FrameRenderer #1029

Extract Morph class, then use it in FrameRenderer #1029

Conversation

seanpdoyle commented Oct 9, 2023

The potential for <turbo-stream action="morph">

seanpdoyle Oct 9, 2023

Choose a reason for hiding this comment

seanpdoyle Oct 12, 2023

Choose a reason for hiding this comment

Extract `Morph` class, then use it in `FrameRenderer` #1029

Extract `Morph` class, then use it in `FrameRenderer` #1029

The potential for `<turbo-stream action="morph">`