Router

import { createRouter } from 'ranui';

// ۱. ساخت مسیریاب با مسیرهای محافظت‌شده و گذارهای SPA
const router = createRouter({
  mode: 'history',
  viewTransition: 'spa',
  routes: [
    { path: '/', exact: true, meta: { title: 'Home' } },
    { path: '/about', meta: { title: 'About' } },
    { path: '/dashboard', meta: { title: 'Dashboard', requiresAuth: true } },
    { path: '/login', meta: { title: 'Login' } },
  ],
});

// ۲. نگهبان احراز هویت — کاربر واردنشده را هدایت کن
router.beforeEach((to, from, next) => {
  if (to.meta?.requiresAuth && !sessionStorage.getItem('token')) {
    next('/login');
  } else {
    next();
  }
});

// ۳. پس از هر ناوبری عنوان صفحه را به‌روز کن و آمار بفرست
router.afterEach((to) => {
  document.title = to.meta?.title ?? 'App';
});
router.onRouteChange((to) => {
  analytics.track(to.fullPath);
});

<!-- مسیریاب را سوار کن، پیوندها را بگذار، مسیرها را اعلام کن -->
<r-router>
  <nav>
    <r-link href="/">خانه</r-link>
    <r-link href="/about">درباره</r-link>
    <r-link href="/dashboard">داشبورد</r-link>
  </nav>

  <r-route path="/" exact><h2>خانه</h2></r-route>
  <r-route path="/about"><h2>درباره</h2></r-route>
  <r-route path="/dashboard"><h2>داشبورد</h2></r-route>
  <r-route path="/login"><h2>ورود</h2></r-route>
</r-router>

/* گذار SPA — محو متقابل میان مسیرها */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-old(root) {
  animation: 200ms ease-out fade-out;
}
::view-transition-new(root) {
  animation: 200ms ease-in fade-in;
}

/users            با /users، /users/42، /users/42/profile می‌خواند
/users (exact)    فقط با /users می‌خواند
/users/:id        مقدار :id را می‌گیرد → params.id
/*                با همه‌چیز می‌خواند

<r-route path="/settings" src="/pages/settings.js"></r-route>

// pages/settings.js
export default function renderSettings(host) {
  host.textContent = 'Settings page';
  return () => {
    /* پاک‌سازی اختیاری، هنگام ترک مسیر اجرا می‌شود */
  };
}

<r-link href="/about">درباره</r-link>
<r-link href="/settings" replace>تنظیمات</r-link>
<r-link href="https://github.com">GitHub ↗</r-link>

import { createRouter } from 'ranui';

const router = createRouter({
  mode: 'history', // 'history' (پیش‌فرض) | 'hash'
  base: '/app', // پیشوند '/app' را از همه مسیرهای درونی بردار
  routes: [
    { path: '/', exact: true, meta: { title: 'Home' } },
    { path: '/users/:id', meta: { requiresAuth: true } },
  ],
  viewTransition: 'spa', // 'spa' | 'mpa' | 'both' | false
});

router.push('/users/42');
router.replace('/login');
router.back();
router.go(-2);

import { useRouter } from 'ranui';

const router = useRouter();
router?.push('/about');

const unsubscribe = router.beforeEach((to, from, next) => {
  if (to.meta?.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

// برداشتن نگهبان در آینده:
unsubscribe();

router.afterEach((to, from) => {
  document.title = to.meta?.title ?? 'App';
});

router.onRouteChange((to, from) => {
  analytics.track(to.fullPath);
});

const router = createRouter({ viewTransition: 'spa' }); // یا true

/* محو متقابل پیش‌فرض */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-old(root) {
  animation: 200ms ease-out fade-out;
}
::view-transition-new(root) {
  animation: 200ms ease-in fade-in;
}

const router = createRouter({ viewTransition: 'mpa' });

import { enableMpaViewTransitions } from 'ranui';

const cleanup = enableMpaViewTransitions();
// در صورت نیاز cleanup() تگ <style> تزریق‌شده را برمی‌دارد

// pageswap روی سندی که دارد می‌رود، پیش از unload فرستاده می‌شود
router.onPageSwap((e) => {
  const type = e.activation?.navigationType; // 'push' | 'replace' | 'traverse'
  if (type === 'traverse') e.viewTransition?.skipTransition();
});

// pagereveal روی سندی که وارد می‌شود، پیش از نخستین رسم فرستاده می‌شود
router.onPageReveal((e) => {
  console.log('new page ready');
});

const router = createRouter({ viewTransition: 'both' });

<!-- صفحه فهرست -->
<div class="card" style="view-transition-name: profile-42">
  <img src="avatar.jpg" />
  <span>Jane Doe</span>
</div>

<!-- صفحه جزئیات -->
<div class="profile-header" style="view-transition-name: profile-42">
  <img src="avatar.jpg" />
  <h1>Jane Doe</h1>
</div>

/* رویکرد CSS — یک قاعده برای هر کارت */
.card[data-id='1'] {
  view-transition-name: card-1;
}
.card[data-id='42'] {
  view-transition-name: card-42;
}

// رویکرد JS — نام را درست پیش از ناوبری تعیین کن
function navigateToProfile(id) {
  const card = document.querySelector(`.card[data-id="${id}"]`);
  card.style.viewTransitionName = `profile-${id}`;
  router.push(`/profiles/${id}`);
}

// بی‌درنگ (و همگام) تعیین کنید تا مرورگر آن را بگیرد
const id = router.currentRoute?.params.id;
document.querySelector('.profile-header').style.viewTransitionName = `profile-${id}`;

const pages = ['/', '/step-1', '/step-2', '/step-3'];

router.beforeEach((to, from, next) => {
  const toIdx = pages.indexOf(to.path);
  const fromIdx = pages.indexOf(from?.path ?? '');
  document.documentElement.dataset.navDir = toIdx >= fromIdx ? 'forward' : 'back';
  next();
});

@keyframes slide-from-right {
  from {
    translate: 100% 0;
  }
}
@keyframes slide-from-left {
  from {
    translate: -100% 0;
  }
}
@keyframes slide-to-right {
  to {
    translate: 100% 0;
  }
}
@keyframes slide-to-left {
  to {
    translate: -100% 0;
  }
}

[data-nav-dir='forward']::view-transition-old(root) {
  animation: 300ms ease slide-to-left;
}
[data-nav-dir='forward']::view-transition-new(root) {
  animation: 300ms ease slide-from-right;
}
[data-nav-dir='back']::view-transition-old(root) {
  animation: 300ms ease slide-to-right;
}
[data-nav-dir='back']::view-transition-new(root) {
  animation: 300ms ease slide-from-left;
}

interface RouteLocation {
  path: string; // مثلاً '/users/42'
  params: Record<string, string>; // مثلاً { id: '42' }
  query: Record<string, string>; // مثلاً { tab: 'profile' }
  fullPath: string; // مثلاً '/users/42?tab=profile'
}

type ViewTransitionMode = 'spa' | 'mpa' | 'both';

interface RouterConfig {
  mode?: 'history' | 'hash';
  base?: string;
  routes?: RouteConfig[];
  viewTransition?: boolean | ViewTransitionMode;
}

interface RouteConfig {
  path: string;
  exact?: boolean;
  meta?: Record<string, unknown>;
  children?: RouteConfig[];
}

type NavigationGuard = (
  to: RouteLocation,
  from: RouteLocation | null,
  next: (redirect?: string | false) => void,
) => void;

type RouteChangeHandler = (to: RouteLocation, from: RouteLocation | null) => void;