DOM fragments localization for fluent-react

[stasm]

As of fluent-react 0.4.1 it is possible to pass React elements as props to <Localized> to interpolate them into the translation:

<Localized
    id="sign-in-or-cancel"
    $signInButton={
        <Localized id="sign-in-button">
            <button className="action" onClick={signIn}>{'Sign in'}</button>
        </Localized>
    }
    $cancelButton={
        <Localized id="cancel-button">
            <button className="text" onClick={cancel}>{'cancel'}</button>
        </Localized>
    }
>
    <p>{'{ $signInButton } or { $cancelButton}.'}</p>
</Localized>

sign-in-button = Sign in
cancel-button = cancel
sign-in-or-cancel = { $signInButton } or { $cancelButton }.

This is a bad localization practice because it results in the translation being split into multiple strings and then interpolated.

Instead we should do something similar to fluent-dom's overlay logic.

Solution

With overlays, the translation can include some HTML which will be parsed by Fluent. HTML children found in the translation are then matched against child elements in the source. In React, we can pass the source elements via props.

<Localized
    id="sign-in-or-cancel"
    button={
        <button className="action" onClick={signIn}></button>
    }
    a={
        <button className="text" onClick={cancel}></button>
    }
>
    <p>{'<button>Sign in</button> or <a>cancel</a>.'}</p>
</Localized>

sign-in-or-cancel = <button>Sign in</button> or <a>cancel</a>.

[stasm]

This was fixed in #101 and then a few follow-ups landed in #105, #141, #154 and #155. I continued to use this issue to track overlay-related features. I'm now closing it for good and I'll be using the overlay label for the same purpose.