View Transition API: keeping parts untouched #717

florian-lefebvre · 2023-09-28T16:38:23Z

florian-lefebvre
Sep 28, 2023
Maintainer

Body

Summary

Add the ability to mark areas of the page to stay untouched between transitions.

Background & Motivation

This proposal comes after an interesting discussion with @martrapp over on Discord (see thread).

Usecase

A common pattern with web apps is to add frame-based widget, with tools like Intercom or Algomo. You add a script, it injects a frame, all good! Well, that's not that easy with the VT API.

Problem

1st "issue" is that the iframe is removed when a transition is triggered, which is the default behavior. Then, solution here is to create it programmatically (even though it's not super DX if you have to do that for every widget):

<script is:inline>
  const addAlgomoScript = () => {
    const algomoScript = document.createElement('script');
    algomoScript.src = 'https://app.algomo.com/algomo.min.js';
    algomoScript.setAttribute('widget', '<ID>');
    algomoScript.async = true;
    algomoScript.defer = true;

    document.head.appendChild(algomoScript);
  };

  addAlgomoScript();
  document.addEventListener('astro:after-swap', addAlgomoScript);
</script>

So that's great but the widget disappear and reappear on transition. Feels a bit weird 🤔.

Then @martrapp told me we can add some placeholders divs with the transition:persist attribute once, and "swap" them by adding the data-astro-transition-persist attribute to the iframe. The code becomes quite complicated at this point:

<!-- layout -->
  <body>
    <slot />
    <div transition:persist="algomo-widget-body-iframe" />
    <div transition:persist="algomo-widget-trigger-iframe" />
    <div transition:persist="algomo-widget-popup-iframe" />
  </body>

<!-- head -->
<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    const algomoScript = document.createElement('script');
    algomoScript.src = 'https://app.algomo.com/algomo.min.js';
    algomoScript.setAttribute('widget', '<WIDGET_ID>');
    algomoScript.async = true;
    algomoScript.defer = true;

    const placeholders = Array.from(document.querySelectorAll('[data-astro-transition-persist^="algomo-widget"]'));

    for (const placeholder of placeholders) {
      placeholder.remove();
    }

    document.head.appendChild(algomoScript);

    let observer;

    observer = new MutationObserver(() => {
      const iframes = Array.from(document.querySelectorAll('[id^="algomo-widget"]'));

      if (iframes.length !== 0) {
        for (const iframe of iframes) {
          iframe.dataset.astroTransitionPersist = iframe.id;
        }
        observer.disconnect();
      }
    });

    observer.observe(document.documentElement, {
      attributeFilter: ['[id^="algomo-widget"]'],
      subtree: true,
      childList: true,
    });
  });

  document.addEventListener("astro:after-swap", () => {
    const stylesheet = document.createElement("link")
    stylesheet.rel = "stylesheet"
    stylesheet.type = "text/css",
    stylesheet.href = "https://app.algomo.com/algomo.min.css"

    document.head.appendChild(stylesheet)
  })
</script>

And it kinda works: iframe are persisted! Well...yes but know. There is still the annoying flicker.

@martrapp investigated:

The iframe reloads its content when it is re-inserted on the target page. Therefore, persisting an iframe is not a valid approach to preserve its state across pages.

Goals

Being able to persist an element so that it remains untouched at all

Example

We can maybe learn from other frameworks like Nuxt.

The implementation could look like:

<div transition:hard-persist="some-id">...</div>

The name is really bad here but you get the idea

martrapp · 2023-09-28T16:58:48Z

martrapp
Sep 28, 2023
Collaborator

Thanks @florian-lefebvre for the summary of our journey.

The basic idea of view transitions is to have two pages and have a smooth transition from page A to page B.
Persistent elements are a good way to preserve the state of the element on side A and reinsert it into side B during the transition.

Unfortunately, this state preservation doesn't work for iframes because they reload their content when you move them.
The state you wanted to preserve has disappeared.
If you try to copy the content inside the iframe, cross-origin errors occur.

A valid way to deal with this would be to diff the old and new DOMs and keep the old nodes as long as they are (recursively) identic generating a sequence of deletions and insertions to the current DOM. This way, the existing iframes would stay untouched and their content would be preserved.
At first, that sound as if the code would be computational expensive and the solution not necessarily unique.

On the other hand, iframe elements seem to be the only elements that loose their state by being copied over.
So we should come up with something that is as fast and simple as the current solution and can deal with iframes. :-)

3 replies

natemoo-re Sep 28, 2023

Just in case you haven't seen it, @martrapp, I built https://github.com/natemoo-re/micromorph when I was first exploring this space a long time ago. It's a fairly straightforward diffing engine for any set of HTML nodes (including full document nodes), although there are plenty of alternatives. Just in case it's relevant for an exploration. 😄

martrapp Sep 28, 2023
Collaborator

Hey @natemoo-re! I saw some references to micromorph as one of the spiritual predecessors of Astro's view transitions, but didn't have a chance to dig deep into it, yet. Based on what I gathered from the README and a preliminary review of the code, that's exactly what I meant above!

martrapp Sep 28, 2023
Collaborator

Do you have statements about runtime efficiency and how well users' expectations were met about the deletions and insertions to be made?

natemoo-re · 2023-10-04T20:14:36Z

natemoo-re
Oct 4, 2023

Apparently this is running into a limitation of iframe behavior. Anytime an iframe is moved in the DOM tree, the state appears to be reset. I'm not sure if there's anything we can do about this particular problem. Even diffing would change the parent/child relationship and reset the iframe.

Here's a relevant StackOverflow discussion from almost 12 years ago. 🫠

0 replies

martrapp · 2023-10-04T20:16:43Z

martrapp
Oct 4, 2023
Collaborator

With the limitation that the iframe is structural in the same position in both documents, we can keep the parents and swap the remainder of the document around that.

I will give that i try.

0 replies

florian-lefebvre · 2024-04-10T19:43:42Z

florian-lefebvre
Apr 10, 2024
Maintainer Author

I'm closing the proposal as this component by Martin allows this use-case

0 replies

Uh oh!

View Transition API: keeping parts untouched #717

Uh oh!

Uh oh!

florian-lefebvre Sep 28, 2023 Maintainer

Body

Summary

Background & Motivation

Usecase

Problem

Goals

Example

Replies: 4 comments · 3 replies

Uh oh!

martrapp Sep 28, 2023 Collaborator

Uh oh!

natemoo-re Sep 28, 2023

Uh oh!

Uh oh!

martrapp Sep 28, 2023 Collaborator

Uh oh!

martrapp Sep 28, 2023 Collaborator

Uh oh!

natemoo-re Oct 4, 2023

Uh oh!

Uh oh!

martrapp Oct 4, 2023 Collaborator

Uh oh!

florian-lefebvre Apr 10, 2024 Maintainer Author

florian-lefebvre
Sep 28, 2023
Maintainer

Replies: 4 comments 3 replies

martrapp
Sep 28, 2023
Collaborator

martrapp Sep 28, 2023
Collaborator

martrapp Sep 28, 2023
Collaborator

natemoo-re
Oct 4, 2023

martrapp
Oct 4, 2023
Collaborator

florian-lefebvre
Apr 10, 2024
Maintainer Author