ナビゲーション

// src/root-layout.tsx
import { href, Outlet } from '@k8ordo/router';
import { ViewTransition } from 'react';

export function RootLayout() {
  return (
    <>
      <nav>
        <a href={href('/')}>Home</a>
        <a href={href('/products')}>Products</a>
      </nav>
      <ViewTransition
        default="none"
        update={{ navigation: 'auto', default: 'none' }}
      >
        <Outlet />
      </ViewTransition>
    </>
  );
}

// src/page-transition.tsx
import { Outlet } from '@k8ordo/router';
import { ViewTransition } from 'react';

export function PageTransition() {
  return (
    <ViewTransition
      default="none"
      update={{
        'navigation-push': 'slide-forward',
        'navigation-replace': 'slide-forward',
        'navigation-traverse': 'slide-back',
        default: 'none',
      }}
    >
      <Outlet />
    </ViewTransition>
  );
}

@keyframes slide-in-from-right {
  from {
    opacity: 0;
    translate: 32px 0;
  }
}

@keyframes slide-out-to-left {
  to {
    opacity: 0;
    translate: -32px 0;
  }
}

@keyframes slide-in-from-left {
  from {
    opacity: 0;
    translate: -32px 0;
  }
}

@keyframes slide-out-to-right {
  to {
    opacity: 0;
    translate: 32px 0;
  }
}

::view-transition-old(.slide-forward) {
  animation: 200ms ease-in both slide-out-to-left;
}

::view-transition-new(.slide-forward) {
  animation: 200ms ease-out both slide-in-from-right;
}

::view-transition-old(.slide-back) {
  animation: 200ms ease-in both slide-out-to-right;
}

::view-transition-new(.slide-back) {
  animation: 200ms ease-out both slide-in-from-left;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

// src/article-host.tsx
'use client';

import {
  NavigationGeneration,
  PathnameProvider,
  useInterceptedNavigation,
} from '@k8ordo/router';
import { useDeferredValue, useState } from 'react';

type Article = { title: string; body: string };

const loadArticle = async (url: URL, signal: AbortSignal) => {
  const response = await fetch(`/api${url.pathname}.json`, { signal });
  return (await response.json()) as Article;
};

export function ArticleHost({
  initial,
  pathname,
}: {
  initial: Article;
  pathname: string;
}) {
  const [latest, setLatest] = useState(initial);
  const { generation } = useInterceptedNavigation<Article>({
    claim: (url) => url.pathname.startsWith('/articles/'),
    load: loadArticle,
    apply: setLatest,
  });
  const article = useDeferredValue(latest);
  return (
    <PathnameProvider pathname={pathname}>
      <NavigationGeneration value={generation}>
        <article>
          <h1>{article.title}</h1>
          <p>{article.body}</p>
        </article>
      </NavigationGeneration>
    </PathnameProvider>
  );
}

// src/routes.test.ts
import { expect, it } from 'vitest';

import { routes } from './routes';

it('matches a product page before the catch-all', () => {
  expect(routes.match('/products/42')).toMatchObject({
    pattern: '/products/:id',
    params: { id: '42' },
  });
  expect(routes.match('/no/such/page')?.pattern).toBe('/*');
});

// src/app.browser.test.tsx
import { navigateTo, Router } from '@k8ordo/router';
import { afterEach, beforeEach, expect, it } from 'vitest';
import { render } from 'vitest-browser-react';

import { routes } from './routes';

const interceptEverything = (event: NavigateEvent) => {
  if (event.canIntercept) event.intercept();
};

let runnerUrl: string;

beforeEach(() => {
  runnerUrl = location.href;
});

afterEach(async () => {
  navigation.addEventListener('navigate', interceptEverything);
  try {
    await navigation.navigate(runnerUrl, { history: 'replace' }).finished;
  } finally {
    navigation.removeEventListener('navigate', interceptEverything);
  }
});

it('shows the product page once finished resolves', async () => {
  await render(<Router routes={routes} />);

  await navigateTo('/products/:id', { id: '1' }).finished;

  expect(document.querySelector('h1')?.textContent).toBe('Product 1');
});