wip

packages/alpinejs/src/alpine.js

@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
-import { onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
+import { onElRemoved, onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
@@ -46,6 +46,7 @@ let Alpine = {
     setEvaluator,
     mergeProxies,
     findClosest,
+    onElRemoved,
     closestRoot,
     destroyTree,
     interceptor, // INTERNAL: not public API and is subject to change without major release.

packages/navigate/src/index.js

@@ -7,6 +7,7 @@ import { finishAndHideProgressBar, showAndStartProgressBar } from "./bar"
 import { transition } from "alpinejs/src/directives/x-transition"
 import { swapCurrentPageWithNewHtml } from "./page"
 import { fetchHtml } from "./fetch"
+import { prefix } from "alpinejs/src/directives"
 
 let enablePersist = true
 let showProgressBar = true
@@ -20,13 +21,12 @@ export default function (Alpine) {
         )
     }
 
-    Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
-        // "persisted" elements will be picked up by .querySelector, not this callback...
-        if (value === 'persist') return
+    Alpine.addInitSelector(() => `[${prefix('navigate')}]`)
 
-        let shouldPrefetch = modifiers.includes('prefetch') && modifiers.includes('hover')
+    Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
+        let shouldPrefetchOnHover = modifiers.includes('hover')
 
-        shouldPrefetch && whenThisLinkIsHoveredFor(el, 60, () => {
+        shouldPrefetchOnHover && whenThisLinkIsHoveredFor(el, 60, () => {
             let destination = extractDestinationFromLink(el)
 
             prefetchHtml(destination, html => {

packages/navigate/src/links.js

@@ -50,3 +50,35 @@ export function extractDestinationFromLink(linkEl) {
 export function createUrlObjectFromString(urlString) {
     return new URL(urlString, document.baseURI)
 }
+
+let handleLinkClick = () => {}
+let handleLinkHover = () => {}
+
+export function whenALinkIsClicked(callback) {
+    handleLinkClick = callback
+
+    initializeLinksForClicking()
+}
+
+export function whenALinkIsHovered(callback) {
+    handleLinkHover = callback
+
+    initializeLinksForHovering()
+}
+
+export function extractDestinationFromLink(linkEl) {
+    return new URL(linkEl.getAttribute('href'), document.baseURI)
+}
+
+export function hijackNewLinksOnThePage() {
+    initializeLinksForClicking()
+    initializeLinksForHovering()
+}
+
+function initializeLinksForClicking() {
+    getLinks().forEach(el => {
+        el.addEventListener('click', e => {
+            e.preventDefault()
+
+            handleLinkClick(el)
+        }

packages/navigate/src/persist.js

@@ -5,8 +5,8 @@ let els = {}
 export function storePersistantElementsForLater() {
     els = {}
 
-    document.querySelectorAll('[x-navigate\\:persist]').forEach(i => {
-        els[i.getAttribute('x-navigate:persist')] = i
+    document.querySelectorAll('[x-persist]').forEach(i => {
+        els[i.getAttribute('x-persist')] = i
 
         Alpine.mutateDom(() => {
             i.remove()
@@ -15,8 +15,8 @@ export function storePersistantElementsForLater() {
 }
 
 export function putPersistantElementsBack() {
-    document.querySelectorAll('[x-navigate\\:persist]').forEach(i => {
-        let old = els[i.getAttribute('x-navigate:persist')]
+    document.querySelectorAll('[x-persist]').forEach(i => {
+        let old = els[i.getAttribute('x-persist')]
 
         old._x_wasPersisted = true