Vendor eslint-plugin-jsx-expressions

Alternative to waiting for the PR with support for new versions of
typescript-eslint:

- hluisson/eslint-plugin-jsx-expressions#17

Author: karlhorky

eslint.config.js

@@ -4,7 +4,12 @@ import upleveled from './index.js';
 const config = [
   ...upleveled,
   {
-    ignores: ['__tests__/**/*'],
+    ignores: [
+      // Tests
+      '__tests__/**/*',
+      // Vendored packages (workarounds for incompatibilities)
+      'vendor/**/*',
+    ],
   },
 ];
 

index.js

@@ -6,14 +6,14 @@ import typescriptParser from '@typescript-eslint/parser';
 import gitignore from 'eslint-config-flat-gitignore';
 import eslintImportX from 'eslint-plugin-import-x';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
-import jsxExpressions from 'eslint-plugin-jsx-expressions';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import security from 'eslint-plugin-security';
 import sonarjs from 'eslint-plugin-sonarjs';
 import unicorn from 'eslint-plugin-unicorn';
 import upleveled from 'eslint-plugin-upleveled';
 import globals from 'globals';
+import jsxExpressions from './vendor/eslint-plugin-jsx-expressions/dist/index.js';
 
 /** @type
  * {import('@typescript-eslint/utils/ts-eslint').FlatConfig.RuleLevelAndOptions}

package.json

@@ -44,7 +44,6 @@
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import-x": "0.5.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-jsx-expressions": "1.3.2",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-security": "3.0.0",
@@ -76,12 +75,5 @@
   "packageManager": "pnpm@9.1.1+sha256.9551e803dcb7a1839fdf5416153a844060c7bce013218ce823410532504ac10b",
   "engines": {
     "node": ">=20.9.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "@typescript-eslint/eslint-plugin": "7.9.1-alpha.6",
-      "@typescript-eslint/parser": "7.9.1-alpha.6",
-      "@typescript-eslint/utils": "7.9.1-alpha.6"
-    }
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,41 @@
+# eslint-plugin-jsx-expressions
+
+Rules for safe logical expressions in JSX
+
+## Installation
+
+You'll first need to install [ESLint](https://eslint.org/):
+
+```sh
+npm i eslint --save-dev
+```
+
+Next, install `eslint-plugin-jsx-expressions`:
+
+```sh
+npm install eslint-plugin-jsx-expressions --save-dev
+```
+
+## Usage
+
+Add `jsx-expressions` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+  "plugins": ["jsx-expressions"]
+}
+```
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "jsx-expressions/strict-logical-expressions": "error"
+  }
+}
+```
+
+## Supported Rules
+
+- [jsx-expressions/strict-logical-expressions](https://github.com/hluisson/eslint-plugin-jsx-expressions/blob/master/docs/rules/strict-logical-expressions.md): Enforces logical "&&" expressions do not use potentially falsey numbers or strings.

vendor/eslint-plugin-jsx-expressions/README.md

@@ -0,0 +1,70 @@
+# Strict JSX expressions for safe conditional renders. (strict-logical-expressions)
+
+Forbids the usage of potentially falsey string or number values in logical && expressions.
+Oftentimes, these logical expressions are used in jsx to enable conditional rendering behavior.
+
+However, one can encounter unexpected behavior when a 0 or empty string values is returned as the result of the expression and rendered accidentally.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```js
+// Potentially falsey strings are not allowed
+let str = '';
+<App>{str && <Foo />}</App>;
+
+// Potentially falsey numbers are not allowed
+let num = 0;
+<App>{num && <Foo />}</App>;
+
+// Includes types that may be a string or number
+let thisOrThat: Record<any, any> | string | number;
+<App>{thisOrThat && <Foo />}</App>;
+```
+
+Examples of **correct** code for this rule:
+
+```js
+// Coalescing to boolean is ok
+let str = "Foo";
+<App>{!!str && <Foo />}</App>;
+
+// Turning into a boolean is ok
+let str = "Foo";
+<App>{Boolean(str) && <Foo />}</App>;
+
+// Constant values are ok
+const str = "Foo";
+<App>{str && <Foo />}</App>;
+
+// Constant values are ok
+const num = 1;
+<App>{num && <Foo />}</App>;
+```
+
+### Options
+
+```ts
+type Options = [
+  {
+    allowString?: boolean;
+    allowNumber?: boolean;
+  }
+];
+
+defaultOptions: [
+  {
+    allowString: false,
+    allowNumber: false,
+  },
+];
+```
+
+## Further Reading
+
+- [React docs on conditional rendering](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator)
+- [Conditional rendering in React Native may crash your app](https://koprowski.it/2020/conditional-rendering-react-native-text-crash/)
+- https://github.com/facebook/react/blob/95a313ec0b957f71798a69d8e83408f40e76765b/packages/react-reconciler/src/ReactChildFiber.js#L461
+- https://github.com/yannickcr/eslint-plugin-react/issues/2073
+- https://github.com/facebook/react-native/issues/20764

vendor/eslint-plugin-jsx-expressions/dist/index.js

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}