Nouvelle version Intlayer v6 - Quoi de neuf ?

Bienvenue dans Intlayer v6 ! Cette version se concentre sur les performances, l'expérience développeur et la fiabilité. Voici les points forts, avec des notes de migration et des exemples à copier-coller.

Points forts

• Nouvelle commande : npx intlayer content test pour détecter les traductions manquantes
• Nouvelle option globale autoFill pour générer automatiquement les traductions manquantes
• La commande Fill ignore par défaut les traductions existantes : npx intlayer fill
• Extension VS Code : nouvelle barre d'activité Intlayer (Recherche & Dictionnaires), actions dans la barre d'outils/contexte, auto-révélation, commandes Fill/Test
• Builds 10× plus rapides grâce à la parallélisation des promesses
• Mise en cache distante des dictionnaires pour éviter le rechargement au démarrage de l'application
• Journalisation améliorée : définissez log.mode: 'verbose' pour inspecter le comportement
• Validation renforcée pour éviter les plantages de l'application liés aux dictionnaires
• Mises à jour en direct avec CMS en utilisant build.importMode = 'live' et pnpm intlayer live
• Corrections : intégration Vue.js, adaptateur Lynx, éditeur visuel sous Windows

Nouveau : Tester les traductions manquantes

Auditez rapidement votre projet pour identifier les clés/locales manquantes.

npx intlayer content test

Sortie :

