make window check more robust

Author: cmackenthun

src/rules/use-client.test.ts

@@ -48,6 +48,13 @@ describe("use client", () => {
       return context;
     }`,
         },
+        {
+          code: `const HREF = typeof window === 'undefined' ? undefined : window.location.href;`
+        },
+        {
+          code: `const HREF = typeof window !== 'undefined' ? window.location.href : '';`
+        },
+
       ],
       invalid: [
         // DOCUMENT
@@ -99,6 +106,13 @@ function Bar() {
   window.addEventListener('scroll', () => {})
   return <div />;
 }`,
+        },
+        {
+          code: `const HREF = typeof window === 'undefined' ? window.location.href : window.location.href.slice(0,10);`,
+          errors: [{ messageId: "addUseClientBrowserAPI" }],
+          output: `'use client';
+
+const HREF = typeof window === 'undefined' ? window.location.href : window.location.href.slice(0,10);`,
         },
         // OBSERVERS
         {

src/rules/use-client.ts

@@ -208,11 +208,40 @@ const create = Components.detect(
         // @ts-expect-error
         const name = node.object.name;
         const scopeType = context.getScope().type;
-        if (
+
+        // check if the window usage is behind a typeof window === 'undefined' check
+        const conditionalExpressionNode = node.parent?.parent;
+        const isWindowCheck =
+          conditionalExpressionNode?.type === "ConditionalExpression" &&
+          conditionalExpressionNode.test?.type === "BinaryExpression" &&
+          conditionalExpressionNode.test.left?.type === "UnaryExpression" &&
+          conditionalExpressionNode.test.left.operator === "typeof" &&
+          conditionalExpressionNode.test.left.argument?.type === "Identifier" &&
+          conditionalExpressionNode.test.left.argument?.name === "window" &&
+          conditionalExpressionNode.test.right?.type === "Literal" &&
+          conditionalExpressionNode.test.right.value === "undefined";
+
+        // checks to see if it's `typeof window !== 'undefined'` or `typeof window === 'undefined'`
+        const isNegatedWindowCheck =
+          isWindowCheck &&
+          conditionalExpressionNode.test?.type === "BinaryExpression" &&
+          conditionalExpressionNode.test.operator === "!==";
+
+        // checks to see if window is being accessed safely behind a window check
+        const isSafelyBehindWindowCheck =
+          (isWindowCheck &&
+            !isNegatedWindowCheck &&
+            conditionalExpressionNode.alternate === node?.parent) ||
+          (isNegatedWindowCheck &&
+            conditionalExpressionNode.consequent === node?.parent);
+
+            if (
           undeclaredReferences.has(name) &&
           browserOnlyGlobals.has(name) &&
-          (scopeType === "module" || !!util.getParentComponent(node))
+          (scopeType === "module" || !!util.getParentComponent(node)) &&
+          !isSafelyBehindWindowCheck
         ) {
+          // console.log(name, node.object)
           instances.push(name);
           reportMissingDirective("addUseClientBrowserAPI", node.object);
         }