Configuration 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 fait cela en analysant l'arborescence de fichiers de votre projet et en utilisant babel pour envelopper le composant <T> autour du contenu statique. Tout contenu dynamique sera automatiquement enveloppé 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 devrait être exécutée une fois, lorsque vous internationalisez votre projet pour la première fois. Pour les modifications ultérieures, vous devriez utiliser la commande scan pour mettre à jour votre projet.

Voir 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 setup ajoutera un composant <GTProvider> dans le fichier layout.jsx approprié.

Paramètres

Paramètre	Description	Type	Optionnel	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 IDs uniques pour vos composants <T>. Ceci est utile pour les projets qui utilisent beaucoup de composants <T> et souhaitent éviter d'avoir à assigner manuellement un ID 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>

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

Comportement de `<GTProvider>`

Pour le Next.js App Router, 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.