Incorrect whitespace handling in JSX

[SomeHats]

Version

• i18next: 10.3.0
• i18next-scanner: 2.4.4
• react-i18next: 7.3.6

Hey there! Thanks for your great work on this tool - it's super useful. I've noticed a few places where it doesn't work as expected around whitespace in JSX:

A few examples:

  <Trans>
    hello
    <span>world</span>
  </Trans>

Expected key (generated by react-i18next): hello<1>world</1>
Actual key (generated by i18next-scanner): hello <1>world</1>

  <Trans>
    <span>hello</span>
    world
  </Trans>

Expected key (generated by react-i18next): <0>hello</0>world
Actual key (generated by i18next-scanner): <0>hello</0> world

This is an area where JSX behaves a bit differently to HTML. To keep a space between the two words, it's quite common to add {' '}:

  <Trans>
    hello{' '}
    <span>world</span>
  </Trans>

Expected key (generated by react-i18next): hello <2>world</2>
Actual key (generated by i18next-scanner): hello<1>{' '}</1> <3>world</3>

[tobiasweibel]

Similar issue reported in #72

[SomeHats]

So slightly inspired by this issue and #72 I had a look at putting together a tool that uses the same babel tooling i use to compile my app to extract all my translation strings. This uses a single parser rather than i18next-scanner's current approach of using a JS parser plus a HTML parser for the JSX bits.

One nice benefit of this is that the issue described here, plus some extra things that should be valid but maybe unusual (e.g. <Trans>2 + 2 = {{result: 2+2}}</Trans> -> 2 + 2 = {{result}}) work correctly with 0 extra effort.

My stuff is here: https://github.com/SomeHats/i18next-extract and is working perfectly for my app (interesting bits for this discussion: https://github.com/SomeHats/i18next-extract/blob/master/lib/extract-component-visitor.js)

[jamuhl]

@SomeHats if you add some readme we might add that to https://www.i18next.com/plugins-and-utils.html others might like your work...

[cheton]

Since v2.6.0, the HTML parser is replaced by Acorn-JSX parser for parsing JSX code. Check out the latest release at https://github.com/i18next/i18next-scanner/releases/tag/v2.6.0