fix(attachment): simplify attachment to prevent duplication

Author: dvcol

src/lib/action/active.action.svelte.ts

@@ -43,17 +43,9 @@ export function active(node: HTMLElement, options: ActiveOptions | undefined = {
   const router = options?.router || getRouter();
   if (!ensureActionRouter(node, router)) return {};
 
-  let _options = $state(options);
-  let _path: string | null = $state(options?.path || node.getAttribute('data-path') || node.getAttribute('href'));
-  let _name: RouteName | null = $state(options?.name || node.getAttribute('data-name'));
-
-  const update = (newOptions: ActiveOptions | undefined = {}) => {
-    _options = newOptions;
-    _path = newOptions?.path || node.getAttribute('data-path') || node.getAttribute('href');
-    _name = newOptions?.name || node.getAttribute('data-name');
-
-    ensurePathName(node, { path: _path, name: _name });
-  };
+  let _options = $derived(options);
+  let _path: string | null = $derived(options?.path || node.getAttribute('data-path') || node.getAttribute('href'));
+  let _name: RouteName | null = $derived(options?.name || node.getAttribute('data-name'));
 
   const caseSensitive = $derived(_options?.caseSensitive ?? router.options?.caseSensitive);
   const matchName = $derived(doNameMatch(router.route, _name, { caseSensitive, exact: _options?.exact }));
@@ -74,5 +66,14 @@ export function active(node: HTMLElement, options: ActiveOptions | undefined = {
   $effect(() => {
     ensurePathName(node, { path: _path, name: _name });
   });
-  return { update };
+
+  return {
+    update(newOptions: ActiveOptions | undefined = {}) {
+      _options = newOptions;
+      _path = newOptions?.path || node.getAttribute('data-path') || node.getAttribute('href');
+      _name = newOptions?.name || node.getAttribute('data-name');
+
+      ensurePathName(node, { path: _path, name: _name });
+    },
+  };
 }

src/lib/action/link.action.svelte.ts

@@ -39,10 +39,10 @@ import { getRouter } from '~/router/context.svelte.js';
  * ```
  */
 export function link(node: HTMLElement, options: LinkNavigateOptions | undefined = {}): ActionReturn<LinkNavigateOptions | undefined> {
-  const router = options?.router || getRouter();
+  const router = normalizeLinkAttributes(node, options)?.router || getRouter();
   if (!ensureLinkRouter(node, router)) return {};
 
-  let _options = $state(normalizeLinkAttributes(node, options));
+  let _options = $derived(options);
 
   const navigate = $derived<LinkNavigateFunction | undefined>(getNavigateFunction(router, options));
   const navigateHandler = async (event: MouseEvent | KeyboardEvent) => navigate?.(event, node);
@@ -56,7 +56,7 @@ export function link(node: HTMLElement, options: LinkNavigateOptions | undefined
   node.addEventListener('focus', resolveHandler);
   return {
     update(newOptions: LinkNavigateOptions | undefined = {}) {
-      _options = newOptions;
+      _options = normalizeLinkAttributes(node, newOptions);
     },
     destroy() {
       node.removeEventListener('click', navigateHandler);

src/lib/attachment/active.attachment.svelte.ts

@@ -1,19 +1,8 @@
 import type { Attachment } from 'svelte/attachments';
 
 import type { ActiveOptions } from '~/models/action.model.js';
-import type { RouteName } from '~/models/route.model.js';
 
-import {
-  activeStyles,
-  doNameMatch,
-  doPathMatch,
-  ensureActionRouter,
-  ensurePathName,
-  getOriginalStyle,
-  restoreStyles,
-} from '~/models/action.model.js';
-import { Matcher } from '~/models/index.js';
-import { getRouter } from '~/router/context.svelte.js';
+import { active } from '~/action/index.js';
 
 /**
  * A svelte attachment to add an active state (class, style or attribute) to an element when the route matches.
@@ -39,33 +28,5 @@ import { getRouter } from '~/router/context.svelte.js';
  * ```
  */
 export function useActive(options: ActiveOptions = {}): Attachment<HTMLElement> {
-  const router = options?.router || getRouter();
-
-  return (element) => {
-    if (!ensureActionRouter(element, router)) return;
-
-    const _options = $derived(options);
-    const _path: string | null = $derived(options?.path || element.getAttribute('data-path') || element.getAttribute('href'));
-    const _name: RouteName | null = $derived(options?.name || element.getAttribute('data-name'));
-
-    const caseSensitive = $derived(_options?.caseSensitive ?? router.options?.caseSensitive);
-    const matchName = $derived(doNameMatch(router.route, _name, { caseSensitive, exact: _options?.exact }));
-
-    const location = $derived(router.location?.path);
-    const matcher = $derived(_path ? new Matcher(_path) : undefined);
-    const matchPath = $derived(doPathMatch(matcher, _name, location, _options?.exact));
-
-    const match = $derived(matchName || matchPath);
-
-    const originalStyle = $derived(getOriginalStyle(element, _options?.style));
-
-    $effect(() => {
-      if (match) activeStyles(element, _options);
-      else restoreStyles(element, originalStyle, _options);
-    });
-
-    $effect(() => {
-      ensurePathName(element, { path: _path, name: _name });
-    });
-  };
+  return element => active(element, options).destroy;
 }

src/lib/attachment/link.attachment.svelte.ts

@@ -1,9 +1,8 @@
 import type { Attachment } from 'svelte/attachments';
 
-import type { LinkNavigateFunction, LinkNavigateOptions } from '~/models/link.model.js';
+import type { LinkNavigateOptions } from '~/models/link.model.js';
 
-import { ensureLinkRouter, getNavigateFunction, getResolveFunction, normalizeLinkAttributes } from '~/models/link.model.js';
-import { getRouter } from '~/router/context.svelte.js';
+import { link } from '~/action/link.action.svelte.js';
 
 /**
  * A svelte attachment to add to an element to navigate to a new location using the router.
@@ -38,27 +37,5 @@ import { getRouter } from '~/router/context.svelte.js';
  * ```
  */
 export function useLink(options: LinkNavigateOptions = {}): Attachment<HTMLElement> {
-  return (element) => {
-    const _options = $state(normalizeLinkAttributes(element, options));
-
-    const router = _options?.router || getRouter();
-    if (!ensureLinkRouter(element, router)) return;
-
-    const navigate = $derived<LinkNavigateFunction | undefined>(getNavigateFunction(router, options));
-    const navigateHandler = async (event: MouseEvent | KeyboardEvent) => navigate?.(event, element);
-
-    const resolve = $derived(getResolveFunction(navigate, _options));
-    const resolveHandler = async (event: FocusEvent | PointerEvent) => resolve(event, element);
-
-    element.addEventListener('click', navigateHandler);
-    element.addEventListener('keydown', navigateHandler);
-    element.addEventListener('pointerenter', resolveHandler);
-    element.addEventListener('focus', resolveHandler);
-    return () => {
-      element.removeEventListener('click', navigateHandler);
-      element.removeEventListener('keydown', navigateHandler);
-      element.removeEventListener('pointerenter', resolveHandler);
-      element.removeEventListener('focus', resolveHandler);
-    };
-  };
+  return element => link(element, options).destroy;
 }

src/lib/models/link.model.ts

@@ -192,8 +192,10 @@ export interface LinkNavigateOptions<Name extends RouteName = RouteName, Path ex
   disabled?: boolean;
 };
 
-export function getResolveFunction(navigate?: LinkNavigateFunction, options?: { resolve?: boolean | string }) {
-  return async (event: FocusEvent | PointerEvent, node: HTMLElement) => {
+export type LinkResolveFunction = (event: FocusEvent | PointerEvent, node: HTMLElement) => Promise<void>;
+
+export function getResolveFunction(navigate?: LinkNavigateFunction, options?: { resolve?: boolean | string }): LinkResolveFunction {
+  return async (event, node) => {
     const resolve = options?.resolve;
     if (!resolve || !navigate) return;