تكامل 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>

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