feat: separate linkActive input

Author: nartc

src/app/app.component.ts

@@ -7,18 +7,8 @@ import { TanStackRouterDevtoolsComponent } from '../router/router-devtools';
   imports: [Outlet, TanStackRouterDevtoolsComponent, Link],
   template: `
     <h1>Welcome to {{ title }}!</h1>
-
-    <a #link="link" link="/" [class.active]="link.isActive()">Home</a> |
-    <a #aboutLink="link" link="/about" [class.active]="aboutLink.isActive()"
-      >About</a
-    >
-    |
-    <a
-      #parentOneLink="link"
-      [link]="{ to: '/parent/$id', params: { id: '1' } }"
-      [class.active]="parentOneLink.isActive()"
-      >Parent 1</a
-    >
+    <a link="/" class="chau">Home</a> | <a link="/about">About</a> |
+    <a [link]="{ to: '/parent/$id', params: { id: '1' } }">Parent 1</a>
     <hr />
 
     <outlet />
@@ -33,7 +23,7 @@ import { TanStackRouterDevtoolsComponent } from '../router/router-devtools';
   `,
   styles: [
     `
-      .active {
+      a[data-active='true'] {
         font-weight: bold;
         padding: 0.5rem;
         border: 1px solid;

src/app/parent.component.ts

@@ -32,6 +32,12 @@ export const Route = createRoute({
       a {
         text-decoration: underline;
       }
+
+      a[data-active='true'] {
+        font-weight: bold;
+        padding: 0.5rem;
+        border: 1px solid red;
+      }
     `,
   ],
 })

src/router/link.ts

@@ -26,6 +26,7 @@ import { injectRouter } from './router';
     '(touchstart)': 'type() === "internal" && handleClick($event)',
     '(mouseenter)': 'type() === "internal" && handleMouseEnter($event)',
     '(mouseleave)': 'type() === "internal" && handleMouseLeave()',
+    '[class]': '[isActive() ? activeClass() : ""]',
     '[attr.data-active]': 'isActive()',
     '[attr.data-type]': 'type()',
     '[attr.data-transitioning]':
@@ -41,14 +42,25 @@ export class Link {
     alias: 'link',
     transform: (
       value:
-        | (Omit<LinkOptions, 'to'> & {
+        | (Omit<LinkOptions, 'to' | 'activeOptions'> & {
             to: NonNullable<LinkOptions['to']>;
           })
         | NonNullable<LinkOptions['to']>
     ) => {
       return (typeof value === 'object' ? value : { to: value }) as LinkOptions;
     },
   });
+  linkActiveOptions = input(
+    { class: 'active' },
+    {
+      alias: 'linkActive',
+      transform: (
+        value: (LinkOptions['activeOptions'] & { class: string }) | string
+      ) => {
+        return typeof value === 'string' ? { class: value } : value;
+      },
+    }
+  );
 
   router = injectRouter();
   hostElement = inject<ElementRef<HTMLAnchorElement>>(ElementRef);
@@ -59,34 +71,34 @@ export class Link {
     () => this.router.routerState().location.search
   );
 
-  private to = computed(() => this.linkOptions().to);
   protected disabled = computed(() => this.linkOptions().disabled);
+  private to = computed(() => this.linkOptions().to);
   private userFrom = computed(() => this.linkOptions().from);
   private userReloadDocument = computed(
     () => this.linkOptions().reloadDocument
   );
   private userPreload = computed(() => this.linkOptions().preload);
   private userPreloadDelay = computed(() => this.linkOptions().preloadDelay);
-  private exactActiveOptions = computed(
-    () => this.linkOptions().activeOptions?.exact
-  );
+  private exactActiveOptions = computed(() => this.linkActiveOptions().exact);
   private includeHashActiveOptions = computed(
-    () => this.linkOptions().activeOptions?.includeHash
+    () => this.linkActiveOptions().includeHash
   );
   private includeSearchActiveOptions = computed(
-    () => this.linkOptions().activeOptions?.includeSearch
+    () => this.linkActiveOptions().includeSearch
   );
   private explicitUndefinedActiveOptions = computed(
-    () => this.linkOptions().activeOptions?.explicitUndefined
+    () => this.linkActiveOptions().explicitUndefined
   );
+  protected activeClass = computed(() => this.linkActiveOptions().class);
 
   protected type = computed(() => {
     const to = this.to();
     try {
       new URL(`${to}`);
       return 'external';
-    } catch {}
-    return 'internal';
+    } catch {
+      return 'internal';
+    }
   });
 
   private from = computed(() => {
@@ -200,6 +212,13 @@ export class Link {
         this.doPreload();
       }
     });
+
+    effect((onCleanup) => {
+      const unsub = this.router.subscribe('onResolved', () => {
+        this.transitioning.set(false);
+      });
+      onCleanup(() => unsub());
+    });
   }
 
   protected handleClick(event: MouseEvent) {
@@ -221,11 +240,6 @@ export class Link {
     event.preventDefault();
     this.transitioning.set(true);
 
-    const unsub = this.router.subscribe('onResolved', () => {
-      unsub();
-      this.transitioning.set(false);
-    });
-
     this.router.navigate(this.navigateOptions());
   }