pnpm intlayer content testTraductions manquantes : - blog-data       - Japonais (ja), Coréen (ko), Chinois (zh), Allemand (de), Italien (it) - src/components/BlogPage/blogData.content.ts - demo-page       - Français (fr), Italien (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - Italien (it), Portugais (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsLocales : Anglais (en), Russe (ru), Japonais (ja), Français (fr), Coréen (ko), Chinois (zh), Espagnol (es), Allemand (de), Arabe (ar), Italien (it), Anglais britannique (en-GB), Portugais (pt), Hindi (hi)Locales requises : Anglais (en)Locales manquantes : Japonais (ja), Coréen (ko), Chinois (zh), Allemand (de), Italien (it), Français (fr), Portugais (pt)Locales requises manquantes : -Total des locales manquantes : 7Total des locales requises manquantes : 0

Voir plus d'options dans la documentation CLI : Référence CLI → "Tester les traductions manquantes". Ainsi que le guide Tests.

Nouveau : AutoRemplissage global pour compléter les traductions manquantes

Vous pouvez maintenant activer l'auto-remplissage globalement afin que tout dictionnaire avec des traductions manquantes soit complété automatiquement.

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],  },  content: {    // Génération automatique des traductions manquantes pour tous les dictionnaires    autoFill: "./{{fileName}}.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // génération automatique des traductions manquantes pour tous les dictionnaires comme avec "./{{fileName}}.content.json"    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

Vous pouvez toujours affiner par dictionnaire en utilisant le champ autoFill dans les fichiers de contenu. Consultez la référence complète dans doc/autoFill et doc/dictionary/content_file.

Commande fill : valeurs par défaut plus sûres

La commande fill remplit désormais, par défaut, uniquement les traductions manquantes et ignore le contenu existant.

npx intlayer fill

Clés de dictionnaire affectées pour le traitement : access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      Le dictionnaire n'a pas de chemin de fichier. Ignoré.  - [access-key-creation-form-schema]      Traitement de la déclaration de contenu : src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      Pas de locales à remplir - Dictionnaire ignoré  - [doc-search-metadata]                  Le dictionnaire n'a pas de chemin de fichier. Ignoré.  - [doc-search-metadata]                  Traitement de la déclaration de contenu : src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  Pas de locales à remplir - Dictionnaire ignoré  - [doc-search-page]                      Le dictionnaire n'a pas de chemin de fichier. Ignoré.  - [doc-search-page]                      Traitement de la déclaration de contenu : src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Russe (ru)]                   Préparation de la traduction du dictionnaire de l'anglais (en) vers le russe (ru)[intlayer]  Formatage Prettier appliqué à src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                      Déclaration de contenu écrite dans src/app/[locale]/(docs)/doc/search/page.content.ts

Des exemples de CI sont disponibles dans CI/CD.

Extension VS Code mise à jour

L'extension inclut désormais un onglet Intlayer dédié dans la barre d'activité ainsi que plusieurs améliorations du flux de travail :

• Barre d'activité Intlayer avec deux vues :
  • Webview de recherche (intlayer.searchBar) pour la recherche en direct dans les dictionnaires/contenus
  • Arbre des dictionnaires (intlayer.dictionaries) listant les environnements, dictionnaires et fichiers contributeurs
• Barre d'outils dans la vue Dictionnaires : Construire, Pull, Push, Remplir, Actualiser, Tester, Créer un fichier de dictionnaire

• Menus contextuels : Pull/Push sur les dictionnaires ; Remplir sur les fichiers

• Révélation automatique : le fichier actuellement ouvert dans l’éditeur est mis en surbrillance dans l’arborescence des dictionnaires lorsque cela est applicable
• Nouvelles commandes disponibles depuis la Palette de commandes : Remplir les dictionnaires et Tester les dictionnaires

Voir les détails dans la documentation de l’Extension officielle VS Code.

Performance : 10× plus rapide

• Résolution parallèle des dictionnaires locaux et distants
• Les dictionnaires distants sont mis en cache pour éviter de les recharger au démarrage de l’application

npx intlayer build

Sortie :

[intlayer]  Préparation d’Intlayer (v6.0.1)[intlayer]  Dictionnaires :[intlayer]  ✓ Contenu local : 163/163[intlayer]  ✓ Contenu distant : 100/100[intlayer]   - access-key-creation-form             [local : ✔ construit] [distant : ✔ importé][intlayer]   - access-key-creation-form-schema      [local: ✔ construit] [distant: ✔ importé][intlayer]   - access-key-form                      [local: ✔ construit] [distant: ✔ importé][intlayer]   - ai-ab-testing-section                                 [distant: ✔ importé][intlayer]   - application-not-running-view         [local: ✔ construit] [distant: ✔ importé][intlayer]   - application-template-message         [local: ✔ construit] [distant: ✔ récupéré][intlayer]   - aside-navigation                     [local: ✔ construit] [distant: ✔ importé][intlayer]   - ask-reset-password                   [local: ✔ construit] [distant: ✔ importé][intlayer]   - ask-reset-password-schema            [local: ✔ construit] [distant: ✔ importé][intlayer]   - autocompletion-section               [local: ✔ construit] [distant: ✔ récupéré][intlayer]   - available-techno-section             [local: ✔ construit] [distant: ✔ importé][intlayer]   - blog-data                            [local: ✔ construit][intlayer]   - blog-metadata                        [local: ✔ construit][intlayer]   - blog-nav-list                        [local: ✔ construit] [distant: ✔ importé][intlayer]   - blog-page                                             [distant: ✔ récupéré][intlayer]   - blog-search-metadata                 [local: ✔ construit] [distant: ✔ importé][intlayer]   - blog-search-page                     [local: ✔ construit] [distant: ✔ importé]...[intlayer]  Contenu chargé  (Total : 8401ms - Local : 4050ms - Distant : 4222ms)

Améliorations du système de journalisation

Le système de journalisation a été amélioré pour fournir des informations plus détaillées sur ce qui se passe lors des transformations à la compilation et à l'exécution.

Activez les journaux détaillés pour mieux comprendre ce qui se passe lors des transformations à la compilation et à l'exécution.

export default {  log: {    mode: "verbose", // options : "default" | "verbose" | "disabled"  },};

Voir Configuration pour toutes les options de journalisation.

Validation renforcée

Le traitement des dictionnaires effectue désormais une validation plus robuste. Lorsqu'un dictionnaire ne peut pas être traité, Intlayer évite de casser votre application et affiche des erreurs exploitables.

Mises à jour en direct avec CMS (sécurisé en production)

Servez des mises à jour de contenu en direct (par exemple, des mises à jour éditoriales) en production sans reconstruire votre application.

1. Activez le mode d'importation en direct :

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "live", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // activer la synchronisation en direct côté serveur  },};export default config;

2. Exécutez votre application et le processus en direct côte à côte :

npx intlayer live --process 'vite preview'

Notes :

• Seuls les dictionnaires marqués pour utiliser le mode live seront récupérés en direct. Les autres sont optimisés pour la performance.
• Repli sur l'importation dynamique si l'API live n'est pas accessible.

Voir CMS et synchronisation en direct et Configuration pour un guide complet.

Notes de migration

• Supprimé : dictionaryOutput (précédemment i18next ou next-intl). Cela reviendra sous forme d'adaptateurs modulables dans les futures versions. Supprimez ce champ de votre configuration.
• Suppression associée : i18nextResourcesDir (voir le journal des modifications de doc/configuration).
• Préférez la nouvelle option globale content.autoFill pour générer les traductions manquantes à grande échelle.
• Utilisez npx intlayer content test pour contrôler les PRs sur les traductions manquantes.
• Pour des diagnostics détaillés, réglez log.mode = 'verbose'.

Corrections

• Stabilité de l'intégration Vue.js
• Améliorations de l'adaptateur Lynx
• Éditeur visuel sous Windows

Liens utiles

• Référence CLI
• Remplissage automatique
• Configuration
• Référence fichier de contenu
• Extension officielle VS Code
• CMS et synchronisation en direct