Ir para o conteúdo principal

ts-transformer

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

npm version

Processa mensagens de texto para tradução de módulos que utilizam react-intl, especificamente:

  • Analisa e verifica se as mensagens são compatíveis com ICU sem problemas de sintaxe.

  • Remove description do descritor de mensagem para economizar bytes, pois não é usado em tempo de execução.

  • Opção para remover defaultMessage do descritor de mensagem para economizar bytes, pois não é usado em tempo de execução.

  • Injeta automaticamente o ID da mensagem com base em um padrão específico.

Instalação​

npm i @formatjs/ts-transformer

Uso​

Os descritores de mensagem padrão para o idioma principal do app serão processados de: defineMessages(), defineMessage(), intl.formatMessage e <FormattedMessage>; todos sendo exportações nomeadas do pacote React Intl.

Via 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]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}

Via ts-jest no jest.config.js​

cuidado

Requer ts-jest@26.4.0 ou superior

// 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,
              },
            },
          ],
        },
      },
    ],
  },
}

Via ts-patch​

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

Via 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,
          }),
        ],
      }),
    }),
  ],
}

Opções​

overrideIdFn​

Função com a assinatura (id: string, defaultMessage: string, description: string|object) => string que permite substituir o ID tanto no JavaScript extraído quanto nas mensagens.

Alternativamente, overrideIdFn pode ser uma template string, usada apenas quando o ID da mensagem está vazio.

removeDefaultMessage​

Remove o campo defaultMessage no JS gerado após a extração.

extractSourceLocation​

Define se os metadados sobre a localização da mensagem no arquivo fonte devem ser extraídos. Se true, os campos file, start e end existirão para cada descritor de mensagem extraído. Padrão: false.

additionalComponentNames​

Nomes adicionais de componentes para extrair mensagens, ex: ['FormattedFooBarMessage']. NOTA: Por padrão verificamos se FormattedMessage é importado de moduleSourceName para garantir que aliases funcionem. Esta opção não faz essa verificação, sendo menos segura.

additionalFunctionNames​

Nomes adicionais de funções para extrair mensagens, ex: ['$formatMessage']. Use se preferir apelidar formatMessage para algo mais curto como $t.

pragma​

Analisa pragmas personalizados adicionais específicos. Permite marcar arquivos com metadados como project. Exemplo com este arquivo:

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

e com a opção {pragma: "@intl-meta"}, extraímos // @intl-meta project:my-custom-project para {project: 'my-custom-project'} no arquivo resultante.

ast​

Pré-analisa defaultMessage em AST para melhor desempenho em runtime. Esta flag não tem efeito quando removeDefaultMessage é true.

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

Callback acionado quando uma mensagem é encontrada.

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

Callback acionado quando um meta pragme é encontrado.

preserveWhitespace​

Define se espaços em branco e quebras de linha devem ser preservados.

Confira o exemplo de integração em compile.ts.