refactor(Link): Use isRouteActive() and take style calculation to a s… (#91)

* refactor(Link): Use isRouteActive() and take style calculation to a separate, importable function

* Update src/lib/utils.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: webJose

src/lib/Link/Link.svelte

@@ -4,9 +4,10 @@
 	import { location } from '$lib/core/Location.js';
 	import { resolveHashValue } from '$lib/core/resolveHashValue.js';
 	import { getLinkContext, type ILinkContext } from '$lib/LinkContext/LinkContext.svelte';
+	import { isRouteActive } from '$lib/public-utils.js';
 	import { getRouterContext } from '$lib/Router/Router.svelte';
 	import type { ActiveState, Hash, RouteStatus } from '$lib/types.js';
-	import { assertAllowedRoutingMode } from '$lib/utils.js';
+	import { assertAllowedRoutingMode, joinStyles } from '$lib/utils.js';
 	import { type Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
@@ -92,7 +93,7 @@
 	const calcReplace = $derived(replace ?? linkContext?.replace ?? false);
 	const calcPreserveQuery = $derived(preserveQuery ?? linkContext?.preserveQuery ?? false);
 	const calcPrependBasePath = $derived(prependBasePath ?? linkContext?.prependBasePath ?? false);
-	const isActive = $derived(!!router?.routeStatus[activeState?.key ?? '']?.match);
+	const isActive = $derived(isRouteActive(router, activeState?.key));
 	const calcHref = $derived(
 		calculateHref(
 			{
@@ -111,29 +112,12 @@
 		const newState = calculateState(resolvedHash, typeof state === 'function' ? state() : state);
 		location.goTo(calcHref, { state: newState, replace: calcReplace });
 	}
-
-	function styleString() {
-		let baseStyle = style ? style.trim() : '';
-		if (baseStyle && !baseStyle.endsWith(';')) {
-			baseStyle += ';';
-		}
-		if (!activeState?.style) {
-			return baseStyle || undefined;
-		}
-		if (typeof activeState.style === 'string') {
-			return baseStyle ? `${baseStyle} ${activeState.style}` : activeState.style;
-		}
-		const calculatedStyle = Object.entries(activeState.style)
-			.map(([key, value]) => `${key}: ${value}`)
-			.join('; ');
-		return baseStyle ? `${baseStyle} ${calculatedStyle}` : calculatedStyle;
-	}
 </script>
 
 <a
 	href={calcHref}
 	class={[cssClass, (isActive && activeState?.class) || undefined]}
-	style={isActive ? styleString() : style}
+	style={isActive ? joinStyles(style, activeState?.style) : style}
 	aria-current={isActive ? (activeState?.ariaCurrent ?? 'page') : undefined}
 	onclick={handleClick}
 	{...restProps}

src/lib/utils.ts

@@ -1,5 +1,6 @@
-import type { Hash } from "./types.js";
-import { routingOptions } from "./core/options.js"; 
+import type { ActiveState, Hash } from "./types.js";
+import { routingOptions } from "./core/options.js";
+import type { HTMLAnchorAttributes } from "svelte/elements";
 
 /**
  * Asserts that the specified routing mode is allowed by the current routing options.
@@ -18,3 +19,29 @@ export function assertAllowedRoutingMode(hash: Hash) {
         throw new Error("Multi-hash routing has been disallowed by a library extension.");
     }
 }
+
+/**
+ * Joins two style definitions into a single style definition.
+ * 
+ * @param startingStyle The base style definition.
+ * @param addedStyle The style definition to add to the base style definition.
+ * @returns The combined style definition, or `undefined` if both inputs are empty or `undefined`.
+ */
+export function joinStyles(
+    startingStyle: HTMLAnchorAttributes["style"],
+    addedStyle: ActiveState["style"],
+): string | undefined {
+    let baseStyle = startingStyle ? startingStyle.trim() : '';
+    if (baseStyle && !baseStyle.endsWith(';')) {
+        baseStyle += ';';
+    }
+    if (!addedStyle) {
+        return baseStyle || undefined;
+    }
+    if (typeof addedStyle === 'string') {
+        return baseStyle ? `${baseStyle} ${addedStyle}` : addedStyle;
+    }
+    const calculatedStyle = Object.entries(addedStyle)
+        .reduce((acc, [key, value]) => acc + `${key}: ${value}; `, '');
+    return baseStyle ? `${baseStyle} ${calculatedStyle}` : calculatedStyle;
+}