@nkzw/eslint-plugin-fbtee 3.0.1 → 3.3.0

package/README.md

@@ -10,14 +10,14 @@ const Greeting = ({ name }) => (
 );
 ```
 
-_fbtee_ is a modern continuation of Facebook's `fbt`, rebuilt for TypeScript, ESM, React 19, Vite, Next.js, Babel & SWC.
+_fbtee_ is a modern continuation of Facebook's `fbt`, rebuilt for TypeScript, ESM, React 19, Vite, Next.js, Babel & Oxc.
 
 ## Features
 
 - **Inline translations for Better Developer Experience:** Embed translations directly into your code. No need to manage translation keys or wrap your code with `t()` functions. **fbtee** uses a compiler to extract strings from your code and prepare them for translation providers.
 - **Proven in Production:** Built on Facebook's `fbt`, with over a decade of production usage serving billions of users, plus years in production at [Athena Crisis](https://athenacrisis.com).
 - **Optimized Performance with IR:** Compiles translations into an Intermediate Representation (IR) for extracting strings, then optimizes the runtime output for performance.
-- **Easy Setup:** Quick integration with Babel, SWC, Vite, Next.js, and Expo.
+- **Easy Setup:** Quick integration with Vite, Next.js, Babel, Oxc, and Expo.
 
 ## Getting Started
 
@@ -34,77 +34,104 @@ npm install fbtee
 
 _fbtee_ requires Node 22+. React apps should use React 19+.
 
-### Babel, Vite and React
+### Vite
 
-Install the Babel preset and the Rolldown Babel plugin:
+Most projects should install the ready-to-use Vite plugin and the CLI:
 
 ```bash
-npm install -D @nkzw/babel-preset-fbtee @rolldown/plugin-babel
+npm install -D @nkzw/vite-plugin-fbtee @nkzw/fbtee-cli
 ```
 
-With Vite, `@rolldown/plugin-babel`, and `@vitejs/plugin-react`:
+Add the fbtee plugin before the React plugin:
 
-```ts
-import fbteePreset from '@nkzw/babel-preset-fbtee';
-import babel from '@rolldown/plugin-babel';
+```js
+import fbtee from '@nkzw/vite-plugin-fbtee';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [
-    babel({
-      presets: [fbteePreset],
+    fbtee({
+      fbtCommon: {
+        Accept: 'Button label for accepting terms',
+      },
+      fbtEnumManifest: {},
     }),
     react(),
   ],
 });
 ```
 
-With a direct Babel setup:
+### Next.js
+
+Next.js projects should use the native Oxc plugin and the CLI:
+
+```bash
+npm install -D @nkzw/next-plugin-fbtee @nkzw/fbtee-cli
+```
+
+Wrap your Next configuration:
 
 ```js
-export default {
-  presets: ['@nkzw/babel-preset-fbtee'],
-};
+import withFbtee from '@nkzw/next-plugin-fbtee';
+
+export default withFbtee({
+  fbtCommon: {
+    Accept: 'Button label for accepting terms',
+  },
+  fbtEnumManifest: {},
+})({
+  // Your Next.js configuration.
+});
+```
+
+The plugin runs the native Oxc transform before Next.js compilation. It works with the default Turbopack compiler and with `next build --webpack`, so it does not require Babel or custom compiler configuration.
+
+### Babel
+
+Install the Babel preset and the CLI:
+
+```bash
+npm install -D @nkzw/babel-preset-fbtee @nkzw/fbtee-cli
 ```
 
-With Next.js and Babel:
+Add the preset to your Babel configuration:
 
 ```js
 export default {
-  presets: ['next/babel', '@nkzw/babel-preset-fbtee'],
+  presets: ['@nkzw/babel-preset-fbtee'],
 };
 ```
 
-### SWC and Turbopack
+### Low-level Oxc Transform
 
-Install the SWC runtime compiler and the CLI:
+For custom build-system integrations, install the native Oxc transform:
 
 ```bash
-npm install -D @nkzw/swc-plugin-fbtee @nkzw/fbtee-cli
+npm install -D @nkzw/oxc-transform-fbtee @nkzw/fbtee-cli oxc-transform
 ```
 
-For Next.js SWC plugins:
+Apply the fbtee transform before the standard Oxc transform:
 
 ```js
-export default {
-  experimental: {
-    swcPlugins: [
-      [
-        '@nkzw/swc-plugin-fbtee',
-        {
-          fbtCommon: {
-            Accept: 'Button label for accepting terms',
-          },
-          fbtEnumManifest: {},
-        },
-      ],
-    ],
+import { transformSync as transformFbtee } from '@nkzw/oxc-transform-fbtee';
+import { transformSync as transformOxc } from 'oxc-transform';
+
+const fbteeResult = transformFbtee(filename, sourceText, {
+  fbtCommon: {
+    Accept: 'Button label for accepting terms',
   },
-};
-```
+  fbtEnumManifest: {},
+});
+
+if (fbteeResult.errors.length > 0) {
+  throw new Error(fbteeResult.errors.map(({ message }) => message).join('\n'));
+}
 
