An open API service indexing awesome lists of open source software.

https://github.com/codementorio/eslint-plugin-translate-breaks-ref-patch


https://github.com/codementorio/eslint-plugin-translate-breaks-ref-patch

Last synced: about 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# 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](https://github.com/facebook/react/issues/11538)
- [chromium bug report](https://bugs.chromium.org/p/chromium/issues/detail?id=872770)

- Rule inspired by [this gist](https://gist.github.com/azirbel/51518d919de979197a7c5c25c54a56d6) and [eslint-plugin-sayari](https://github.com/sayari-analytics/eslint-plugin-sayari/blob/main/lib/rules/no-unwrapped-jsx-text.js).

## Installation

You'll first need to install [ESLint](https://eslint.org/):

```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
```

## Usage

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
}
}
```

## Rules

💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

| Name                           | Description | 💡 |
| :----------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | :-- |
| [no-conditional-literals-in-jsx](docs/rules/no-conditional-literals-in-jsx.md) | Browser auto-translation will break if pieces of text nodes are be rendered conditionally. | 💡 |