Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trans doesn't work if the first element is a HTML tag #298

Closed
cooljykim opened this issue Sep 15, 2017 · 5 comments
Closed

Trans doesn't work if the first element is a HTML tag #298

cooljykim opened this issue Sep 15, 2017 · 5 comments

Comments

@cooljykim
Copy link

@cooljykim cooljykim commented Sep 15, 2017

I'm seeing that the <Trans> doesn't work for some cases.

Component:

import React from 'react';
import { translate, Trans } from 'react-i18next';

const TestTrans = () => {
  const numOfItems = 2;

  return (
    <div>
      <div>Test Trans</div>
      <div>&nbsp;</div>
      <div>
        <div>Case 1: works!</div>
        <Trans i18nKey='testTransKey1' count={numOfItems}>
          {numOfItems} items matched.
        </Trans>
      </div>
      <div>&nbsp;</div>
      <div>
        <div>Case 2: doesn't work!</div>
        <Trans i18nKey='testTransKey2' count={numOfItems}>
          <span className='matchCount'>{numOfItems}</span> items matched.
        </Trans>
      </div>
      <div>&nbsp;</div>
      <div>
        <div>Case 3: works!</div>
        <Trans i18nKey='testTransKey3' count={numOfItems}>
          Result: <span className='matchCount'>{numOfItems}</span> items matched.
        </Trans>
      </div>
    </div>
  );
};

export default translate('test')(TestTrans);

And, here's the locale JSON -

{
  "testTransKey1": "<0>{numOfItems}</0> item matched.",
  "testTransKey1_plural": "<0>{numOfItems}</0> items matched.",

  "testTransKey2": "<0><0>{numOfItems}</0></0> item matched.",
  "testTransKey2_plural": "<0><0>{numOfItems}</0></0> items matched.",

  "testTransKey3": "Result: <1><0>{numOfItems}</0></1> item matched.",
  "testTransKey3_plural": "Result: <1><0>{numOfItems}</0></1> items matched."
}

And, here's what I see on the browser -

Test Trans
 
Case 1: works!
2 items matched.
 
Case 2: doesn't work!
<0>{numOfItems}</0> items matched.
 
Case 3: works!
Result: 2 items matched.

As you can see, the "Case 2" doesn't work. Am I missing something, or is it a bug?

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Sep 16, 2017

will need to look into this...thank you for reporting and the detailed report.

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Sep 16, 2017

screen shot 2017-09-16 at 15 38 39

found the problem - the regex we used to split nodes has some flaw if same index gets nested (see image)

i'm replacing now the naive approach of splitting by a regex with an ast parser for html.

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Sep 16, 2017

please also take not there might be cases where you like to do interpolation using {{numOfItems}} like d6acc24#diff-0753f873921ce05528a0b0d605e92c45R8

@jamuhl

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Sep 16, 2017

react-i18next@5.4.0 comes with the new ast parser and should fix this issue - please check if still encounter any issue. thx

@cooljykim

This comment has been minimized.

Copy link
Author

@cooljykim cooljykim commented Sep 18, 2017

@jamuhl , it works well now! Thanks for the prompt fix for this!
(also, thanks for the tip on the interpolation).

@cooljykim cooljykim closed this Sep 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.