@nkzw/eslint-plugin-fbtee 0.0.1

package/src/__tests__/no-unhelpful-desc-test.tsx

@@ -0,0 +1,310 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import rule from '../rules/no-unhelpful-desc.tsx';
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run('unhelpful-desc', rule, {
+  invalid: [
+    {
+      // <fbt>
+      code: `
+        <fbt desc="">Hello</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'jsxEmptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc={''}>Hello</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'jsxEmptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc="Greeting">Greeting</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc={'Greeting'}>Greeting</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc={'Greeting' + ''}>Greeting</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc="greeting">Greeting</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc="Hey">Hello world</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'shortDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc={'Hey'}>Hello world</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'shortDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <fbt desc={'Hey' + ''}>Hello world</fbt>;
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'shortDesc',
+        },
+      ],
+    },
+
+    // fbt()
+    {
+      code: `
+        fbt('Hello world', '');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'emptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbt('Hello world', \`\`);
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'emptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbt('Hello world', '' + '');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'emptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbt('Hello world', 'Hey');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'shortDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbt('Greeting', 'Greeting');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbt('Greeting', 'greeting');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+
+    // fbs()
+    {
+      code: `
+        fbs('Hello world', '');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'emptyDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbs('Hello world', 'a');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'shortDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        fbs('Hello world', 'Hello world');
+      `,
+      errors: [
+        {
+          line: 2,
+          messageId: 'duplicateDesc',
+        },
+      ],
+    },
+    {
+      code: `
+        <input 
+          placeholder={fbs('Hello world', '')} 
+        />;
+      `,
+      errors: [
+        {
+          line: 3,
+          messageId: 'emptyDesc',
+        },
+      ],
+    },
+  ],
+  valid: [
+    // <fbt>
+    {
+      code: `
+        <fbt desc="Greeting">Hello world</fbt>;
+      `,
+    },
+    {
+      code: `
+        <fbt desc={'Greeting'}>Hello</fbt>;
+      `,
+    },
+    {
+      code: `
+        <fbt desc={\`Greeting\`}>Hello</fbt>;
+      `,
+    },
+    {
+      code: `
+        <fbt
+          desc={
+            'A very long multiline description that ' +
+            'is spanning multiple lines.'
+          }
+        >
+          Hello
+        </fbt>;
+      `,
+    },
+    {
+      code: `
+        const description = 'Greeting';
+        <fbt desc={description}>Hello</fbt>;
+      `,
+    },
+    {
+      code: `
+        function getDescription() {
+          return 'Greeting';
+        }
+        <fbt desc={getDescription()}>Hello</fbt>;
+      `,
+    },
+
+    // fbt()
+    {
+      code: `
+        fbt('Hello world', 'Greeting');
+      `,
+    },
+    {
+      code: `
+        fbt('Hello world', \`Greeting\`);
+      `,
+    },
+    {
+      code: `
+        fbt(
+          'Hello world', 
+          'A very long multiline description that ' +
+          'is spanning multiple lines.'
+        );
+      `,
+    },
+
+    // fbs()
+    {
+      code: `
+        fbs('Hello world', 'Greeting');
+      `,
+    },
+    {
+      code: `
+        <input placeholder={fbs('Hello world', 'Greeting')} />;
+      `,
+    },
+  ],
+});

package/src/index.tsx

@@ -0,0 +1,22 @@
+import packageJson from '../package.json' with { type: 'json' };
+import noEmptyStringsRule from './rules/no-empty-strings.tsx';
+import noUnhelpfulDesc from './rules/no-unhelpful-desc.tsx';
+
+export const meta = {
+  name: packageJson.name,
+  version: packageJson.version,
+};
+
+export const rules = {
+  'no-empty-strings': noEmptyStringsRule,
+  'no-unhelpful-desc': noUnhelpfulDesc,
+};
+
+export const configs = {
+  strict: {
+    rules: {
+      '@nkzw/fbtee/no-empty-strings': 2,
+      '@nkzw/fbtee/no-unhelpful-desc': 2,
+    },
+  },
+};

package/src/rules/no-empty-strings.tsx

@@ -0,0 +1,106 @@
+import type { TSESTree } from '@typescript-eslint/utils';
+import { createRule, elementType, resolveNodeValue } from '../utils.tsx';
+
+export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (
+          node.callee.type === 'Identifier' &&
+          !(node.callee.name === 'fbt' || node.callee.name === 'fbs')
+        ) {
+          return;
+        }
+
+        const [text] = node.arguments;
+
+        if (text && text.type !== 'SpreadElement' && isEmptyString(text)) {
+          context.report({
+            messageId: 'emptyString',
+            node: text,
+          });
+        }
+      },
+
+      JSXElement(node) {
+        if (elementType(node) !== 'fbt') {
+          return;
+        }
+
+        //  Collect nodes to report and validate all children recursively.
+        const nodesToReport = new Set<TSESTree.Node>();
+        const hasTextContent = validateChildren(node, nodesToReport);
+
+        if (!hasTextContent) {
+          for (const node of nodesToReport) {
+            context.report({
+              messageId: 'jsxEmptyString',
+              node,
+            });
+          }
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      description: 'Disallow empty strings in fbt elements or function calls.',
+    },
+    messages: {
+      emptyString:
+        'Empty strings are not allowed in fbt() or fbs() function arguments.',
+      jsxEmptyString:
+        'Empty strings are not allowed as children of <fbt> tags.',
+    },
+    schema: [],
+    type: 'problem',
+  },
+  name: 'no-empty-strings',
+});
+
+function validateChildren(
+  node: TSESTree.JSXElement | TSESTree.JSXFragment,
+  nodesToReport: Set<TSESTree.Node>,
+): boolean {
+  let hasTextContent = false;
+
+  for (const child of node.children) {
+    if (child.type === 'JSXText' && node.children.length === 1) {
+      if (child.value.trim() === '') {
+        nodesToReport.add(child);
+      } else {
+        hasTextContent = true;
+      }
+    }
+
+    if (
+      child.type === 'JSXExpressionContainer' &&
+      child.expression.type !== 'JSXEmptyExpression'
+    ) {
+      if (isEmptyString(child.expression)) {
+        nodesToReport.add(child.expression);
+      } else {
+        hasTextContent = true;
+      }
+    }
+
+    if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
+      hasTextContent ||= validateChildren(child, nodesToReport);
+    }
+
+    if (hasTextContent) {
+      break;
+    }
+  }
+
+  if (!hasTextContent && nodesToReport.size === 0) {
+    nodesToReport.add(node);
+  }
+
+  return hasTextContent;
+}
+
+function isEmptyString(node: TSESTree.Expression | TSESTree.Literal): boolean {
+  return resolveNodeValue(node)?.trim() === '';
+}

