تكامل Svelte: توثيق usePathname

تعيد دالة usePathname مسار المتصفح الحالي (pathname) بعد إزالة جزء الـ locale منه، وتُرجع ذلك كمخزن (store) من نوع Readable<string> في Svelte. يُعد هذا مفيدًا لبناء تنقل (navigation) يراعي الـ locale — على سبيل المثال، لتحديد عنصر التنقل النشط حاليًا — دون الحاجة إلى إزالة بادئة الـ locale يدويًا.

استيراد usePathname في Svelte

import { usePathname } from "svelte-intlayer";

نظرة عامة

تقوم usePathname بإنشاء store قابل للقراءة في Svelte يقرأ من window.location.pathname، ويزيل بادئة الـ locale باستخدام getPathWithoutLocale، ثم يُصدر قيمة جديدة كلما أطلق المتصفح حدث popstate (التنقل للخلف/للأمام). اشترك في هذا الـ store باستخدام صيغة $ داخل المكونات (components).

الاستخدام

<script lang="ts">  import { usePathname } from "svelte-intlayer";  export let href: string;  export let label: string;  const pathname = usePathname();</script><a {href} aria-current={$pathname === href ? "page" : undefined}>  {label}</a>

القيمة المُرجعة

السلوك

• إزالة الـ Locale: تزيل مقطع الـ locale الأمامي (مثلًا /ar/dashboard ← /dashboard).
• تفاعلية (Reactive): تُصدر قيمة جديدة عند كل حدث popstate (التنقل للخلف / للأمام في المتصفح).
• آمنة في SSR: تعيد "" عندما يكون window غير متوفر.
• التنظيف (Cleanup): تتم إزالة مستمع (listener) الـ popstate تلقائيًا عندما يلغي آخر مشترك (subscriber) اشتراكه.

مثال

<script lang="ts">  import { usePathname } from "svelte-intlayer";  const links = [    { href: "/dashboard", label: "لوحة التحكم" },    { href: "/settings", label: "الإعدادات" },  ];  const pathname = usePathname();</script><nav>  {#each links as link}    <a      href={link.href}      style:font-weight={$pathname === link.href ? "bold" : "normal"}    >      {link.label}    </a>  {/each}</nav>

مواضيع ذات صلة

• useLocale — الـ locale الحالي + مبدّل الـ locale
• getPathWithoutLocale — الأداة الأساسية المُستخدمة داخل هذا الـ hook