The objective of this tool is to make easy to migrate an existing codebase to use i18n
- 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
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>
);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',
}
}- 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,
},
});npm i -g jscodeshift
jscodeshift -t src/i18nTransformerCodemod.ts PATH_TO_FILESUse ast.config.js to customize blacklist for jsx attribute name and call expression calle
module.exports = {
blackListJsxAttributeName: [
'type',
'id',
'name',
'children',
'labelKey',
'valueKey',
'labelValue',
'className',
'color',
'key',
'size',
'charSet',
'content',
],
blackListCallExpressionCalle: [
't',
'_interopRequireDefault',
'require',
'routeTo',
'format',
'importScripts',
'buildPath',
'createLoadable',
'import',
'setFieldValue',
],
};