auto-localization

auto-localization is a tool to automatically extract hardcoded text strings from React/React Native components and generate localization files in either JSON or JavaScript/TypeScript constants format. It simplifies the process of managing localization in your project, making it easy to integrate new languages into your app without manually finding and translating strings.

Features

• Automatic String Extraction:
  Extracts text strings from React Native or React components written in JavaScript or TypeScript.

• Flexible Output Formats:

  • Generate JSON localization files for use with localization libraries.
  • Generate JavaScript/TypeScript constants for integrating localized strings as constants in your codebase.

• Merge with Existing Files:
  New strings are automatically merged with any existing localization data in your target files, avoiding accidental overwrites.

• Customizable Key Formatting:
  Supports camelCase or snake_case formatting for generated keys, making it easy to follow code conventions.

• Support for JSX and TSX:
  Works with both JSX (React) and TSX (React Native) syntax.

Installation

To install auto-localization, use the following command:

npm install auto-localization

Globally

To install auto-localization globally, run the following command:

npm install -g auto-localization

Usage

• Extract Strings and Generate JSON Localization File

You can extract text strings from your components and generate a JSON localization file:

npx auto-localization ./src/components/MyComponent.tsx ./src/locales/en.json

• This will extract strings from the specified TypeScript file (MyComponent.tsx) and generate or update the en.json file inside the src/locales directory.

Generate JavaScript/TypeScript Constants File

• Alternatively, you can generate a JavaScript/TypeScript constants file:

npx auto-localization ./src/components/MyComponent.tsx ./src/locales/constants.ts

• This will generate or update the constants.ts file, which will contain all the extracted strings as constants.

Example

- Input File (MyComponent.tsx)
import React from 'react';
import { Text } from 'react-native';

const MyComponent = () => {
  const message = 'Welcome to the app!';

  return <Text>{message}</Text>;
};

export default MyComponent;

- JSON Output (en.json)
{
  "welcome_to_the_app": "Welcome to the app!"
}
- TypeScript Constants Output (constants.ts)
export const WELCOME_TO_THE_APP = "Welcome to the app!";

Configuration Options

• Custom Key Formatting

• You can choose between different key formats for the extracted strings. By default, auto-localization generates keys in snake_case.

• camelCase: Converts the string into camelCase format.

• snake_case: Converts the string into snake_case format.

• You can specify the format during execution (depending on how the tool is configured in your project).

• Merge Existing Localization Data

• If the localization file already exists, auto-localization will merge new strings with the existing ones, preventing accidental overwrites of translations.

• For example, if en.json already contains:

{ "existing_key": "Existing Value" }

• And a new string "Welcome to the app!" is extracted, the updated en.json will contain:

{ "existing_key": "Existing Value", "welcome_to_the_app": "Welcome to the app!" }

• Example Command with Merging

npx auto-localization ./src/components/MyComponent.tsx ./src/locales/en.json

Contributing

• If you'd like to contribute to the project, feel free to open an issue or submit a pull request. Contributions are welcome!

• Steps to Contribute:

• Fork this repository.

• Create a branch with your changes.

• Open a pull request with a clear description of the changes.

• Test your changes to ensure they work as expected.

License

This project is licensed under the MIT License.

Acknowledgements

auto-localization uses Babel Parser for AST generation and string extraction. Thanks to the React Native and React communities for creating amazing tools!