From f38f5e2e45d6e190f18ac58d924a21e69778b4f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Tue, 14 Jan 2020 15:06:25 +0100 Subject: [PATCH 1/3] Make ReactLocalization the value of FluentContext --- fluent-react/src/context.js | 5 +---- fluent-react/src/localization.js | 4 +++- fluent-react/src/localized.js | 4 ++-- fluent-react/src/provider.js | 8 +++----- fluent-react/src/with_localization.js | 2 +- 5 files changed, 10 insertions(+), 13 deletions(-) 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/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..5ecfbfd56 100644 --- a/fluent-react/src/with_localization.js +++ b/fluent-react/src/with_localization.js @@ -3,7 +3,7 @@ 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 From 9d49e48615c853f926243498776bb352577b19cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Tue, 14 Jan 2020 15:18:48 +0100 Subject: [PATCH 2/3] Simplify getString in withLocalization --- fluent-react/src/with_localization.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/fluent-react/src/with_localization.js b/fluent-react/src/with_localization.js index 5ecfbfd56..545869874 100644 --- a/fluent-react/src/with_localization.js +++ b/fluent-react/src/with_localization.js @@ -6,13 +6,9 @@ export default function withLocalization(Inner) { 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 }, ); From 397cfd06eba71b980c7ef7258acf605fb363f7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Tue, 14 Jan 2020 15:18:59 +0100 Subject: [PATCH 3/3] Expose FluentContext as public API --- fluent-react/src/index.js | 1 + 1 file changed, 1 insertion(+) 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";