craftedbygc / taxi Goto Github PK

Describe the bug
I'm using Taxi in my project to enhance navigation with smooth page transitions. However, I've encountered an issue where CSS variables defined within my components are not persisting across page navigations. Initially, on the home page, the CSS variables are applied correctly. But when I navigate to another page and then return, the CSS variables disappear, affecting the styling of my components.

To Reproduce
Steps to reproduce the behavior:

1. Start on the home page where CSS variables are defined and applied correctly to components.
2. Use Taxi navigation to move to another page in the application.
3. Return to the home page, either by back navigation or by clicking a link back to home.
4. Observe that CSS variables are no longer applied to the components.

Expected:
CSS variables defined in components persist across all pages and are reapplied correctly when navigating back to a page where they were initially loaded.

Info

• Device: [Macbook]
• OS: [MacOS Ventura 13.4.1 (22F82)]
• Browser [Chrome]
• Version [123.0.6312.87 (Official Build) (arm64)]

Something like taxi-no-cache could be added to views which would instruct the library to not store the fetched HTML in cache, and to refetch the page for every navigation to it.

Describe the bug
Currently trying to upgrade from Highway to Taxi and having a hard time getting passed this error. Any tips or loaders you recommend?

I already have a plugin-proposal-class-properties plugin installed, so I'm stuck on which loader I need in order to proceed.

