Hint and auto fix for conditional literals in jsx
npm install eslint-plugin-translate-breaks-ref-patchHint and provide suggestion for conditional literals in jsx.
- Why we want to fix conditional literals in jsx?
> React - a very very popular web development framework - breaks when Google Translate runs across a page.
- We suffered from Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. screaming all the time.
- discussions
- chromium bug report
- Rule inspired by this gist and eslint-plugin-sayari.
You'll first need to install ESLint:
``sh`
npm i eslint --save-dev
Next, install eslint-plugin-translate-breaks-ref-patch:
`sh`
npm install eslint-plugin-translate-breaks-ref-patch --save-dev
Add translate-breaks-ref-patch to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
`json`
{
"plugins": ["translate-breaks-ref-patch"]
}
Then configure the rules you want to use under the rules section.
`json``
{
"rules": {
"translate-breaks-ref-patch/rule-name": 2
}
}
💡 Manually fixable by editor suggestions.
| Name                          | Description | 💡 |
| :----------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | :-- |
| no-conditional-literals-in-jsx | Browser auto-translation will break if pieces of text nodes are be rendered conditionally. | 💡 |