@nkzw/eslint-plugin-fbtee 0.1.2 → 0.1.4

package/src/__tests__/no-untranslated-strings-test.tsx

@@ -0,0 +1,223 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import rule from '../rules/no-untranslated-strings.tsx';
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run('no-untranslated-strings', rule, {
+  invalid: [
+    {
+      code: `
+        <span>Hello world</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <span>{'Hello world'}</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <span>{'Hello world' + ''}</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <div>
+          <span>Hello world</span>
+        </div>;
+       `,
+      errors: [
+        {
+          line: 3,
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <div>
+          <div></div>
+          Hello world
+        </div>;
+       `,
+      errors: [
+        {
+          line: 4,
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <>Hello world</>
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <input placeholder="Enter name..." />;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+          <div aria-label={'Label'}></div>
+         `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+          <div aria-label={\`Label\`}></div>
+         `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+  ],
+
+  valid: [
+    {
+      code: `
+        <fbt desc="Greeting">Hello world</fbt>
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Greeting">
+          Hello world
+        </fbt>
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Greeting">
+          <span>Hello world</span>
+        </fbt>
+       `,
+    },
+    {
+      code: `
+        <span>
+          {fbt('Hello', 'Greeting')}
+        </span>
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Counter">
+          Count:
+          <fbt:plural count={1} showCount="yes" many="items">
+            item
+          </fbt:plural>
+        </fbt>
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Greeting">
+          <>Hello</>
+        </fbt>
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Greeting">
+          Hello <span>world</span>
+        </fbt>;
+       `,
+    },
+    {
+      code: `
+        <fbt desc="Welcome message">
+          Welcome <fbt:param name="name">Steve</fbt:param>
+        </fbt>
+       `,
+    },
+    {
+      code: `
+        <div>
+          <p>GitHub</p>
+          <p>{'GitHub'}</p>
+          <p>{\`GitHub\`}</p>
+        </div>
+       `,
+      options: [
+        {
+          ignoredWords: ['GitHub'],
+        },
+      ],
+    },
+    {
+      code: `
+        <textarea rows={2}></textarea>
+       `,
+    },
+    {
+      code: `
+        <a aria-current></a>
+       `,
+    },
+    {
+      code: `
+        <img src="" alt={fbs('A photo of a dog', 'Image description')} />
+       `,
+    },
+    {
+      code: `
+        <div aria-label={fbs('Hello', 'Greeting')}></div>
+       `,
+    },
+    {
+      code: `
+        <div aria-label={fbt('Hello', 'Greeting').toString()}></div>
+       `,
+    },
+    {
+      code: `
+       foo('Bar')
+       `,
+    },
+    {
+      code: `
+       foo.bar('Baz')
+       `,
+    },
+  ],
+});

package/src/index.tsx

@@ -1,6 +1,7 @@
 import packageJson from '../package.json' with { type: 'json' };
 import noEmptyStringsRule from './rules/no-empty-strings.tsx';
 import noUnhelpfulDesc from './rules/no-unhelpful-desc.tsx';
+import noUntranslatedStrings from './rules/no-untranslated-strings.tsx';
 
 export const meta = {
   name: packageJson.name,
@@ -10,13 +11,21 @@ export const meta = {
 export const rules = {
   'no-empty-strings': noEmptyStringsRule,
   'no-unhelpful-desc': noUnhelpfulDesc,
+  'no-untranslated-strings': noUntranslatedStrings,
 };
 
 export const configs = {
+  recommended: {
+    rules: {
+      '@nkzw/fbtee/no-empty-strings': 2,
+      '@nkzw/fbtee/no-unhelpful-desc': 2,
+    },
+  },
   strict: {
     rules: {
       '@nkzw/fbtee/no-empty-strings': 2,
       '@nkzw/fbtee/no-unhelpful-desc': 2,
+      '@nkzw/fbtee/no-untranslated-strings': 2,
     },
   },
 };

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

@@ -1,14 +1,16 @@
 import type { TSESTree } from '@typescript-eslint/utils';
-import { createRule, elementType, resolveNodeValue } from '../utils.tsx';
+import {
+  createRule,
+  elementType,
+  isFbtNode,
+  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')
-        ) {
+        if (!isFbtNode(node)) {
           return;
         }
 
@@ -23,21 +25,22 @@ export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
       },
 
       JSXElement(node) {
-        if (elementType(node) !== 'fbt') {
+        if (!isFbtNode(node)) {
+          return;
+        }
+
+        if (node.openingElement.name.type === 'JSXNamespacedName') {
           return;
         }
 
         //  Collect nodes to report and validate all children recursively.
-        const nodesToReport = new Set<TSESTree.Node>();
-        const hasTextContent = validateChildren(node, nodesToReport);
+        const hasTextContent = validateChildren(node);
 
         if (!hasTextContent) {
-          for (const node of nodesToReport) {
-            context.report({
-              messageId: 'jsxEmptyString',
-              node,
-            });
-          }
+          context.report({
+            messageId: 'jsxEmptyString',
+            node,
+          });
         }
       },
     };
@@ -49,9 +52,9 @@ export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
     },
     messages: {
       emptyString:
-        'Empty strings are not allowed in fbt() or fbs() function arguments.',
+        'Empty strings are not allowed in fbt() and fbs() function arguments.',
       jsxEmptyString:
-        'Empty strings are not allowed as children of <fbt> tags.',
+        'Empty strings are not allowed as children of `<fbt>` and `<fbs>` tags.',
     },
     schema: [],
     type: 'problem',
@@ -61,40 +64,44 @@ export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
 
 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 === 'JSXText' && child.value.trim() !== '') {
+      hasTextContent = true;
     }
 
-    if (
-      child.type === 'JSXExpressionContainer' &&
-      child.expression.type !== 'JSXEmptyExpression'
-    ) {
+    if (child.type === 'JSXExpressionContainer') {
+      if (child.expression.type === 'JSXEmptyExpression') {
+        continue;
+      }
+
+      // Ignore when a variable is used <fbt desc="Greeting">{dynamicValue}</fbt>
       if (
-        isEmptyString(child.expression) &&
-        (node.children.length === 1 ||
-          node.children.every(
-            (otherChild) =>
-              child === otherChild ||
-              (otherChild.type === 'JSXText' && otherChild.value.trim() === ''),
-          ))
+        child.expression.type === 'Identifier' &&
+        child.expression.name !== 'undefined'
       ) {
-        nodesToReport.add(child.expression);
-      } else {
+        hasTextContent = true;
+        continue;
+      }
+
+      const value = resolveNodeValue(child.expression)?.trim();
+
+      if (value) {
         hasTextContent = true;
       }
     }
 
     if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
-      hasTextContent ||= validateChildren(child, nodesToReport);
+      const childName = elementType(child);
+
+      if (/^[A-Z]/.test(childName) || childName.startsWith('fbt:')) {
+        hasTextContent = true;
+        continue;
+      }
+
+      hasTextContent ||= validateChildren(child);
     }
 
     if (hasTextContent) {
@@ -102,10 +109,6 @@ function validateChildren(
     }
   }
 
-  if (!hasTextContent && nodesToReport.size === 0) {
-    nodesToReport.add(node);
-  }
-
   return hasTextContent;
 }
 

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

@@ -1,6 +1,6 @@
 import {
   createRule,
-  elementType,
+  isFbtNode,
   resolveJsxElementTextContent,
   resolveNodeValue,
 } from '../utils.tsx';
@@ -12,10 +12,7 @@ export default createRule<
   create(context) {
     return {
       CallExpression(node) {
-        if (
-          node.callee.type !== 'Identifier' ||
-          !(node.callee.name === 'fbt' || node.callee.name === 'fbs')
-        ) {
+        if (!isFbtNode(node)) {
           return;
         }
 
@@ -56,7 +53,7 @@ export default createRule<
       },
 
       JSXAttribute(node) {
-        if (elementType(node.parent.parent) !== 'fbt') {
+        if (!isFbtNode(node.parent.parent)) {
           return;
         }
 

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

@@ -0,0 +1,141 @@
+import {
+  createRule,
+  getPropName,
+  hasFbtParent,
+  isFbtNode,
+  resolveNodeValue,
+} from '../utils.tsx';
+
+type Options = [{ ignoredWords: Array<string> }];
+
+const attributes = new Set([
+  'title',
+  'placeholder',
+  'alt',
+  'label',
+  'aria-label',
+  'aria-errormessage',
+]);
+
+export default createRule<Options, 'unwrappedString'>({
+  create(context, options) {
+    const ignoredWords = new Set(
+      options[0].ignoredWords.map((s) => s.trim().toLowerCase()),
+    );
+
+    function isIgnoredWord(value: string) {
+      return ignoredWords.has(value.trim().toLowerCase());
+    }
+
+    return {
+      JSXAttribute(node) {
+        const propName = getPropName(node);
+
+        if (!attributes.has(propName)) {
+          return;
+        }
+
+        const value = node.value ? resolveNodeValue(node.value) : null;
+
+        if (!value) {
+          return;
+        }
+
+        if (isIgnoredWord(value)) {
+          return;
+        }
+
+        if (
+          node.value?.type === 'JSXExpressionContainer' &&
+          isFbtNode(node.value.expression)
+        ) {
+          return;
+        }
+
+        context.report({
+          messageId: 'unwrappedString',
+          node,
+        });
+      },
+
+      JSXExpressionContainer(node) {
+        if (node.parent.type === 'JSXAttribute') {
+          return;
+        }
+
+        const value = resolveNodeValue(node.expression);
+
+        if (!value) {
+          return;
+        }
+
+        if (isIgnoredWord(value)) {
+          return;
+        }
+
+        if (!hasFbtParent(node)) {
+          context.report({
+            messageId: 'unwrappedString',
+            node,
+          });
+        }
+      },
+
+      JSXText(node) {
+        const value = node.value.trim();
+
+        if (!value) {
+          return;
+        }
+
+        if (isIgnoredWord(value)) {
+          return;
+        }
+
+        if (!hasFbtParent(node)) {
+          const startOffset = node.range[0] + node.value.indexOf(value);
+          const endOffset = startOffset + value.length;
+
+          context.report({
+            loc: {
+              end: context.sourceCode.getLocFromIndex(endOffset),
+              start: context.sourceCode.getLocFromIndex(startOffset),
+            },
+            messageId: 'unwrappedString',
+          });
+        }
+      },
+    };
+  },
+
+  defaultOptions: [{ ignoredWords: [] }],
+
+  meta: {
+    docs: {
+      description:
+        'Enforce text content to be wrapped with `<fbt>`, `fbt()` or `fbs()`',
+    },
+    messages: {
+      unwrappedString:
+        'Text content must be wrapped in `<fbt>`, `fbt()` or `fbs()`',
+    },
+    schema: [
+      {
+        additionalProperties: false,
+        properties: {
+          ignoredWords: {
+            items: {
+              type: 'string',
+            },
+            type: 'array',
+            uniqueItems: true,
+          },
+        },
+        type: 'object',
+      },
+    ],
+    type: 'problem',
+  },
+
+  name: 'no-untranslated-strings',
+});

package/src/utils.tsx

@@ -3,7 +3,7 @@ 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}`,
+    `https://github.com/nkzw-tech/fbtee/blob/main/packages/eslint-plugin-fbtee/docs/rules/${name}.md`,
 );
 
 function resolveMemberExpressions(
@@ -47,7 +47,7 @@ export function elementType(
 }
 
 export function resolveJsxElementTextContent(
-  node: TSESTree.JSXElement,
+  node: TSESTree.JSXElement | TSESTree.JSXFragment,
 ): string {
   return node.children
     .map((child) => {
@@ -107,3 +107,51 @@ export function resolveNodeValue(
 
   return null;
 }
+
+export function getPropName(prop: TSESTree.JSXAttribute) {
+  if (prop.name.type === 'JSXNamespacedName') {
+    return `${prop.name.namespace.name}:${prop.name.name.name}`;
+  }
+
+  return prop.name.name;
+}
+
+export function hasFbtParent(node: TSESTree.Node) {
+  let current = node.parent;
+
+  while (current) {
+    if (isFbtNode(current)) {
+      return true;
+    }
+    current = current.parent;
+  }
+
+  return false;
+}
+
+export function isFbtNode(node?: TSESTree.Node) {
+  if (!node) {
+    return null;
+  }
+
+  if (node.type === 'JSXElement') {
+    const name = elementType(node);
+    return name === 'fbt' || name === 'fbs' || name?.startsWith('fbt:');
+  }
+
+  if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
+    const name = node.callee.name;
+    return name === 'fbt' || name === 'fbs';
+  }
+
+  if (
+    node.type === 'MemberExpression' &&
+    node.object.type === 'CallExpression' &&
+    node.object.callee.type === 'Identifier'
+  ) {
+    const name = node.object.callee.name;
+    return name === 'fbt' || name === 'fbs';
+  }
+
+  return false;
+}