Fix noGoogleTranslateCrashingSyntax to use shallow :has(>...)

.changelog/2029.internal.md

@@ -0,0 +1 @@
+Fix noGoogleTranslateCrashingSyntax to use shallow :has(>...)

.eslintrc.js

@@ -8,31 +8,31 @@ const noGoogleTranslateCrashingSyntax = [
       'JSXElement > JSXExpressionContainer > LogicalExpression[operator="&&"]' +
       '[right.type!="JSXElement"][right.type!="JSXFragment"]',
     message:
-      'Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
+      '[a] Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban `condition && <>text node</>`
   {
     selector:
       'JSXElement > JSXExpressionContainer > LogicalExpression[operator="&&"]' +
-      ' > JSXFragment > .children:not(JSXElement, JSXText[value=/^\\s+$/])',
+      ' > JSXFragment > .children:not(JSXElement, JSXText[value=/^\\s+$/], JSXExpressionContainer)',
     message:
-      'Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
+      '[b] Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban text nodes before or after a condition `text {condition && <span/>} text`
   {
     selector:
-      'JSXElement:has(JSXExpressionContainer.children > LogicalExpression[operator="&&"])' +
+      'JSXElement:has(> JSXExpressionContainer.children:has(> LogicalExpression[operator="&&"]))' +
       ' > JSXText[value!=/^\\s+$/]',
     message:
-      'Plain text nodes before or after a condition could break React if used with Google Translate. Wrap text into an element.',
+      '[c] Plain text nodes before or after a condition could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban variables before or after `{var} {condition && <span/>} {var}` (just in case they return a string)
   {
     selector:
-      'JSXElement:has(JSXExpressionContainer.children > LogicalExpression[operator="&&"])' +
+      'JSXElement:has(> JSXExpressionContainer.children:has(> LogicalExpression[operator="&&"]))' +
       ' > JSXExpressionContainer:matches([expression.type="Identifier"], [expression.type="CallExpression"])',
     message:
-      'Plain text nodes before or after a condition could break React if used with Google Translate. Identifier could possibly return a string, so wrap it into an element.',
+      '[d] Plain text nodes before or after a condition could break React if used with Google Translate. Identifier could possibly return a string, so wrap it into an element.',
   },
 
   // Ban `condition ? text node : <span/>`
@@ -41,31 +41,31 @@ const noGoogleTranslateCrashingSyntax = [
       'JSXElement > JSXExpressionContainer > ConditionalExpression' +
       ' > :matches(.consequent, .alternate):not(JSXElement, JSXFragment)',
     message:
-      'Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
+      '[e] Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban `condition ? <>text node</> : <span/>`
   {
     selector:
       'JSXElement > JSXExpressionContainer > ConditionalExpression' +
-      ' > JSXFragment > .children:not(JSXElement, JSXText[value=/^\\s+$/])',
+      ' > JSXFragment > .children:not(JSXElement, JSXText[value=/^\\s+$/], JSXExpressionContainer)',
     message:
-      'Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
+      '[f] Conditional plain text nodes could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban text nodes before or after a condition `text {condition ? <span/> : <span/>} text`
   {
     selector:
-      'JSXElement:has(JSXExpressionContainer.children > ConditionalExpression)' +
+      'JSXElement:has(> JSXExpressionContainer.children:has(> ConditionalExpression))' +
       ' > JSXText[value!=/^\\s+$/]',
     message:
-      'Plain text nodes before or after a condition could break React if used with Google Translate. Wrap text into an element.',
+      '[g] Plain text nodes before or after a condition could break React if used with Google Translate. Wrap text into an element.',
   },
   // Ban variables before or after `{var} {condition ? <span/> : <span/>} {var}` (just in case they return a string)
   {
     selector:
-      'JSXElement:has(JSXExpressionContainer.children > ConditionalExpression)' +
+      'JSXElement:has(> JSXExpressionContainer.children:has(> ConditionalExpression))' +
       ' > JSXExpressionContainer:matches([expression.type="Identifier"], [expression.type="CallExpression"])',
     message:
-      'Plain text nodes before or after a condition could break React if used with Google Translate. Identifier could possibly return a string, so wrap it into an element.',
+      '[h] Plain text nodes before or after a condition could break React if used with Google Translate. Identifier could possibly return a string, so wrap it into an element.',
   },
 
   // Ban components returning text or variables inside fragments `return <>{t('text')}</>` (just in case vars return a string and parent components are conditionally inserted)
@@ -80,21 +80,21 @@ const noGoogleTranslateCrashingSyntax = [
       '  MemberExpression[property.name="children"]' + // Allow `<>{someProps.children}</>`
       ')',
     message:
-      'Text nodes inside React fragments could break React if used with Google Translate. Identifier could possibly return a string, and parent components could be conditionally inserted, so wrap it into an element.',
+      '[i] Text nodes inside React fragments could break React if used with Google Translate. Identifier could possibly return a string, and parent components could be conditionally inserted, so wrap it into an element.',
   },
 
   // TODO: Nesting is not supported. Detect it as error for now
   {
     selector: 'JSXElement > JSXExpressionContainer > ConditionalExpression > ConditionalExpression',
-    message: 'noGoogleTranslateCrashingSyntax can not check nested conditions.',
+    message: '[j] noGoogleTranslateCrashingSyntax can not check nested conditions.',
   },
   {
     selector: 'JSXElement > JSXExpressionContainer > ConditionalExpression > LogicalExpression',
-    message: 'noGoogleTranslateCrashingSyntax can not check nested conditions.',
+    message: '[k] noGoogleTranslateCrashingSyntax can not check nested conditions.',
   },
 ]
 
-/** @type { import('eslint').Linter.Config } */
+/** @type { import('eslint').Linter.LegacyConfig } */
 const config = {
   extends: [
     'eslint:recommended', // https://eslint.org/docs/rules/

src/app/pages/AccountPage/Features/TransactionHistory/index.tsx

@@ -63,7 +63,6 @@ export function TransactionHistory() {
           <ErrorFormatter code={transactionsError.code} message={transactionsError.message} />
         </p>
       )}
-      {/* eslint-disable no-restricted-syntax */}
       {!isInitialLoading && (!!pendingTransactionComponents.length || hasUnknownPendingTransactions) && (
         <>
           <Heading level="2">{t('account.summary.pendingTransactions', 'Pending transactions')}</Heading>
@@ -105,7 +104,6 @@ export function TransactionHistory() {
         </>
       )}
       <Heading level="2">{t('account.summary.activity', 'Activity')}</Heading>
-      {/* eslint-enable no-restricted-syntax */}
       {allTransactions.length ? (
         <Box gap="medium" margin="none" data-testid="completed-txs">
           {transactionComponents}

src/utils/eslint-test-noGoogleTranslateCrashingSyntax.tsx

@@ -40,6 +40,8 @@ const textBeforeAndOperator = (
       {!condition && <span>good</span>}
       {!condition && (
         <>
+          {/* good */}
+          {!condition && <span>good</span>}
           <span>good</span>
           <span>good</span>
         </>
@@ -77,6 +79,9 @@ const textAfterAndOperator = (
       {!condition && <span>good</span>}
       bad
     </span>
+    good
+    {good}
+    {/* good */}
     <span>
       {!condition && <span>good</span>}
       {/* eslint-disable-next-line no-restricted-syntax */}
@@ -99,6 +104,9 @@ const textBeforeTernaryOperator = (
       bad
       {!condition ? <span>good</span> : <span>good</span>}
     </span>
+    good
+    {good}
+    {/* good */}
     <span>
       {/* eslint-disable-next-line no-restricted-syntax */}
       {bad}
@@ -161,6 +169,8 @@ const textInTernaryOperator = (
       {!condition ? <span>{good}</span> : <span>{good}</span>}
       {!condition ? (
         <>
+          {/* good */}
+          {!condition && <span>good</span>}
           <span>good</span>
           <span>good</span>
         </>
@@ -175,11 +185,16 @@ const textInTernaryOperator = (
 )
 const textAfterTernaryOperator = (
   <div>
+    {/* eslint-disable-next-line no-restricted-syntax */}
     <span>
+      bad
       {/* eslint-disable-next-line no-restricted-syntax */}
       {!condition ? <span>good</span> : <span>good</span>}
       bad
     </span>
+    good
+    {good}
+    {/* good */}
     <span>
       {!condition ? <span>good</span> : <span>good</span>}
       {/* eslint-disable-next-line no-restricted-syntax */}

yarn.lock

@@ -5455,9 +5455,9 @@ esprima@^4.0.0, esprima@^4.0.1:
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.2.tgz#c6d3fee05dd665808e2ad870631f221f5617b1d1"
-  integrity sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"