@atlaskit/eslint-plugin-platform 0.6.1 → 0.7.0

package/src/rules/ensure-test-runner-nested-count/index.tsx

@@ -5,80 +5,78 @@ import type { SimpleCallExpression } from 'estree';
 const NESTED_LIMIT: number = 4;
 const TEST_RUNNER_IDENTIFIER = 'ffTest' as const;
 
-const getDepthOfNestedRunner = (
-  node: SimpleCallExpression & Rule.NodeParentExtension,
-): number => {
-  // Calculate the depth of a binary tree, using a queue to track path
-  let queue: (typeof node)[] = [];
-  queue.push(node);
-  let depth = 0;
-  while (queue.length > 0) {
-    let nodeCount = queue.length;
-    while (nodeCount > 0) {
-      let currentNode = queue.shift() as typeof node;
-      if (
-        currentNode.arguments[1].type === 'ArrowFunctionExpression' &&
-        currentNode.arguments[1].body.type === 'CallExpression' &&
-        currentNode.arguments[1].body.callee.type === 'Identifier' &&
-        currentNode.arguments[1].body.callee.name === TEST_RUNNER_IDENTIFIER
-      ) {
-        queue.push({
-          ...currentNode.arguments[1].body,
-          parent: currentNode.parent,
-        });
-      }
-      if (
-        currentNode.arguments[2]?.type === 'ArrowFunctionExpression' &&
-        currentNode.arguments[2].body.type === 'CallExpression' &&
-        currentNode.arguments[2].body.callee.type === 'Identifier' &&
-        currentNode.arguments[2].body.callee.name === TEST_RUNNER_IDENTIFIER
-      ) {
-        queue.push({
-          ...currentNode.arguments[2].body,
-          parent: currentNode.parent,
-        });
-      }
-      nodeCount--;
-    }
-    depth++;
-  }
-  return depth;
+const getDepthOfNestedRunner = (node: SimpleCallExpression & Rule.NodeParentExtension): number => {
+	// Calculate the depth of a binary tree, using a queue to track path
+	let queue: (typeof node)[] = [];
+	queue.push(node);
+	let depth = 0;
+	while (queue.length > 0) {
+		let nodeCount = queue.length;
+		while (nodeCount > 0) {
+			let currentNode = queue.shift() as typeof node;
+			if (
+				currentNode.arguments[1].type === 'ArrowFunctionExpression' &&
+				currentNode.arguments[1].body.type === 'CallExpression' &&
+				currentNode.arguments[1].body.callee.type === 'Identifier' &&
+				currentNode.arguments[1].body.callee.name === TEST_RUNNER_IDENTIFIER
+			) {
+				queue.push({
+					...currentNode.arguments[1].body,
+					parent: currentNode.parent,
+				});
+			}
+			if (
+				currentNode.arguments[2]?.type === 'ArrowFunctionExpression' &&
+				currentNode.arguments[2].body.type === 'CallExpression' &&
+				currentNode.arguments[2].body.callee.type === 'Identifier' &&
+				currentNode.arguments[2].body.callee.name === TEST_RUNNER_IDENTIFIER
+			) {
+				queue.push({
+					...currentNode.arguments[2].body,
+					parent: currentNode.parent,
+				});
+			}
+			nodeCount--;
+		}
+		depth++;
+	}
+	return depth;
 };
 
 const rule: Rule.RuleModule = {
-  meta: {
-    docs: {
-      recommended: false,
-    },
-    type: 'problem',
-    messages: {
-      tooManyNestedTestRunner:
-        '{{nestedTestRunner}} test runners are nested. Feature flags may need a clean-up',
-    },
-  },
-  create(context) {
-    return {
-      // Find the most outside test runner, could be inside a describe or not
-      [`Program > * > CallExpression[callee.name=/${TEST_RUNNER_IDENTIFIER}/], CallExpression[callee.name=/describe/] > * > * > * > CallExpression[callee.name=/${TEST_RUNNER_IDENTIFIER}/]`]:
-        (node: Rule.Node) => {
-          if (node.type === 'CallExpression') {
-            // Calculate the depth of nested test runners, counting from the most outside
-            const depth = getDepthOfNestedRunner(node);
+	meta: {
+		docs: {
+			recommended: false,
+		},
+		type: 'problem',
+		messages: {
+			tooManyNestedTestRunner:
+				'{{nestedTestRunner}} test runners are nested. Feature flags may need a clean-up',
+		},
+	},
+	create(context) {
+		return {
+			// Find the most outside test runner, could be inside a describe or not
+			[`Program > * > CallExpression[callee.name=/${TEST_RUNNER_IDENTIFIER}/], CallExpression[callee.name=/describe/] > * > * > * > CallExpression[callee.name=/${TEST_RUNNER_IDENTIFIER}/]`]:
+				(node: Rule.Node) => {
+					if (node.type === 'CallExpression') {
+						// Calculate the depth of nested test runners, counting from the most outside
+						const depth = getDepthOfNestedRunner(node);
 
-            if (depth > NESTED_LIMIT) {
-              return context.report({
-                node,
-                messageId: 'tooManyNestedTestRunner',
-                data: {
-                  nestedTestRunner: depth.toString(),
-                },
-              });
-            }
-          }
-          return {};
-        },
-    };
-  },
+						if (depth > NESTED_LIMIT) {
+							return context.report({
+								node,
+								messageId: 'tooManyNestedTestRunner',
+								data: {
+									nestedTestRunner: depth.toString(),
+								},
+							});
+						}
+					}
+					return {};
+				},
+		};
+	},
 };
 
 export default rule;

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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,96 @@
+// 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;

package/src/rules/inline-usage/README.md

@@ -0,0 +1,53 @@
+# Inline feature flags/gates and experiments usages (feature-flags/inline-usage)
+
+Ensure feature flags/gates and experiments are inlined so that they can be statically analyzable.
+
+## Examples
+
+👎 Examples of **incorrect** code for this rule: Feature flag call is assigned to a variable
+
+```tsx
+import { ff } from '@atlassian/jira-feature-flagging';
+
+const myFF = () => ff('my_flag');
+
+export const doSomething = () => {
+	if (myFF()) {
+		doSomethingNew();
+	} else {
+		doSomethingOld();
+	}
+};
+```
+
+👍 Examples of **correct** code for this rule: Usage is inlined
+
+```tsx
+import { ff } from '@atlassian/jira-feature-flagging';
+import { fg } from '@atlassian/jira-feature-gating';
+import { expValEquals } from '@atlassian/jira-feature-experiments';
+
+export const doSomething = () => {
+	if (ff('my_flag')) {
+		doSomethingNew();
+	} else {
+		doSomethingOld();
+	}
+};
+
+export const doSomething = () => {
+	if (fg('my_gate')) {
+		doSomethingNew();
+	} else {
+		doSomethingOld();
+	}
+};
+
+export const doSomething = () => {
+	if (expValEquals('my_exp', 'on', true)) {
+		doSomethingNew();
+	} else {
+		doSomethingOld();
+	}
+};
+```

package/src/rules/inline-usage/__tests__/rule.test.tsx

@@ -0,0 +1,106 @@
+import outdent from 'outdent';
+import { tester } from '../../../__tests__/utils/_tester';
+import rule from '../index';
+
+const options = ['ssOnly'];
+
+tester.run('feature-flags/inline-usage', rule, {
+	valid: [
+		{
+			name: 'Valid API usage',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+                import { fg } from '@atlassian/jira-feature-gating';
+                import { expVal, expValEquals } from '@atlassian/jira-feature-experiments';
+
+                export const FFComponent = () => ff('is.enabled') && <>Valid</>;
+                export const FGComponent = () => fg('is.enabled') && <>Valid</>;
+
+                export const ExpValComponent = function() {
+                    return expVal('is.enabled', 'on', false) && <>Valid</>;
+                };
+
+                export function ExpValEqualsComponent() {
+                    expValEquals('is.enabled', 'on', true) && <>Valid</>;
+                }
+
+                const valid1 = () => {
+                    console.log('valid');
+                };
+
+                const valid2 = () => 'valid';
+            `,
+		},
+		{
+			name: 'When using ssOnly option, ff() can avoid inline-usage',
+			options,
+			code: outdent`
+            import { ff } from '@atlassian/jira-feature-flagging';
+            import { fg } from '@atlassian/jira-feature-gating';
+
+            const invalidFF = () => ff('is.enabled');
+            export const FGComponent = () => fg('is.enabled') && <>Valid</>;
+        `,
+		},
+		{
+			name: 'Edge cases',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                function edgeCase1() {
+                    console.log('workAround');
+                    return ff('is.enabled');
+                }
+
+                const edgeCase2 = function() {
+                    console.log('workAround');
+                    return ff('is.enabled');
+                };
+
+                const edgeCase3 = () => {
+                    console.log('workAround');
+                    return ff('is.enabled');
+                };
+
+                const edgeCase4 = () => {
+                    ff('is.enabled');
+                };
+            `,
+		},
+	],
+	invalid: [
+		{
+			name: 'Invalid API usage',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+                import { fg } from '@atlassian/jira-feature-gating';
+                import { expVal, expValEquals, UNSAFE_noExposureExp } from '@atlassian/jira-feature-experiments';
+
+                const invalidFF = () => ff('is.enabled');
+                const invalidFG = () => fg('is.enabled');
+                const invalidExpVal = () => expVal('is.enabled', 'on', false);
+                const invalidExpValBinary = () => expVal('is.enabled', 'cohort', null) === 'variation';
+                const invalidExpValBinary2 = () => expVal('is.enabled', 'count', 0) >= 0;
+
+                const invalidExpValEquals = function() {
+                    return expValEquals('is.enabled', 'on', true);
+                };
+
+                function invalidUnsafe() {
+                    return UNSAFE_noExposureExp('is.enabled');
+                }
+            `,
+			errors: Array.from(Array(7), () => ({ messageId: 'inlineUsage' })),
+		},
+		{
+			name: 'When using ssOnly option, Statsig functions should be inlined',
+			options,
+			code: outdent`
+                import { fg } from '@atlassian/jira-feature-gating';
+
+                const invalidFG = () => fg('is.enabled');
+            `,
+			errors: [{ messageId: 'inlineUsage' }],
+		},
+	],
+});

package/src/rules/inline-usage/index.tsx

@@ -0,0 +1,130 @@
+import type { Rule } from 'eslint';
+import { isAPIimport, type Node } from '../utils';
+
+const FUNCTION_NAMES = new Set(['ff', 'fg', 'expVal', 'expValEquals', 'UNSAFE_noExposureExp']);
+const STATSIG_ONLY_FUNCTION_NAMES = new Set([
+	'fg',
+	'expVal',
+	'expValEquals',
+	'UNSAFE_noExposureExp',
+]);
+
+const findDefinitionDeclaration = (
+	node: Rule.Node,
+): (Node<'VariableDeclaration'> | Node<'FunctionDeclaration'>) & Rule.NodeParentExtension =>
+	node.type === 'VariableDeclaration' || node.type === 'FunctionDeclaration'
+		? node
+		: findDefinitionDeclaration(node.parent);
+
+const validateCallExpression = (
+	node: Node<'CallExpression'> & Rule.NodeParentExtension,
+	context: Rule.RuleContext,
+) => {
+	const targetedFunctionsSwitch =
+		context.options[0] === 'ssOnly' ? STATSIG_ONLY_FUNCTION_NAMES : FUNCTION_NAMES;
+
+	const { callee } = node;
+	const shouldWarn =
+		callee.type === 'Identifier' &&
+		targetedFunctionsSwitch.has(callee.name) &&
+		isAPIimport(callee.name, context);
+
+	if (shouldWarn) {
+		const defDeclaration = findDefinitionDeclaration(node.parent);
+
+		context.report({
+			messageId: 'inlineUsage',
+			node:
+				defDeclaration.parent.type === 'ExportNamedDeclaration'
+					? defDeclaration.parent
+					: defDeclaration,
+		});
+
+		return true;
+	}
+
+	return false;
+};
+
+const validateBinaryExpression = (
+	node: Node<'BinaryExpression'> & Rule.NodeParentExtension,
+	context: Rule.RuleContext,
+) => {
+	// Match all comparator operators i.e ===, >=, <
+	if (node.operator.match(/^[=|<|>]/)) {
+		if (
+			node.left.type === 'CallExpression' &&
+			validateCallExpression(node.left as Node<'CallExpression'>, context)
+		) {
+			return;
+		}
+
+		if (node.right.type === 'CallExpression') {
+			validateCallExpression(node.right as Node<'CallExpression'>, context);
+		}
+	}
+};
+
+const validateReturnExpression = ({ body }: Node<'BlockStatement'>, context: Rule.RuleContext) => {
+	if (body.length !== 1) {
+		return;
+	}
+
+	const [statement] = body;
+
+	if (statement.type === 'ReturnStatement') {
+		const { argument } = statement;
+
+		if (argument && argument.type === 'CallExpression') {
+			validateCallExpression(argument as Node<'CallExpression'>, context);
+		} else if (argument && argument.type === 'BinaryExpression') {
+			validateBinaryExpression(argument as Node<'BinaryExpression'>, context);
+		}
+	}
+};
+
+const validateFunctionBody = (
+	body: Node<'BinaryExpression'> | Node<'CallExpression'> | Node<'BlockStatement'>,
+	context: Rule.RuleContext,
+) => {
+	switch (body.type) {
+		case 'CallExpression':
+			validateCallExpression(body, context);
+			break;
+		case 'BinaryExpression':
+			validateBinaryExpression(body, context);
+			break;
+		case 'BlockStatement':
+			validateReturnExpression(body, context);
+			break;
+		default:
+	}
+};
+
+const rule: Rule.RuleModule = {
+	meta: {
+		type: 'problem',
+		docs: {
+			description:
+				'Ensure feature flags/gates and experiments are inlined so that they can be statically analyzable.',
+			url: 'https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/platform/eslint-plugin/src/rules/ff/inline-usage/README.md',
+		},
+		messages: {
+			inlineUsage:
+				'Do not export or wrap feature flags/gates and experiments usages. Inline calls at the callsite to ensure it is statically analyzable.',
+		},
+	},
+	create(context) {
+		return {
+			'VariableDeclaration[declarations.length=1] > VariableDeclarator[id.type="Identifier"]:matches([init.type="ArrowFunctionExpression"], [init.type="FunctionExpression"]) > *.init':
+				({ body }: Node<'FunctionDeclaration'>) => {
+					validateFunctionBody(body as Node<'BlockStatement'> & Rule.NodeParentExtension, context);
+				},
+			FunctionDeclaration: ({ body }: Node<'FunctionDeclaration'>) => {
+				validateFunctionBody(body as Node<'BlockStatement'> & Rule.NodeParentExtension, context);
+			},
+		};
+	},
+};
+
+export default rule;