Merge pull request #446 from stasm/react-context-value

Make ReactLocalization the value of FluentContext

Author: stasm

fluent-react/src/context.js

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

fluent-react/src/index.js

@@ -17,6 +17,7 @@
  * components for more information.
  */
 
+export { default as FluentContext } from "./context";
 export { default as LocalizationProvider } from "./provider";
 export { default as withLocalization } from "./with_localization";
 export { default as Localized } from "./localized";

fluent-react/src/localization.js

@@ -1,5 +1,6 @@
 import { mapBundleSync } from "@fluent/sequence";
 import { CachedSyncIterable } from "cached-iterable";
+import createParseMarkup from "./markup";
 
 /*
  * `ReactLocalization` handles translation formatting and fallback.
@@ -13,8 +14,9 @@ import { CachedSyncIterable } from "cached-iterable";
  * via the `LocalizationProvider` component.
  */
 export default class ReactLocalization {
-  constructor(bundles) {
+  constructor(bundles, parseMarkup = createParseMarkup()) {
     this.bundles = CachedSyncIterable.from(bundles);
+    this.parseMarkup = parseMarkup;
   }
 
   getBundle(id) {

fluent-react/src/localized.js

@@ -53,7 +53,7 @@ function toArguments(props) {
  */
 function Localized(props) {
   const { id, attrs, children: child = null } = props;
-  const { l10n, parseMarkup } = useContext(FluentContext);
+  const l10n = useContext(FluentContext);
 
   // Validate that the child element isn't an array
   if (Array.isArray(child)) {
@@ -141,7 +141,7 @@ function Localized(props) {
 
   // If the message contains markup, parse it and try to match the children
   // found in the translation with the props passed to this Localized.
-  const translationNodes = parseMarkup(messageValue);
+  const translationNodes = l10n.parseMarkup(messageValue);
   const translatedChildren = translationNodes.map(childNode => {
     if (childNode.nodeType === childNode.TEXT_NODE) {
       return childNode.textContent;

fluent-react/src/provider.js

@@ -2,7 +2,6 @@ import { createElement, memo } from "react";
 import PropTypes from "prop-types";
 import FluentContext from "./context";
 import ReactLocalization from "./localization";
-import createParseMarkup from "./markup";
 
 /*
  * The Provider component for the `ReactLocalization` class.
@@ -33,10 +32,9 @@ function LocalizationProvider(props) {
 
   return createElement(
     FluentContext.Provider,
-    { value: {
-      l10n: new ReactLocalization(props.bundles, props.parseMarkup),
-      parseMarkup: props.parseMarkup || createParseMarkup()
-    } },
+    {
+      value: new ReactLocalization(props.bundles, props.parseMarkup),
+    },
     props.children
   );
 }

fluent-react/src/with_localization.js

@@ -3,16 +3,12 @@ import FluentContext from "./context";
 
 export default function withLocalization(Inner) {
   function WithLocalization(props) {
-    const { l10n } = useContext(FluentContext);
+    const l10n = useContext(FluentContext);
     return createElement(
       Inner,
-      // getString needs to be re-bound on updates to trigger a re-render
       {
-        getString: (id, args, fallback) => (
-          l10n
-            ? l10n.getString(id, args, fallback)
-            : fallback || id
-        ),
+        // getString needs to be re-bound to trigger a re-render of Inner
+        getString: (id, args, fallback) => l10n.getString(id, args, fallback),
         ...props
       },
     );