mdn / mdn/fred

Support passing HTML/lit templates as arguments to l10n strings

Open
#1,773 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
233
Forks
61
Avg merge
1d 1h
Merged PRs (30d)
82

Description

There are times when we need to pass HTML/lit templates as an argument to a fluent string, something like:

baseline-indicator-alternatives-consider = Consider using the following features instead: { $list }.
const links = alternatives.map(
  ({ name, description, mdn_url }) =>
    html`<a
      href=${changeDocsLocale(mdn_url, context.locale)}
      title=${description}
      >${name}</a
    >`,
);
const parts = new Intl.ListFormat(context.locale, {
  type: "disjunction",
}).formatToParts(links.map((_, i) => String(i)));
const list = parts.map(({ type, value }) =>
  type === "element" ? links[Number(value)] : value,
);
context.l10n.raw({ id: "baseline-indicator-alternatives-consider", args: { list }})

Currently this fails with:

  TypeError: Variable type not supported: $list, object
      at resolveVariableReference (file:///home/leo/Projects/mdn/fred/node_modules/@fluent/bundle/esm/resolver.js:137:1)
      at resolveExpression (file:///home/leo/Projects/mdn/fred/node_modules/@fluent/bundle/esm/resolver.js:86:1)
      at resolveComplexPattern (file:///home/leo/Projects/mdn/fred/node_modules/@fluent/bundle/esm/resolver.js:254:1)
      at FluentBundle.formatPattern (file:///home/leo/Projects/mdn/fred/node_modules/@fluent/bundle/esm/bundle.js:142:46)
      at Fluent.getMessage (file:///home/leo/Projects/mdn/fred/l10n/fluent.js:169:1)
      at Fluent.get (file:///home/leo/Projects/mdn/fred/l10n/fluent.js:65:1)
      at l10n.raw (file:///home/leo/Projects/mdn/fred/l10n/fluent.js:283:1)
      at BaselineIndicator.normalizeData (file:///home/leo/Projects/mdn/fred/components/baseline-indicator/server.js:170:1)
      at BaselineIndicator.render (file:///home/leo/Projects/mdn/fred/components/baseline-indicator/server.js:210:1)
      at BaselineIndicator.render (file:///home/leo/Projects/mdn/fred/components/server/index.js:49:1)

We could/should probably also come up with a helper for the dance we have to do with substituting back into the formatToParts list (it requires strings to be passed).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in l10n/fluent.js, then reproduce the failure through BaselineIndicator.normalizeData in components/baseline-indicator/server.js. Trace how @fluent/bundle formats args and how the example reconstructs Intl.ListFormat parts. Done means l10n.raw accepts HTML/lit template arguments and preserves them in the localized output without the current type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, localization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.