Willkommen bei Intlayer v9! Dieses Major Release markiert einen riesigen Meilenstein bei der Vereinfachung des Migrationspfads zu Intlayer mit Compat Adapter Packages für wichtige i18n-Bibliotheken (react-i18next, next-intl, vue-i18n, etc.) und fügt Unterstützung für reichhaltige Inhaltsstrukturen hinzu: Collections, Variants und Dynamic Records.

Inhaltsverzeichnis

Compat Adapter Packages

Die Migration von beliebten i18n-Bibliotheken zu Intlayer ist jetzt einfacher denn je. Wir haben fünf Kompatibilitätspakete erstellt, die die exakt gleichen öffentlichen APIs wie Standard-i18n-Bibliotheken bereitstellen, aber die gesamte Übersetzungsarbeit zur Laufzeit an Intlayer delegieren.

Gleiche öffentliche API mit strenger Typisierung

Durch das Ersetzen von Imports erhalten Sie alle Vorteile von Intlayer (einschließlich Compile-Time-Typsicherheit gegenüber Ihren tatsächlichen Dictionaries) mit minimalen Codeänderungen:

@intlayer/i18next
@intlayer/react-i18next
@intlayer/next-intl
@intlayer/next-i18next
@intlayer/vue-i18n

Ändern Sie zum Beispiel einfach:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useTranslation } from "react-i18next";

import { useTranslation } from "react-i18next";

zu:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useTranslation } from "@intlayer/react-i18next";

import { useTranslation } from "@intlayer/react-i18next";

Ihre Keys werden nun streng typisiert gegenüber Ihren Intlayer-Dictionaries, was eine vollständige Dot-Path-Auto-Vervollständigung in Ihrer IDE bietet!

Bundler Alias Plugins (Vite, Next.js, Turbopack)

Um die Migration ohne manuelles Umschreiben aller Import-Statements zu ermöglichen, enthält jedes Compat Adapter Package ein benutzerdefiniertes Bundler-Plugin (Vite oder Next.js) unter dem Subpfad /plugin.

