@atlaskit/eslint-plugin-platform 0.7.3 → 0.7.4

package/src/rules/no-module-level-eval-nav4/__tests__/test.tsx

@@ -0,0 +1,130 @@
+import outdent from 'outdent';
+import { tester } from '../../../__tests__/utils/_tester';
+import rule from '../index';
+
+tester.run('feature-flags/no-module-level-eval', rule, {
+	valid: [
+		{
+			name: 'Variable declaration within arrow function',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                const Component = () => {
+                    const ff1 = getWillShowNav4();
+                }
+            `,
+		},
+		{
+			name: 'Boolean within arrow function',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                const someFunction = () => {
+                    if(getWillShowNav4()) {
+                        return true;
+                    }
+                }
+            `,
+		},
+		{
+			name: 'Immediate call within a function',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                function someFunction() {
+                    return getWillShowNav4();
+                }
+            `,
+		},
+
+		{
+			name: 'Does not affect other function calls in global scope',
+			code: outdent`
+                import { foo } from 'foo-lib'
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                foo();
+            `,
+		},
+		{
+			name: 'Variable declaration within an arrow function with different import source',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging-using-meta';
+
+                const Component = () => {
+                    const ff1 = getWillShowNav4();
+                }
+            `,
+		},
+		{
+			name: 'Class field',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                export class Component {
+                    value = getWillShowNav4() ? 'newValue' : 'oldValue';
+                }
+            `,
+		},
+	],
+	invalid: [
+		{
+			name: 'Immediate call',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                getWillShowNav4();
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Immediate call isVisualRefreshEnabled',
+			code: outdent`
+				import { isVisualRefreshEnabled } from '@atlassian/jira-visual-refresh-rollout/src/feature-switch';
+
+                isVisualRefreshEnabled();
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level storage into a variable',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                const flag = getWillShowNav4();
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level collection',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                const collection = [getWillShowNav4() ? 0 : 1];
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level object',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+
+                const object = {
+                    isEnabled: getWillShowNav4()
+                }
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level with boolean',
+			code: outdent`
+                import { getWillShowNav4 } from '@atlassian/jira-navigation-apps-sidebar-nav4-rollout';
+                import { NewComp } from 'new';
+                import { OldComp } from 'old';
+
+                export const Component = getWillShowNav4() ? NewComp : OldComp;
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+	],
+});

package/src/rules/no-module-level-eval-nav4/index.tsx

@@ -0,0 +1,67 @@
+import type { Rule } from 'eslint';
+import { type Node } from '../utils';
+
+const featureLibraryFunctions = new Set([
+	/*
+	 * STOP!
+	 *
+	 * Your code should call the API functions directly!
+	 * But, we are temporarily adding these methods to prevent SSR builds from breaking
+	 * while we work out a solution for the features to be evaluated inline.
+	 * Do not add anything here without the permission of #help-jfp-squads
+	 *
+	 * Slack thread: https://atlassian.slack.com/archives/CFGLH1ZS8/p1726449739284819
+	 */
+	'isVisualRefreshEnabled',
+	'getWillShowNav4',
+]);
+
+const isInFunctionLevel = (context: Rule.RuleContext) => {
+	let scope: any = context.getScope();
+
+	while (scope?.type !== 'module' && scope?.type !== 'global') {
+		if (scope.type === 'function') {
+			return true;
+		}
+
+		if (scope.type === 'class-field-initializer') {
+			return !scope.block.parent.static;
+		}
+
+		scope = scope.upper;
+	}
+
+	return false;
+};
+
+const rule: Rule.RuleModule = {
+	meta: {
+		docs: {
+			description: 'Disallow getWillShowNav4 or isVisualRefreshEnabled usage at module level',
+			url: 'https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/platform/eslint-plugin/src/rules/no-module-level-eval-nav4/README.md',
+		},
+		messages: {
+			noModuleLevelEval:
+				'Do not evaluate getWillShowNav4 or isVisualRefreshEnabled at module level. This causes complications with SSR. If feature flagging components in `jira` use `componentWithCondition` from `@atlassian/jira-feature-flagging-utils`.',
+		},
+	},
+	create(context) {
+		return {
+			'CallExpression[callee.type="Identifier"]': (node: Node<any>) => {
+				if (
+					node.type === 'CallExpression' &&
+					node.callee.type === 'Identifier' &&
+					featureLibraryFunctions.has(node.callee.name) &&
+					!isInFunctionLevel(context)
+				) {
+					context.report({
+						messageId: 'noModuleLevelEval',
+						node,
+					});
+				}
+			},
+		};
+	},
+};
+
+export default rule;

package/dist/cjs/rules/ensure-valid-emotion-css-prop/index.js

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-var rule = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Ensure valid use of the `css` prop from `@emotion/react`',
-      recommended: true
-    },
-    messages: {
-      noEmotionCssImport: 'Must import `css` from `@emotion/react` when using the `css` prop.',
-      noEmotionCssPropFunctionCall: 'No function calls allowed when passing an object directly to the `css` prop with `@emotion/react`.'
-    }
-  },
-  create: function create(context) {
-    var emotionJsxImported = false;
-    var emotionJsxImportPosition;
-    var emotionCssImported = false;
-    var cssPropExpressonUsed = false;
-
-    // Ignore files in these directories
-    if (/example|__tests__|__fixtures__/.test(context.filename)) {
-      return {};
-    }
-    return {
-      ImportDeclaration: function ImportDeclaration(node) {
-        if (node.source.value === '@emotion/react') {
-          node.specifiers.forEach(function (specifier) {
-            if (specifier.type === 'ImportSpecifier') {
-              if (specifier.imported.name === 'jsx') {
-                var _specifier$loc;
-                emotionJsxImported = true;
-                emotionJsxImportPosition = (_specifier$loc = specifier.loc) === null || _specifier$loc === void 0 ? void 0 : _specifier$loc.start;
-              }
-              if (specifier.imported.name === 'css') {
-                emotionCssImported = true;
-              }
-            }
-          });
-        }
-      },
-      JSXAttribute: function JSXAttribute(node) {
-        var name = node.name,
-          value = node.value;
-
-        // Only run on emotion css props
-        if (!emotionJsxImported) return;
-        if (name.name !== 'css') return;
-        if (value.type === 'JSXExpressionContainer' && value.expression.type === 'ObjectExpression') {
-          cssPropExpressonUsed = true;
-          var containsFunctionExpression = false;
-
-          // Iterate over the properties of the object
-          value.expression.properties.forEach(function (prop) {
-            var _prop$value, _prop$value2, _prop$value3;
-            // Check for function expressions directly within the object literal
-            if (((_prop$value = prop.value) === null || _prop$value === void 0 ? void 0 : _prop$value.type) === 'ArrowFunctionExpression' || ((_prop$value2 = prop.value) === null || _prop$value2 === void 0 ? void 0 : _prop$value2.type) === 'FunctionExpression' || ((_prop$value3 = prop.value) === null || _prop$value3 === void 0 ? void 0 : _prop$value3.type) === 'CallExpression') {
-              containsFunctionExpression = true;
-            }
-          });
-
-          // If a function expression is found within the direct object literal, report an error
-          if (containsFunctionExpression) {
-            context.report({
-              node: node,
-              messageId: 'noEmotionCssPropFunctionCall'
-            });
-          }
-        }
-      },
-      'Program:exit': function ProgramExit() {
-        if (emotionJsxImported && cssPropExpressonUsed && !emotionCssImported) {
-          context.report({
-            messageId: 'noEmotionCssImport',
-            loc: emotionJsxImportPosition || {
-              line: 1,
-              column: 0
-            }
-          });
-        }
-      }
-    };
-  }
-};
-var _default = exports.default = rule;

package/dist/es2019/rules/ensure-valid-emotion-css-prop/index.js

@@ -1,87 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-const rule = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Ensure valid use of the `css` prop from `@emotion/react`',
-      recommended: true
-    },
-    messages: {
-      noEmotionCssImport: 'Must import `css` from `@emotion/react` when using the `css` prop.',
-      noEmotionCssPropFunctionCall: 'No function calls allowed when passing an object directly to the `css` prop with `@emotion/react`.'
-    }
-  },
-  create(context) {
-    let emotionJsxImported = false;
-    let emotionJsxImportPosition;
-    let emotionCssImported = false;
-    let cssPropExpressonUsed = false;
-
-    // Ignore files in these directories
-    if (/example|__tests__|__fixtures__/.test(context.filename)) {
-      return {};
-    }
-    return {
-      ImportDeclaration(node) {
-        if (node.source.value === '@emotion/react') {
-          node.specifiers.forEach(specifier => {
-            if (specifier.type === 'ImportSpecifier') {
-              if (specifier.imported.name === 'jsx') {
-                var _specifier$loc;
-                emotionJsxImported = true;
-                emotionJsxImportPosition = (_specifier$loc = specifier.loc) === null || _specifier$loc === void 0 ? void 0 : _specifier$loc.start;
-              }
-              if (specifier.imported.name === 'css') {
-                emotionCssImported = true;
-              }
-            }
-          });
-        }
-      },
-      JSXAttribute(node) {
-        const {
-          name,
-          value
-        } = node;
-
-        // Only run on emotion css props
-        if (!emotionJsxImported) return;
-        if (name.name !== 'css') return;
-        if (value.type === 'JSXExpressionContainer' && value.expression.type === 'ObjectExpression') {
-          cssPropExpressonUsed = true;
-          let containsFunctionExpression = false;
-
-          // Iterate over the properties of the object
-          value.expression.properties.forEach(prop => {
-            var _prop$value, _prop$value2, _prop$value3;
-            // Check for function expressions directly within the object literal
-            if (((_prop$value = prop.value) === null || _prop$value === void 0 ? void 0 : _prop$value.type) === 'ArrowFunctionExpression' || ((_prop$value2 = prop.value) === null || _prop$value2 === void 0 ? void 0 : _prop$value2.type) === 'FunctionExpression' || ((_prop$value3 = prop.value) === null || _prop$value3 === void 0 ? void 0 : _prop$value3.type) === 'CallExpression') {
-              containsFunctionExpression = true;
-            }
-          });
-
-          // If a function expression is found within the direct object literal, report an error
-          if (containsFunctionExpression) {
-            context.report({
-              node,
-              messageId: 'noEmotionCssPropFunctionCall'
-            });
-          }
-        }
-      },
-      'Program:exit'() {
-        if (emotionJsxImported && cssPropExpressonUsed && !emotionCssImported) {
-          context.report({
-            messageId: 'noEmotionCssImport',
-            loc: emotionJsxImportPosition || {
-              line: 1,
-              column: 0
-            }
-          });
-        }
-      }
-    };
-  }
-};
-export default rule;

package/dist/esm/rules/ensure-valid-emotion-css-prop/index.js

@@ -1,85 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-var rule = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Ensure valid use of the `css` prop from `@emotion/react`',
-      recommended: true
-    },
-    messages: {
-      noEmotionCssImport: 'Must import `css` from `@emotion/react` when using the `css` prop.',
-      noEmotionCssPropFunctionCall: 'No function calls allowed when passing an object directly to the `css` prop with `@emotion/react`.'
-    }
-  },
-  create: function create(context) {
-    var emotionJsxImported = false;
-    var emotionJsxImportPosition;
-    var emotionCssImported = false;
-    var cssPropExpressonUsed = false;
-
-    // Ignore files in these directories
-    if (/example|__tests__|__fixtures__/.test(context.filename)) {
-      return {};
-    }
-    return {
-      ImportDeclaration: function ImportDeclaration(node) {
-        if (node.source.value === '@emotion/react') {
-          node.specifiers.forEach(function (specifier) {
-            if (specifier.type === 'ImportSpecifier') {
-              if (specifier.imported.name === 'jsx') {
-                var _specifier$loc;
-                emotionJsxImported = true;
-                emotionJsxImportPosition = (_specifier$loc = specifier.loc) === null || _specifier$loc === void 0 ? void 0 : _specifier$loc.start;
-              }
-              if (specifier.imported.name === 'css') {
-                emotionCssImported = true;
-              }
-            }
-          });
-        }
-      },
-      JSXAttribute: function JSXAttribute(node) {
-        var name = node.name,
-          value = node.value;
-
-        // Only run on emotion css props
-        if (!emotionJsxImported) return;
-        if (name.name !== 'css') return;
-        if (value.type === 'JSXExpressionContainer' && value.expression.type === 'ObjectExpression') {
-          cssPropExpressonUsed = true;
-          var containsFunctionExpression = false;
-
-          // Iterate over the properties of the object
-          value.expression.properties.forEach(function (prop) {
-            var _prop$value, _prop$value2, _prop$value3;
-            // Check for function expressions directly within the object literal
-            if (((_prop$value = prop.value) === null || _prop$value === void 0 ? void 0 : _prop$value.type) === 'ArrowFunctionExpression' || ((_prop$value2 = prop.value) === null || _prop$value2 === void 0 ? void 0 : _prop$value2.type) === 'FunctionExpression' || ((_prop$value3 = prop.value) === null || _prop$value3 === void 0 ? void 0 : _prop$value3.type) === 'CallExpression') {
-              containsFunctionExpression = true;
-            }
-          });
-
-          // If a function expression is found within the direct object literal, report an error
-          if (containsFunctionExpression) {
-            context.report({
-              node: node,
-              messageId: 'noEmotionCssPropFunctionCall'
-            });
-          }
-        }
-      },
-      'Program:exit': function ProgramExit() {
-        if (emotionJsxImported && cssPropExpressonUsed && !emotionCssImported) {
-          context.report({
-            messageId: 'noEmotionCssImport',
-            loc: emotionJsxImportPosition || {
-              line: 1,
-              column: 0
-            }
-          });
-        }
-      }
-    };
-  }
-};
-export default rule;

package/src/rules/ensure-valid-emotion-css-prop/__tests__/unit/rule.test.ts

@@ -1,142 +0,0 @@
-import { tester } from '../../../../__tests__/utils/_tester';
-import rule from '../../index';
-
-describe('test ensure-valid-emotion-css-prop', () => {
-	tester.run('ensure-valid-emotion-css-prop', rule, {
-		valid: [
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const styles = css({ opacity: 0.5 });
-			  const Component = () => <div css={styles} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const styles = css({ opacity: 0.5 });
-			  const Component = () => <div css={[styles, { color: 'red' }]} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-			  const Component = () => <div css={css({ opacity: 0.5 })} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/__tests__/test.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/examples/example.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/example-helpers/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/__fixtures__/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@compiled/react';
-			  const Component = () => <div />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-				const styles = { opacity: 0.5 };
-			  const Component = () => <div css={styles} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-			  const Component = (props) => {
-					const styles = { opacity: getOpacity(props.foo) };
-					return <div css={styles} />
-				};`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getStyles = (opacity) => ({ color: 'red', opacity });
-			  const Component = (props) => <div css={getStyles(props.opacity)} />`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-				function getStyles(props) {
-					return { color: 'red', opacity: props.opacity };
-				}
-			  const Component = (props) => <div css={getStyles(props)} />;`,
-				filename: 'src/index.tsx',
-			},
-		],
-		invalid: [
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssImport' }],
-			},
-			{
-				code: `
-				/** @jsx jsx */
-				import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-				const Component = (props) => <div css={{ opacity: getOpacity(props.foo) }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssPropFunctionCall' }],
-			},
-			{
-				code: `
-				/** @jsx jsx */
-				import { jsx, css } from '@emotion/react';
-				function getOpacity(foo) {
-					return 0.5;
-				}
-				const Component = (props) => <div css={{ opacity: getOpacity(props.foo) }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssPropFunctionCall' }],
-			},
-		],
-	});
-});

