Handle x-teleport directive

[sukei]

x-teleport directives break things when navigate backward/forward. Cleaning those before caching seems to solve the issue.

[SimoTod]

Thanks, any chance you could add a test for it?

[xiaohui-zhangxh]

This works, I have merge this patch to my local package, thanks, @SimoTod

[SimoTod]

Thanks tagged

[xiaohui-zhangxh]

Thanks tagged

@SimoTod I found this only fixed a half, let's think there are 4 clicking paths:

Page 1 -> Page 2 -> Page 3 -> Page 4

When click browser backward button:

Page 1 -> Page 2 -> Page 3  => works
Page 1 -> Page 2  => works
Page 1 => boom, uncaught TypeError: Cannot read properties of undefined (reading '_x_refs')

I'm trying to figure out why the first page got error, it seems Turbo doesn't cache first page, so teleport target won't be tagged as 'data-alpine-generated-me' in the renderCacheCallback.

@sukei , have you already fixed this issue?

[SimoTod]

mmmh, that seems quite odd. Are you saying that if you navigate to page 2 and back, it works; navigate to page 3 and back twice, it works; but if you navigate to page 4 and back three times, it doesn't?

[xiaohui-zhangxh]

mmmh, that seems quite odd. Are you saying that if you navigate to page 2 and back, it works; navigate to page 3 and back twice, it works; but if you navigate to page 4 and back three times, it doesn't?

Not exactly, just Page 2 back to Page 1 raise error. this happens when page has turbo frame, turbo frame will trigger turbo:render-cache, I'm confused on the frame caching logic, can't figure out what Turbo should do, or alpine-turbo-drive-adapter should do.

Now, I use this dummy script to fix my own issue:

document.addEventListener("turbo:before-render", (event) => {
  window.Alpine.mutateDom(() => {
    if (document.documentElement.hasAttribute('data-turbo-preview')) {
      return
    }
    // I have only one teleport target to place all dropdowns/modals, so hard code it
    event.detail.newBody.querySelectorAll('#x-teleport-target > *').forEach((el) => el.remove())
  })
  window.Alpine.deferMutations()
})

Also I found this update https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-teleport.js#L21

When this is released, I think we can easyly remove teleport targets by:

document.addEventListener("turbo:before-render", (event) => {
  window.Alpine.mutateDom(() => {
    if (document.documentElement.hasAttribute('data-turbo-preview')) {
      return
    }
    event.detail.newBody.querySelectorAll('[data-teleport-target]').forEach((el) => el.remove())
  })
  window.Alpine.deferMutations()
})

[SimoTod]

FYI, if you use the latest turbo version, without this library, you can add a data-turbo-temporary to your HTML to prevent Turbo from caching your template (https://turbo.hotwired.dev/handbook/building#preparing-the-page-to-be-cached). It may be better than trying to fix the HTML via JS on the fly

[xiaohui-zhangxh]

FYI, if you use the latest turbo version, without this library, you can add a data-turbo-temporary to your HTML to prevent Turbo from caching your template (https://turbo.hotwired.dev/handbook/building#preparing-the-page-to-be-cached). It may be better than trying to fix the HTML via JS on the fly

data-turbo-temporary doesn't work, it remove temporary dom on turbo:before-cache, we should remove them on turbo:before-render. The problem is first open URL, content won't cache, when click a link that targets to turbo frame, turbo:before-cache triggered but the cached content is the one AFTER clicking turbo frame link.

Maybe this is a bug, I will post this to Turbo repo

[SimoTod]

@xiaohui-zhangxh do you have a simple example so I can replicate it (I need the generated HTML)? If the page is not cached, it shouldn't even contain the teleported div which is kind of confusing me.

[xiaohui-zhangxh]

@xiaohui-zhangxh do you have a simple example so I can replicate it (I need the generated HTML)? If the page is not cached, it shouldn't even contain the teleported div which is kind of confusing me.

Yes, I do. see this hotwired/turbo#1008

[xiaohui-zhangxh]

@xiaohui-zhangxh do you have a simple example so I can replicate it (I need the generated HTML)? If the page is not cached, it shouldn't even contain the teleported div which is kind of confusing me.

seems you are right, if dom is not cached, it shouldn't render on clicking backward. let's write more x-teleport example

[xiaohui-zhangxh]

@xiaohui-zhangxh do you have a simple example so I can replicate it (I need the generated HTML)? If the page is not cached, it shouldn't even contain the teleported div which is kind of confusing me.

• Alpinejs _x_refs error occures on every browser backwards

• with data-turbo-temporary, Alpinejs _x_refs error occures when backward to the initial page