simotod / alpine-turbo-drive-adapter Goto Github PK

x-for elements are no longer rendered after being hidden by a Livewire action.
If you go to https://picci.app/new and toggle the Picci type to "Text" and back to "Date", the date picker x-for items are no longer rendered.

I'm not sure what could be the cause of this bug, but I've confirmed it only happens when using the alpine-turbolinks-adapter.

Hey, all.

I'm having some issues while running this adapter together with Alpine and Livewire (on Jetstream). It was working fine, but something changed (not sure where) and I'm getting the error below when using the Adapter:

Interestingly, Alpine seems to work fine when removing the Adapter. I was wondering if anyone is having a similar issue. This app is currently running here WITHOUT the adapter. Source code is available here and here is the commit where I removed the adapter.

Thanks in advance.

Readme needs to be populated

Turbo Drive is set to replace Turbolinks and from what I read they are essentially the same except that Turbo Drive will be able to handle form submission in addition to regular links. I'm hoping the Alpine Turbolinks adapter (or maybe a fork?) can support Turbo Drive. I think a search and replace of "turbolinks" to "turbo" should hopefully be 95% of the job! 😅

I'm not totally sure exactly what triggers this, but the symptoms are clear.

<div  x-cloak x-data="{}" data-turbolinks-permanent>
</div>

It seems that the x-cloak some times is preserved on navigation (and becomes invisible as styled). The workaround is, obviously, to not use these 2 in combinaion.

Hi.
Thank you for this fix.
How can I keep the cdn link updated.
Currently I am using this in my app

    <script src="https://cdn.jsdelivr.net/gh/SimoTod/alpine-turbolinks-adapter@eac088b4067e1a8d8ea21b5182458b8afb9435ac/dist/alpine-turbolinks-adapter.min.js" defer></script>

But I see you've made commits since I got that link from you in our discord chat.

//Tina

Hey there!

thanks for making this. I just wanted to know if it is still necessary to use this package if all caching is disabled inside of Turbo Drive?

thanks!

Hey - this adapter is great (thank you!) but I'm just playing around with a project that is using Alpine v3.x and as far as I can tell they do not play nicely together.

Are you planning on creating a v3-compatible version at any point? Do you think it's even possible with changes to the Alpine API (i.e. Alpine.discoverUninitializedComponents etc seems to not exist anymore)?

If you are not planning on updating it I can try to dig in to see if I can figure out what might need to be done to port it over as it's pretty key for a few projects of mine.

Thanks again 👍

def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: "Post was successfully created." }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

class Post < ApplicationRecord
  validates :title, presence: true
end

new.html.erb

<div x-data="{text: 'demo' }">
  <div x-text="text"></div>
</div>


<%= form_with(model: @post) do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.submit %>
<% end %>

when title is blank and render 422 status, alpine won't work.

It needs to update the version in package json and submit to npm

So when I'm trying to move from page A to page B with Turbo (7-beta4) drive, the alpine x-data function that is in a separate js file is always executed after the initCallback of this package, causing a ReferenceError. I'm not sure if it has anything with the following setup:

Both page A and B have a site.js (it's in the layout file) script that contains the following:

import * as Turbo from "@hotwired/turbo"
import 'alpine-turbo-drive-adapter'
import 'alpinejs';

Page A has some alpine functionality in the navbar.

Page B has an additional scripts which loads only the x-data functions. Example:

window.initStudentNameController = function() {
  [...]
}

I've tried several things that didn't work:

• Not use webpack for the Page B js file and load it in separately with an old school script tag at the bottom of the body
• Try to move around the Page A/B site.js script (not in head, not deferred, not type moduled, etc.)

The only thing that works (aside from reloading the page) is when I put the page B functions in a script tag in the HTML itself.

Does it have something to do with the fact that the site.js script doesn't get reloaded when moving from page A to B?

See gif below

On a fresh page load (no Turbo drive) my Alpine components initialise fine when loaded in via a turbo-stream.

However if I navigate away to a different page via Turbo Drive and revisit the original page, the same Alpine components delivered via the turbo-stream no longer get initialised.

I have in the meantime come up with the following workaround using a Stimulus controller:

// alpine_init_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    Alpine.initializeComponent(this.element)
  }
}

<turbo-stream action="update" target="my_target">
  <template>
    <div x-data="{}" data-controller="alpine-init">
     ...
    </div>
  </template>
</turbo-stream>

Hi guys, thanks for the connector, but a found a little issue:

I had this form:

as you can see the alpinejs works at the beginning. when the form submitted is succeed turbo reload the complete page.

and the alpinejs not working ....

What happened ?

The turbo:render fired but not found any dom node related alpine document.querySelectorAll('[x-data]')

If I put on console the snippet

      window.Alpine.discoverUninitializedComponents((el) => {
        window.Alpine.initializeComponent(el)
      })

Now the alpinejs works...

TLDR; when turbo:render the ``document.querySelectorAll('[x-data]')` return empty and the window.Alpine.initializeComponent never happened.

After upgrading to v0.2.0, I noticed a bug similar to #16.
x-for children are no longer rendered after a Livewire rerender.
Similar steps to the other issue description (note: I haven't installed v0.2.0 in production):

If you go to https://picci.app/new and toggle the Picci type to "Text" and back to "Date", the date picker x-for items are no longer rendered.

I've been able to reproduce the issue using the example I posted earlier for the other issue.
#16 (comment)

As far as I've been able to debug:

• does not occur pre v0.2.0;
• occurs when directly loading the page;
• does not occur when navigating to the page from another page.

When user click back, we want to show the previous state of all the Alpine components rather than reinitialise them.

In a scenario where a page has a component menu using {show: false} and x-show="show", when clicking on a link from that menu, turbolinks caches the page with the menu visible. This cause flickering when visiting the page afterwards unless disabling turbolinks cache.
For example page A -> navigating to page B (page A is cached with the menu open) -> navigating back to page A (Turbolinks temporary shows the cached version with the menu open first for half a second causing flickering).

Note that I would not bother opening this issue if I thought this would be "hard to do", but since Alpine supports (to some extent) IE 11 and I suspect this is about adjusting your Babel config (to turn classes into function), maybe that could be done?

As it says on the tin. It would be good to be able to write tests although it seems challenging because the way turbolinks works.

I'm using this adapter on a Livewire + Alpine project which uses Turbolinks.
Previously, template loop items (<template x-for="">) were being duplicated when navigating back and forth.
This adapter resolves that issue. However, it causes other (sibling) template loops to disappear when navigating.

Let me know if there's any specific information we need to debug this issue.