package/src/rules/no-unhelpful-desc.tsx

@@ -0,0 +1,122 @@
+import {
+  createRule,
+  elementType,
+  resolveJsxElementTextContent,
+  resolveNodeValue,
+} from '../utils.tsx';
+
+export default createRule<
+  [],
+  'emptyDesc' | 'jsxEmptyDesc' | 'duplicateDesc' | 'shortDesc'
+>({
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (
+          node.callee.type !== 'Identifier' ||
+          !(node.callee.name === 'fbt' || node.callee.name === 'fbs')
+        ) {
+          return;
+        }
+
+        const [textArg, descArg] = node.arguments;
+
+        const desc =
+          descArg && descArg.type !== 'SpreadElement'
+            ? resolveNodeValue(descArg)?.trim()
+            : null;
+
+        if (!desc) {
+          context.report({
+            messageId: 'emptyDesc',
+            node: descArg || node,
+          });
+          return;
+        }
+
+        if (desc.length <= 4) {
+          context.report({
+            messageId: 'shortDesc',
+            node: descArg || node,
+          });
+          return;
+        }
+
+        const text =
+          textArg && textArg.type !== 'SpreadElement'
+            ? resolveNodeValue(textArg)?.trim()
+            : null;
+
+        if (desc.toLowerCase() === text?.toLowerCase()) {
+          context.report({
+            messageId: 'duplicateDesc',
+            node: descArg || node,
+          });
+        }
+      },
+
+      JSXAttribute(node) {
+        if (elementType(node.parent.parent) !== 'fbt') {
+          return;
+        }
+
+        if (node.name.name !== 'desc' || !node.value) {
+          return;
+        }
+
+        if (
+          node.value.type === 'JSXExpressionContainer' &&
+          (node.value.expression.type === 'Identifier' ||
+            node.value.expression.type === 'CallExpression')
+        ) {
+          return;
+        }
+
+        const desc = resolveNodeValue(node.value)?.trim();
+
+        if (!desc) {
+          context.report({
+            messageId: 'jsxEmptyDesc',
+            node: node.value,
+          });
+          return;
+        }
+
+        if (desc.length <= 4) {
+          context.report({
+            messageId: 'shortDesc',
+            node: node.value,
+          });
+          return;
+        }
+
+        const textContent = resolveJsxElementTextContent(node.parent.parent);
+
+        if (desc.toLowerCase() === textContent.toLowerCase()) {
+          context.report({
+            messageId: 'duplicateDesc',
+            node: node.value,
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+  meta: {
+    docs: {
+      description:
+        'Enforce meaningful and non-empty descriptions in <fbt> elements and fbt()/fbs() function calls.',
+    },
+    messages: {
+      duplicateDesc:
+        'The "desc" attribute or argument should not be a duplicate of the text content.',
+      emptyDesc: 'The "desc" argument in fbt() and fbs() must not be empty.',
+      jsxEmptyDesc: 'The "desc" attribute in <fbt> must not be empty.',
+      shortDesc:
+        'The "desc" attribute or argument is too short. Use a more descriptive and meaningful explanation.',
+    },
+    schema: [],
+    type: 'problem',
+  },
+  name: 'no-unhelpful-desc',
+});

package/src/utils.tsx

@@ -0,0 +1,109 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+import type { TSESTree } from '@typescript-eslint/utils';
+
+export const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://github.com/nkzw-tech/fbtee/tree/main/packages/eslint-plugin-fbt/docs/rules/${name}`,
+);
+
+function resolveMemberExpressions(
+  object: TSESTree.JSXTagNameExpression,
+  property: TSESTree.JSXIdentifier,
+): string {
+  if (object.type === 'JSXMemberExpression') {
+    return `${resolveMemberExpressions(object.object, object.property)}.${property.name}`;
+  }
+
+  return `${object.name}.${property.name}`;
+}
+
+export function elementType(
+  node: TSESTree.JSXElement | TSESTree.JSXFragment,
+): string {
+  if (node.type === 'JSXFragment') {
+    return '<>';
+  }
+
+  const { name } = node.openingElement;
+
+  switch (name.type) {
+    case 'JSXIdentifier': {
+      return name.name;
+    }
+
+    case 'JSXMemberExpression': {
+      const { object, property } = name;
+      return resolveMemberExpressions(object, property);
+    }
+
+    case 'JSXNamespacedName': {
+      return `${name.namespace.name}:${name.name.name}`;
+    }
+
+    default: {
+      throw new Error('Unsupported JSX node type.');
+    }
+  }
+}
+
+export function resolveJsxElementTextContent(
+  node: TSESTree.JSXElement,
+): string {
+  return node.children
+    .map((child) => {
+      if (child.type === 'JSXText') {
+        return child.value.trim();
+      }
+
+      if (child.type === 'JSXExpressionContainer') {
+        return resolveNodeValue(child.expression) || '';
+      }
+
+      return '';
+    })
+    .join('')
+    .trim();
+}
+
+export function resolveBinaryExpression(
+  node: TSESTree.BinaryExpression,
+): string | null {
+  if (node.operator !== '+') {
+    return null;
+  }
+
+  const leftValue = resolveNodeValue(node.left);
+  const rightValue = resolveNodeValue(node.right);
+
+  if (leftValue !== null && rightValue !== null) {
+    return leftValue + rightValue;
+  }
+
+  return null;
+}
+
+export function resolveNodeValue(
+  node:
+    | TSESTree.Expression
+    | TSESTree.JSXExpression
+    | TSESTree.JSXEmptyExpression
+    | TSESTree.PrivateIdentifier,
+): string | null {
+  if (node.type === 'Literal' && typeof node.value === 'string') {
+    return node.value;
+  }
+
+  if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
+    return node.quasis.map((quasi) => quasi.value.raw).join('');
+  }
+
+  if (node.type === 'BinaryExpression') {
+    return resolveBinaryExpression(node);
+  }
+
+  if (node.type === 'JSXExpressionContainer') {
+    return resolveNodeValue(node.expression);
+  }
+
+  return null;
+}