feat: enforce import.meta guard due to LWC compiler behavior @W-14387292 (#134)

Author: seckardt

docs/rules/no-unsupported-ssr-properties.md

@@ -13,7 +13,7 @@ import { LightningElement } from 'lwc';
 
 export default class Foo extends LightningElement {
     connectedCallback() {
-        this.querySelector('span')?.foo();
+        this.querySelector('span')?.getAttribute?.('role');
     }
 }
 
@@ -29,22 +29,6 @@ Examples of **correct** code for this rule:
 ```js
 import { LightningElement } from 'lwc';
 
-export default class Foo extends LightningElement {
-    connectedCallback() {
-        this.querySelector?.('span')?.getAttribute?.('role');
-    }
-}
-
-export default class Foo extends LightningElement {
-    connectedCallback() {
-        this.dispatchEvent?.(new CustomEvent('customevent'));
-    }
-}
-```
-
-```js
-import { LightningElement } from 'lwc';
-
 export default class Foo extends LightningElement {
     connectedCallback() {
         if (!import.meta.env.SSR) {
@@ -73,7 +57,7 @@ export default class Foo extends LightningElement {
 
 export default class Foo extends LightningElement {
     renderedCallback() {
-        // Caution: This lifecycle hook is very likely
+        // **Caution:** This lifecycle hook is very likely
         // to be called more than once.
         this.dispatchEvent(new CustomEvent('customevent'));
     }

lib/analyze-component.js

@@ -84,9 +84,19 @@ function getClassDeclaration(root) {
 function getMethodInterdependencies(classDecl) {
     const dependencies = new Map();
 
-    const methodNames = classDecl.body.body
+    const { methodNames, getters } = classDecl.body.body
         .filter((node) => node.type === 'MethodDefinition' && node.key.type === 'Identifier')
-        .map((methodDefNode) => methodDefNode.key.name);
+        .reduce(
+            (acc, methodDefNode) => {
+                const { name } = methodDefNode.key;
+                acc.methodNames.push(name);
+                if (methodDefNode.kind === 'get') {
+                    acc.getters.push(name);
+                }
+                return acc;
+            },
+            { methodNames: [], getters: [] },
+        );
 
     for (const methodName of methodNames) {
         dependencies.set(methodName, []);
@@ -114,11 +124,12 @@ function getMethodInterdependencies(classDecl) {
         });
     }
 
-    return dependencies;
+    return [dependencies, getters];
 }
 
 function getMethodsReachableDuringSSR(
     methodInterdependencies,
+    getters = [],
     fromMethods = ['connectedCallback', 'constructor', 'render'],
 ) {
     const reachableMethods = new Set();
@@ -142,7 +153,7 @@ function getMethodsReachableDuringSSR(
         }
     };
 
-    for (const methodName of fromMethods) {
+    for (const methodName of new Set([...fromMethods, ...getters])) {
         markAsReachable(methodName);
     }
 
@@ -200,8 +211,8 @@ module.exports.analyze = function analyze(root) {
     let methodsReachableDuringSSR = new Set();
 
     if (isLWC) {
-        const methodInterdependencies = getMethodInterdependencies(lwcClassDeclaration);
-        methodsReachableDuringSSR = getMethodsReachableDuringSSR(methodInterdependencies);
+        const [methodInterdependencies, getters] = getMethodInterdependencies(lwcClassDeclaration);
+        methodsReachableDuringSSR = getMethodsReachableDuringSSR(methodInterdependencies, getters);
         moduleScopedFunctionsReachableDuringSSR = getFunctionsReachableDuringSSR(
             methodsReachableDuringSSR,
             moduleScopedFunctions,

lib/rule-helpers.js

@@ -18,6 +18,7 @@ function reachableDuringSSRPartial() {
     let reachableFunctionThatWeAreIn = null;
     let reachableMethodThatWeAreIn = null;
     let skippedBlockThatWeAreIn = null;
+    let skippedConditionThatWeAreIn = null;
 
     const withinLWCVisitors = {
         Program: (node) => {
@@ -100,13 +101,23 @@ function reachableDuringSSRPartial() {
                 skippedBlockThatWeAreIn = null;
             }
         },
+        ConditionalExpression: (node) => {
+            if (isSSREscape(node)) {
+                skippedConditionThatWeAreIn = node;
+            }
+        },
+        'ConditionalExpression:exit': (node) => {
+            if (skippedConditionThatWeAreIn === node) {
+                skippedConditionThatWeAreIn = null;
+            }
+        },
     };
 
     return {
         withinLWCVisitors,
         isInsideReachableMethod: () => insideLWC && !!reachableMethodThatWeAreIn,
         isInsideReachableFunction: () => !!reachableFunctionThatWeAreIn,
-        isInsideSkippedBlock: () => !!skippedBlockThatWeAreIn,
+        isInsideSkippedBlock: () => !!skippedBlockThatWeAreIn || !!skippedConditionThatWeAreIn,
     };
 }
 
@@ -159,18 +170,21 @@ module.exports.noReferenceDuringSSR = function noReferenceDuringSSR(
 
             if (
                 node.parent.type === 'MemberExpression' &&
-                node.parent.optional !== true &&
                 node.object.type === 'Identifier' &&
-                node.object.name === 'globalThis' &&
+                ((node.object.name === 'globalThis' && node.parent.optional !== true) ||
+                    node.object.name === 'window') &&
                 node.property.type === 'Identifier' &&
                 forbiddenGlobalNames.has(node.property.name) &&
                 isGlobalIdentifier(node.object, context.getScope())
             ) {
                 // Prevents expressions like:
                 // globalThis.document.addEventListener('click', () => { ... });
+                // const url = window.location.href;
+                // const url = window.location?.href;
 
                 // Allows expressions like:
                 // globalThis.document?.addEventListener('click', () => { ... });
+                // const url = globalThis.location?.href;
                 context.report({
                     messageId: messageIds.at(1),
                     node,
@@ -182,17 +196,33 @@ module.exports.noReferenceDuringSSR = function noReferenceDuringSSR(
             } else if (
                 node.parent.type !== 'MemberExpression' &&
                 node.object.type === 'Identifier' &&
-                (forbiddenGlobalNames.has(node.object.name) ||
-                    (node.object.name === 'globalThis' && node.optional !== true)) &&
+                forbiddenGlobalNames.has(node.object.name) &&
                 isGlobalIdentifier(node.object, context.getScope())
             ) {
                 // Prevents expressions like:
-                // globalThis.addEventListener('click', () => { ... });
                 // document.addEventListener('click', () => { ... });
                 // document?.addEventListener('click', () => { ... });
+                context.report({
+                    messageId: messageIds.at(0),
+                    node,
+                    data: {
+                        identifier: node.object.name,
+                    },
+                });
+            } else if (
+                node.parent.type === 'CallExpression' &&
+                node.parent.optional !== true &&
+                node.object.type === 'Identifier' &&
+                node.object.name === 'globalThis' &&
+                node.property.type === 'Identifier' &&
+                forbiddenGlobalNames.has(node.property.name) &&
+                isGlobalIdentifier(node.object, context.getScope())
+            ) {
+                // Prevents expressions like:
+                // globalThis.addEventListener('click', () => { ... });
 
                 // Allows expressions like:
-                // globalThis?.addEventListener('click', () => { ... });
+                // globalThis.addEventListener?.('click', () => { ... });
                 context.report({
                     messageId: messageIds.at(0),
                     node,
@@ -247,37 +277,14 @@ module.exports.noPropertyAccessDuringSSR = function noPropertyAccessDuringSSR(
 ) {
     const { withinLWCVisitors, isInsideReachableMethod, isInsideSkippedBlock } =
         reachableDuringSSRPartial();
-    let expressionStatementWeAreIn = null;
-    let memberExpressionsInStatement = [];
-    let callExpressionsInStatement = [];
 
     return {
         ...withinLWCVisitors,
-        ExpressionStatement: (node) => {
-            expressionStatementWeAreIn = node;
-            callExpressionsInStatement = [];
-            memberExpressionsInStatement = [];
-        },
-        'ExpressionStatement:exit': (node) => {
-            if (expressionStatementWeAreIn === node) {
-                expressionStatementWeAreIn = null;
-                callExpressionsInStatement = [];
-                memberExpressionsInStatement = [];
-            }
-        },
-        AssignmentExpression: (node) => {
-            callExpressionsInStatement.push(node);
-        },
-        CallExpression: (node) => {
-            callExpressionsInStatement.push(node);
-        },
         MemberExpression: (node) => {
             if (!isInsideReachableMethod() || isInsideSkippedBlock()) {
                 return;
             }
 
-            memberExpressionsInStatement.push(node);
-
             if (
                 node.object.type === 'ThisExpression' &&
                 globalAccessQualifiers.has(node.parent.type) &&
@@ -289,30 +296,11 @@ module.exports.noPropertyAccessDuringSSR = function noPropertyAccessDuringSSR(
                 // this.querySelector('button').addEventListener('click', ...);
                 // this.querySelector?.('button').addEventListener('click', ...);
                 // this.querySelector?.('button')?.addEventListener('click', ...);
+                // this.querySelector?.('button')?.addEventListener?.('click', ...);
                 // this.querySelector?.('button').firstElementChild.id;
+                // this.querySelector?.('button').firstElementChild?.id;
                 // this.childNodes.item(0).textContent = 'foo';
-
-                // Allows all-optional expressions like:
-                // this.dispatchEvent?.(new CustomEvent('myevent'));
-                // this.querySelector?.('button')?.addEventListener?.('click', ...);
-                // this.querySelector?.('button')?.firstElementChild.id;
-                const allCallExpressionsOptional = callExpressionsInStatement.every(
-                    (expression) => expression.optional,
-                );
-                const allMemberExpressionsOptional = memberExpressionsInStatement.every(
-                    (expression, index) => {
-                        if (expression.parent && expression.parent.type === 'CallExpression') {
-                            // Skip CallExpressions here as they are treated separately
-                            return true;
-                        }
-                        // Return `true` if the MemberExpression is either `optional` or
-                        // the last expression of the chain (which is in revered order).
-                        return expression.optional || index === 0;
-                    },
-                );
-                if (!allCallExpressionsOptional || !allMemberExpressionsOptional) {
-                    reporter(node);
-                }
+                reporter(node);
             }
         },
     };

lib/rules/no-unsupported-ssr-properties.js

@@ -35,7 +35,7 @@ module.exports = {
         schema: [],
         messages: {
             propertyAccessFound:
-                '`{{ identifier }}` is unsupported in SSR. Consider guarding access to `{{identifier}}`, e.g. via the `import.meta.env.SSR` flag, or optional chaining (`this.{{identifier}}?.`).',
+                '`{{ identifier }}` is unsupported in SSR. Consider guarding access to `{{identifier}}` via `import.meta.env.SSR`.',
         },
     },
     create: (context) => {

lib/util/ssr.js

@@ -8,7 +8,7 @@
 
 module.exports.isSSREscape = function isSSREscape(node) {
     return (
-        node.type === 'IfStatement' &&
+        (node.type === 'IfStatement' || node.type === 'ConditionalExpression') &&
         (isMetaEnvCheck(node.test) || isWindowOrDocumentCheck(node.test))
     );
 };