Remove navLink API; add when API

Author: markmals

examples/remix/contacts/src/components/SearchBar.tsx

@@ -11,7 +11,7 @@ export function SearchBar(this: Remix.Handle) {
     let query: string | undefined;
 
     return () => {
-        const searching = Boolean(router.navigating.to.url?.searchParams.has("q"));
+        const searching = router.navigating.to.url?.searchParams.has("q");
         const currentQuery = router.url.searchParams.get("q") ?? undefined;
 
         if (query !== currentQuery) {
@@ -22,11 +22,11 @@ export function SearchBar(this: Remix.Handle) {
             <RestfulForm id="search-form">
                 <input
                     aria-label="Search contacts"
-                    class={searching ? "loading" : ""}
+                    class={searching ? "loading" : undefined}
                     defaultValue={query ?? ""}
                     id="q"
                     name="q"
-                    on={dom.input<HTMLInputElement>(async event => {
+                    on={dom.input(async event => {
                         // Remove empty query params when value is empty
                         if (!event.currentTarget.value) {
                             router.navigate(router.location.pathname + router.location.hash);

examples/remix/contacts/src/components/Sidebar.tsx

@@ -16,9 +16,11 @@ export function Sidebar(this: Remix.Handle) {
             <nav>
                 {contacts.length ? (
                     <ul>
-                        {contacts.map(contact => (
-                            <SidebarItem contact={contact} key={contact.id} />
-                        ))}
+                        {contacts
+                            // .toSorted((a, b) => a.first?.localeCompare(b.first ?? "") ?? -1)
+                            .map(contact => (
+                                <SidebarItem contact={contact} key={contact.id} />
+                            ))}
                     </ul>
                 ) : (
                     <p>
@@ -30,29 +32,26 @@ export function Sidebar(this: Remix.Handle) {
     };
 }
 
-function SidebarItem(this: Remix.Handle, props: { contact: ContactRecord }) {
+function SidebarItem(this: Remix.Handle) {
     const router = this.context.get(App);
 
-    return () => {
-        const href =
+    return ({ contact }: { contact: ContactRecord }) => {
+        const link =
             routes.contact.show.href({
-                contactId: String(props.contact.id),
+                contactId: String(contact.id),
             }) + router.location.search;
 
         return (
             <li>
-                <a
-                    href={href}
-                    on={router.navLink({ activeClass: "active", pendingClass: "pending" })}
-                >
-                    {props.contact.first || props.contact.last ? (
+                <a href={link} class={router.when(link, { active: "active", pending: "pending" })}>
+                    {contact.first || contact.last ? (
                         <>
-                            {props.contact.first} {props.contact.last}
+                            {contact.first} {contact.last}
                         </>
                     ) : (
                         <i>No Name</i>
                     )}
-                    {props.contact.favorite && <span>★</span>}
+                    {contact.favorite && <span>★</span>}
                 </a>
             </li>
         );

packages/router/package.json

@@ -39,7 +39,6 @@
         "LICENSE"
     ],
     "dependencies": {
-        "@remix-run/dom": "catalog:remix",
         "@remix-run/events": "catalog:remix",
         "@remix-run/fetch-router": "catalog:remix"
     },

packages/router/src/router.ts

@@ -8,7 +8,6 @@ import {
     events,
     win,
 } from "@remix-run/events";
-import { connect } from "@remix-run/dom";
 import { AppStorage, type RouteHandlers, type RouteMap } from "@remix-run/fetch-router";
 import type {
     FormEncType,
@@ -794,7 +793,8 @@ export class Router<Renderable> extends EventTarget {
      * @param path - The path to check
      * @param exact - If true, requires exact match. Default is false (partial match)
      */
-    isActive(path: string | URL | Path, exact = false): boolean {
+    isActive(path: string | URL | Path | undefined, exact = false): boolean {
+        if (!path) return false;
         const pathname = this.#pathToString(path);
         const currentPath = this.#location.pathname;
 
@@ -816,7 +816,8 @@ export class Router<Renderable> extends EventTarget {
      * @param path - The path to check
      * @param exact - If true, requires exact match. Default is false (partial match)
      */
-    isPending(path: string | URL | Path, exact = false): boolean {
+    isPending(path: string | URL | Path | undefined, exact = false): boolean {
+        if (!path) return false;
         if (this.#navigating.to.state === "idle") {
             return false;
         }
@@ -838,6 +839,21 @@ export class Router<Renderable> extends EventTarget {
         return pendingPath === pathname || pendingPath.startsWith(`${pathname}/`);
     }
 
+    when<T, U>(
+        path: string | URL | Path | undefined,
+        options: { active: T; pending: U }
+    ): T | U | undefined {
+        if (this.isActive(path)) {
+            return options.active;
+        }
+
+        if (this.isPending(path)) {
+            return options.pending;
+        }
+
+        return undefined;
+    }
+
     /**
      * Submit event handler for forms that routes submissions through the router.
      * Use this with event listeners for forms when you need manual control.
@@ -985,54 +1001,6 @@ export class Router<Renderable> extends EventTarget {
         }, options);
     }
 
-    /**
-     * Create an event descriptor that manages active and pending classes on a navigation link.
-     * Unlike {@link enhanceLink}, this method applies classes immediately on mount and keeps
-     * them in sync with router state changes.
-     *
-     * @example
-     * ```tsx
-     * <a href="/about" on={router.navLink({ activeClass: 'active', pendingClass: 'loading' })}>
-     *   About
-     * </a>
-     * ```
-     *
-     * @param styles - Configuration object with activeClass and/or pendingClass
-     * @param options - Optional event listener options (e.g., signal for cleanup)
-     */
-    navLink(
-        styles: { activeClass?: string; pendingClass?: string },
-        options: AddEventListenerOptions = {}
-    ): EventDescriptor<HTMLAnchorElement> {
-        return connect(event => {
-            const anchor = event.currentTarget as HTMLAnchorElement;
-            const targetPath = anchor.pathname + anchor.search + anchor.hash;
-
-            // Helper to update classes based on current state
-            const updateClasses = () => {
-                const active = this.isActive(targetPath);
-                const pending = !active && this.isPending(targetPath);
-
-                const { activeClass, pendingClass } = styles ?? {};
-
-                if (activeClass) anchor.classList.toggle(activeClass, active);
-                if (pendingClass) anchor.classList.toggle(pendingClass, pending);
-
-                // If neither state applies, both toggles above remove their classes.
-                // Drop the attribute entirely if no classes remain.
-                if (!anchor.classList.length) {
-                    anchor.removeAttribute("class");
-                }
-            };
-
-            // Apply initial classes
-            updateClasses();
-
-            // Listen to router updates and return cleanup function
-            return events(this, [Router.update(updateClasses)]);
-        }, options);
-    }
-
     /**
      * Wrap a form submission handler to emit optimistic updates while the mutation is pending.
      *