Aller au contenu principal

ts-transformer

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

npm version

Traite les messages texte pour la traduction dans les modules utilisant react-intl, spécifiquement :

  • Analyse et vérifie que les messages sont conformes à ICU sans problème de syntaxe.

  • Supprime la propriété description du descripteur de message pour économiser des octets, car elle n'est pas utilisée à l'exécution.

  • Option pour supprimer defaultMessage du descripteur de message afin d'économiser des octets, car non utilisé à l'exécution.

  • Injecte automatiquement l'ID de message selon un motif spécifique.

Installation​

npm i @formatjs/ts-transformer

Utilisation​

Les descripteurs de messages par défaut pour la langue principale de l'application seront traités à partir de : defineMessages(), defineMessage(), intl.formatMessage et <FormattedMessage> ; toutes ces fonctions étant des exports nommés du package React Intl.

Avec ts-loader​

import {transform} from '@formatjs/ts-transformer'

module.exports = {
  ...otherConfigs,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              getCustomTransformers() {
                return {
                  before: [
                    transform({
                      overrideIdFn: '[sha512:contenthash:base64:6]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}

Avec ts-jest dans jest.config.js​

Attention

Nécessite ts-jest@26.4.0 ou ultérieur

// jest.config.js
module.exports = {
  // [...]
  transform: {
    '^.+\\.(ts|tsx)?$': [
      'ts-jest',
      {
        astTransformers: {
          before: [
            {
              path: '@formatjs/ts-transformer/ts-jest-integration',
              options: {
                // options
                overrideIdFn: '[sha512:contenthash:base64:6]',
                ast: true,
              },
            },
          ],
        },
      },
    ],
  },
}

Avec ts-patch​

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "@formatjs/ts-transformer",
        "import": "transform",
        "type": "config",
        "overrideIdFn": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  }
}

Avec rollup-plugin-typescript2​

// rollup.config.js
import typescript from 'rollup-plugin-typescript2'
import {transform} from '@formatjs/ts-transformer'

export default {
  input: './main.ts',

  plugins: [
    typescript({
      transformers: () => ({
        before: [
          transform({
            overrideIdFn: '[sha512:contenthash:base64:6]',
            ast: true,
          }),
        ],
      }),
    }),
  ],
}

Options​

overrideIdFn​

Fonction de signature (id: string, defaultMessage: string, description: string|object) => string permettant de surcharger l'ID à la fois dans le JavaScript généré et dans les messages.

Alternativement, overrideIdFn peut être une chaîne de modèle, utilisée uniquement si l'ID du message est vide.

removeDefaultMessage​

Supprime le champ defaultMessage dans le JavaScript généré après extraction.

extractSourceLocation​

Indique si les métadonnées de localisation du message dans le fichier source doivent être extraites. Si true, les champs file, start et end seront présents dans chaque descripteur de message. Par défaut : false.

additionalComponentNames​

Noms de composants supplémentaires pour extraire les messages, ex : ['FormattedFooBarMessage']. NOTE : Par défaut, nous vérifions que FormattedMessage est importé depuis moduleSourceName pour garantir le fonctionnement des alias. Cette option ne le fait pas, donc elle est moins sûre.

additionalFunctionNames​

Noms de fonctions supplémentaires pour extraire les messages, ex : ['$formatMessage']. À utiliser si vous préférez aliaser formatMessage en quelque chose de plus court comme $t.

pragma​

Analyse une pragma personnalisée supplémentaire spécifique. Permet d'étiqueter certains fichiers avec des métadonnées comme project. Par exemple avec ce fichier :

// @intl-meta project:my-custom-project
import {FormattedMessage} from 'react-intl'
;<FormattedMessage defaultMessage="foo" id="bar" />

et avec l'option {pragma: "@intl-meta"}, nous extrairons // @intl-meta project:my-custom-project en {project: 'my-custom-project'} dans le fichier résultat.

ast​

Pré-analyse defaultMessage en AST pour de meilleures performances à l'exécution. Ce flag n'a aucun effet si removeDefaultMessage est true.

onMsgExtracted(filePath: string, msgs: MessageDescriptor[])​

Fonction de rappel déclenchée à chaque rencontre d'un message.

onMetaExtracted(filePath: string, meta: Record<string, string>)​

Fonction de rappel déclenchée à chaque rencontre d'une méta pragme.

preserveWhitespace​

Indique s'il faut préserver les espaces et sauts de ligne.

Consultez compile.ts pour un exemple d'intégration.