eslint-plugin-translate-breaks-ref-patch

Hint 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.

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install eslint-plugin-translate-breaks-ref-patch:

npm install eslint-plugin-translate-breaks-ref-patch --save-dev

Usage

Add translate-breaks-ref-patch to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["translate-breaks-ref-patch"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "translate-breaks-ref-patch/rule-name": 2
  }
}

Rules

💡 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.	💡