Easily migrate your existing React codebase to use i18n
Branch: master
Clone or download
sibelius Merge pull request #39 from sibelius/fix/hoc
fix(hoc): only add hoc if there is i18n usage
Latest commit 211c4ed Feb 10, 2019

README.md

AST i18n

The objective of this tool is to make easy to migrate an existing codebase to use i18n

How it works

  • it gets a list of files from the command line
  • it runs a babel plugin transform to find all string inside JSXText
  • it generates a stable key for the extracted strings
  • it generates i18n files format based on this map
  • it modify your existing code to use i18n library of your preference

Example

Before this transform

import React from 'react';

const Simple = () => (
  <span>My simple text</span>
);

After this transform

import React from 'react';
import { withTranslation } from 'react-i18next'

const Simple = ({ t }) => (
  <span>{t('my_simple_text')}</span>
);

Usage of string extractor

yarn start --src=myapp/src
  • It will generate a resource.jsx file, like the below:
export default {
  translation: {
   'ok': `ok`,
   'cancelar': `cancelar`,
   'continuar': `continuar`,
   'salvar': `salvar`,
   'endereco': `endereço:`,
   'troca_de_senha': `troca de senha`,
   'dados_pessoais': `dados pessoais`,
   [key]: 'value',
  }
}

How to use resource with react-i18next?

  • rename resource.tsx to your main language, like en.ts
  • create other resource languages based on the generated one
import en from './en';

i18n.use(LanguageDetector).init({
  resources: {
    en,
  },
  fallbackLng: 'ptBR',
  debug: false,

  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ',',
  },

  react: {
    wait: true,
  },
});

Usage of i18n codemod

npm i -g jscodeshift

jscodeshift -t src/i18nTransfomerCodemod.ts PATH_TO_FILES