Bring ReactLocalization back to encapsulate bundles and related methods

Author: Gregoor

fluent-react/babel.config.js

@@ -11,6 +11,7 @@ module.exports = {
       "original": "fluent",
       "replacement": "fluent/compat"
     }],
-    "@babel/plugin-proposal-async-generator-functions"
+    "@babel/plugin-proposal-async-generator-functions",
+    "@babel/plugin-proposal-class-properties"
   ],
 };

fluent-react/package.json

@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "7.0.0",
     "babel-jest": "^24.8.0",

fluent-react/src/context.js

@@ -1,3 +1,4 @@
 import { createContext } from "react";
+import ReactLocalization from "./localization";
 
-export default createContext({getBundle: null, parseMarkup: null});
+export default createContext(new ReactLocalization([]));

fluent-react/src/localization.js

@@ -0,0 +1,47 @@
+import { mapBundleSync } from "@fluent/sequence";
+import { CachedSyncIterable } from "cached-iterable";
+
+/*
+ * `ReactLocalization` handles translation formatting and fallback.
+ *
+ * The current negotiated fallback chain of languages is stored in the
+ * `ReactLocalization` instance in form of an iterable of `FluentBundle`
+ * instances. This iterable is used to find the best existing translation for
+ * a given identifier.
+ *
+ * The `ReactLocalization` class instances are exposed to `Localized` elements
+ * via the `LocalizationProvider` component.
+ */
+export default class ReactLocalization {
+  constructor(bundles) {
+    this.bundles = CachedSyncIterable.from(bundles);
+  }
+
+  getBundle = id => mapBundleSync(this.bundles, id);
+
+  getString(id, args, fallback) {
+    const bundle = this.getBundle(id);
+
+    if (bundle) {
+      const msg = bundle.getMessage(id);
+      if (msg && msg.value) {
+        let errors = [];
+        let value = bundle.formatPattern(msg.value, args, errors);
+        for (let error of errors) {
+          this.reportError(error);
+        }
+        return value;
+      }
+    }
+
+    return fallback || id;
+  }
+
+  // XXX Control this via a prop passed to the LocalizationProvider.
+  // See https://github.com/projectfluent/fluent.js/issues/411.
+  reportError(error) {
+    /* global console */
+    // eslint-disable-next-line no-console
+    console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
+  }
+}

fluent-react/src/provider.js

@@ -1,8 +1,7 @@
-import { CachedSyncIterable } from "cached-iterable";
 import { createElement, memo } from "react";
 import PropTypes from "prop-types";
-import { mapBundleSync } from "@fluent/sequence";
 import FluentContext from "./context";
+import ReactLocalization from "./localization";
 import createParseMarkup from "./markup";
 
 /*
@@ -32,41 +31,11 @@ function LocalizationProvider(props) {
     throw new Error("The bundles prop must be an iterable.");
   }
 
-  const bundles = CachedSyncIterable.from(props.bundles);
-  const parseMarkup = props.parseMarkup || createParseMarkup();
-  const l10n = {
-    getBundle: id => mapBundleSync(bundles, id),
-    getString(id, args, fallback) {
-      const bundle = l10n.getBundle(id);
-
-      if (bundle) {
-        const msg = bundle.getMessage(id);
-        if (msg && msg.value) {
-          let errors = [];
-          let value = bundle.formatPattern(msg.value, args, errors);
-          for (let error of errors) {
-            l10n.reportError(error);
-          }
-          return value;
-        }
-      }
-
-      return fallback || id;
-    },
-    // XXX Control this via a prop passed to the LocalizationProvider.
-    // See https://github.com/projectfluent/fluent.js/issues/411.
-    reportError(error) {
-      /* global console */
-      // eslint-disable-next-line no-console
-      console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
-    }
-  };
-
   return createElement(
     FluentContext.Provider,
     { value: {
-      l10n,
-      parseMarkup
+      l10n: new ReactLocalization(props.bundles, props.parseMarkup),
+      parseMarkup: props.parseMarkup || createParseMarkup()
     } },
     props.children
   );