@nkzw/eslint-plugin-fbtee 0.1.3 → 0.2.0

package/README.md

@@ -18,13 +18,13 @@ This is a fork of Facebook's original `fbt` library, which has been archived. Th
 **fbtee** requires at least Node 22, and React 19 if you are using React.
 
 ```bash
-npm install fbtee @nkzw/babel-fbtee
+npm install fbtee @nkzw/babel-preset-fbtee
 ```
 
 In your `vite.config.ts`:
 
 ```ts
-import fbteePreset from '@nkzw/babel-fbtee';
+import fbteePreset from '@nkzw/babel-preset-fbtee';
 import react from '@vitejs/plugin-react';
 
 export default {
@@ -136,7 +136,7 @@ const Greeting = ({ name }) => (
 );
 ```
 
-_Note: `<fbt>` is auto-imported for you by the `@nkzw/babel-fbtee` plugin._
+_Note: `<fbt>` is auto-imported for you by the `@nkzw/babel-preset-fbtee` plugin._
 
 After marking your strings for translation with `<fbt>`, run the following commands to extract, and compile translations:
 
@@ -162,6 +162,15 @@ npm install @nkzw/eslint-plugin-fbtee
 
 Add the following configuration to your ESLint configuration:
 
+```js
+{
+  extends: ['plugin:@nkzw/eslint-plugin-fbtee/recommended'],
+  plugins: ['@nkzw/eslint-plugin-fbtee'],
+}
+```
+
+If you want stricter enforcement of translation rules, you can use the strict configuration, which enables the `no-untranslated-strings` rule. This ensures that all strings in your codebase are marked for translation.
+
 ```js
 {
   extends: ['plugin:@nkzw/eslint-plugin-fbtee/strict'],
@@ -177,6 +186,7 @@ Or, if you'd like more granular control over the rules:
   rules: {
     '@nkzw/fbtee/no-empty-strings': 'error',
     '@nkzw/fbtee/no-unhelpful-desc': 'error',
+    '@nkzw/fbtee/no-untranslated-strings': 'error',
   },
 }
 ```
@@ -190,7 +200,7 @@ The open-source version of `fbt`, however, became unmaintained, difficult to set
 - **Easier Setup:** fbtee works with modern tools like Vite.
 - **Statically Typed:** The fbtee compiler ensures correct usage of fbtee, libary TypeScript types are provided, and an eslint plugin helps fix common mistakes.
 - **Improved React Compatibility:** Removed React-specific hacks and added support for implicit React fragments (`<>`).
-- **Enhanced Features:** Fixed and exported `intlList`, which was not functional in the original `fbt`.
+- **Enhanced Features:** Fixed and exported `inltList` as a new `<fbt:list>` construt, which was not functional in the original `fbt`.
 - **Modernized Codebase:** Rewritten using TypeScript, ES modules (ESM), eslint, and modern JavaScript standards. Removed cruft and legacy code.
 - **Updated Tooling:** Uses modern tools like pnpm, Vite, and esbuild for faster and more efficient development of **fbtee**.
 

package/docs/rules/no-unhelpful-desc.md

@@ -2,7 +2,7 @@
 
 ## Rule Details
 
-This rule enforces that meaningful and non-empty descriptions are provided to <fbt> elements and fbt()/fbs() function calls. Descriptions (desc) are crucial for ensuring proper translation context and avoiding ambiguous or unhelpful translations.
+This rule enforces that meaningful and non-empty descriptions are provided to `<fbt>` elements and fbt()/fbs() function calls. Descriptions (desc) are crucial for ensuring proper translation context and avoiding ambiguous or unhelpful translations.
 
 Examples of **incorrect** code for this rule:
 

package/docs/rules/no-unwrapped-strings.md

