How to migrate simple strings

Because humans are the most likely target to be translating our messages, we need a robust way to give them tools to give accurate translations. ICU messages are one way to do this and they give translators a lot of more complex ways to get the full understanding of the message.

We will first consider simple strings those that are easy to migrate to Stele. Ones that do not require advanced ICU configs to do.

If you want to follow along in your .babelrc we will be using the following configuration for Stele:

[
    "@patreon/stele/dist/plugin",
    {
        "propName": "intl",
        "requireSpecificComponent": false,
        "developmentLanguage": true,
        "replace": true
    }
]

For more information on why we have developmentLanguage and replace set to true visit the development docs.

JSX

Migrating JSX is fairly easy. Let's assume we have a component that has a simple name with an argument. Migrating this is as easy as adding your internationalization prop, along with the user's locale.

// before
function MyComponent(props) {
    return <p>Hello, my friend</p>
}
// after
function MyComponent(props) {
    return <p intl={locale}>Hello, my friend</p>
}

This creates the message:

{
    "Hello, My friend": "Hello, my friend"
}

Adding in a variable

Adding in variables does not change the solution above! Stele does some things under the hood to create the message intelligently.

// before
function MyComponent(props) {
    return <p>Hello, my friend {props.friendName}</p>
}
// after
function MyComponent(props) {
    return <p intl={locale}>Hello, my friend {props.friendName}</p>
}

This creates the message:

{
    "Hello, My friend {friendName}": "Hello, my friend {friendName}"
}

As you can see, Stele knew to turn props.friendName in to friendName for the message.

Translate

You use the translate function to translate messages not used inside react. Say inside of a prop, or outside of the react context all together.

Say you had a modal with just a title prop on it. Translating this is fortunately easy, and similar to the previous solution.

// before
function SimpleTranslateComponent(props) {
    return <Modal title="Are you sure?" onConfirm={confirm} />
}
// after
function SimpleTranslateComponent(props) {
    return (
        <Modal title={translate(locale, 'Are you sure?')} onConfirm={confirm} />
    )
}

Using variables inside translate

Using variables inside the translate function is a little more difficult than using the JSX route by itself. The second argument to the translate function is just a regular ICU string. Therefore, to use variables you must use it like a normal ICU string.

// before
function SimpleTranslateComponent(props) {
    return <Modal title={`Are you use ${userName}?`} onConfirm={confirm} />
}
// after
function SimpleTranslateComponent(props) {
    return (
        <Modal
            title={translate(locale, 'Are you sure {userName}?', {
                userName: userName,
            })}
            onConfirm={confirm}
        />
    )
}

Something that is mostly variables

If something is mostly variables, with no user facing text in it Something like:

<p>
    {creatorName}: {creatorType}
</p>

While other languages might do this differently, in these cases I would mark them as translatable on a case by case basis. Usually displaying some simple piece of text like this that has no messages in it won't need to be translated.