Scripts are not executed in the page loaded by taxi.js

[MehrdadKhnzd]

Describe the bug So, I'm trying to use this library to add some SPA-like functionality to my Astro + SolidJS website. I made it work, but the problem is that my islands don't work when I navigate using taxi.js, and everything becomes static. It seems that the script tags are not executed when taxi.js fetches a new page. Whenever I first directly visit a page that contains the islands, taxi.js works if I go to other pages and get back. But if I first visit a static page and then navigate to the page with the islands, it doesn't work and becomes static.

To Reproduce An Astro project with any external component (e.g. SolidJS in my case).

[MehrdadKhnzd]

I made it work by manually searching for script tags inside data-taxi-view, creating new script tags, transferring the old script content to the new script, adding the new script to the data-taxi-view, and then removing the old script. This did trigger the execution of script and it worked, but I think something needs to be done on your side to handle this properly.

[jakewhiteley]

Hi @MehrdadKhnzd ,

Your solution describes pretty much exactly what taxi.js already does.

Did you read the section on reloading js? It sounds like you just need to tweak the reloadJsFilter parameter.

[jakewhiteley]

Astro is a bit more tricky as all js for a page seems to be called hoisted.something.js. While you could just reload all of these, this wouldnt allow you to have global js.

I'll continue looking into it as I am also working with astro at the moment, but pelase share if you find a working solution.

[andrepimpao]

I do not know if it is related to the issue @MehrdadKhnzd was experiencing, but the same was happening to me (not using any JavaScript framework).

I was having a hard time finding out what it was, since Taxi.js was actually injecting/replacing the script tags accordingly, but the scripts were being executed only once and on the first visit to the page.

The reason for this was that my scripts had the attribute type="module". By definition, the type="module" scripts are evaluated and executed only once by the browser, so when they are being injected/replaced the second time at runtime, the browser just ignores them.

I do not know if there is any way to work around this, but maybe it would be worth adding this information to the documentation?

[jakewhiteley]

@andrepimpao hmm sounds like something to investigate!

Can anyone provide a basic repo/codepen with an example?

[andrepimpao]

@jakewhiteley sure.

Repo here: https://github.com/andrepimpao/taxi-script-module. Check the README for instructions.

I tried adding a cache buster to the src (something like script.js?v=123) each a time a type="module" script was being reloaded and it works, but this way the file is never cached by the browser and is always being downloaded on each page visit, and that's not very acceptable.

Let me know if I can help in any way.

[jakewhiteley]

@andrepimpao what about adding is:inline to your component script so it isn't hosited as a module?

I think you are right in that other than cachebusting, there is no native way to solve this.

[andrepimpao]

@jakewhiteley I think you are referring to Astro, but I'm not using it (@MehrdadKhnzd was though).

I can use a different approach with how I manage the scripts in my projects and make it work with taxi.js, that's not a problem. I just think it would be worth adding some information regarding this in the docs as it may help another developer (I spent almost a day trying to figure it out what was going on).

Thank you for your time.