組み合わせ

// src/routes/[locale]/layout.tsx
import { UIProvider } from '@k8ordo/ui';
import { dictionaries } from '@k8ordo/ui/i18n';
import type { ReactNode } from 'react';

import { locales } from '../../i18n';

export const { paramsSchema } = locales;

export default function LocaleLayout({ children }: { children: ReactNode }) {
  return (
    <UIProvider messages={dictionaries[locales.getLocale()]}>
      {children}
    </UIProvider>
  );
}

// src/messages/talk.ts
import { message } from '@k8ordo/i18n';

export const titleRequired = message({
  ja: 'タイトルを入力してください',
  en: 'Enter a title',
});

export const titleTooLong = message({
  ja: (max: number) => `${String(max)} 文字以内で入力してください`,
  en: (max) => `Use at most ${String(max)} characters`,
});

// src/routes/[locale]/talks/new/_parts/schema.ts
import * as z from 'zod';

import * as m from '../../../../../messages';

export const talkSchema = z.object({
  title: z
    .string()
    .min(1, { error: m.talk.titleRequired })
    .max(120, { error: () => m.talk.titleTooLong(120) }),
});

// src/routes/[locale]/talks/new/page.tsx
import { formFields } from '@k8ordo/form/server';

import { locales } from '../../../../i18n';
import { createTalk } from './_parts/actions';
import { talkSchema } from './_parts/schema';
import { TalkForm } from './_parts/talk-form';

export default function NewTalkPage() {
  return (
    <TalkForm
      action={createTalk.bind(null, locales.getLocale())}
      fields={formFields(talkSchema)}
    />
  );
}

// src/routes/[locale]/talks/new/_parts/actions.ts
'use server';

import { parseForm } from '@k8ordo/form/server';
import type { FormState } from '@k8ordo/form/server';

import { saveTalk } from '../../../../../db/talks';
import { locales } from '../../../../../i18n';
import { talkSchema } from './schema';

export async function createTalk(
  locale: string,
  _previous: FormState,
  formData: FormData,
): Promise<FormState> {
  const parsed = locales.run(
    locales.is(locale) ? locale : locales.default,
    () => parseForm(talkSchema, formData),
  );
  if (parsed.success) await saveTalk(parsed.data);
  return parsed.state;
}

// src/routes/page.tsx
import { parseAcceptLanguage } from '@k8ordo/i18n';
import type { PageProps } from '@k8ordo/router';

import { locales } from '../i18n';
import { href } from '../links';
import { RedirectTo } from './_parts/redirect-to';

export default function RootPage({ request }: PageProps<'/'>) {
  const locale = locales.negotiate(
    parseAcceptLanguage(request.headers.get('accept-language')),
  );

  return <RedirectTo to={href('/:locale', { locale })} />;
}

// src/routes/_parts/redirect-to.tsx
'use client';

import { useEffect } from 'react';

export function RedirectTo({ to }: { to: string }) {
  useEffect(() => {
    navigation.navigate(to, { history: 'replace' });
  }, [to]);

  return <a href={to}>{to}</a>;
}

// src/messages/messages.test.ts
import { describe, expect, expectTypeOf, it } from 'vitest';

import { locales } from '../i18n';
import * as cart from './cart';
import * as nav from './nav';

describe('messages', () => {
  it('renders in the default locale unless run names another', () => {
    expect(nav.home()).toBe('ホーム');
    expect(locales.run('en', () => nav.home())).toBe('Home');
  });

  it('keeps the locale across awaits', async () => {
    const text = await locales.run('en', async () => {
      await Promise.resolve();
      return nav.home();
    });
    expect(text).toBe('Home');
  });

  it('types the arguments of a message', () => {
    expectTypeOf(cart.items).parameters.toEqualTypeOf<[count: number]>();
  });
});

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

import { locales } from './i18n';

it('accepts only the listed locales', () => {
  const { validate } = locales.paramsSchema['~standard'];
  expect(locales.run('ja', () => validate({ locale: 'en' }))).toStrictEqual({
    value: { locale: 'en' },
  });
  expect(validate({ locale: 'fr' })).toMatchObject({
    issues: [{ path: ['locale'] }],
  });
});

// src/messages/messages.browser.test.ts
import { afterEach, expect, it } from 'vitest';

import { locales } from '../i18n';
import * as nav from './nav';

const initial = location.pathname;

afterEach(() => {
  history.replaceState(null, '', initial);
});

it('renders in the locale the URL spells', () => {
  history.replaceState(null, '', '/en/cart');
  expect(locales.getLocale()).toBe('en');
  expect(nav.home()).toBe('Home');
});