-Use the SWC plugin to compile app code. Use `fbtee collect` to extract phrases. Do not pass `collectFbt: true` to the SWC plugin.
+const result = transformOxc(filename, fbteeResult.code, {
+  jsx: { runtime: 'automatic' },
+});
+```
 
 ### TypeScript JSX Types
 
@@ -127,10 +154,7 @@ Use `fbt()` outside JSX:
 ```tsx
 import { fbt } from 'fbtee';
 
-const title = fbt(
-  'No tasks yet',
-  'Empty state title when a project has no tasks',
-);
+const title = fbt('No tasks yet', 'Empty state title when a project has no tasks');
 ```
 
 Use `fbs()` when you need a plain string:
@@ -138,9 +162,7 @@ Use `fbs()` when you need a plain string:
 ```tsx
 import { fbs } from 'fbtee';
 
-<input
-  placeholder={fbs('Search projects', 'Project search input placeholder')}
-/>;
+<input placeholder={fbs('Search projects', 'Project search input placeholder')} />;
 ```
 
 ## Dynamic Content
@@ -170,12 +192,7 @@ Use `<fbt:plural>` when a count controls grammar. _fbtee_ handles locale-specifi
 ```tsx
 <fbt desc="Inbox unread count">
   You have{' '}
-  <fbt:plural
-    count={count}
-    many="unread messages"
-    name="unreadCount"
-    showCount="yes"
-  >
+  <fbt:plural count={count} many="unread messages" name="unreadCount" showCount="yes">
     an unread message
   </fbt:plural>
   .
@@ -308,6 +325,19 @@ See the [Next.js fbtee example](https://github.com/cpojer/nextjs-fbtee-example)
 
 ## Translation Workflow
 
+Every CLI command can use the native Oxc/Rust pipeline by adding `--oxc`:
+
+```bash
+pnpm fbtee collect --oxc
+pnpm fbtee prepare-translations --oxc --source-strings source_strings.json --output-dir translations
+pnpm fbtee translate --oxc --source-strings source_strings.json --translations 'translations/*.json' --output-dir src/translations
+pnpm fbtee migrate-locales --oxc --to bcp47 --dir translations --dir src/translations
+```
+
+The Babel pipeline remains the default during the parity rollout, so removing `--oxc` makes it easy to compare both implementations. Successful native outputs are tested byte-for-byte against Babel. The native collector intentionally cannot execute Babel-specific JavaScript extensions: `--custom-collector`, `--transform`, and `--generate-fbt-nodes` are unavailable with `--oxc`.
+
+The Oxc collector also cannot run plugins or presets from a Babel configuration file or apply `.babelignore`. If it detects Babel configuration or ignore rules, it stops instead of silently collecting different source. Use the Babel collector when that preprocessing is required, or pass `--disable-babel-config` to explicitly collect the unmodified source with Oxc. All other documented options are supported.
+
 Extract source strings:
 
 ```bash

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { ESLintUtils } from "@typescript-eslint/utils";
 //#region package.json
 var name = "@nkzw/eslint-plugin-fbtee";
-var version = "3.0.1";
+var version = "3.3.0";
 //#endregion
 //#region src/utils.tsx
 const createRule = ESLintUtils.RuleCreator((name) => `https://github.com/nkzw-tech/fbtee/blob/main/packages/eslint-plugin-fbtee/docs/rules/${name}.md`);

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@nkzw/eslint-plugin-fbtee",
-  "version": "3.0.1",
+  "version": "3.3.0",
   "description": "",
   "keywords": [],
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nkzw-tech/fbtee.git",
     "directory": "packages/eslint-plugin-fbtee"
   },
-  "license": "MIT",
   "type": "module",
+  "main": "lib/index.mjs",
   "exports": {
     "import": "./lib/index.mjs"
   },
-  "main": "lib/index.mjs",
   "dependencies": {
     "@typescript-eslint/utils": "^8.64.0"
   },

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

@@ -1,10 +1,5 @@
 import type { TSESTree } from '@typescript-eslint/utils';
