Awesome

babel-plugin-localize

modify static strings in jsx code to localization friendly formats

example

input

const jsxText = (
    <>
    <p>hello world</p>
    <Static>hello world</Static>
    </>
);
const jsxAttribute = (
    <Title name="awesome" id="title" />
);

output

import { localize } from './localizer';

const jsxText = (
    <>
    <p>{localize("loc_0")}</p>
    <Static>hello world</Static>
    </>
);
const jsxAttribute = (
    <Title name={localize("loc_1")} id="title" />
);

export const localizeKeyMap = {
  "loc_0": "hello world",
  "loc_1": "awesome"
};

options

{
    "elementsReplaceStringAttributes": {
        "Title": ["name"]
    },
    "elementsPreserveJsxText": {
        "Static": true
    },
    "keyPrefix": "loc_",
    "keyType": "serial",
    "localizer": "localize",
    "localizerBinding": "named",
    "localizerSource": "./localizer",
    "keyMapIdentifier": "localizeKeyMap"
}

installation

npm

npm install --save-dev babel-plugin-localize

yarn

yarn add -D babel-plugin-localize

usage

via .babelrc (Recommended)

.babelrc

{
  "plugins": [["localize", {}]]
}

via CLI

babel --plugins localize script.js

via Node API

require("@babel/core").transform("code", {
  plugins: [["localize", {}]]
});