Turbo 8 morphing on Turbo.visit()

1

I see that morphing is only possible when we are refreshing the page. There are cases when it would be super useful to have morphing capabilities when URL changes (e.g. search forms).

With morphing it is also easy to skip morphing for specific HTML objects (e.g. on forms with complex filters e.g. colorpicker, datepicker, html dropdowns etc).

I am using simple script to achieve this and I wonder why is something like this not part of Turbo 8 core? Morphing could be executed only when e.g. <meta name="turbo-visit-method" content="morph"> exists.

PageRenderer.prototype.assignNewBody = function () {
  if (document.body) {
    morphdom(document.body, this.newElement, {
      onBeforeElUpdated: (fromEl, toEl) => {
        if (fromEl.dataset.morphSkip) {
          return false;
        }

        if (fromEl.isEqualNode(toEl)) {
          return false;
        }

        return true;
      },
    });
  }
};
1 Like
2

I was also quite surprised that there’s no declarative way to enable morphing when the URL changes. I’m making a filtered/paginated list where changing the filters changes the URL and it would be super neat to be able to maintain DOM state across visits

3

@kuba-orlik In our case we were able to resolve all issues with data-turbo-permanent attribute. Elements which should not be reloaded should have this tag and that is it.

1 Like