Configuration de React

Utilisation

npx gtx-cli setup

La commande gtx-cli setup configure automatiquement votre projet pour la traduction avec gt-next ou gt-react. Elle le fait en analysant l'arborescence des fichiers de votre projet et en utilisant babel pour entourer le contenu statique avec le composant <T>. Tout contenu dynamique sera automatiquement entouré avec des composants <Var>.

Cette commande est exécutée dans le cadre de l'assistant de configuration init. De plus, cette commande peut être exécutée indépendamment via npx gtx-cli setup.

Cette commande doit être exécutée une seule fois, lorsque vous internationalisez votre projet pour la première fois. Pour les modifications ultérieures, vous devez utiliser la commande scan pour mettre à jour votre projet.

Consultez la commande scan pour plus de détails.

src/app/Home.js

import { T, Var } from 'gt-next';  

export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, World! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

Si votre projet utilise le Next.js App Router, la commande de configuration ajoutera un composant <GTProvider> dans le fichier layout.jsx approprié.

Paramètres

Paramètre	Description	Type	Optionnel	Par défaut
`--src <path>`	Le répertoire source à analyser	`string`	`true`	`./src && ./app && ./pages && ./components`
`--config <path>`	Le chemin vers le fichier de configuration GT	`string`	`true`	`"gt.config.json"`

Comportement

Fichier de configuration

Lors de la première exécution de l'outil CLI, il tentera de créer un fichier gt.config.json à la racine de votre projet. Ce fichier contient des métadonnées sur votre projet qui sont utilisées pour traduire votre contenu.

En savoir plus sur le fichier gt.config.json ici.

La prop `id`

La commande setup offre la possibilité de générer automatiquement des identifiants uniques pour vos composants <T>. C'est utile pour les projets qui utilisent beaucoup de composants <T> et qui veulent éviter d'avoir à attribuer manuellement un identifiant unique à chacun.

Cet id est utile pour référencer des traductions spécifiques dans l'éditeur de traduction et dans la console.

Comportement d'injection de `<T>`

Cas de base

Le CLI enveloppera les éléments JSX au niveau le plus élevé possible. Cela signifie qu'il enveloppera l'ensemble du composant dans un composant <T> s'il n'est pas déjà enveloppé.

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

Consultez la référence pour plus de détails sur la façon dont le composant <T> est enveloppé.

Comportement de `<GTProvider>`

Pour le App Router de Next.js, la commande setup enveloppera automatiquement le composant <T> dans un composant <GTProvider> dans le fichier layout.jsx approprié.

De plus, elle configurera le plugin Next.js withGTConfig dans le fichier next.config.js pour vous.

Formatage automatique

La commande setup formatera automatiquement les modifications qu'elle apporte à votre base de code avec Prettier, Biome ou ESLint selon la configuration de votre projet.