automatic-i18n

Introduction

automatic-i18n is an internationalization tool that automatically replaces language text in the source code(typescript、js、react) with one command and without writing additional code and generates multi-language files. I use the typescript compiler and integrate the react-intl library to achieve this.

I hope that websites in different languages ​​can benefit more people in the world, hope world peace.

features:

• Write your code as if it were not an international project. Then run a one-line command which will replace all locale text with i18n keys and generate some message files according to your configuration. No need to write extra code.
• The languages ​​to be replaced and the languages ​​to be generated can be configured.
• Automatically merge template strings and jsx html text with variables.
• Integrated with react-intl library. (you could write your own custom render class by implement I18nFormatter and pass your class as params. The default class is enough)
• Supports hook mode (changing language in real time) and global mode, and can use custom render classes to determine how to replace source code and generate language files.
• Test coverage 98%.

Example

Your code Before:

import React from 'react';

function Component() {
    const en = 'English';
    const cn = 'Chinese';
    const locales = `${en} and ${cn}`;

    return (
        <div>
            Please choose your locale from: {en} {cn}
        </div>
    );
}

Your code will be replaced with the below after run command:

import { useIntl, FormattedMessage } from 'react-intl';
import React from 'react';

function Component() {
    const intl = useIntl();

    const en = intl.formatMessage({
        id: 'key0001',
        defaultMessage: 'English',
    });
    const cn = intl.formatMessage({
        id: 'key0002',
        defaultMessage: 'Chinese',
    });
    const locales = intl.formatMessage({
        id: 'key0003',
        defaultMessage: '{v1} and {v2}',
        values: { v1: en, v2: cn },
    });

    return (
        <div>
            <FormattedMessage
                id="key0004"
                defaultMessage="Please choose your locale from: {v1} {v2}"
                values={{ v1: en, v2: cn }}
            />
        </div>
    );
}

Some locale message files will be generated automatic.

/*
* This file is automatic generated by automatic-i18n.
* You can only change variable's value.
*/
import { LocalKey } from './types';

const locale: Record<LocalKey, string> = {
    key0001: 'English',
    key0002: 'Chinese',
    key0003: '{v1} and {v2}',
    key0004: 'Please choose your locale from: {v1} {v2}',
};

export default locale;

And the entry template file will be generated which will use above locale message files. This template export a provider and a global object and you could use them in your own prefer. You could see the example file here:

Quick start

cli

npx automatic-i18n you can get specific info with npx automatic-i18n -h

api

not tested yet..

the options is like this:

export interface ReplacerOpt {
    // file or dirs to extract messages default is [process.cwd()]
    targets?: string[];
    // The location where the locale message files are generated default is [process.cwd()/i18n]
    distLocaleDir?: string;
    // the locale which is searched in targets default is zh-cn
    localeToReplace?: LocaleTypes;
    // the locale file default is [en-us, zh-cn]
    localesToGenerate?: LocaleTypes[];
    // formatter class, use could provide class implement the `I18nFormatter` class,
    I18nFormatterClass?: DefaultI18nFormatterCtr;
    // default is hook
    // if rename the key to meaningful variable if has related english translate
    meaningKey?: boolean;
    // decide which file or dir could be handled
    filters?: Filter[];
    // file name or dir to ignore
    excludes?: string[];
    debug?: boolean;
}

License

The MIT License.