package/src/rules/ensure-valid-emotion-css-prop/index.ts

@@ -1,96 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { Rule } from 'eslint';
-
-type Position = {
-	line: number;
-	column: number;
-};
-
-const rule: Rule.RuleModule = {
-	meta: {
-		type: 'problem',
-		docs: {
-			description: 'Ensure valid use of the `css` prop from `@emotion/react`',
-			recommended: true,
-		},
-		messages: {
-			noEmotionCssImport: 'Must import `css` from `@emotion/react` when using the `css` prop.',
-			noEmotionCssPropFunctionCall:
-				'No function calls allowed when passing an object directly to the `css` prop with `@emotion/react`.',
-		},
-	},
-	create(context) {
-		let emotionJsxImported = false;
-		let emotionJsxImportPosition: Position | null | undefined;
-		let emotionCssImported = false;
-		let cssPropExpressonUsed = false;
-
-		// Ignore files in these directories
-		if (/example|__tests__|__fixtures__/.test(context.filename)) {
-			return {};
-		}
-
-		return {
-			ImportDeclaration(node) {
-				if (node.source.value === '@emotion/react') {
-					node.specifiers.forEach((specifier) => {
-						if (specifier.type === 'ImportSpecifier') {
-							if (specifier.imported.name === 'jsx') {
-								emotionJsxImported = true;
-								emotionJsxImportPosition = specifier.loc?.start;
-							}
-							if (specifier.imported.name === 'css') {
-								emotionCssImported = true;
-							}
-						}
-					});
-				}
-			},
-			JSXAttribute(node: any) {
-				const { name, value } = node;
-
-				// Only run on emotion css props
-				if (!emotionJsxImported) return;
-				if (name.name !== 'css') return;
-
-				if (
-					value.type === 'JSXExpressionContainer' &&
-					value.expression.type === 'ObjectExpression'
-				) {
-					cssPropExpressonUsed = true;
-					let containsFunctionExpression = false;
-
-					// Iterate over the properties of the object
-					value.expression.properties.forEach((prop: any) => {
-						// Check for function expressions directly within the object literal
-						if (
-							prop.value?.type === 'ArrowFunctionExpression' ||
-							prop.value?.type === 'FunctionExpression' ||
-							prop.value?.type === 'CallExpression'
-						) {
-							containsFunctionExpression = true;
-						}
-					});
-
-					// If a function expression is found within the direct object literal, report an error
-					if (containsFunctionExpression) {
-						context.report({
-							node,
-							messageId: 'noEmotionCssPropFunctionCall',
-						});
-					}
-				}
-			},
-			'Program:exit'() {
-				if (emotionJsxImported && cssPropExpressonUsed && !emotionCssImported) {
-					context.report({
-						messageId: 'noEmotionCssImport',
-						loc: emotionJsxImportPosition || { line: 1, column: 0 },
-					});
-				}
-			},
-		};
-	},
-};
-
-export default rule;