ERROR in ./node_modules/@unseenco/taxi/src/Core.js 21:17
Module parse failed: Unexpected token (21:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class Core {
> 	isTransitioning = false
|
| 	/**
 @ ./node_modules/@unseenco/taxi/src/taxi.js 1:0-25 5:0-9:1
 @ ./web/src/scripts/index.js

When I click on a link that redirects with taxi, the URL of the anchor tag gets set, and not the URL redirected to. This might also cause issues with third party pages.

Ideally, Taxi waits for the redirected page to be fetched, and sets the correct URL afterward, or forwards the user to said page if it's third party.

When prefetching 404s using my configuration, it throws a JavaScript error without displaying the 404 page to the user.

To Reproduce
Steps to reproduce the behavior:

1. Configure transition with removeOldContent: false and bypassCache: true (I remove old content in onEnterCompleted() of my renderer).
2. Hover a 404 link.
3. Click the link.
4. The onLeave transition is triggered, but it does not navigate to the 404 page.

This is how I remove old content:

[...this.wrapper.querySelectorAll('[data-taxi-view]')].filter((e) => e !== this.content).forEach((e) => e.remove());

Info

• Device: Macbook
• OS: macOS Sonoma
• Browser: Chrome
• Version: 122

Hi, I'm for my page transitions both the old + new content are visible during the transitions. In my onEnterCompleted I clean this up.

The issue I have is that navigating scrolls to top but then does scroll restoration. Can I disable this fully or always scroll to top?

Thanks!

I want to use taxi.js on many future website projects. But right now i don't really know how to best use it with a form that uses method POST. With cache activated i get an error and with cache disabled it reloads the page like it would without taxi. My first thought was to intercept the submit event and make an ajax request.

What would be your suggestions to implement this right now?

PS: Will there every be native support for such forms with method post?

If you follow a page link with Taxi that has an anchor, those aren't respected and the page url is set without anchor.
(I don't expect the scrolling behaviour to be included, but to implement it myself I have to get the anchor which currently just gets ignored/replaced by Taxi)

Describe the bug
Working with Shopify locally, prefetching 404s throws a JavaScript error without displaying the 404 page to the user. On production it works as expected and skips the transition, bringing you to the 404 page.

From my screenshots, the issue seems to be related to the way Shopify handles tracking (Web Pixel Manager). I'd be happy to show you an example setup in a screen share.

To Reproduce
Steps to reproduce the behavior:

• Configure transition with removeOldContent: false and bypassCache: true (remove old content in onEnterCompleted()).
• Use the Shopify CLI to start a project.
• Browse to the locally hosted Shopify theme (http://127.0.0.1:9292)
• Hover a 404 link.
• Click the link.
• The onLeave transition is triggered, but it does not navigate to the 404 page.

Info

• Device: Macbook
• OS: macOS Sonoma
• Browser: Chrome
• Version: 122

Follow up of #21

Describe the bug
When preloading a page in advance, it will only be added to the cache as soon as the fetch is completed. This means, if the Navigation is started soon after, it'll try to fetch the page again instead of waiting for the preloaded entry to finish downloading.

Ideally, I want to be able to preload a page, and then let the Navigation use that preloaded page even if it starts before preloading is finished, so no content gets downloaded twice.

Why?
Starting preloading pages as soon as the user hovers over a link can lead to a lower loading time, as most users need 100-200ms to actually click a link upon hovering. This pattern is something I'd like to implement yet can't because of this constraint.

To Reproduce
Steps to reproduce the behavior:

1. Preload an URL
2. Navigate to the same page shortly after
3. Taxi will fire two requests

Hey there, thanks so much for all your work on this library!

Just wondering the best approach to conditionally set removeOldContent as false?

The use case is wanting to load a target page's data-taxi-view content into a separate DOM element, rather than replace the existing pages data-taxi-view ...

Is this possible with a custom Renderer or is it just a bad idea in general? In my head it would be something like "if Renderer is 'modal', don't remove old content.

Or would we be better off keeping the dynamic modal component as a separate piece of functionality that's loaded in the route requited? Any advice would be greatly appreciated.

J

Hi, I was just exploring github and find out GC make new repo and it's interesting, you guys work always amaze me, this can be game changer for page transition, I really want to try this on my newest project (shopify project, because it's support reload JS on new page, might be good for external plugin shopify). But is taxi.js already production ready or better I just wait some time to make it more established for safety reasons? Thanks.

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).

Hello,

Just for your information, I have noticed a little mistake in the documentation website here : https://taxi.js.org/api-events/ about the deleteCache() function which doesn't seem to exist. By searching a bit in your GitHub, I found clearCache() which did the job. 🛠

PS : didn't want to put the "bug" label, and don't know how to remote it 😅

Best regards,
Charlotte DB.

Hi @jakewhiteley
First thing, I really love the new update, I immediately update it, and of course my website transitions now faster!
But there's a (maybe) critical issue triggered, let me explain the about the bug.

Describe the bug
So I have an on-progress website, and I am trying to update the taxi.js to 1.1.0 to get a faster fetch transition benefit.
I tried the transition forward, and back, and I found taxi.js failed to render when there's a page with a lot of HTML (content).
Because I can't publish my WIP website, so I create the debug project, so you know why this happens.

You can try cloning my repo here:
taxi-debug

To Reproduce
Steps to reproduce the behavior:

1. Make HTML with lot of content (heading, description, input, images, etc)
2. Try navigating to that page (make sure you navigate from less content page -> rich content page)
3. If the bug is not triggered, repeat the number 2 step but on refresh position (because this bug only happens sometimes, but often enough)

Note:
If you try my repo, you can try navigation from home -> about and keep repeating if the bug is not triggered.
Make sure you refresh on home position if the bug is not triggered and repeat the navigation.

Info
If applicable, add screenshots to help explain your problem.

Device

• Device: PC Windows
• OS: Windows
• Browser: Google Chrome
• Version: 105

Once again, thanks for keep improving the library, keep up the great work!

Hey! just came across this library and it looks promising.
Looking through the documentation I see no mention of the ability to nest layouts to be able to reuse certain components throughout the application.
Is this just me not finding the correct documentation, or is it not a feature you plan on supporting?

When loading a new page, taxi outputs some information to the console:

As you can see, it also states "ass". Why? Looking into the code via Chrome DevTools i see this:

Why is it there?

Describe the bug
I wonder if I taxi.js behavior can fetch assets on click (not preload, because it's only for document not assets like image).
To get a better understanding, you can check Barba.js behavior, they can fetch assets same time when user clicks the link, so no wasted time just waiting for the transition to run and get the assets onEnter.

To Reproduce
Steps to reproduce the behavior:

1. Open dev tools (inspect element)
2. Go to network tab
3. Click link
4. See the assets will load when onEnter state

What I expect, when clicking link, assets will load simultaneously and no need to wait onEnter

Info

• Device: Desktop, Laptop, Phone
• OS: Windows and Mac OS
• Browser: Chrome and Safari
• Version: All version

Hope you understand what I mean, thank you!

Currently, if you update the url via the history API and then call updateCache, it won't update anything as the URL won't exist yet in the cache.

Either

1. Remove the .has check in updateCache
2. Add a method to update content for any given URL

Describe the bug
createCacheEntry() fails if page has data-taxi-view attribute specificed and no custom Renderer.

Not totally sure this is a bug or intended behaviour tbh, I felt as if it was a bug as it was unexpected and took me a minute to actually figure out.

To Reproduce
Minimal StackBlitz Example. You can switch from main.js to fixed.jsin home page script to simulate what the behaviour I'd consider normal should be.
Two pages, data-taxi-view="home" & data-taxi-view="about".

main.js

import { Core, Renderer, Transition } from '@unseenco/taxi';

const taxi = new Core({
  renderers: {
    default: Renderer,
  },
  transitions: {
    default: Transition,
  },
});

renderers and transition can even be avoided but put them there just to make sure that wouldn't somehow fix it.

Info
Error in the console

@unseenco_taxi.js?v=bde4e522:835 Uncaught TypeError: Renderer2 is not a constructor
    at Core.createCacheEntry (@unseenco_taxi.js?v=bde4e522:835:17)
    at new Core (@unseenco_taxi.js?v=bde4e522:650:52)
    at main.js:3:14

Looking into it Renderer is actually undefined.

Maybe Fix?

  createCacheEntry(page) {
    const content = page.querySelector('[data-taxi-view]');

    let Renderer = content.dataset.taxiView.length
      ? this.renderers[content.dataset.taxiView]
      : this.defaultRenderer;

    /* 
      content.dataset.taxiView.length is actually true
      (as the view exist as an attribute in html)
      but this.renderers[content.dataset.taxiView] is undefined
      (as there's no renderer provided in js)
    */

    if (Renderer === undefined) Renderer = this.defaultRenderer;
    /*
      fix can be as simple as this, just providing an escape
      if Renderer is undefined 
    */

    return {
      page,
      content,
      skipCache: content.hasAttribute('data-taxi-nocache'),
      scripts: this.reloadJsFilter
        ? Array.from(page.querySelectorAll('script')).filter(
            this.reloadJsFilter
          )
        : [],
      title: page.title,
      renderer: new Renderer({
        wrapper: this.wrapper,
        title: page.title,
        content,
        page,
      }),
    };
  }

Am I missing something? Is it the actual expected behaviour?
Still, thanks for the amazing work in any case and sorry to bother ❤️

Describe the bug

Generally, it's not well documented on how to best preload urls. Like, can I do this from within the taxi renderer onEnter() hooks? I haven't been able to reference preload anywhere except after the taxi object is instantiated.

More specifically, if the preload fetch throws an error, like 404 it's not caught and causes the browser to navigate to that url. I think minimally this is a bug that might need fixing.

Love the library, thanks for building it!

To Reproduce
Steps to reproduce the behavior:

//create your taxi instance and then:
taxi.preload('/foo') where /foo will resolve as 404 error, and taxi navigates the page to the URL.

Info
If applicable, add screenshots to help explain your problem.

• Device: [e.g. Macbook pro]
• OS: [MacOS]
• Browser [chrome]
• Version [105]

I was attempting to put up a quick demo using taxi and Astro since it's one of the new hot frameworks in the current MPA resurgence. I got it going pretty easily, except for the fact that Astro will only include the component CSS in the head for components that are used on that page. So if I start from the homepage and navigate to another page with a new component, I have missing styles because the target page css never gets transferred into the current page.

I asked if there was a way to ask Astro to compile all component CSS down into a single CSS file but it seems like there isn't.

I could just pull all my single-file component styles out of each component and into a global library of CSS, in fact if you switch to tailwind, since the classes are component-local and the styles are global, this issue goes away. But I really like the DX of the single-file components.

So I'm not entirely blocked here, but I thought it would be neat if there were an option in taxi, similar to how you look for scripts, to look for and inject stylesheets.

One of the Astro folks pointed me to an example where they implemented something similar for a prefetch option: https://github.com/withastro/astro/blob/main/packages/integrations/prefetch/src/client.ts#L54

I think the hard part might be making sure you're not just stuffing the same style tags into the head when you traverse back and forth on pages, but otherwise it could be a neat feature. Or perhaps the solve there is that all the existing CSS is removed and the new CSS is added, since it's likely you're working with an MPA where all the styles that page needs are on the page.

Anyway, curious to know what you think!

My company just launched our new website wearetraina.com which uses taxi! It was a real joy to work with!