Array Interpolation about i18next

[adrai]

You can define your own format function like this: https://www.i18next.com/translation-function/formatting#adding-custom-format-function

i18next.services.formatter.add('duplicate', (value, lng, options) => {
    return value.map(v => v * 2).join(' | ');
});

[adrai]

codesandbox

[robross0606]

Is if (format === 'duplicate') block still needed if you're already declaring the formatter with the name "duplicate"?

[adrai]

sorry, copy/paste error

[robross0606]

No worries. Thanks! 🙂

[robross0606]

Sorry to belabor this, but when I debug the use of services, it appears the values of value and lng are backwards in the function calls. I see the language (e.g. "en") passed in on the value parameter and my interpolation values showing up on the lng parameter. Is the documentation backwards?

[adrai]

Don't think so: https://github.com/i18next/i18next/blob/master/test/runtime/i18next.translation.formatting.test.js#L68

[robross0606]

Sorry, my bad. I was accidentally using formatter.addCached() instead of formatter.add(). 😊

[robross0606]

I'm sorry to keep bothering, but the documentation here is a really a bit confusing. I'm trying to pass in the separator as an option to my interpolation like this:

[robross0606]

Sorry to keep bothering, but the documentation is a bit limited/confusing here. I'm trying to pass in the separator as an interpolation option like this:

      "no-selected-terms": "Schedule has no selected Terms on Activity Item: {{termGroupPath, join(separator:' ► ')}}"

If I don't pass in options to my custom formatting function, it works and uses the default separator:

      "no-selected-terms": "Schedule has no selected Terms on Activity Item: {{termGroupPath, join}}"

However, the second I try to pass in options, it appears to skip my custom formatter completely. What am I doing wrong here?

[robross0606]

Okay, I think I figured out the syntax, but this leads to what feels like an actual limitation in the design. If I remove the ' from my syntax like this:

"no-selected-terms": "Schedule has no selected Terms on Activity Item: {{termGroupPath, join(separator: ► )}}"

I am able to get the formatter called and the separator option is there. However, because I had to remove the quotes, the spaces are trimmed from the option and I end up with '►' instead of ' ► ' which is what I need. Is this a limitation/bug? Is it possible to pass whitespace as a format parameter?

[adrai]

Why are you passing the separator like that, and not hardcode it in the formatter function?

[robross0606]

Because I needed the formatter to be flexible to different separators based on the specific translation/interpolation. Are you saying I would need to set up a different custom formatter for every "join" delimiter?

[adrai]

The values are trimmed, while parsing...
But you can pass additional options when calling the t function, something like this:

t('no-selected-terms', { termGroupPath: '...', separator: ' ► ' })

[robross0606]

Hmmm... The problem with this approach is that it violates separation of concerns between data presentation and code. The separator used for a translation needs to be part of the translation data which is managed by a documentation expert -- part of the render layer. Meanwhile, code is code where we supply nothing but the key and the raw data. The documentation expert may decide to use a different separator in his declaration JSON file. We cannot hard code that.

[adrai]

if your separators always have whitespace, you can just add the whitespace in the format function?

[robross0606]

It doesn't always have it, but I'm toying with working around this by adding a pad: true parameter. It isn't great, but this is a definite limitation of the library. Trimming all passed in parameters definitely limits flexibility.

[adrai]

btw: I just tested, with whitespace like this and it seems to work: {{termGroupPath, join(separator: ' ► ')}}

[robross0606]

Hmmm... You're right! I wonder why it was skipping my function before. Okay, then! No problems at all. 😄 🚀