Extract dynamic messages without the help of i18nMark

I would like to abstract the use of <Trans />.

e.g.

const TextButton1 = ({ children }) => (
  <button>
    <Trans>{children}</Trans>
  </button>
);

const TextButton2 = ({ children }) => <Trans render="button">{children}</Trans>;

// used in somewhere else
<TextButton1>some message id<TextButton1>
<TextButton2>some other message id<TextButton2>

In this way, I don’t need to import Trans in every single file that is using the button component. However, lingui extract cannot extract properly.

I need to do

<TextButton1>{i18nMark('some message id')}<TextButton1>
<TextButton2>{i18nMark('some other message id')}<TextButton2>

if I want the extract works. However, in this way I need to import i18nMark in every single file instead which leads to same problem that I want to avoid at first.

Any suggestion?

[danielkcz]

@chochihim You are my kind of guy. I am also rather lazy writing these things all over the place… but I don’t think there is an easy way to solve this. Also, you are mixing two things together. If you use <Trans> then you don’t need to worry about i18nMark at all.

I am afraid your idea is probably impossible simply because extractor can only statically analyze the code and what you have here is some runtime code that needs to be executed first and it would not really work.

Just for your information, there is a new and hot release with macros. Personally, It won’t help with this use case, but it’s a little bit nicer.

Edit: Darn it, @tricoder42 was faster for a few seconds 😄

[tricoder42]

First of all, yes I don’t want to import Trans component everywhere. The solution you proposed works. My only concern is that I need to change the aliases array every time I create a component which is cumbersome to me (Given that it is quite often to create a new component just for some style twisting by using CSS-in-JS library).

I understand that. I didn’t understand your intentions for the first time, but now it makes sense.

Secondly, I am thinking if it is possible to move the Trans component up the component tree.

You have two options, but both require to use either Trans or I18n component:

First, pass Trans components:

const Card = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

// usage
<Card 
  title={<Trans>title message id</Trans>} 
  description={<Trans>description message id</Trans>} 
/>

Second, use I18n render prop component (this also works if you need to pass translated messages to html attributes, like href, title, etc):

const Card = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    <p>{description}</p>
  </div>
);

// usage
import { I18n } from "@lingui/react"
import { t } from "@lingui/macro"

<I18n>
  {({ i18n }) => (
    <Card
      title={i18n._(t`title message id`)} 
      description={i18n._(t`description message id`)} 
    />
  )}
</I18n>

---

It may look cumbersone to wrap all messages either in Trans or i18n._, but defining messages in code is only the half of internationalization. You need to have a workflow which extracts messages to external file and loads translations.

You could bypass it by passing title or description prop directly to id prop of Trans component, but then you’re on your own - you need to define message manually and keep it updated. In large projects it soon might become very error prone.