@nkzw/eslint-plugin-fbtee 0.1.4 → 0.2.1

package/README.md

@@ -18,7 +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-preset-fbtee
+npm install fbtee
+```
+
+In addition to `fbtee`, you need to install the Babel preset and React plugin for Vite:
+
+```bash
+npm install -D @nkzw/babel-preset-fbtee @vitejs/plugin-react
 ```
 
 In your `vite.config.ts`:
@@ -43,20 +49,26 @@ export default {
 ```json
 {
   "scripts": {
-    "fbtee:collect": "fbtee collect --manifest < .src_manifest.json > .source_strings.json",
     "fbtee:manifest": "fbtee manifest --src src",
+    "fbtee:collect": "fbtee collect --manifest < .src_manifest.json > .source_strings.json",
     "fbtee:translate": "fbtee translate --translations translations/*.json --jenkins > src/translations.json"
   }
 }
 ```
 
-Run these commands to set up the initial translation files:
+Here is what each command does:
+
+- `fbtee manifest --src src` searches through files in the `src` directory and generates a manifest file (`.src_manifest.json`) that lists all the files translatable strings marked with `<fbt>`. In addition it creates `.enum_manifest.json` which lists all the files containing `<fbt:enum>` tags. Since these files are auto-generated, we recommend adding them to your `.gitignore`.
+- `fbtee collect --manifest < .src_manifest.json > .source_strings.json` reads the manifest file and extracts all the strings marked for translation into a `.source_strings.json` file. This file should be uploaded to your translation provider as the source for your translations.
+- `fbtee translate --translations translations/*.json --jenkins > src/translations.json` reads all the translations in the `translations/` directory and compiles them into a single `src/translations.json` file. This file is used by **fbtee** to display translated content in your app. The `--translations` parameter specifies the path to the translation files. The `--jenkins` flag is used to define the utilized [hash function](https://en.wikipedia.org/wiki/Jenkins_hash_function). You can adjust the `--translations` parameter to point to your translation directory. If your translations are within your app directory in a folder called `i18n`, for example, you'd use `--translations app/i18n/*.json`. The output is the translation file used by **fbtee**. This file is going to be referred to in your applications entry point, therefor it needs to be generated as part of the build, but should not be part of version control. This command requires the translations to be present in the `translations/` directory, created based on real translations of what was previously collected using the `collect` command.
+
+Now, the first step is to run these commands to set up the initial strings for translation:
 
 ```bash
-npm run fbtee:manifest && npm run fbtee:collect && npm run fbtee:translate
+npm run fbtee:manifest && npm run fbtee:collect
 ```
 
-The files generated by these commands are auto-generated and should not be checked into version control. Add the following entries to your `.gitignore`:
+The files generated by these commands should be added to `.gitignore`:
 
 ```
 .src_manifest.json
@@ -82,13 +94,13 @@ setupFbtee({
 });
 ```
 
-Finally, if you are using React and TypeScript in your project, you need to add TypeScript types for **fbtee** to enable proper type checking in JSX. You can do this by referencing the `ReactTypes.d.ts` file in your main `index.tsx` file or a global type declaration file (e.g., `types.d.ts`):
+Next up, if you are using React and TypeScript in your project, you need to add TypeScript types for **fbtee** to enable proper type checking in JSX. You can do this by referencing the `ReactTypes.d.ts` file in your main `index.tsx` file or a global type declaration file (e.g., `types.d.ts`):
 
 ```tsx
 /// <reference types="fbtee/ReactTypes.d.ts" />
 ```
 
-_You’re now ready to go!_
+_You’re now ready to define your first translatable element!_
 
 ## Usage
 
@@ -141,16 +153,102 @@ _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:
 
 ```bash
-npm run fbtee:collect
+npm run fbtee:manifest && npm run fbtee:collect
+```
+
+You can now upload the `.source_strings.json` file to your translation provider. One sample for such a translation provider is [Crowdin](https://crowdin.com/).
+
+### Generated File Structure
+
+Your `.source_strings.json` might look like this:
+
+```json
+{
+  "childParentMappings": {},
+  "phrases": [
+    {
+      "hashToLeaf": {
+        "MB6OYuvCF1VzjOmqinI42g==": {
+          "desc": "What's next question",
+          "text": "What's next?"
+        }
+      },
+      "col_beg": 12,
+      "col_end": 68,
+      "filepath": "app/welcome/welcome.tsx",
+      "line_beg": 43,
+      "line_end": 43,
+      "project": "",
+      "jsfbt": {
+        "m": [],
+        "t": {
+          "desc": "What's next question",
+          "text": "What's next?"
+        }
+      }
+    }
+  ]
+}
+```
+
+Based on the above source string, the US English translation (ie. `translations/en_US.json`) might look like this:
+
+```json
+{
+  "fb-locale": "en_US",
+  "translations": {
+    "MB6OYuvCF1VzjOmqinI42g==": {
+      "tokens": [],
+      "types": [],
+      "translations": [
+        {
+          "translation": "What's next?",
+          "variations": []
+        }
+      ]
+    }
+  }
+}
 ```
 
-You can now upload the `.source_strings.json` file to your translation provider. Once you have the translated strings stored in a `translations/` folder as JSON files, you can run the following command to generate the translations file:
+And German (`translations/de_DE.json`) might look like this:
+
+```json
+{
+  "fb-locale": "de_DE",
+  "translations": {
+    "MB6OYuvCF1VzjOmqinI42g==": {
+      "tokens": [],
+      "types": [],
+      "translations": [
+        {
+          "translation": "Was kommt jetzt?",
+          "variations": []
+        }
+      ]
+    }
+  }
+}
+```
+
+Once you have the translated strings stored in a `translations/` folder as JSON files, you can run the following command to generate the translations file:
 
 ```bash
 npm run fbtee:translate
 ```
 
-After generating the translations file, your app is ready to display translated content in other languages.
+This will generate the `translation.json` file referred to in the setup done before. This file might look like this:
+
+```json
+{
+  "de_DE": { "2HVYhv": "Was kommt jetzt?" },
+  "en_US": { "2HVYhv": "What's next?" }
+}
+```
+
+After generating the translations file, your app is ready to display translated content in other languages. The error you had until now in the `setupFbtee` with regards to the imported translations file should be resolved now.
+
+Since the `translations.json` is an auto-generated file part of your build process, the `fbtee:translate` command should be added to your build step.
 
 ## ESLint Plugin
 
@@ -200,7 +298,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/lib/index.cjs

@@ -18,18 +18,16 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
-var src_exports = {};
-__export(src_exports, {
-  configs: () => configs,
-  meta: () => meta,
-  rules: () => rules
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // package.json
 var package_default = {
   name: "@nkzw/eslint-plugin-fbtee",
-  version: "0.1.4",
+  version: "0.2.1",
   description: "",
   keywords: [],
   repository: {
@@ -43,14 +41,15 @@ var package_default = {
     import: "./lib/index.js",
     require: "./lib/index.cjs"
   },
+  main: "lib/index.cjs",
   scripts: {
     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.19.1"
   },
   devDependencies: {
-    "@typescript-eslint/rule-tester": "^8.18.0"
+    "@typescript-eslint/rule-tester": "^8.19.1"
   }
 };
 
@@ -121,6 +120,16 @@ 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) {
@@ -433,33 +442,29 @@ var no_untranslated_strings_default = createRule({
 });
 
 // src/index.tsx
-var meta = {
-  name: package_default.name,
-  version: package_default.version
-};
-var rules = {
-  "no-empty-strings": no_empty_strings_default,
-  "no-unhelpful-desc": no_unhelpful_desc_default,
-  "no-untranslated-strings": no_untranslated_strings_default
-};
-var configs = {
-  recommended: {
-    rules: {
-      "@nkzw/fbtee/no-empty-strings": 2,
-      "@nkzw/fbtee/no-unhelpful-desc": 2
+var index_default = {
+  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
+      }
     }
   },
-  strict: {
-    rules: {
-      "@nkzw/fbtee/no-empty-strings": 2,
-      "@nkzw/fbtee/no-unhelpful-desc": 2,
-      "@nkzw/fbtee/no-untranslated-strings": 2
-    }
+  meta: {
+    name: package_default.name,
+    version: package_default.version
+  },
+  rules: {
+    "no-empty-strings": no_empty_strings_default,
+    "no-unhelpful-desc": no_unhelpful_desc_default,
+    "no-untranslated-strings": no_untranslated_strings_default
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  configs,
-  meta,
-  rules
-});

package/lib/index.d.cts

@@ -1,30 +1,32 @@
 import * as _typescript_eslint_utils_ts_eslint from '@typescript-eslint/utils/ts-eslint';
 
-declare const meta: {
-    name: string;
-    version: string;
-};
-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;
+declare const _default: {
+    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;
+        strict: {
+            rules: {
+                '@nkzw/fbtee/no-empty-strings': number;
+                '@nkzw/fbtee/no-unhelpful-desc': number;
+                '@nkzw/fbtee/no-untranslated-strings': number;
+            };
         };
     };
+    meta: {
+        name: string;
+        version: string;
+    };
+    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>;
+    };
 };
 
-export { configs, meta, rules };
+export { _default as default };

package/lib/index.d.ts

@@ -1,30 +1,32 @@
 import * as _typescript_eslint_utils_ts_eslint from '@typescript-eslint/utils/ts-eslint';
 
-declare const meta: {
-    name: string;
-    version: string;
-};
-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;
+declare const _default: {
+    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;
+        strict: {
+            rules: {
+                '@nkzw/fbtee/no-empty-strings': number;
+                '@nkzw/fbtee/no-unhelpful-desc': number;
+                '@nkzw/fbtee/no-untranslated-strings': number;
+            };
         };
     };
+    meta: {
+        name: string;
+        version: string;
+    };
+    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>;
+    };
 };
 
-export { configs, meta, rules };
+export { _default as default };

package/lib/index.js

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@nkzw/eslint-plugin-fbtee",
-  version: "0.1.4",
+  version: "0.2.1",
   description: "",
   keywords: [],
   repository: {
@@ -15,14 +15,15 @@ var package_default = {
     import: "./lib/index.js",
     require: "./lib/index.cjs"
   },
+  main: "lib/index.cjs",
   scripts: {
     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.19.1"
   },
   devDependencies: {
-    "@typescript-eslint/rule-tester": "^8.18.0"
+    "@typescript-eslint/rule-tester": "^8.19.1"
   }
 };
 
@@ -93,6 +94,16 @@ 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) {
@@ -405,32 +416,32 @@ var no_untranslated_strings_default = createRule({
 });
 
 // src/index.tsx
-var meta = {
-  name: package_default.name,
-  version: package_default.version
-};
-var rules = {
-  "no-empty-strings": no_empty_strings_default,
-  "no-unhelpful-desc": no_unhelpful_desc_default,
-  "no-untranslated-strings": no_untranslated_strings_default
-};
-var configs = {
-  recommended: {
-    rules: {
-      "@nkzw/fbtee/no-empty-strings": 2,
-      "@nkzw/fbtee/no-unhelpful-desc": 2
+var index_default = {
+  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
+      }
     }
   },
-  strict: {
-    rules: {
-      "@nkzw/fbtee/no-empty-strings": 2,
-      "@nkzw/fbtee/no-unhelpful-desc": 2,
-      "@nkzw/fbtee/no-untranslated-strings": 2
-    }
+  meta: {
+    name: package_default.name,
+    version: package_default.version
+  },
+  rules: {
+    "no-empty-strings": no_empty_strings_default,
+    "no-unhelpful-desc": no_unhelpful_desc_default,
+    "no-untranslated-strings": no_untranslated_strings_default
   }
 };
 export {
-  configs,
-  meta,
-  rules
+  index_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/eslint-plugin-fbtee",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "",
   "keywords": [],
   "repository": {
@@ -14,11 +14,12 @@
     "import": "./lib/index.js",
     "require": "./lib/index.cjs"
   },
+  "main": "lib/index.cjs",
   "dependencies": {
-    "@typescript-eslint/utils": "^8.18.0"
+    "@typescript-eslint/utils": "^8.19.1"
   },
   "devDependencies": {
-    "@typescript-eslint/rule-tester": "^8.18.0"
+    "@typescript-eslint/rule-tester": "^8.19.1"
   },
   "scripts": {
     "build": "tsup src/index.tsx -d lib --target=node22 --format=esm,cjs --clean --no-splitting --dts"

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

@@ -72,7 +72,48 @@ ruleTester.run('no-untranslated-strings', rule, {
     },
     {
       code: `
-        <>Hello world</>
+        <>Hello world</>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <span>{foo ? 'bar' : 'baz'}</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <span>{foo ?? 'bar'}</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        <span>{foo || 'bar'}</span>;
+       `,
+      errors: [
+        {
+          messageId: 'unwrappedString',
+        },
+      ],
+    },
+    {
+      code: `
+        const foo = true;
+        <span>{foo && 'bar'}</span>;
        `,
       errors: [
         {
@@ -219,5 +260,20 @@ ruleTester.run('no-untranslated-strings', rule, {
        foo.bar('Baz')
        `,
     },
+    {
+      code: `
+       const foo = isGreeting ? 'Hello' : 'Goodbye'
+       `,
+    },
+    {
+      code: `
+       const foo = helloGreeting ?? 'goodbye'
+       `,
+    },
+    {
+      code: `
+       const foo = helloGreeting || 'goodbye'
+       `,
+    },
   ],
 });

package/src/index.tsx

@@ -3,29 +3,29 @@ 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,
-  version: packageJson.version,
-};
-
-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,
+export default {
+  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,
+    strict: {
+      rules: {
+        '@nkzw/fbtee/no-empty-strings': 2,
+        '@nkzw/fbtee/no-unhelpful-desc': 2,
+        '@nkzw/fbtee/no-untranslated-strings': 2,
+      },
     },
   },
+  meta: {
+    name: packageJson.name,
+    version: packageJson.version,
+  },
+  rules: {
+    'no-empty-strings': noEmptyStringsRule,
+    'no-unhelpful-desc': noUnhelpfulDesc,
+    'no-untranslated-strings': noUntranslatedStrings,
+  },
 };

package/src/utils.tsx

@@ -105,6 +105,20 @@ export function resolveNodeValue(
     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;
 }