Merge commit 'a024bc7d76fcc5e49e8210f9b0896db9ef21861a'

docs/assets/js/helpers/bridgeTurboAndAlpine.js

@@ -0,0 +1,67 @@
+export function bridgeTurboAndAlpine(Alpine) {
+	document.addEventListener('turbo:before-render', (event) => {
+		event.detail.newBody.querySelectorAll('[data-alpine-generated]').forEach((el) => {
+			if (el.hasAttribute('data-alpine-generated')) {
+				el.removeAttribute('data-alpine-generated');
+				el.remove();
+			}
+		});
+	});
+
+	document.addEventListener('turbo:render', () => {
+		if (document.documentElement.hasAttribute('data-turbo-preview')) {
+			return;
+		}
+
+		document.querySelectorAll('[data-alpine-ignored]').forEach((el) => {
+			el.removeAttribute('x-ignore');
+			el.removeAttribute('data-alpine-ignored');
+		});
+
+		document.body.querySelectorAll('[x-data]').forEach((el) => {
+			if (el.hasAttribute('data-turbo-permanent')) {
+				return;
+			}
+			Alpine.initTree(el);
+		});
+
+		Alpine.startObservingMutations();
+	});
+
+	// Cleanup Alpine state on navigation.
+	document.addEventListener('turbo:before-cache', () => {
+		// This will be restarted in turbo:render.
+		Alpine.stopObservingMutations();
+
+		document.body.querySelectorAll('[data-turbo-permanent]').forEach((el) => {
+			if (!el.hasAttribute('x-ignore')) {
+				el.setAttribute('x-ignore', true);
+				el.setAttribute('data-alpine-ignored', true);
+			}
+		});
+
+		document.body.querySelectorAll('[x-for],[x-if],[x-teleport]').forEach((el) => {
+			if (el.hasAttribute('x-for') && el._x_lookup) {
+				Object.values(el._x_lookup).forEach((el) => el.setAttribute('data-alpine-generated', true));
+			}
+
+			if (el.hasAttribute('x-if') && el._x_currentIfEl) {
+				el._x_currentIfEl.setAttribute('data-alpine-generated', true);
+			}
+
+			if (el.hasAttribute('x-teleport') && el._x_teleport) {
+				el._x_teleport.setAttribute('data-alpine-generated', true);
+			}
+		});
+
+		document.body.querySelectorAll('[x-data]').forEach((el) => {
+			if (!el.hasAttribute('data-turbo-permanent')) {
+				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);
+			}
+		});
+	});
+}

docs/assets/js/helpers/helpers.js

@@ -0,0 +1,17 @@
+export const scrollToActive = (when) => {
+	let els = document.querySelectorAll('.scroll-active');
+	if (!els.length) {
+		return;
+	}
+	els.forEach((el) => {
+		// Find scrolling container.
+		let container = el.closest('[data-turbo-preserve-scroll-container]');
+		if (container) {
+			// Avoid scrolling if el is already in view.
+			if (el.offsetTop >= container.scrollTop && el.offsetTop <= container.scrollTop + container.clientHeight) {
+				return;
+			}
+			container.scrollTop = el.offsetTop - container.offsetTop;
+		}
+	});
+};

docs/assets/js/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './bridgeTurboAndAlpine';
+export * from './helpers';