Skip to content

Support passing HTML/lit templates as arguments to l10n strings #1773

Description

@LeoMcA

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).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions