Partytown scripts break ViewTransition

[dsegovia90]

Astro Info

Astro                    v4.8.3
Node                     v18.19.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/partytown

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Scripts with partytown break when transitioning between routes with ViewTransitions.

Console error (on multiple browsers):

Uncaught SyntaxError: redeclaration of const t
    <anonymous> index2 line 102 > injectedScript:1
    runScripts router.js:102
    transition router.js:335
    transition router.js:334
    navigate router.js:366
    <anonymous> ViewTransitions.astro:97
    EventListener.handleEvent* ViewTransitions.astro:59
[index2 line 102 > injectedScript:1:1](http://localhost:4321/index2%20line%20102%20%3E%20injectedScript)

This can be shown in the Minimal Reproducible Example attached.

What's the expected result?

Partytown webworker should not break when transitioning routes with ViewTransition

Link to Minimal Reproducible Example

https://astro-viewtransition-partytown-bug.vercel.app/

Code

Repo: https://github.com/dsegovia90/astro-viewtransition-partytown-bug
Partytown script: https://github.com/dsegovia90/astro-viewtransition-partytown-bug/blob/57ac9a6a624284e57bd4163feb553d563a7772dd/src/layouts/Layout.astro#L22C3-L27C12

Participation

• I am willing to submit a pull request for this issue.

[V3RON]

The Partytown snippet is supposed to be loaded only once, but when the View Transitions API gets activated, the <script> element containing this snippet is recreated on every transition.

astro/packages/integrations/partytown/src/index.ts

Lines 28 to 38 in 6f94890

	'astro:config:setup': ({ config: _config, command, injectScript }) => {
	const lib = `${appendForwardSlash(_config.base)}~partytown/`;
	const partytownConfig = {
	lib,
	...options?.config,
	debug: options?.config?.debug ?? command === 'dev',
	};
	partytownSnippetHtml = partytownSnippet(partytownConfig);
	partytownSnippetHtml += SELF_DESTRUCT_ON_VIEW_TRANSITION;
	injectScript('head-inline', partytownSnippetHtml);
	},

I decided to comment out the line adding SELF_DESTRUCT_ON_VIEW_TRANSITION to the script and see what happens. The outcome is:
a) No error while transitioning between pages.
b) Partytown scripts are not executed after the transition.

That's probably expected. We should let Partytown know there may be new scripts added by dispatching new CustomEvent('ptupdate'). I did so, and nothing happened.

Under certain conditions, Partytown may need an <iframe> element to be present on the page. It's true for my local environment, and when a view transition happens, this <iframe> is removed from the DOM.

We should persist it somehow 🤔

EDIT:
There is an alternative I forgot to mention. We can wrap Partytown snippet with a function to prevent global scope pollution and then there will be no errors reported in the console. I didn't test it in practice and I have no idea what side-effects it may have.

[matthewp]

@V3RON thanks for doing the research! Would you mind sending a PR?

[V3RON]

@V3RON thanks for doing the research! Would you mind sending a PR?

I intend to do so 😉

[dsegovia90]

Thank you @V3RON & @matthewp. Let me know if you need some help testing, or setting up another Minimal Reproducible Example.

[V3RON]

@matthewp
Just to confirm - it's expected for <script type="text/partytown"> scripts to be restarted when transition happens, right?

If so, then this commit should be all we need. It moves the <iframe> element created by Partytown from the old document to the new one on transition.

Is there any edge-case I should be aware of? 🤔

[dsegovia90]

thanks @V3RON! tested this commit in my local machine, and can confirm that partytown is no longer crashing. I can also see that the service worker is re-initialized on route change. I'm not sure if that is the intended behavior for partytown.

the only thing I can think of is comparing it to nuxtjs or nextjs, would that be helpful?

EDIT:
for what its worth, tested partytown in nuxtjs and behaves the same as it does with @V3RON's commit

[matthewp]

Sounds perfect to me.

[V3RON]

I'm not sure if that is the intended behavior for partytown.

It's not, but there is no way to move <iframe> and maintain its state - it will always reload.
I'll open a PR then 👌