Enhance x-router:link

Allow x-router:link to be used on parent elements while the actual link is declared in child elements.

Author: rameel

src/plugins/router/router.js

@@ -126,24 +126,29 @@ export default function({ directive, magic, reactive }) {
         }
 
         function process_link() {
-            const is_blank = (el.getAttribute("target") ?? "").indexOf("_blank") >= 0;
-            const unsubscribe = listen(el, "click", e => {
-                if (e.metaKey
-                    || e.altKey
-                    || e.ctrlKey
-                    || e.shiftKey
-                    || e.defaultPrevented
-                    || e.button > 0
-                    || is_blank) {
-                    return;
-                }
+            let link = get_anchor_element(el);
+            if (link) {
+                el._r_routerlink = link;
+
+                const is_blank = (link.getAttribute("target") ?? "").indexOf("_blank") >= 0;
+                const unsubscribe = listen(link, "click", e => {
+                    if (e.metaKey
+                        || e.altKey
+                        || e.ctrlKey
+                        || e.shiftKey
+                        || e.defaultPrevented
+                        || e.button > 0
+                        || is_blank) {
+                        return;
+                    }
 
-                e.preventDefault();
+                    e.preventDefault();
 
-                router.navigate(`${ el.pathname }${ el.search }${ el.hash }`);
-            });
+                    router.navigate(`${ link.pathname }${ link.search }${ link.hash }`);
+                });
 
-            cleanup(unsubscribe);
+                cleanup(unsubscribe);
+            }
         }
 
         function process_outlet() {
@@ -161,11 +166,59 @@ export default function({ directive, magic, reactive }) {
 
     magic("active", el => {
         const router = closest(el, node => node._r_router)?._r_router;
+        if (is_nullish(router)) {
+            warn("No x-router directive found");
+            return false;
+        }
 
-        if (!is_nullish(router)) {
-            return router.history.resolve(el.href) === router.values.path;
+        //
+        // Create a dependency on router.values
+        //
+        JSON.stringify(router.values);
+
+        const link = is_anchor_element(el) ? el : closest(el, node => node._r_routerlink)?._r_routerlink;
+
+        //
+        // The issue is that the router:link directive is processed later than x-bind,
+        // and if $active is used in x-bind, we won’t find node._r_routerlink.
+        // Therefore, we delay execution and try again.
+        //
+        // <div x-router:link :class="{ active: $active }">
+        //    ...
+        // </div>
+        //
+
+        if (link) {
+            return router.history.resolve(link.href) === router.values.path;
         }
 
-        warn("No x-router directive found");
+        if (el._r_routerlink_init) {
+            warn(`x-router:link directive not found`, el);
+        }
+        else {
+            queueMicrotask(() => {
+                el._r_routerlink_init = true;
+                //
+                // Force an upate
+                //
+                router.values.path = router.values.path;
+            });
+        }
+
+        return false;
     });
 }
+
+function is_anchor_element(el) {
+    return el.tagName.toUpperCase() === "A";
+}
+
+function get_anchor_element(el) {
+    if (is_anchor_element(el)) {
+        return el;
+    }
+
+    const links = el.querySelectorAll("a");
+    links.length !== 1 && warn(`Expected exactly one link, but found ${links.length}`);
+    return links[0];
+}