Love Mavo. Stupid question from a non-JS dev

[fatherofinvention]

I am using Mavo with Barba.js for page transitions. I was finding that as Barba.js swapped new page content into the DOM, Mavo would not reinitialize/re-evaluate, leaving my naked expressions on the page. To ensure smooth transitions and avoid flashes of unevaluated content, I'm reinitializing Mavo by removing and re-adding the Mavo script tag. Then, I use the mv-load event to show the main content once Mavo is loaded.

Here's a snippet of my current approach:

barba.init({
  transitions: [{
    name: 'opacity-transition',
    leave(data) {
      return gsap.to(data.current.container, {
        opacity: 0,
        duration: 0.18,
        onComplete: () => {
          data.current.container.style.display = 'none';
        }
      });
    },
    enter(data) {
      data.next.container.style.opacity = 0;
      data.next.container.style.display = 'block';
      return gsap.to(data.next.container, {
        opacity: 1,
        duration: 0.18
      });
    }
  }],
  views: [{
    namespace: 'default',
    afterEnter(data) {
      const mavoRoot = document.querySelector('[mv-app]');
      if (mavoRoot) {
        let script = document.querySelector('script[src="https://get.mavo.io/mavo.js"]');
        let newScript = document.createElement('script');
        newScript.src = script.src;
        newScript.id = 'mavo-script';

        let oldScript = document.querySelector('#mavo-script');
        if (oldScript) {
          oldScript.parentNode.removeChild(oldScript);
        }

        document.body.appendChild(newScript);

        newScript.onload = function() {
          document.addEventListener('mv-load', function() {
            document.querySelector('main').style.visibility = 'visible';
          });
        };
      }
    }
  }]
});

Maybe a bit janky? But it works. Is there a better or idiomatic method to reinitialize Mavo in this context? Any best practices or recommendations would be greatly appreciated. Very cool project, thank you for it!

[LeaVerou]

Glad you like Mavo! You can call Mavo.init() to rescan the DOM and initialize any newly added Mavo apps. You can even pass a container if you want to scope the search to a particular subtree.