How to pass/interpolate components in paraglide-js (e.g. Link-Component) ?

[actraiser]

Say, i want to display a notification like : "User {actingUser} has blocked user {affectedUser} for reason {reason}" and instead of plain text i want to link to the respective user profiles via a Link-component. I believe in react-i18next I was able to just pass that component into the translate-function. Mapped to paraglide-js I would imagine it would work similar like:

Message definition in en.json

{
  "blockUser": "User {actingUser} has blocked user {affectedUser} for reason {reason}"
}

Function call: 

m.blockUser({
  actingUser: <Link to="/profile/actingUserId">{actingUserNickname}</Link>,
  affectedUser: <Link to="/profile/affectedUserId">{affectedUserNickname}</Link>,
  reason: 'you were bad',
});

But doing so will right now stringify the component which then results in [object object].

My question is, wether interpolating components is supported using another way or if there is a best practice how to deal with text that should include components - other than splitting it up in multiple sub strings?

Greets
-act

[LorisSigrist]

That's a use-case we haven't really considered before. I don't believe there currently is a any way to do it. However, given that this likely is a common use-case we will think of something
Sorry to disappoint

[samuelstroschein]

To add to @LorisSigrist #1959 (comment), our major concern is collaboration with translators and designers when we add such a feature to paraglide js.

Mixing code/rendering logic into messages will exclude every non-dev that needs to be collaborated with. While the desire exists from a dev perspective, the outcome might be devasting from an organizational perspective. Questions like "How do designers and translators interact with this feature?" need to be elaborated before we can implement this feature.

[actraiser]

Mixing code/rendering logic into messages will exclude every non-dev that needs to be collaborated with.
need to be elaborated before we can implement this feature

To start off the elaboration, I believe this is largely a theoretical issue.

In my example, translators must not care about wether variables in the en.json within the key "blockUser" actually output a plain string or Link-Components, Avatar-Images or even just a different text format like making that part bold. But from a developer-perspective it is crucial that the original and translated sentence under the key "blockuser" is complete and correct in a grammatical sense. We can not naively split up the string like:

{
  "blockUserPart1": "User"
  "blockUserPart2": "has blocked user"
  "blockUserPart3": "for reason {reason}"
}

and then (again naively) put that together:

m.blockUserPart1() + <Link 1/> + m.blockUserPart(2) + .... etc

This is not only a nightmare to maintain, it also will not work in different languages that have different grammatical rules. Also, the translator has not really any context anymore what the translation is about.

As I stated before, react-i18next which I used a couple of years ago does allow for quite some ways of interpolating, from simple cases like text formatting within a sentence to embedding full React components. (https://react.i18next.com/latest/trans-component)

While I don't believe you would need all of their options, I think that to allow replacing {key} only with plain text is not sufficient for many projects where localization is required.

Greets
-act

[samuelstroschein]

Thanks for your insights! Your reply confirms my suspicion that this large-scale effort needs a long prototyping phase. We want to build the right abstractions that work for an entire organization, from developers to translators, designers, marketing people, and more.

1. Your examples include multiple indications of why cross-team collaboration needs to be considered as a practical issue, not a theoretical one :D
2. The docs for i18next Transc component contain multiple warnings on how this feature breaks down the road e.g. Make React resilient to DOM mutations from Google Translate facebook/react#11538 (comment). Mixing code and content will inevitably lead to such problems. The benefits are questionable from an organizational perspective.

In my example, translators must not care about whether variables in the en.json within the key "blockUser" actually output a plain string or Link-Components, Avatar-Images or even just a different text format like making that part bold.

This paragraph already contains the requirement to collaborate with designers and translators:

1. "Different text format like making that part bold" needs to be discussed with designers (in most large scale software projects).
2. While the variables in your example need no translation, some variables need to be translated. What mechanism exists to enable translators to translate certain variables [if code is mixed in]?

[actraiser]

Thanks for the reply - lots of good points! When I look at my content I need to translate, 90% is solved by replacing {key} with plain text. As opposed to what I thought earlier, using components within sentences is not that common after all. Yet there are those 10% edge cases where embedded links or some formatted words need to be handled within a sentence.

For those cases I could also use for example a custom (as in very tiny) markdown parser that handles the text after paraglide-js returns the translation.

{
  "blockUser": "User [{userNickname}](/profiles/{userSlug}) has ***blocked*** another user"
}

import parse from 'some-micro-md-parser';

parse(m.blockUser({
  userNickname: 'Act Raiser',
  userSlug: 'actraiser',
  reason: 'you were bad',
}));

Result:
User Act Raiser has blocked another user"

Not ideal plus it introduces friction with non-technical people but this would handle most if not all of my edge cases.

Greets
-act

[samuelstroschein]

Oh, now I understand your use case! What you are describing is in RFC stage at #913.

TL;DR

• we will introduce a "tag registry" in an inlang project
• the tag registry ensures cross-team (translator, developer, designer, etc.) responsibilities and collaboration
• in paraglide js, you will be able to define how tags should be resolved e.g. a {b} tag should become a <Bold> React component

If #913 is your use case, please mark my reply as the answer so that we can close this feature request in favor of the other one.

[actraiser]

Thank you for pointing out #913 - this is exactly what I was looking for.