Best Practice for Tenant/Site Configurable Terms in Lingui (Dynamic “Tokenized” Labels)

[justinmwarner]

We have a requirement where we need to support tenant/site/user set terminology replacement.

Example:

• Default term: “PIP” (Performance Improvement Plan)
• Some tenants call it: “RP” (Remediation Plan)
• Others might call it something else.

We want our translations to remain stable, but allow specific nouns to be substituted at runtime depending on the tenant’s configuration.

Some options I've thought up, but would love some feedback on.

Option 1: Pre-process / rewrite the Lingui message catalog at load time

Before rendering the UI, we fetch the tenant’s “terminology map” (e.g. { ['{PIP}']: "RP" }) and then mass-replace all translations (in the messages) before passing them into Lingui, a use in code would be like

Example code:

function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    async function init() {
      const terms = await fetchTenantTerms();

      const modifiedCatalog = replaceCatalogTokens(baseCatalog, terms);

      i18n.load("en", modifiedCatalog);
      i18n.activate("en");

      setReady(true);
    }

    init();
  }, []);

  if (!ready) return <div>Loading…</div>;

  return (
    <I18nProvider i18n={i18n}>
      {children}
    </I18nProvider>
  );
}

function Foo() {
  return <Trans>Select the {PIP} type</Trans>;
}

Option 2: Interpolate the term dynamically at render time

Have a context provider that fetches the mapping and then use the context provider's values as normal placeholders that Lingui already supports.

Example code:

export function AssignPlanType() {
  const { planName } = useTerminology(); // This context fetches the data and return a placeholder value until the data comes back

  return (
    <div>
      {t`Assign ${planName} type`}
    </div>
  );
}

I like the above, especially with lingui@5 as it will inform the translator what the placeholder name was.

Option 3: Maybe something else?

I feel like there are other options available that I'm not thinking about. I could see custom catalogs being an approach but that seems awful.

Notes

I generally like the idea of using mustache placeholders, but understand it maybe breaks the Lingui patterns.

I have not tried any of the above, so I'm not sure on feasibility, I'm just trying to understand options before dedicating time to POCs/Spiking.

[andrii-bodnar]

Hi @justinmwarner!

I imagine that you would need translations for each target language for each tenant. Lingui would then need to extract these strings into a message catalogue for translation. So these terms should be defined for later use.

Then, the most stable approach would be dynamic interpolation.

[justinmwarner]

This makes sense, we'll be doing a quick POC of this and make sure it works. Thank you!