@W-17070457 Allow multi conditional !import.meta.env.SSR statements (#…

…171) Co-authored-by: Nolan Lawson <[email protected]>
salesforce · Dec 4, 2024 · c57c51f · c57c51f
1 parent c9ac717
commit c57c51f
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 3 deletions.
diff --git a/lib/util/ssr.js b/lib/util/ssr.js
@@ -7,12 +7,38 @@
 'use strict';
 
 module.exports.isSSREscape = function isSSREscape(node) {
-    return (
+    if (
         (node.type === 'IfStatement' || node.type === 'ConditionalExpression') &&
-        (isMetaEnvCheck(node.test) || isWindowOrDocumentCheck(node.test))
-    );
+        checkConditionalStatements(node.test)
+    ) {
+        return true;
+    }
+
+    return false;
 };
 
+function checkConditionalStatements(test) {
+    let node = test;
+
+    // Base Case: If the node is a `!` UnaryExpression, call isMetaEnvCheck().
+    if (node.type === 'UnaryExpression' && node.operator === '!') {
+        return isMetaEnvCheck(node);
+    }
+
+    // Base Case: If the node is a `!==` BinaryExpresion, call isWindowOrDocumentCheck().
+    if (node.type === 'BinaryExpression' && node.operator === '!==') {
+        return isWindowOrDocumentCheck(node);
+    }
+
+    // Recursive Case: If the node is a `&&` logical expression, check its left and right parts.
+    if (node.type === 'LogicalExpression' && node.operator === '&&') {
+        const rightNodeConditional = checkConditionalStatements(node.right);
+        return rightNodeConditional || checkConditionalStatements(node.left);
+    }
+
+    return false;
+}
+
 function isMetaEnvCheck(test) {
     let node = test;
     if (!(node.type === 'UnaryExpression' && node.operator === '!')) return false;

diff --git a/test/lib/rules/no-unsupported-ssr-properties.js b/test/lib/rules/no-unsupported-ssr-properties.js
@@ -107,6 +107,95 @@ testRule('no-unsupported-ssr-properties', {
                 }
             `,
         },
+        {
+            code: `
+                import { LightningElement } from 'lwc';
+                
+                export default class Foo extends LightningElement {
+                  connectedCallback() {
+                    if (!import.meta.env.SSR && !randomOtherCheck) {
+                      this.querySelector('span').getAttribute('role');
+                    }
+                  }
+                }
+            `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+              
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (!import.meta.env.SSR && randomOtherCheck) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+              
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (randomOtherCheck && !import.meta.env.SSR) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+              
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (!a && b && !c && d && !import.meta.env.SSR) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+              
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (a && (b && !import.meta.env.SSR)) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  return !import.meta.env.SSR ? this.querySelector('button') : null;
+                }
+              }
+          `,
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+              
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (randomOtherCheck && typeof window !== 'undefined') {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+            `,
+        },
     ],
     invalid: [
         {
@@ -364,5 +453,95 @@ testRule('no-unsupported-ssr-properties', {
                 },
             ],
         },
+        {
+            code: `
+            import { LightningElement } from 'lwc';
+            
+            export default class Foo extends LightningElement {
+              connectedCallback() {
+                if (!a && b && !c && d) {
+                  this.querySelector('span').getAttribute('role');
+                }
+              }
+            }
+          `,
+            errors: [
+                {
+                    messageId: 'propertyAccessFound',
+                },
+            ],
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (a && (b || !import.meta.env.SSR)) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+            errors: [
+                {
+                    messageId: 'propertyAccessFound',
+                },
+            ],
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (a || (b || !import.meta.env.SSR)) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+            errors: [
+                {
+                    messageId: 'propertyAccessFound',
+                },
+            ],
+        },
+        {
+            code: `
+              import { LightningElement } from 'lwc';
+
+              export default class Foo extends LightningElement {
+                connectedCallback() {
+                  if (a || (b && !import.meta.env.SSR)) {
+                    this.querySelector('span').getAttribute('role');
+                  }
+                }
+              }
+          `,
+            errors: [
+                {
+                    messageId: 'propertyAccessFound',
+                },
+            ],
+        },
+        {
+            code: `
+            import { LightningElement } from 'lwc';
+            
+            export default class Foo extends LightningElement {
+              connectedCallback() {
+                if (randomOtherCheck && typeof window == 'undefined') {
+                  this.querySelector('span').getAttribute('role');
+                }
+              }
+            }
+          `,
+            errors: [
+                {
+                    messageId: 'propertyAccessFound',
+                },
+            ],
+        },
     ],
 });