Lazy translations + interpolations

[mogelbrod]

Is it possible to do lazy translations with interpolations?

Imagine a large lookup table using msg macros to define each translation, and some of those translations needing to reference a value only known when applying the translation:

function MyComponent({ value = 'some value' }) {
  return <p>{i18n._(table[value] ?? table.fallback, { value })
}
const table = {
  'some value': msg`Translation`,
  'another': msg`Another translation; {value}`,
  'fallback': msg`Fallback translation; {value}',
}

I'd like to avoid inlining the table into MyComponent & replacing {value} with ${value} as that would result in table being redefined on every call.

[timofei-iatsenko]

One way to do so is wrap msg to functions:

function MyComponent({ value = 'some value' }) {
  return <p>{i18n._(table[value](value) ?? table.fallback(value))</p>
}
const table = {
  'some value': ()= > msg`Translation`,
  'another': (value: string) => msg`Another translation; {value}`,
  'fallback': (value: string) =>  msg`Fallback translation; {value}',
}

all other ways would loose in developer experience. Basically example you wrote should work as well.