Lingui translation API function in pure JS (without macro)

[MurzNN]

Could anyone share an example of the Lingui translation function without macro, in pure JS? Something like this:

import { I18n } from '@lingui/core'

i18n.load("fr", messages)
i18n.activate("fr")
const translated = i18n.SOMETHING('Hello world')

So, what should be used instead of SOMETHING to get the result?

[MurzNN]

I still can't find a short alternative for this, only composed a long one with a custom function like this:

import { I18n } from '@lingui/core'
import { generateMessageId } from "@lingui/message-utils/generateMessageId"

i18n.load("fr", messages)
i18n.activate("fr")
function linguiMsg(message) {
  return { id: generateMessageId(message), message };
}
const translated = i18n._(linguiMsg("Hello world"));

Is there any API function exist that does this in a simpler way?

[timofei-iatsenko]

const translated = i18n._({id: 'app.heading',  'Hello world'})

Once you ditch the macro you will have to craft ids by yourself. The code you created in the previous message

function linguiMsg(message) {
  return { id: generateMessageId(message), message };
}
const translated = i18n._(linguiMsg("Hello world"));

would not be recognized by the extractor.

[MurzNN]

Thank you! Seems the most convenient way in places where we can't use the t macro - is to still use the msg macro like this:

import { I18n } from '@lingui/core'
import { msg } from '@lingui/core/macro'

i18n.load("fr", messages)
i18n.activate("fr")
const translated = i18n._(msg`Hello world`)

This works as required for cases when you have the i18n object defined as a local object, not the global one, like this:

const { allI18nInstances } = await initializeI18n()

export function myFunction(locale: string) {
  const i18n = allI18nInstances[locale]
  const translated = i18n._(msg`Hello world`)
}

[MurzNN]

And if you need to use the strings with a custom id, here is an invented approach:

const { allI18nInstances } = await initializeI18n()

export function myFunction(locale: string) {
  const i18n = allI18nInstances[locale]
  const translated = i18n._(
        msg({
          id: 'subjectOnDomain',
          message: `{subject} on {domain}`,
        }).id,
        {
          subject: 'foo',
          domain: 'bar',
        })
}
``

[timofei-iatsenko]

Yes using msg together with i18n._(msg`Hello world`) is recomended approach.

Regarding custom id you probably could simplify this to just (if you have subject and domain already available):

const translated = i18n._(msg({
    id: 'subjectOnDomain',
    message: `${{subject}} on ${{domain}}`,
}))

[MurzNN]

Oh, the issue is that we can't use any macros in pure JS, so using the msg macro leads to issues like this: #2469 - have to revert back to the raw implementation like this:

const translated = this.i18n._(
  `{subject} on {domain}`,
  {
    subject: 'foo',
    domain: 'bar,
  },
)

So, still searching for the right clean solution...

[MurzNN]

After trying different approaches, I settled on this the most simple and clean approach of translating messages in pure JS without macros:

const text = i18n.t(/* i18n */ '{subject} on {domain}', {
  subject: 'foo',
  domain: 'bar,
})

It works well and using the /* i18n */ comment, the extractor detects and extracts the string correctly. The issue is only with complex scenarios where I need to pass the context to the message, for this I created a separate question: #2490