-import {
-  createRule,
-  elementType,
-  isFbtNode,
-  resolveNodeValue,
-} from '../utils.tsx';
+import { createRule, elementType, isFbtNode, resolveNodeValue } from '../utils.tsx';
 
 export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
   create(context) {
@@ -51,10 +46,8 @@ export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
       description: 'Disallow empty strings in fbt elements or function calls.',
     },
     messages: {
-      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.',
+      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',
@@ -62,9 +55,7 @@ export default createRule<[], 'emptyString' | 'jsxEmptyString'>({
   name: 'no-empty-strings',
 });
 
-function validateChildren(
-  node: TSESTree.JSXElement | TSESTree.JSXFragment,
-): boolean {
+function validateChildren(node: TSESTree.JSXElement | TSESTree.JSXFragment): boolean {
   let hasTextContent = false;
 
   for (const child of node.children) {
@@ -78,10 +69,7 @@ function validateChildren(
       }
 
       // Ignore when a variable is used <fbt desc="Greeting">{dynamicValue}</fbt>
-      if (
-        child.expression.type === 'Identifier' &&
-        child.expression.name !== 'undefined'
-      ) {
+      if (child.expression.type === 'Identifier' && child.expression.name !== 'undefined') {
         hasTextContent = true;
         continue;
       }

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

@@ -5,10 +5,7 @@ import {
   resolveNodeValue,
 } from '../utils.tsx';
 
-export default createRule<
-  [],
-  'emptyDesc' | 'jsxEmptyDesc' | 'duplicateDesc' | 'shortDesc'
->({
+export default createRule<[], 'emptyDesc' | 'jsxEmptyDesc' | 'duplicateDesc' | 'shortDesc'>({
   create(context) {
     return {
       CallExpression(node) {
@@ -19,9 +16,7 @@ export default createRule<
         const [textArg, descArg] = node.arguments;
 
         const desc =
-          descArg && descArg.type !== 'SpreadElement'
-            ? resolveNodeValue(descArg)?.trim()
-            : null;
+          descArg && descArg.type !== 'SpreadElement' ? resolveNodeValue(descArg)?.trim() : null;
 
         if (!desc) {
           context.report({
@@ -40,9 +35,7 @@ export default createRule<
         }
 
         const text =
-          textArg && textArg.type !== 'SpreadElement'
-            ? resolveNodeValue(textArg)?.trim()
-            : null;
+          textArg && textArg.type !== 'SpreadElement' ? resolveNodeValue(textArg)?.trim() : null;
 
         if (desc.toLowerCase() === text?.toLowerCase()) {
           context.report({

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

@@ -1,11 +1,5 @@
 import { TSESTree } from '@typescript-eslint/utils';
-import {
-  createRule,
-  getPropName,
-  hasFbtParent,
-  isFbtNode,
-  resolveNodeValue,
-} from '../utils.tsx';
+import { createRule, getPropName, hasFbtParent, isFbtNode, resolveNodeValue } from '../utils.tsx';
 
 type Options = [{ ignoredWords: Array<string> }];
 
@@ -20,8 +14,7 @@ const attributes = new Set([
 
 const shouldIgnoreParent = (node: TSESTree.Node) => {
   const { parent } = node;
-  const openingElement =
-    parent?.type === 'JSXElement' ? parent?.openingElement : null;
+  const openingElement = parent?.type === 'JSXElement' ? parent?.openingElement : null;
   return (
     openingElement?.type === 'JSXOpeningElement' &&
     openingElement.name.type === 'JSXIdentifier' &&
@@ -31,9 +24,7 @@ const shouldIgnoreParent = (node: TSESTree.Node) => {
 
 export default createRule<Options, 'unwrappedString'>({
   create(context, options) {
-    const ignoredWords = new Set(
-      options[0].ignoredWords.map((value) => value.toLowerCase()),
-    );
+    const ignoredWords = new Set(options[0].ignoredWords.map((value) => value.toLowerCase()));
 
     const isIgnoredWord = (value: string) =>
       ignoredWords.has(value.replaceAll(/\s+/g, ' ').toLowerCase());
@@ -56,10 +47,7 @@ export default createRule<Options, 'unwrappedString'>({
           return;
         }
 
-        if (
-          node.value?.type === 'JSXExpressionContainer' &&
-          isFbtNode(node.value.expression)
-        ) {
+        if (node.value?.type === 'JSXExpressionContainer' && isFbtNode(node.value.expression)) {
           return;
         }
 
@@ -131,12 +119,10 @@ export default createRule<Options, 'unwrappedString'>({
 
   meta: {
     docs: {
-      description:
-        'Enforce text content to be wrapped with `<fbt>`, `fbt()` or `fbs()`',
+      description: 'Enforce text content to be wrapped with `<fbt>`, `fbt()` or `fbs()`',
     },
     messages: {
-      unwrappedString:
-        'Text content must be wrapped in `<fbt>`, `fbt()` or `fbs()`',
+      unwrappedString: 'Text content must be wrapped in `<fbt>`, `fbt()` or `fbs()`',
     },
     schema: [
       {

package/src/utils.tsx

@@ -17,9 +17,7 @@ function resolveMemberExpressions(
   return `${object.name}.${property.name}`;
 }
 
-export function elementType(
-  node: TSESTree.JSXElement | TSESTree.JSXFragment,
-): string {
+export function elementType(node: TSESTree.JSXElement | TSESTree.JSXFragment): string {
   if (node.type === 'JSXFragment') {
     return '<>';
   }
@@ -65,9 +63,7 @@ export function resolveJsxElementTextContent(
     .trim();
 }
 
-export function resolveBinaryExpression(
-  node: TSESTree.BinaryExpression,
-): string | null {
+export function resolveBinaryExpression(node: TSESTree.BinaryExpression): string | null {
   if (node.operator !== '+') {
     return null;
   }