feat(fbt): Add ability to provide your own ViewerContext dynamically

Reviewed By: jrwats

Differential Revision: D21593501

fbshipit-source-id: f58f54d4bf6e1ffcf217d51b6e6cb1ac1d2b80c7

CHANGELOG.md

@@ -41,6 +41,7 @@ We haven't had the best track record of code/feature changes before this date, b
   <summary>
    Unreleased changes that have landed in master. Click to see more.
   </summary>
+  - [major feat] Add ability to provide your own ViewerContext dynamically
   - [fix] Render optional catch binding syntax to ES5 to fix [IE11 bug](https://github.com/facebook/fbt/pull/139)
   - [feat] Convert `fbt.isFbtInstance()` to a predicate function for Flow
   - [fix] Avoid generating unnecessary empty strings in fbt result contents

demo-app/src/example/Example.react.js

@@ -9,12 +9,22 @@
 
 import './css/Example.css';
 import classNames from 'classnames';
+import fbt, {GenderConst, IntlVariations, init} from 'fbt';
 import * as React from 'react';
 
 const ExampleEnum = require('./Example$FbtEnum');
 
-import fbt, {GenderConst, IntlVariations, IntlViewerContext, init} from 'fbt';
-init({translations: require('../translatedFbts.json')});
+const viewerContext = {
+  GENDER: IntlVariations.GENDER_UNKNOWN,
+  locale: 'en_US',
+};
+
+init({
+  translations: require('../translatedFbts.json'),
+  hooks: {
+    getViewerContext: () => viewerContext,
+  },
+});
 
 const LOCALES = Object.freeze({
   en_US: Object.freeze({
@@ -85,7 +95,7 @@ export default class Example extends React.Component<Props, State> {
   };
 
   setLocale(locale: Locale) {
-    IntlViewerContext.locale = locale;
+    viewerContext.locale = locale;
     this.setState({locale});
     const html = document.getElementsByTagName('html')[0];
     if (html != null) {
@@ -124,7 +134,7 @@ export default class Example extends React.Component<Props, State> {
                     className="neatoSelect"
                     onChange={(event: SyntheticUIEvent<>) => {
                       const vcGender = parseInt(event.target.value, 10);
-                      IntlViewerContext.GENDER = vcGender;
+                      viewerContext.GENDER = vcGender;
                       this.forceUpdate();
                     }}>
                     <option value={IntlVariations.GENDER_UNKNOWN}>
@@ -307,10 +317,7 @@ export default class Example extends React.Component<Props, State> {
                   className="bottom"
                   type="submit"
                   onClick={e => {
-                    window.open(
-                      'https://github.com/facebook/fbt',
-                      '_blank',
-                    );
+                    window.open('https://github.com/facebook/fbt', '_blank');
                   }}>
                   {fbt('Try it out!', 'Sign up button')}
                 </button>

runtime/nonfb/FbtPublic.js

@@ -9,7 +9,6 @@ const FbtResult = require('FbtResult');
 const FbtTranslations = require('FbtTranslations');
 const GenderConst = require('GenderConst');
 const IntlVariations = require('IntlVariations');
-const IntlViewerContext = require('IntlViewerContext');
 
 const fbt = require('fbt');
 const init = require('fbtInit');
@@ -27,6 +26,5 @@ const FbtPublic = {
   GenderConst,
   init,
   IntlVariations,
-  IntlViewerContext,
 };
 module.exports = FbtPublic;

runtime/nonfb/FbtTranslations.js

@@ -12,7 +12,7 @@
 
 import type {FbtRuntimeCallInput, FbtTranslatedInput} from 'FbtHooks';
 
-const IntlViewerContext = require('IntlViewerContext');
+const FbtHooks = require('FbtHooks');
 
 let translatedFbts = null;
 
@@ -29,20 +29,20 @@ const FbtTranslations = {
   getTranslatedInput(input: FbtRuntimeCallInput): ?FbtTranslatedInput {
     const {args, options} = input;
     const hashKey = options?.hk;
-    const table =
-      translatedFbts != null && translatedFbts[IntlViewerContext.locale];
+    const {locale} = FbtHooks.getViewerContext();
+    const table = translatedFbts?.[locale];
     if (__DEV__) {
-      if (!table && IntlViewerContext.locale !== DEFAULT_SRC_LOCALE) {
+      if (!table && locale !== DEFAULT_SRC_LOCALE) {
         console.warn('Translations have not been provided');
       }
     }
 
-    if (!table || hashKey == null || table[hashKey] == null) {
+    if (hashKey == null || table?.[hashKey] == null) {
       return null;
     }
     return {
       table: table[hashKey],
-      args: args,
+      args,
     };
   },
 

runtime/nonfb/fbtInit.js

@@ -7,12 +7,14 @@
  * @flow strict-local
  * @format
  */
+
 import type {FbtHookRegistrations} from 'FbtHooks';
 import type {TranslationDict} from 'FbtTranslations';
 
 const FbtHooks = require('FbtHooks');
 const FbtResult = require('FbtResult');
 const FbtTranslations = require('FbtTranslations');
+const IntlViewerContext = require('IntlViewerContext'); // default VC
 
 const getFbsResult = require('getFbsResult');
 
@@ -35,6 +37,10 @@ function fbtInit(input: FbtInitInput): void {
   if (hooks.getTranslatedInput == null) {
     hooks.getTranslatedInput = FbtTranslations.getTranslatedInput;
   }
+  if (hooks.getViewerContext == null) {
+    hooks.getViewerContext = () => IntlViewerContext;
+  }
+
   FbtHooks.register(hooks);
 }
 

runtime/nonfb/mocks/IntlViewerContext.js

@@ -5,8 +5,13 @@
  * @flow strict
  */
 
+// flowlint ambiguous-object-type:error
+
 const IntlVariations = require('IntlVariations');
 
+// Keep this in sync with IntlViewerContext.js.flow
+// It's almost the same except that the `locale` field is optional on www
+// and required in the OSS version
 const IntlViewerContext = {
   GENDER: IntlVariations.GENDER_UNKNOWN,
   locale: 'en_US',

runtime/shared/FbtHooks.js

@@ -6,8 +6,11 @@
  * @format
  */
 
+/* eslint-disable fb-www/flow-exact-by-default-object-types */
+
 import type {FbtTableKey, PatternHash, PatternString} from 'FbtTable';
 import type {FbtTableArg} from 'FbtTableAccessor';
+import typeof IntlViewerContext from 'IntlViewerContext';
 
 // TODO T61557741: Move these types to fbt.js when it's flow strict
 export type FbtResolvedPayload = {|
@@ -72,15 +75,15 @@ export type FbtRuntimeCallInput = {
 };
 
 // TODO: T61015960 - getFb[st]Result should return types that are locked down
-export type FbtHookRegistrations = $Shape<{
+export type FbtHookRegistrations = $Shape<{|
   errorListener: (context: FbtErrorContext) => IFbtErrorListener,
   getFbsResult: (input: FbtResolvedPayload) => mixed,
   getFbtResult: (input: FbtResolvedPayload) => mixed,
   getTranslatedInput: (input: FbtRuntimeCallInput) => ?FbtTranslatedInput,
+  getViewerContext: () => IntlViewerContext,
   logImpression: (hash: string) => void,
   onTranslationOverride: (hash: string) => void,
-  ...
-}>;
+|}>;
 
 const _registrations: FbtHookRegistrations = {};
 const FbtHooks = {
@@ -110,6 +113,10 @@ const FbtHooks = {
     return _registrations.getTranslatedInput?.(input) ?? input;
   },
 
+  getViewerContext(): IntlViewerContext {
+    return _registrations.getViewerContext();
+  },
+
   register(registrations: FbtHookRegistrations): void {
     Object.assign(_registrations, registrations);
   },

runtime/shared/IntlPunctuation.js

@@ -23,8 +23,8 @@
  *  Note: Please keep this in sync with www/html/js/mobile/lib/intl-core.js.
  */
 
+const FbtHooks = require('FbtHooks');
 const IntlPhonologicalRewrites = require('IntlPhonologicalRewrites');
-const IntlViewerContext = require('IntlViewerContext');
 
 /**
  * Regular expression snippet containing all the characters that we
@@ -77,39 +77,40 @@ const ENDS_IN_PUNCT_REGEXP = new RegExp(
     ']*$',
 );
 
-let _rules = [];
-let _lastLocale = null;
-let _rewrites = IntlPhonologicalRewrites.get(IntlViewerContext.locale);
+type Rules = $ReadOnlyArray<[RegExp, (string => string) | string]>;
 
-function _getRules(): Array<[RegExp, (string => string) | string]> {
-  if (
-    IntlViewerContext.locale != null &&
-    IntlViewerContext.locale != '' &&
-    IntlViewerContext.locale !== _lastLocale
-  ) {
-    _rules = [];
-    _lastLocale = IntlViewerContext.locale;
-    _rewrites = IntlPhonologicalRewrites.get(_lastLocale);
+const rulesPerLocale: {[locale: string]: ?Rules, ...} = {};
+
+function _getMemoizedRules(localeArg: ?string): Rules {
+  const locale = localeArg ?? '';
+  let rules = rulesPerLocale[locale];
+  if (rules == null) {
+    rules = rulesPerLocale[locale] = _getRules(localeArg);
   }
-  if (!_rules.length) {
-    // Process the patterns and replacements by applying metaclasses.
-    for (let pattern in _rewrites.patterns) {
-      let replacement = _rewrites.patterns[pattern];
-      // "Metaclasses" are shorthand for larger character classes. For example,
-      // _C may refer to consonants and _V to vowels for a locale.
-      for (const metaclass in _rewrites.meta) {
-        const metaclassRegexp = new RegExp(metaclass.slice(1, -1), 'g');
-        const characterClass = _rewrites.meta[metaclass];
-        pattern = pattern.replace(metaclassRegexp, characterClass);
-        replacement = replacement.replace(metaclassRegexp, characterClass);
-      }
-      if (replacement === 'javascript') {
-        replacement = match => match.slice(1).toLowerCase();
-      }
-      _rules.push([new RegExp(pattern.slice(1, -1), 'g'), replacement]);
+  return rules;
+}
+
+function _getRules(locale: ?string): Rules {
+  const rules = [];
+  const rewrites = IntlPhonologicalRewrites.get(locale);
+
+  // Process the patterns and replacements by applying metaclasses.
+  for (let pattern in rewrites.patterns) {
+    let replacement = rewrites.patterns[pattern];
+    // "Metaclasses" are shorthand for larger character classes. For example,
+    // _C may refer to consonants and _V to vowels for a locale.
+    for (const metaclass in rewrites.meta) {
+      const metaclassRegexp = new RegExp(metaclass.slice(1, -1), 'g');
+      const characterClass = rewrites.meta[metaclass];
+      pattern = pattern.replace(metaclassRegexp, characterClass);
+      replacement = replacement.replace(metaclassRegexp, characterClass);
+    }
+    if (replacement === 'javascript') {
+      replacement = match => match.slice(1).toLowerCase();
     }
+    rules.push([new RegExp(pattern.slice(1, -1), 'g'), replacement]);
   }
-  return _rules;
+  return rules;
 }
 
 /**
@@ -125,7 +126,7 @@ function _getRules(): Array<[RegExp, (string => string) | string]> {
  * Returns: String with phonological rules applied (e.g., "Ozguri...")
  */
 function applyPhonologicalRules(text: string): string {
-  const rules = _getRules();
+  const rules = _getMemoizedRules(FbtHooks.getViewerContext().locale);
   let result = text;
 
   for (let i = 0; i < rules.length; i++) {

runtime/shared/IntlVariationResolverImpl.js

@@ -3,9 +3,10 @@
  * @format
  * @flow strict-local
  */
+
+const FbtHooks = require('FbtHooks');
 const IntlNumberType = require('IntlNumberType');
 const IntlVariations = require('IntlVariations');
-const IntlViewerContext = require('IntlViewerContext');
 
 const invariant = require('invariant');
 
@@ -21,9 +22,9 @@ const IntlVariationResolverImpl = {
   getNumberVariations(
     number: number,
   ): Array<$FlowFixMe | $TEMPORARY$string<'*'> | $TEMPORARY$string<'_1'>> {
-    const numType = IntlNumberType.get(IntlViewerContext.locale).getVariation(
-      number,
-    );
+    const numType = IntlNumberType.get(
+      FbtHooks.getViewerContext().locale,
+    ).getVariation(number);
     invariant(
       // eslint-disable-next-line no-bitwise
       numType & IntlVariations.BITMASK_NUMBER,