How to interpolate JSX?

Kinda related to https://github.com/ttag-org/ttag/issues/93,

How do I localise:

1. User %s not found where %s is meant to expand to <span>xxx</span>, or
2. Please <a href="...">continue</a> to blah blah?

I was thinking that for 1. t could perhaps return a fragment? For 2. I can’t even think of a good syntax to express that both please and continue are to be translated…

[dimaqq]

My 2c:

markup in translations is a complex problem

Today you might have <T><strong>Please</strong>do</T>.

Tomorrow you’ll have:

const Strong = styled.span`...`;
... return <T><Strong>Please</Strong>don't</T>;

and what then?

simpler use cases

I often find myself writing stuff like <label htmlFor=...>{tUsername}</label>... and I wish there was some way to make that less verbose, somehow automatic.

At the same time, if it were fully automatic, what would be the boundaries for translatable text or atoms of translatable text in <a>foo<b>bar<c>baz</c></b>quux></a>?

Wrt. syntax, the ES6 template literals are probably the most powerful mechanism there is, as nesting, expressions, etc are all allowed. In fact the power is even a bit too much for ttag and only constants are allowed in the ${} substitution blocks, which IMO is a good choice. I feel that anything else would require own babel plugin that parses superset of JSX, that should probably be a separate project.

[AlexMost]

@benmonro

The “oh no” doesn’t get put into the .PO file

That seems like a bug, will create a ticket for that.