Назад

gt-tanstack-start@0.1.0

Ernest McCarter avatarErnest McCarter
gt-tanstack-startv0.1.0tanstack-starttanstacki18ntranslationvite

Обзор

gt-tanstack-start — это первая попытка реализовать поддержку i18n, специально адаптированную под TanStack Start.

Эта библиотека является экспериментальной. Она всё ещё на ранней стадии развития, и мы очень открыты к обратной связи. Если вам нужен перевод в production‑среде с TanStack, мы пока рекомендуем использовать gt-react.

Что входит

  • initializeGT() — Настраивает i18n-менеджер для TanStack Start. Вызовите один раз в верхней части корневого файла маршрута.
  • GTProvider — Оборачивает ваше приложение контекстом переводов со встроенным определением SSR и определением локали, адаптированным под TanStack Start.
  • getTranslations() — Асинхронная функция, которую следует вызывать в корневом загрузчике (loader), чтобы передавать переводы в провайдер.
  • getLocale() — Возвращает определённую локаль для текущего запроса.
  • <T>, <Var>, <LocaleSelector> — Переэкспортируются из gt-react, чтобы вы могли импортировать всё из одного пакета.

Быстрый старт

Установка

npm install gt-tanstack-start

Настройка gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "zh"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}

Установите переменные окружения

VITE_GT_PROJECT_ID=your-project-id
VITE_GT_DEV_API_KEY=your-dev-api-key

Создайте загрузчик переводов

// loadTranslations.ts
export async function loadTranslations(locale: string) {
  const translations = await import(`./src/_gt/${locale}.json`);
  return translations.default;
}

Настройте корневой маршрут

// __root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  getTranslations,
  getLocale,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import { loadTranslations } from '../../loadTranslations';

initializeGT({
  ...gtConfig,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
  loadTranslations,
});

export const Route = createRootRoute({
  loader: async () => ({
    translations: await getTranslations(),
    locale: getLocale(),
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { translations, locale } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider translations={translations}>
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}

Перевод контента

import { T } from 'gt-tanstack-start';

export default function Page() {
  return (
    <T>
      <p>Это переводится автоматически.</p>
    </T>
  );
}

Взгляд вперёд

Это v0.1.0 — фундамент заложен, но впереди ещё много работы. SSG и маршрутизация по локали — одни из следующих функций, которые мы планируем добавить в будущих релизах.

Если вы хотите попробовать это в деле, мы будем рады вашей обратной связи. Загляните к нам в Discord или создайте issue на GitHub.