Support passing HTML/lit templates as arguments to l10n strings
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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