"mode": 'jsx-only' forbids any string literal inside interpolation blocks

[lgenzelis]

I'm using "eslint-plugin-i18next": "6.0.1".

My use case: I want to forbid string literals in children and aria-labels. So, this is my config:

'i18next/no-literal-string': [
  'error',
  {
    "mode": 'jsx-only',
    'jsx-attributes': { include: ['aria-label'] },
  },
],

This works fine, except that it detects any string literal inside an interpolation block as an error. For example:

const list = ['a', 'b', 'c'];

function Foo() {
  console.log('rending foo'); // ----> This is fine
  return (
    <div>
      {list.map((item) => {
        console.log('debugging', item); // -------> An error is reported in the word 'debugging'
        return <div key={item}>{item}</div>;
      })}
    </div>
  );
}

[edvardchen]

jsx-only mode did check everything surrounded by JSX markup.

My initial thought is that people might make mistakes easily like

<>hello world</>  // error
// vs
<>{"hello world"}</> // but this's fine?

[lgenzelis]

Ok, I get it. In your example, both should be errors, indeed. The difference, I guess, is that in my example the "wrongly" detected error is inside a callback (for .map()). I don't know any details about the implementation, but maybe you could check if a callback is being declared, and in that scenario, "forget" about any JSX ancestor?

As a side question, is it ok that I need to specify "mode": 'jsx-only', for my use case? Or is that a bug? I mean, if I just do

'i18next/no-literal-string': [
  'error',
  {
    'jsx-attributes': { include: ['aria-label'] },
  },
],

then aria-labels are not checked at all.

[edvardchen]

The default mode is jsx-text-only which can be found here.

but maybe you could check if a callback is being declared, and in that scenario, "forget" about any JSX ancestor?

Actually the behavior of mode jsx-text-only is very close to this. But It only checks literals JSX text like <>hello world</>

Since the existing mode all jsx-only jsx-text-only couldn't satisfy your need, I think it needs a new mode which checks only literal JSX text and JSX attributes

[lgenzelis]

Do you think that a new mode is really necessary? I mean, in my original example, do you think there are cases using jsx-only where that behavior is desired? In my opinion it looks more like an improvement that could be done to the jsx-only mode (I mean, ignoring non-jsx related strings inside CallExpressionss 🤔 )

[lgenzelis]

I gave it a try @edvardchen ! 😁 Please let me know what you think #110 🙏

[edvardchen]

It will be a breaking change since we change the behavior of mode jsx-only

Your proposal would make function calls <>{display("hello")} </> <>[0].map(()=>"hello")</> valid but <>{["name"][0]}</> invalid which is a bit confusing. Hard to understand why. It would feel like we had left something unfinished.

Instead, I prefer to check or not to check these dynamic part at all. We can make a new mode named jsx-static-only which checks only JSX text and attributes