alpinejsv3-turbo-adapter.js

export function bridgeTurboAndAlpine(Alpine) {
	document.addEventListener('turbo:before-render', (event) => {
		Alpine.deferMutations();
	});

	document.addEventListener('turbo:render', () => {
		if (document.documentElement.hasAttribute('data-turbo-preview')) {
			return;
		}

		Alpine.flushAndStopDeferringMutations();
	});

	// Cleanup Alpine state on navigation.
	document.addEventListener('turbo:before-cache', () => {
		Alpine.mutateDom(() => {
			document.body.querySelectorAll('[x-data]').forEach((el) => {
				if (el.hasAttribute('data-turbo-permanent')) {
					el._x_ignore = true;
				} else {
					Alpine.destroyTree(el);
					// Turbo leaks DOM elements via their data-turbo-permanent handling.
					// That needs to be fixed upstream, but until then.
					let clone = el.cloneNode(true);
					el.replaceWith(clone);
				}
			});
		});
	});
}

@bep do you include alpine, turbo, and this GIST and that is it? There is no need for another adapter or anything?

@khrome83 yes -- but you need the stopObservingMutations() exported -- it's in a PR, but not merged, yet ...

Looks like we have a alternate path here.

livewire/livewire#3151 (comment)

It was added as part of Alpinejs v3.4.1. https://github.com/alpinejs/alpine/tree/v3.4.1

Any chance @bep you could update your Gist with that support. I am trying to make sense of it and wrap my head around it.

@khrome83 I have added a comment to the PR you mentioned. I have also updated my Gist (but that requires a patched version of Alpine).

@calebporzio can you help here?