https://github.com/sibelius/ast-i18n

Easily migrate your existing React codebase to use i18n
https://github.com/sibelius/ast-i18n

ast codemod i18n react

Last synced: 11 days ago
JSON representation

Easily migrate your existing React codebase to use i18n

• Host: GitHub
• URL: https://github.com/sibelius/ast-i18n
• Owner: sibelius
• License: mit
• Created: 2019-02-09T19:57:56.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-12-10T11:07:45.000Z (6 months ago)
• Last Synced: 2024-05-20T15:12:47.985Z (27 days ago)
• Topics: ast, codemod, i18n, react
• Language: TypeScript
• Size: 437 KB
• Stars: 213
• Watchers: 9
• Forks: 18
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-codemods - ast-18n - Easily migrate your existing React codebase to use i18n. (Frameworks / React.js)
• my-awesome-stars - sibelius/ast-i18n - Easily migrate your existing React codebase to use i18n (TypeScript)

README

        
# AST i18n [![Build Status](https://travis-ci.org/sibelius/ast-i18n.svg?branch=master)](https://travis-ci.org/sibelius/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

```jsx

import React from 'react';

const Simple = () => (

  My simple text

);

```

After this transform

```jsx

import React from 'react';

import { withTranslation } from 'react-i18next'

const Simple = ({ t }) => (

  {t('my_simple_text')}

);

```

## Usage of string extractor

```bash

yarn start --src=myapp/src

```

- It will generate a resource.jsx file, like the below:

```jsx

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

```jsx

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

```bash

npm i -g jscodeshift

jscodeshift -t src/i18nTransformerCodemod.ts PATH_TO_FILES

```

## How to customize blacklist

Use ast.config.js to customize blacklist for jsx attribute name and call expression calle

```jsx

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',

  ],

};

```