website·Indexed 30 days ago
https://facebook.github.io/fbt/A framework for inlined translatable text that allows developers to compose translatable strings inline with source code. It provides a JSX-style <fbt /> API and a functional fbt(...) API, supported by babel-plugin-fbt for transformations. Features include support for adhoc enums, pluralization, pronouns, and auto-parameterization for web and React Native applications.
fbs (FB string) is a specialized version of the fbt JS API used to represent only translatable plain-text strings. While fbt can represent rich text (a mix of text and React components), fbs forces the result to be a plain string. This is critical for HTML attributes that only accept strings and do not support HTML/React components, such as title, label, placeholder, and ARIA descriptions (e.g., aria-description). Using regular <fbt> in these attributes may result in incomplete localized text because inner texts of embedded components are dropped during serialization.babel-plugin-fbt-runtime transform is used to convert the intermediary payloads generated by babel-plugin-fbt into the specific object format expected by the fbt._(...) runtime function.fbt package version is greater than ^0.10.0.yarn add babel-plugin-fbt babel-plugin-fbt-runtime fbt react-native-fbt '@fbtjs/default-collection-transform'
yarn add babel-preset-react-native shelljs fb-tiger-hash --devTo change the translation locale on the fly (e.g., switching from es_ES to fr_FR), you must perform two steps:
FbtTranslations.registerTranslations(newTranslationPayload) with a payload object matching the structure used in the initial init() call.getViewerContext() hook to the init() function. This is critical because FBT applies number variation and phonological rules based on the UI locale; updating the payload alone may result in incorrect translations.// Update the translation payload
FbtTranslations.registerTranslations(newTranslationPayload);<fbt:same-param> or fbt.sameParam. This construct only requires a name attribute; it re-uses the value provided to the first instance of that parameter name.<fbt desc="param example">
<fbt:name name="name" gender={gender}>
{<a href="#">{name}</a>}
</fbt:name>
shared a link. Tell <fbt:same-param name="name" /> you liked it.
</fbt>fbt(
fbt.name('name', <a href="#">{name}</a>, gender) +
' shared a link. Tell ' + fbt.sameParam('name') + ' you liked it.',
'param example'
)
Localizable.strings. Note that quotes must be escaped within the translation strings on iOS.cd ios/ && pod installTo integrate FBT into your application, add the following NPM modules to your dependencies:
fbt: The core runtime module.babel-plugin-fbt: The primary Babel transform.babel-plugin-fbt-runtime: A secondary Babel transform that processes raw payloads within fbt._(...) for runtime use.@fbtjs/default-collection-transform: Required only if you do not provide a custom --transform or --custom-collector during the collection process.babel-plugin-fbt transform processes FBT code in two stages: first, it converts <fbt> JSX instances into fbt(...) function calls. Second, it converts those fbt(...) calls into fbt._(...) calls, which include an intermediary payload as the first argument and the runtime arguments as subsequent parameters.fbt-collect script may extract new strings. This is due to improvements in how strings with nested React elements ("Rich content fbt strings") are handled, resulting in more accurate string descriptions and better context for translators. Developers should be prepared to retranslate strings that are newly extracted or modified during the upgrade process.<fbt:pronoun> and <fbt:plural>. The system generates all possible string variations based on the combination of these nested constructs. For example, if a phrase contains both a gender-based pronoun and a count-based plural, fbt will extract a unique top-level string for every combination of gender and number (e.g., Female-Single, Female-Plural, Male-Single, etc.), all sharing the same top-level description.<fbt desc="advanced rich content example">
<b>
<fbt:pronoun
capitalize="true"
gender={personGender}
human={true}
type="subject"
/>
</b>
uploaded
<Link href="#">
<fbt:plural count={aCount} many="photos" showCount="ifMany">
one photo
</fbt:plural>
</Link>
that you haven't seen yet.
</fbt>__subject__ token allows translations to vary based on the gender of a specific subject (the actor) rather than the viewer. Unlike the viewer gender token, the __subject__ token must be explicitly provided by the fbt callsite using an optional argument. The actual variation is then determined at the translation level by the translator.let actorMarkupUsedElsewhere = <a href="#">...</a>
<fbt
subject={subjectGender}
desc={'There is an implicit actor here. ' +
"Like: '{name} translated your string.'"}>
translated your string.
</fbt>