Diese Plugins schreiben bestehende Imports (z.B. react-i18next oder next-intl) zur Build-Zeit automatisch in ihre @intlayer/*-Äquivalente um.

Next.js (Webpack / Turbopack) Beispiel

Anstelle von withIntlayer umschließen Sie Ihre Next.js-Konfiguration mit dem Kompatibilitäts-Plugin:

next.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";import type { NextConfig } from "next";const withIntlayer = createNextI18nPlugin();const nextConfig: NextConfig = {};export default withIntlayer(nextConfig);

import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";import type { NextConfig } from "next";const withIntlayer = createNextI18nPlugin();const nextConfig: NextConfig = {};export default withIntlayer(nextConfig);

Vite (React, Vue, Solid, Svelte) Beispiel

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";export default defineConfig({  plugins: [vueI18nVitePlugin()],});

import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";export default defineConfig({  plugins: [vueI18nVitePlugin()],});

Mutualized Runtime Resolver

Alle Kompatibilitätsadapter leiten die Übersetzungsauflösung nun über einen einzigen, hochoptimierten Runtime-Parser: @intlayer/core/messageFormat.

Interpolate Message: Löst Standard {{var}} (Leerzeichen & Dot-Pfade), ICU-formatierte Argumente ({v, number, percent} etc.) und einfache {var}-Templates auf.
Message Node Resolver: Löst verschachtelte Nodes auf: insert(), plural() (CLDR-Pluralregeln), enu() (Aufzählung), gender(), HTML-Tags, Arrays und aufrufbare Funktions-Nodes.
Tokenized Tag Parser: Unterstützt Inline-XML/HTML-Tags und nummerierte Tags (z.B. <1>children</1>), um Rich-Text-Rendering out-of-the-box zu ermöglichen.

Feature Spec: Collections, Variants & Dynamic Records

Intlayer v9 geht über statische Schlüssel-Wert-Objekte hinaus und ermöglicht es Dictionaries, dynamische Layout-Strukturen zu deklarieren, die End-to-End vollständig typisiert sind.

1. Collections

Definieren Sie eine CMS-verwaltete Liste geordneter Elemente (z.B. FAQs, Produkte oder Bloglisten):

faq.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { t, type Dictionary } from "intlayer";export default {  key: "faq",  content: [    {      question: t({        de: "Was ist Intlayer?",        en: "What is Intlayer?",        fr: "Qu'est-ce qu'Intlayer ?",      }),      answer: t({        de: "Ein i18n-Toolkit.",        en: "An i18n toolkit.",        fr: "Une boîte à outils i18n.",      }),    },  ],} satisfies Dictionary;

import { t, type Dictionary } from "intlayer";export default {  key: "faq",  content: [    {      question: t({        de: "Was ist Intlayer?",        en: "What is Intlayer?",        fr: "Qu'est-ce qu'Intlayer ?",      }),      answer: t({        de: "Ein i18n-Toolkit.",        en: "An i18n toolkit.",        fr: "Une boîte à outils i18n.",      }),    },  ],} satisfies Dictionary;

Verwendung:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

// Alle Elemente abrufenconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Einzelnes Element nach Index abrufenconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

// Alle Elemente abrufenconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Einzelnes Element nach Index abrufenconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

2. Variants

Liefern Sie A/B-Tests, saisonale Header, Feature Flags oder benutzerdefinierte Landing Pages:

hero.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { t, type Dictionary } from "intlayer";export default {  key: "hero-banner",  variant: "default",  content: {    control: t({ de: "Willkommen", en: "Welcome", fr: "Bienvenue" }),    black_friday: t({      de: "Jetzt einkaufen",      en: "Shop now",      fr: "Acheter maintenant",    }),  },} satisfies Dictionary;

import { t, type Dictionary } from "intlayer";export default {  key: "hero-banner",  variant: "default",  content: {    control: t({ de: "Willkommen", en: "Welcome", fr: "Bienvenue" }),    black_friday: t({      de: "Jetzt einkaufen",      en: "Shop now",      fr: "Acheter maintenant",    }),  },} satisfies Dictionary;

Verwendung:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const banner = useIntlayer("hero-banner", { variant: "black_friday" });

const banner = useIntlayer("hero-banner", { variant: "black_friday" });

3. Dynamic Records

Definieren Sie Dictionaries, deren Einträge zur Laufzeit dynamisch über Query-IDs geladen werden:

product.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { t, type Dictionary } from "intlayer";export default {  key: "product-copy",  meta: {    id: "prod_123",    category: "books",  },  content: {    title: t({ de: "Clean Code", en: "Clean Code", fr: "Code Propre" }),  },} satisfies Dictionary;

import { t, type Dictionary } from "intlayer";export default {  key: "product-copy",  meta: {    id: "prod_123",    category: "books",  },  content: {    title: t({ de: "Clean Code", en: "Clean Code", fr: "Code Propre" }),  },} satisfies Dictionary;

Verwendung:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

// Ruft nur das angeforderte Element dynamisch ab (erfordert Suspense)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

// Ruft nur das angeforderte Element dynamisch ab (erfordert Suspense)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

Dynamisches Laden & Optimierungen der Bundle-Größe

Um Bundles extrem klein zu halten, unterstützt Intlayer v9 dynamisches Lazy Loading.

Stellen Sie in Ihrer Konfiguration importMode auf 'dynamic' oder 'fetch' ein:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

export default {  dictionary: {    importMode: "dynamic", // "static" | "dynamic" | "fetch"  },};

export default {  dictionary: {    importMode: "dynamic", // "static" | "dynamic" | "fetch"  },};

Zur Build-Zeit scannen @intlayer/swc und @intlayer/babel Ihre Dateien und ersetzen useIntlayer / getIntlayer-Aufrufe durch tree-shakeable Wrapper (useDictionary / useDictionaryDynamic). Nur der für das ausgewählte Collection-Element, die Variante oder das Locale erforderliche Inhalt wird geladen, wodurch verhindert wird, dass Ihr Produktions-Bundle ungenutzte Übersetzungen enthält.

Migrationshinweise von v8

Wenn Sie von v8 upgraden, beachten Sie, dass v9 keine Breaking Changes enthält. Hier sind jedoch die wichtigsten Änderungen:

Locales & Dialects: Wenn Sie externe i18n-Abhängigkeiten verwenden, fügen Sie deren entsprechende Kompatibilitätsadapter-Plugins in Ihrer Konfiguration oder Ihrem Bundler-Setup hinzu, um Imports automatisch umzuschreiben.
Custom Selectors: Beim Aufruf von useIntlayer ist der zweite Parameter nun für ein Options-Objekt reserviert, das { locale, item, variant, id } enthält. Wenn Sie zuvor direkt einen Locale-String übergeben haben, können Sie dies weiterhin tun, aber die Verwendung des Options-Objekts wird für erweiterte Auswahlen empfohlen.

Nützliche Links

Language Server Protocol