KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

eslint-plugin-react-google-translate

★ 56 Open GitHub ↗

ESlint plugin for highlighting React patterns which can potentially cause browser exceptions while Google Translate is in use.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# eslint-plugin-react-google-translate

ESLint plugin to highlight code patterns in React applications which can lead to browser exceptions while the Google Translate browser extension is in use. This is a common problem for React applications and a known issue to both [React](https://github.com/facebook/react/issues/11538#issuecomment-390386520) and [Google](https://issues.chromium.org/issues/41407169).

When active on a page, the Google Translate browser extension is very liberal with its DOM manipulation, notably, replacing text nodes with `font` tags. This can be a problem for React applications as it can cause exceptions to be thrown when _conditionally_ rendering text nodes with siblings within JSX expressions.

Whilst many proposals have been suggested to avoid browser issues, this ESLint plugin aims to solve the problem far earlier in the development process by highlighting certain code patterns to the developer which can cause a browser exception to be thrown where Google Translate is in use.

Examples of code that can throw:

```jsx
function SomeComponent({ val }) {
 return (
 <div>
 
 // ❌ foo & bar must be wrapped
 {val ? 'foo' : 'bar'} hello world
 
 
 // ❌ static text nodes must be wrapped when they are preceded by a
 conditional expression
 {val ? foo : bar} hello world
 
 // ❌ all text must be wrapped in spans ('foo', 'bar' & 'hello world')
 {val ? 'foo' : 'bar'} hello world
 
 // ❌ `val.toLocaleString()` returns a text node and should be wrapped
 {val ? val.toLocaleString() : bar} hello world
 
 
 // ❌ object properties rendering a text node should be wrapped
 {val ? obj.a : bar} hello
 
 
 // ❌ 'foo' needs to be wrapped in a span (expression has a sibling)
 {val && 'foo'}
 hello world
 
 // ✅ conditionally rendered text nodes with no siblings won't throw
 {val || 'bar'}
 // ✅ conditionally rendered text nodes with no siblings won't throw
 {val ? 'foo' : 'bar'}
 // ✅ conditional expression follows the static text node and won't throw
 hello world {val ? foo : bar}
 </div>
 );
}
```

The safe way to write this code, avoiding browser exceptions, is to wrap each of the conditionally rendered text nodes (with siblings) in an element (for example, a ``). Static text nodes with preceding conditionally rendered siblings must also be wrapped:

```jsx
function SomeComponent({ val }) {
 return (
 <div>
 // ✅ all text nodes are wrapped
 
 {val ? foo : bar}
 hello world
 
 
 // ✅ `val.toLocaleString()` is wrapped
 {val ? {val.toLocaleString()} : bar}
 hello world
 
 
 // ✅ object properties rendering a text node are wrapped
 {val ? {obj.a} : bar} hello
 
 
 // ✅ 'foo' is wrapped (expression has a sibling)
 {val && foo} hello world
 
 // ✅ conditionally rendered text, but no siblings
 {val || 'bar'}
 // ✅ conditionally rendered text, but no siblings
 {val ? 'foo' : 'bar'}
 </div>
 );
}
```

An additional problem identified is React components returning text nodes directly (or numerical values which will be rendered as text). When a React component returns values other than JSX / null, Google Translate can continue to display stale values after state changes, without any error being thrown. Since this is very hard to debug it is better to avoid it altogether.

```tsx
export function SomeComponent({ input }) {
  if (!input) {
    return null; // ✅ not a problem
  }

if (input === 'a') {
 return 'A'; // ❌ the browser can display the stale value when state changes
 } else if (input === 'b') {
 return 2; // ❌ numerical values which are rendered as strings can also experience this
 } else if (input === 'c') {
 return `Template Litera${1}`; // ❌ template literals are displayed as strings and can also experience this
 } else {
 return I am fine; // ✅ returning JSX prevents the problem
 }
}
```

## Installation

```sh
npm install eslint-plugin-react-google-translate --save-dev
```

## Usage (ESLint 9+, flat config)

Use the `recommended` config to enable all rules:

```js
// eslint.config.js
import reactGoogleTranslate from 'eslint-plugin-react-google-translate';

export default [reactGoogleTranslate.configs.recommended];
```

Or configure the rules individually (Each rule can be treated as a warning if an error is deemed too strict.):

```js
// eslint.config.js
import reactGoogleTranslate from 'eslint-plugin-react-google-translate';

export default [
  {
    plugins: {
      'react-google-translate': reactGoogleTranslate,
    },
    rules: {
      'react-google-translate/no-conditional-text-nodes-with-siblings': 'error',
      'react-google-translate/no-return-text-nodes': 'warn',
    },
  },
];
```

## Usage (ESLint 8, legacy `.eslintrc`)

The plugin still works with older ESLint versions using the legacy config format. Add `react-google-translate` to the plugins section of your `.eslintrc` configuration file:

```json
{
  "plugins": ["react-google-translate"],
  "rules": {
    "react-google-translate/no-conditional-text-nodes-with-siblings": "error",
    "react-google-translate/no-return-text-nodes": "error"
  }
}
```

## TypeScript

The plugin supports TypeScript and will use type information where available. Type-aware checks run _in addition_ to the standard pattern-based checks.

Where type information is unavailable (e.g. in JavaScript files or in Node versions earlier than 18.18), the plugin falls back to pattern matching only. This reduces coverage slightly, but the plugin will still catch most problematic patterns without types.

eslint-plugin-react-google-translate

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README