@@ -0,0 +1,55 @@
+# Enforce strings to be wrapped with `<fbt>` (fbtee/no-untranslated-strings)
+
+## Rule Details
+
+This rule enforces that all literal strings in your JSX are wrapped with an `<fbt>` tag, or translated using `fbt()`/`fbs()` functions, ensuring they are properly marked for translation.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+<h1>Hello</h1>
+```
+
+```jsx
+<h1>{`Hello`}</h1>
+```
+
+```jsx
+<span title="Hello" />
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+<h1>
+  <fbt desc="Greeting">Hello</fbt>
+</h1>
+```
+
+```jsx
+<h1>{fbt('Hello', 'Greeting')}</h1>
+```
+
+```jsx
+<span title={fbs('Hello', 'Greeting')} />
+```
+
+## Rule Options
+
+```js
+...
+"fbt/no-untranslated-strings": [<enabled>, {"ignoredWords": Array<string>}]
+...
+```
+
+### `ignoredWords`
+
+A list of words that are not required to be translated. Like so:
+
+```jsx
+"fbt/no-untranslated-strings": ["warn", { "ignoredWords": ["GitHub"] }]
+```
+
+## When Not To Use It
+
+If you do not want to enforce all strings to be marked for translation, then you can disable this rule.

package/lib/index.cjs

@@ -18,18 +18,18 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   configs: () => configs,
   meta: () => meta,
   rules: () => rules
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // package.json
 var package_default = {
   name: "@nkzw/eslint-plugin-fbtee",
-  version: "0.1.3",
+  version: "0.2.0",
   description: "",
   keywords: [],
   repository: {
@@ -47,17 +47,17 @@ var package_default = {
     build: "tsup src/index.tsx -d lib --target=node22 --format=esm,cjs --clean --no-splitting --dts"
   },
   dependencies: {
-    "@typescript-eslint/utils": "^8.18.0"
+    "@typescript-eslint/utils": "^8.18.2"
   },
   devDependencies: {
-    "@typescript-eslint/rule-tester": "^8.18.0"
+    "@typescript-eslint/rule-tester": "^8.18.2"
   }
 };
 
 // src/utils.tsx
 var import_utils = require("@typescript-eslint/utils");
 var createRule = import_utils.ESLintUtils.RuleCreator(
-  (name) => `https://github.com/nkzw-tech/fbtee/tree/main/packages/eslint-plugin-fbt/docs/rules/${name}`
+  (name) => `https://github.com/nkzw-tech/fbtee/blob/main/packages/eslint-plugin-fbtee/docs/rules/${name}.md`
 );
 function resolveMemberExpressions(object, property) {
   if (object.type === "JSXMemberExpression") {
@@ -121,15 +121,59 @@ function resolveNodeValue(node) {
   if (node.type === "JSXExpressionContainer") {
     return resolveNodeValue(node.expression);
   }
+  if (node.type === "ConditionalExpression") {
+    const consequent = resolveNodeValue(node.consequent);
+    const alternate = resolveNodeValue(node.alternate);
+    return consequent || alternate || null;
+  }
+  if (node.type === "LogicalExpression") {
+    const left = resolveNodeValue(node.left);
+    const right = resolveNodeValue(node.right);
+    return left || right || null;
+  }
   return null;
 }
+function getPropName(prop) {
+  if (prop.name.type === "JSXNamespacedName") {
+    return `${prop.name.namespace.name}:${prop.name.name.name}`;
+  }
+  return prop.name.name;
+}
+function hasFbtParent(node) {
+  let current = node.parent;
+  while (current) {
+    if (isFbtNode(current)) {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+function isFbtNode(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;
+}
 
 // src/rules/no-empty-strings.tsx
 var no_empty_strings_default = createRule({
   create(context) {
     return {
       CallExpression(node) {
-        if (node.callee.type !== "Identifier" || !(node.callee.name === "fbt" || node.callee.name === "fbs")) {
+        if (!isFbtNode(node)) {
           return;
         }
         const [text] = node.arguments;
@@ -141,18 +185,18 @@ var no_empty_strings_default = createRule({
         }
       },
       JSXElement(node) {
-        if (elementType(node) !== "fbt") {
+        if (!isFbtNode(node)) {
+          return;
+        }
+        if (node.openingElement.name.type === "JSXNamespacedName") {
           return;
         }
-        const nodesToReport = /* @__PURE__ */ new Set();
-        const hasTextContent = validateChildren(node, nodesToReport);
+        const hasTextContent = validateChildren(node);
         if (!hasTextContent) {
-          for (const node2 of nodesToReport) {
-            context.report({
-              messageId: "jsxEmptyString",
-              node: node2
-            });
-          }
+          context.report({
+            messageId: "jsxEmptyString",
+            node
+          });
         }
       }
     };
@@ -163,30 +207,30 @@ var no_empty_strings_default = createRule({
       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."
+      emptyString: "Empty strings are not allowed in fbt() and fbs() function arguments.",
+      jsxEmptyString: "Empty strings are not allowed as children of `<fbt>` and `<fbs>` tags."
     },
     schema: [],
     type: "problem"
   },
   name: "no-empty-strings"
 });
-function validateChildren(node, nodesToReport) {
+function validateChildren(node) {
   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 {
+    if (child.type === "JSXText" && child.value.trim() !== "") {
+      hasTextContent = true;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      if (child.expression.type === "JSXEmptyExpression") {
+        continue;
+      }
+      if (child.expression.type === "Identifier" && child.expression.name !== "undefined") {
         hasTextContent = true;
+        continue;
       }
-    }
-    if (child.type === "JSXExpressionContainer" && child.expression.type !== "JSXEmptyExpression") {
-      if (isEmptyString(child.expression) && (node.children.length === 1 || node.children.every(
-        (otherChild) => child === otherChild || otherChild.type === "JSXText" && otherChild.value.trim() === ""
-      ))) {
-        nodesToReport.add(child.expression);
-      } else {
+      const value = resolveNodeValue(child.expression)?.trim();
+      if (value) {
         hasTextContent = true;
       }
     }
@@ -196,15 +240,12 @@ function validateChildren(node, nodesToReport) {
         hasTextContent = true;
         continue;
       }
-      hasTextContent ||= validateChildren(child, nodesToReport);
+      hasTextContent ||= validateChildren(child);
     }
     if (hasTextContent) {
       break;
     }
   }
-  if (!hasTextContent && nodesToReport.size === 0) {
-    nodesToReport.add(node);
-  }
   return hasTextContent;
 }
 function isEmptyString(node) {
@@ -216,7 +257,7 @@ var no_unhelpful_desc_default = createRule({
   create(context) {
     return {
       CallExpression(node) {
-        if (node.callee.type !== "Identifier" || !(node.callee.name === "fbt" || node.callee.name === "fbs")) {
+        if (!isFbtNode(node)) {
           return;
         }
         const [textArg, descArg] = node.arguments;
@@ -244,7 +285,7 @@ var no_unhelpful_desc_default = createRule({
         }
       },
       JSXAttribute(node) {
-        if (elementType(node.parent.parent) !== "fbt") {
+        if (!isFbtNode(node.parent.parent)) {
           return;
         }
         if (node.name.name !== "desc" || !node.value) {
@@ -295,6 +336,112 @@ var no_unhelpful_desc_default = createRule({
   name: "no-unhelpful-desc"
 });
 
+// src/rules/no-untranslated-strings.tsx
+var attributes = /* @__PURE__ */ new Set([
+  "title",
+  "placeholder",
+  "alt",
+  "label",
+  "aria-label",
+  "aria-errormessage"
+]);
+var no_untranslated_strings_default = createRule({
+  create(context, options) {
+    const ignoredWords = new Set(
+      options[0].ignoredWords.map((s) => s.trim().toLowerCase())
+    );
+    function isIgnoredWord(value) {
+      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"
+});
+
 // src/index.tsx
 var meta = {
   name: package_default.name,
@@ -302,14 +449,22 @@ var meta = {
 };
 var rules = {
   "no-empty-strings": no_empty_strings_default,
-  "no-unhelpful-desc": no_unhelpful_desc_default
+  "no-unhelpful-desc": no_unhelpful_desc_default,
+  "no-untranslated-strings": no_untranslated_strings_default
 };
 var configs = {
-  strict: {
+  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
+    }
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/lib/index.d.cts

@@ -7,12 +7,22 @@ declare const meta: {
 declare const rules: {
     'no-empty-strings': _typescript_eslint_utils_ts_eslint.RuleModule<"emptyString" | "jsxEmptyString", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
     'no-unhelpful-desc': _typescript_eslint_utils_ts_eslint.RuleModule<"emptyDesc" | "jsxEmptyDesc" | "duplicateDesc" | "shortDesc", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
+    'no-untranslated-strings': _typescript_eslint_utils_ts_eslint.RuleModule<"unwrappedString", [{
+        ignoredWords: Array<string>;
+    }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
 };
 declare const configs: {
+    recommended: {
+        rules: {
+            '@nkzw/fbtee/no-empty-strings': number;
+            '@nkzw/fbtee/no-unhelpful-desc': number;
+        };
+    };
     strict: {
         rules: {
             '@nkzw/fbtee/no-empty-strings': number;
             '@nkzw/fbtee/no-unhelpful-desc': number;
+            '@nkzw/fbtee/no-untranslated-strings': number;
         };
     };
 };

package/lib/index.d.ts

@@ -7,12 +7,22 @@ declare const meta: {
 declare const rules: {
     'no-empty-strings': _typescript_eslint_utils_ts_eslint.RuleModule<"emptyString" | "jsxEmptyString", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
     'no-unhelpful-desc': _typescript_eslint_utils_ts_eslint.RuleModule<"emptyDesc" | "jsxEmptyDesc" | "duplicateDesc" | "shortDesc", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
+    'no-untranslated-strings': _typescript_eslint_utils_ts_eslint.RuleModule<"unwrappedString", [{
+        ignoredWords: Array<string>;
+    }], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
 };
 declare const configs: {
+    recommended: {
+        rules: {
+            '@nkzw/fbtee/no-empty-strings': number;
+            '@nkzw/fbtee/no-unhelpful-desc': number;
+        };
+    };
     strict: {
         rules: {
             '@nkzw/fbtee/no-empty-strings': number;
             '@nkzw/fbtee/no-unhelpful-desc': number;
+            '@nkzw/fbtee/no-untranslated-strings': number;
         };
     };
 };