#A way to determine if a page has view transitions enabled

17 messages · Page 1 of 1 (latest)

jovial wave
#

Hi, I asked this in chat and got an answer from @solid bough to create a Vite plugin. My use-case is like this

import { someFunction } from 'some-library'

document.addEventListener('DOMContentLoaded', () => {
  someFunction()
})

document.addEventListener('astro:page-load', () => {
  someFunction()
})

As you can see, we are running the same function in 2 different events. They both run on page load.

What if I only want to run the astro:page-load if the page has view transitions enabled and ignore the one in DOMContentLoaded? Is it possible?

wise lake
#

I think that's what you're looking for

#

then you can add event listeners accordingly

jovial wave
#

omg youre a savior

#

how did I not see that

opaque bearBOT
#
If your issue is resolved, please help by doing the following two steps:
  1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
  2. From the same ellipses, select Close Post.
    Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
    Thank you for your help!
solid bough
#

Oh yeah, if you need the information on some code that will also be in the client, you can use that value.
If you need to infer that from an integration as we were discussing then you'd need something else like a Vite plugin.

I wouldn't recommend using that value to change the event listener tho. Importing that (or anything really) from astro:transitions/client will cause all the View Transition JS to be shipped to the client, even if the page is not using VT.
If imposing that JS load on the consumers is acceptable (it might be if your own JS is much larger than VT's) then you don't even need to check the value to select the event. Just use astro:page-load. Importing the module will load the JS and therefor it will execute the logic that defines the event.

jovial wave
#

But, this is safe to do right @solid bough ? Say your integration bundler is tsup, and you put astro:transitions/client to external:

injectScript('page', `
  import { navigate, transitionEnabledOnThisPage } from "astro:transitions/client";
  import { someFunction } from 'some-library'
  
  if (transitionEnabledOnThisPage()) {
    document.addEventListener('astro:page-load', () => {
      someFunction({ navigate }) // I need to pass navigate to my library
    })
  } else {
    someFunction() // no need for navigate
  }
`)
solid bough
#

You'd have to set astro:transitions/client as external if you are building a script using it because that is a virtual module. It doesn't exist for tsup.
When the Astro project using your library is built it will be loaded up by Vite.
And that will ship all the JS to the client.

#

It's not unsafe, just extra JS

#

And my point is that you can do this:

import {transitionEnabledOnThisPage} from "astro:transitions/client";

document.addEventListener('astro:page-load', () => {
  someFunction(transitionEnabledOnThisPage ? { navigate } : undefined);
});

By importing astro:transitions/client you are forcing all of it to be present.

#

In your particular example you don't need to change anything on tsup because it is just an inline string, tsup is not bundling a script importing it

jovial wave
#

Actually I added it to external because I have a file that is being built that contains a custom swap function

#

The problem with this one

import {transitionEnabledOnThisPage} from "astro:transitions/client";

document.addEventListener('astro:page-load', () => {
  someFunction(transitionEnabledOnThisPage ? { navigate } : undefined);
});

is that when <ViewTransitions /> is not enabled, it will never run

#

and someFunction contains some mounting logic to dynamic divs

solid bough