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