Bienvenue sur Intlayer v9 ! Cette version majeure marque une étape importante dans la simplification du chemin de migration vers Intlayer avec les packages d'adaptateurs de compatibilité pour les principales bibliothèques i18n (react-i18next, next-intl, vue-i18n, etc.) et ajoute la prise en charge de structures de contenu riches : les Collections, les Variants et les Dynamic Records.

Table des matières

Packages d'adaptateurs de compatibilité

La migration vers Intlayer depuis les bibliothèques i18n populaires est désormais plus facile que jamais. Nous avons créé cinq packages de compatibilité qui exposent les mêmes API publiques exactes que les bibliothèques i18n standard, mais délèguent tout le travail de traduction à Intlayer au moment de l'exécution.

Exposer la même API publique avec un typage strict

En remplaçant les imports, vous bénéficiez de tous les avantages d'Intlayer (y compris la sécurité de type au moment de la compilation par rapport à vos dictionnaires réels) avec des modifications de code minimales :

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

Par exemple, changez simplement :

Copier le code

Copier le code dans le presse-papiers

import { useTranslation } from "react-i18next";

import { useTranslation } from "react-i18next";

en :

Copier le code

Copier le code dans le presse-papiers

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

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

Vos clés seront désormais strictement typées par rapport à vos dictionnaires Intlayer, offrant une auto-complétion complète des chemins par points dans votre IDE !

Plugins d'alias de Bundler (Vite, Next.js, Turbopack)

Pour permettre la migration sans réécrire manuellement toutes vos déclarations d'import, chaque package d'adaptateur de compatibilité inclut un plugin de bundler personnalisé (Vite ou Next.js) sous le sous-chemin /plugin.

Ces plugins réécrivent automatiquement les imports existants (par exemple react-i18next ou next-intl) vers leurs équivalents @intlayer/* au moment de la compilation.

Exemple Next.js (Webpack / Turbopack)

Au lieu de withIntlayer, enveloppez votre configuration Next.js avec le plugin de compatibilité :

next.config.ts

Copier le code

Copier le code dans le presse-papiers

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);

Exemple Vite (React, Vue, Solid, Svelte)

vite.config.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Résolveur d'exécution mutualisé

Tous les adaptateurs de compatibilité acheminent désormais la résolution des traductions via un seul analyseur d'exécution hautement optimisé : @intlayer/core/messageFormat.

Interpoler le message : Résout les {{var}} standard (espaces et chemins par points), les arguments formatés ICU ({v, number, percent} etc.) et les templates {var} bruts.
Résolveur de nœuds de message : Résout les nœuds imbriqués : insert(), plural() (règles de pluriel CLDR), enu() (énumération), gender(), les balises HTML, les tableaux et les nœuds de fonction appelables.
Analyseur de balises tokenisées : Prend en charge les balises XML/HTML en ligne et les balises numérotées (par exemple, <1>children</1>) pour permettre le rendu de texte riche dès la première utilisation.

Spécification des fonctionnalités : Collections, Variants & Dynamic Records

Intlayer v9 va au-delà des objets clé-valeur statiques, permettant aux dictionnaires de déclarer des structures de mise en page dynamiques entièrement typées de bout en bout.

1. Collections

Définissez une liste d'éléments ordonnés gérée par un CMS (par exemple, FAQ, produits ou listes de blogs) :

faq.content.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Utilisation :

Copier le code

Copier le code dans le presse-papiers

// Récupérer tous les élémentsconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Récupérer un seul élément par indexconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

// Récupérer tous les élémentsconst allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]// Récupérer un seul élément par indexconst faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }

2. Variants

Proposez des tests A/B, des en-têtes saisonniers, des feature flags ou des pages de destination personnalisées :

hero.content.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Utilisation :

Copier le code

Copier le code dans le presse-papiers

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

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

3. Dynamic Records

Définissez des dictionnaires dont les entrées sont chargées dynamiquement au moment de l'exécution via des ID de requête :

product.content.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Utilisation :

Copier le code

Copier le code dans le presse-papiers

// Récupère uniquement l'élément demandé dynamiquement (nécessite Suspense)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

// Récupère uniquement l'élément demandé dynamiquement (nécessite Suspense)const product = useIntlayer("product-copy", {  id: "prod_123",  category: "books",});

Chargement dynamique et optimisations de la taille du bundle

Pour maintenir les bundles extrêmement petits, Intlayer v9 prend en charge le chargement paresseux dynamique.

Dans votre configuration, définissez importMode sur 'dynamic' ou 'fetch' :

intlayer.config.ts

Copier le code

Copier le code dans le presse-papiers

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

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

Au moment de la compilation, @intlayer/swc et @intlayer/babel analysent vos fichiers et remplacent les appels useIntlayer / getIntlayer par des wrappers optimisés par tree-shaking (useDictionary / useDictionaryDynamic). Seul le contenu requis pour l'élément de collection, le variant ou la locale sélectionné est chargé, empêchant ainsi votre bundle de production de contenir des traductions inutilisées.

Notes de migration depuis la v8

Si vous effectuez une mise à niveau depuis la v8, notez que la v9 n'inclut pas de changements majeurs (breaking changes). Voici cependant les changements clés :

Locales et dialectes : Si vous utilisez des dépendances i18n externes, ajoutez leurs plugins d'adaptateur de compatibilité respectifs dans votre configuration ou votre setup de bundler pour réécrire automatiquement les imports.
Sélecteurs personnalisés : Lors de l'appel de useIntlayer, le deuxième paramètre est désormais réservé à un objet d'options contenant { locale, item, variant, id }. Si vous passiez auparavant une chaîne de caractères de locale directement, vous pouvez toujours le faire, mais l'utilisation de l'objet d'options est recommandée pour les sélections avancées.

Liens utiles

Language Server Protocol