Zurück

gt-tanstack-start@0.1.0

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

Übersicht

gt-tanstack-start ist ein erster Ansatz, i18n-Unterstützung speziell für TanStack Start bereitzustellen.

Diese Bibliothek ist experimentell. Sie steckt noch in den Kinderschuhen, und wir sind sehr offen für Feedback. Wenn Sie Übersetzungen in einer Produktionsumgebung mit TanStack benötigen, empfehlen wir Ihnen derzeit, gt-react zu verwenden.

Was ist enthalten

  • initializeGT() — Konfiguriert den i18n-Manager für TanStack Start. Rufen Sie diese Funktion einmal am Anfang Ihrer Root-Route-Datei auf.
  • GTProvider — Bindet Ihre App in einen Übersetzungskontext ein, mit integrierter SSR-Erkennung und auf TanStack Start zugeschnittener Locale-Auflösung.
  • getTranslations() — Eine asynchrone Funktion, die in Ihrem Root-Loader aufgerufen werden soll, um Übersetzungen an den Provider zu übergeben.
  • getLocale() — Gibt die aufgelöste Locale für die aktuelle Anfrage zurück.
  • <T>, <Var>, <LocaleSelector> — Aus gt-react re-exportiert, sodass Sie alles aus einem einzigen Paket importieren können.

Schnellstart

Installieren

npm install gt-tanstack-start

gt.config.json konfigurieren

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

Umgebungsvariablen setzen

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

Translation Loader erstellen

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

Root-Route einrichten

// __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>
  );
}

Inhalte übersetzen

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

export default function Page() {
  return (
    <T>
      <p>Dies wird automatisch übersetzt.</p>
    </T>
  );
}

Ausblick

Dies ist v0.1.0 – das Fundament steht, aber darauf lässt sich noch einiges aufbauen. SSG und Locale-Routing gehören zu den nächsten Funktionen, die wir in kommenden Versionen hinzufügen möchten.

Wenn Sie Interesse haben, es auszuprobieren, freuen wir uns sehr über Feedback. Schauen Sie auf unserem Discord vorbei oder eröffnen Sie ein Issue auf GitHub.