@real-router/svelte 0.2.5 → 0.2.7

package/dist/RouterProvider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getNavigator } from "@real-router/core";
   import { createRouteSource } from "@real-router/sources";
-  import { createRouteAnnouncer } from "dom-utils";
+  import { createRouteAnnouncer } from "./dom-utils";
   import { setContext } from "svelte";
 
   import { createReactiveSource } from "./createReactiveSource.svelte";

package/dist/actions/link.svelte.js

@@ -1,6 +1,6 @@
 import { getContext } from "svelte";
 import { ROUTER_KEY } from "../context";
-import { shouldNavigate, applyLinkA11y } from "dom-utils";
+import { shouldNavigate, applyLinkA11y } from "../dom-utils";
 /**
  * Factory function that captures router context during component initialization.
  * Must be called during component init (not inside event handlers or effects).

package/dist/components/Link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useIsActiveRoute } from "../composables/useIsActiveRoute.svelte";
   import { useRouter } from "../composables/useRouter.svelte";
-  import { shouldNavigate, buildHref, buildActiveClassName } from "dom-utils";
+  import { shouldNavigate, buildHref, buildActiveClassName } from "../dom-utils";
 
   import type { NavigationOptions, Params } from "@real-router/core";
   import type { Snippet } from "svelte";

package/dist/dom-utils/index.d.ts

@@ -0,0 +1,3 @@
+export { createRouteAnnouncer } from "./route-announcer";
+export { shouldNavigate, buildHref, buildActiveClassName, applyLinkA11y, } from "./link-utils";
+export type { RouteAnnouncerOptions } from "./route-announcer";

package/dist/dom-utils/index.js

@@ -0,0 +1,2 @@
+export { createRouteAnnouncer } from "./route-announcer";
+export { shouldNavigate, buildHref, buildActiveClassName, applyLinkA11y, } from "./link-utils";

package/dist/dom-utils/link-utils.d.ts

@@ -0,0 +1,5 @@
+import type { Router, Params } from "@real-router/core";
+export declare function shouldNavigate(evt: MouseEvent): boolean;
+export declare function buildHref(router: Router, routeName: string, routeParams: Params): string | undefined;
+export declare function buildActiveClassName(isActive: boolean, activeClassName: string | undefined, baseClassName: string | undefined): string | undefined;
+export declare function applyLinkA11y(element: HTMLElement): void;

package/dist/dom-utils/link-utils.js

@@ -0,0 +1,41 @@
+export function shouldNavigate(evt) {
+    return (evt.button === 0 &&
+        !evt.metaKey &&
+        !evt.altKey &&
+        !evt.ctrlKey &&
+        !evt.shiftKey);
+}
+// Lives in dom-utils (not core/utils) because buildUrl is injected by browser-plugin via extendRouter()
+export function buildHref(router, routeName, routeParams) {
+    try {
+        const buildUrl = router.buildUrl;
+        if (buildUrl) {
+            return buildUrl(routeName, routeParams);
+        }
+        return router.buildPath(routeName, routeParams);
+    }
+    catch {
+        console.error(`[real-router] Route "${routeName}" is not defined. The element will render without an href attribute.`);
+        return undefined;
+    }
+}
+export function buildActiveClassName(isActive, activeClassName, baseClassName) {
+    if (isActive && activeClassName) {
+        return baseClassName
+            ? `${baseClassName} ${activeClassName}`.trim()
+            : activeClassName;
+    }
+    return baseClassName ?? undefined;
+}
+export function applyLinkA11y(element) {
+    if (element instanceof HTMLAnchorElement ||
+        element instanceof HTMLButtonElement) {
+        return;
+    }
+    if (!element.getAttribute("role")) {
+        element.setAttribute("role", "link");
+    }
+    if (!element.getAttribute("tabindex")) {
+        element.setAttribute("tabindex", "0");
+    }
+}

package/dist/dom-utils/route-announcer.d.ts

@@ -0,0 +1,8 @@
+import type { Router, State } from "@real-router/core";
+export interface RouteAnnouncerOptions {
+    prefix?: string;
+    getAnnouncementText?: (route: State) => string;
+}
+export declare function createRouteAnnouncer(router: Router, options?: RouteAnnouncerOptions): {
+    destroy: () => void;
+};

package/dist/dom-utils/route-announcer.js

@@ -0,0 +1,89 @@
+const CLEAR_DELAY = 7000;
+const SAFARI_READY_DELAY = 100;
+const ANNOUNCER_ATTR = "data-real-router-announcer";
+const INTERNAL_ROUTE_PREFIX = "@@";
+const VISUALLY_HIDDEN = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0";
+export function createRouteAnnouncer(router, options) {
+    const prefix = options?.prefix ?? "Navigated to ";
+    const getCustomText = options?.getAnnouncementText;
+    let isInitialNavigation = true;
+    let isReady = false;
+    let isDestroyed = false;
+    let lastAnnouncedText = "";
+    let clearTimeoutId;
+    const announcer = getOrCreateAnnouncer();
+    const safariTimeoutId = setTimeout(() => {
+        isReady = true;
+    }, SAFARI_READY_DELAY);
+    const unsubscribe = router.subscribe(({ route }) => {
+        if (isInitialNavigation) {
+            isInitialNavigation = false;
+            return;
+        }
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (isDestroyed) {
+                    return;
+                }
+                const text = resolveText(route, prefix, getCustomText);
+                if (text && text !== lastAnnouncedText && isReady) {
+                    lastAnnouncedText = text;
+                    clearTimeout(clearTimeoutId);
+                    announcer.textContent = text;
+                    clearTimeoutId = setTimeout(() => {
+                        announcer.textContent = "";
+                        lastAnnouncedText = "";
+                    }, CLEAR_DELAY);
+                    manageFocus();
+                }
+            });
+        });
+    });
+    return {
+        destroy() {
+            isDestroyed = true;
+            unsubscribe();
+            clearTimeout(clearTimeoutId);
+            clearTimeout(safariTimeoutId);
+            removeAnnouncer();
+        },
+    };
+}
+function getOrCreateAnnouncer() {
+    const existing = document.querySelector(`[${ANNOUNCER_ATTR}]`);
+    if (existing) {
+        return existing;
+    }
+    const element = document.createElement("div");
+    element.setAttribute("style", VISUALLY_HIDDEN);
+    element.setAttribute("aria-live", "assertive");
+    element.setAttribute("aria-atomic", "true");
+    element.setAttribute(ANNOUNCER_ATTR, "");
+    document.body.prepend(element);
+    return element;
+}
+function removeAnnouncer() {
+    document.querySelector(`[${ANNOUNCER_ATTR}]`)?.remove();
+}
+function resolveText(route, prefix, getCustomText) {
+    if (getCustomText) {
+        return getCustomText(route);
+    }
+    const h1 = document.querySelector("h1");
+    const h1Text = h1?.textContent.trim() ?? "";
+    const routeName = route.name.startsWith(INTERNAL_ROUTE_PREFIX)
+        ? ""
+        : route.name;
+    const rawText = h1Text || document.title || routeName || globalThis.location.pathname;
+    return `${prefix}${rawText}`;
+}
+function manageFocus() {
+    const h1 = document.querySelector("h1");
+    if (!h1) {
+        return;
+    }
+    if (!h1.hasAttribute("tabindex")) {
+        h1.setAttribute("tabindex", "-1");
+    }
+    h1.focus({ preventScroll: true });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/svelte",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "description": "Svelte 5 integration for Real-Router",
   "svelte": "./dist/index.js",
@@ -44,10 +44,9 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.44.0",
-    "@real-router/route-utils": "^0.1.10",
-    "@real-router/sources": "^0.4.0",
-    "dom-utils": "^0.2.6"
+    "@real-router/core": "^0.45.0",
+    "@real-router/route-utils": "^0.1.11",
+    "@real-router/sources": "^0.4.1"
   },
   "devDependencies": {
     "@sveltejs/package": "2.5.7",
@@ -59,7 +58,8 @@
     "svelte": "5.54.0",
     "svelte-check": "4.4.5",
     "svelte-eslint-parser": "1.6.0",
-    "@real-router/browser-plugin": "^0.11.3"
+    "@real-router/browser-plugin": "^0.11.4",
+    "dom-utils": "^0.2.7"
   },
   "peerDependencies": {
     "svelte": ">=5.7.0"