diff --git a/fluent-react/src/context.js b/fluent-react/src/context.js index b7f6a09a3..ed4516646 100644 --- a/fluent-react/src/context.js +++ b/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([])); diff --git a/fluent-react/src/index.js b/fluent-react/src/index.js index a891e4f0c..90dc28fbc 100644 --- a/fluent-react/src/index.js +++ b/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"; diff --git a/fluent-react/src/localization.js b/fluent-react/src/localization.js index 7817b3c9f..bfc9e58dc 100644 --- a/fluent-react/src/localization.js +++ b/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) { diff --git a/fluent-react/src/localized.js b/fluent-react/src/localized.js index 9fc02cf40..6643f503d 100644 --- a/fluent-react/src/localized.js +++ b/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; diff --git a/fluent-react/src/provider.js b/fluent-react/src/provider.js index cb5e45714..6dfa52e5e 100644 --- a/fluent-react/src/provider.js +++ b/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 ); } diff --git a/fluent-react/src/with_localization.js b/fluent-react/src/with_localization.js index 31b836c09..545869874 100644 --- a/fluent-react/src/with_localization.js +++ b/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 }, );