Fbt promoted to v1.0.0

[kayhadrin]

"We reached adulthood yeah!" 🥳🥂🍺🎉

For a bit more than two years, we've been working on a major refactor of the JS Fbt library. This project went through 600+ internal code reviews and helped identify multiple thousands of strings on the facebook.com domain that would benefit from being retranslated.
On January 26th 2022, we deployed it on facebook.com and, a month later, on the React Native views of our Facebook mobile app for both Android and iOS platforms. Enough time has elapsed to consider this release stable.

This new version significantly improves the accuracy of the strings extracted from our JS codebase on www and RN; thus giving a better opportunity for translators to produce quality translations.

We're now ready to release it as v1.0.0 of the JS Fbt library!

What's changed?

Major features

🚨 BREAKING CHANGE: due to the below major changes, the fbt-collect script may extract new strings that will need to be retranslated.
Please see this page for more information on how to upgrade.

1. Strings that contain nested React elements ("Rich content fbt strings") will now produce more accurate string descriptions.
   

   Why?
   
   While the legacy version of the fbt library was already able to do "auto paramterization", it was quite buggy and contributed to generate non-sensical strings - causing translation quality issues since translators would lack the necessary textual context to do their work.

   E.g. An extracted string may appear as "{=} uploaded {=one photo} that you haven't seen yet."
   Who or what is {=}? What about the plural case when there are many photos?

   The legacy algorithm to generate descriptions for our nested fbt strings was sometimes missing key words and wasn't able to track string variations issued from special fbt constructs like <fbt:pronoun> (e.g. he/she/they).

   At the scale of Facebook's website, we identified several thousands of strings that could be improved from this major fbt update.

   • 📖 Learn more about Auto Parameterization

2. Fixed handling of whitespace characters.
   

   Why?
   
   In the legacy Fbt library version, we noticed that whitespace characters (i.e.   characters) were silently dropped from text and descriptions.
   Using them is sometimes necessary for UI layout purposes so we've ensure that they're now correctly preserved.

   • ⚠️ You should still ensure that translators are aware of their presence so that they can also preserve them in their translations.

Minor features

1. Added ability to write plain-text only fbt strings with the fbs API
   
   Sometimes, we need to ensure that some localizable strings are only made of plain-text. E.g. the placeholder HTML attribute of a text input field.
   For this, we introduced the fbs API to define plain-text strings.
2. Added the ability to expose arbitrary options to the <fbt> / fbt() callsites.
   
   It enables fbt users to customize how FbtResult objects are generated on the client-side.
3. Support fbt common attribute without value

Acknowledgments

This major release is the fruit of 2+ years of work on my part and was made possible thanks to the help of John Watson (@jrwats) and Yisong Qin (@pkqinys).

As the original maintainer of the JS Fbt library, John helped me better understand the string extraction & translation workflow of the original codebase, and was a great sounding board as I was designing the high-level tech solution for this project. He also helped improve the overall developer experience by decoupling more JS Fbt code from the rest of the Meta infra.
Many thanks also to Yisong Qin - who came onboard in 2021 - to help me push this project to the finish line. He made significant contributions by rewriting important portions of the fbt client-side code generator and the OSS translation payload ingestor; notwithstanding many more things at the Meta-infra level. Although new to node.js programming, he showed the grit necessary to learn it from scratch and had a great impact on the project outcomes.

🕊 Finally, we hope that you find better value in using this latest release of the JS Fbt library.
Please feel free to share any question/feedback by commenting on this post or opening new discussion threads on Github.

Cheers!

David (@kayhadrin)

[mrtnzlml]

I have tried a dozen solutions for translating React applications over the years, and FBT is by far the best and most fun one. Thanks for spending your time and energy to make this work open-source!

BTW, the link "Added the ability to expose arbitrary options to the / fbt() callsites." from your post doesn't work. @kayhadrin

[kayhadrin]

You're welcome @mrtnzlml!

Fixed broken links.

[hyochan]

@kayhadrin Could you kindly look into #360? We are having a hard time trying to resolve the build failure in iOS in React Native 0.68.

Thanks for the awesome work though.