Implement <fbt:list>.

.eslintrc.cjs

@@ -3,10 +3,14 @@ const { existsSync, readFileSync } = require('node:fs');
 
 module.exports = {
   extends: ['@nkzw'],
-  ignorePatterns: ['packages/*/lib'],
+  ignorePatterns: ['packages/*/lib', 'packages/fbtee/lib-tmp/'],
   overrides: [
     {
-      files: ['**/__tests__/**/*.tsx'],
+      files: [
+        './packages/babel-plugin-fbtee/src/bin/*.tsx',
+        './packages/fbtee/babel-build.config.js',
+        '**/__tests__/**/*.tsx',
+      ],
       rules: {
         'no-console': 0,
         'workspaces/no-relative-imports': 0,
@@ -29,6 +33,7 @@ module.exports = {
         devDependencies: [
           './example/vite.config.ts',
           './jest-preprocessor.js',
+          './packages/fbtee/babel-build.config.js',
           '**/__tests__/**/*.tsx',
         ],
         packageDir: [__dirname].concat(

.gitignore

@@ -12,6 +12,8 @@ node_modules
 packages/*/lib
 packages/*/LICENSE
 packages/*/README.md
-packages/fbt/lib
-packages/fbt/LICENSE
+packages/fbtee/.enum_manifest.json
+packages/fbtee/.src_manifest.json
+packages/fbtee/lib-tmp
+packages/fbtee/Strings.json
 tsconfig.tsbuildinfo

.prettierignore

@@ -5,4 +5,5 @@ example/source_strings.json
 example/src/translatedFbts
 example/src/translatedFbts.json
 packages/*/lib/
+packages/fbtee/lib-tmp/
 pnpm-lock.yaml

README.md

@@ -200,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**.
 

example/src/example/Example.react.tsx

@@ -185,7 +185,6 @@ export default function Example() {
               </span>
             </span>
           </fieldset>
-
           <fieldset>
             <span className="sentence example_row">
               <fbt desc="example 1">
@@ -202,7 +201,6 @@ export default function Example() {
               </fbt>
             </span>
           </fieldset>
-
           <fieldset>
             <span className={classNames('example_row', 'example_row--multi')}>
               <span
@@ -287,6 +285,28 @@ export default function Example() {
               </fbt>
             </span>
           </fieldset>
+          <fieldset>
+            <label>
+              <fbt desc="List example.">
+                Do you want to share a{' '}
+                <fbt:list
+                  conjunction="or"
+                  items={[
+                    <fbt desc="Item in a list." key="photo">
+                      photo
+                    </fbt>,
+                    <fbt desc="Item in a list." key="photo">
+                      link
+                    </fbt>,
+                    <fbt desc="Item in a list." key="video">
+                      video
+                    </fbt>,
+                  ]}
+                  name="list"
+                />?
+              </fbt>
+            </label>
+          </fieldset>
           <fieldset>
             <span className="example_row">
               <button

example/src/example/__tests__/CollectedString-test.tsx

@@ -0,0 +1,27 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { test } from '@jest/globals';
+import { CollectFbtOutput } from '../../../../packages/babel-plugin-fbtee/src/bin/collect.tsx';
+
+const { childParentMappings, phrases } = JSON.parse(
+  readFileSync(
+    join(import.meta.dirname, '../../../.source_strings.json'),
+    'utf8',
+  ),
+) as CollectFbtOutput;
+test('fbtee strings are included in the collected strings of the example project', () => {
+  expect(
+    phrases.some(
+      ({ filepath }) => filepath === 'node_modules/fbtee/lib/index.js',
+    ),
+  ).toBe(true);
+});
+test('fbtee child-parent mappings are included in the collected strings of the example project', () => {
+  expect(childParentMappings).toMatchInlineSnapshot(`
+   {
+     "14": 13,
+     "23": 22,
+     "24": 23,
+   }
+  `);
+});

example/src/example/__tests__/__snapshots__/Example.react-test.tsx.snap

@@ -238,6 +238,11 @@ exports[`Example.react renders the example 1`] = `
              their link.
           </span>
         </fieldset>
+        <fieldset>
+          <label>
+            Do you want to share a photo, link or video?
+          </label>
+        </fieldset>
         <fieldset>
           <span
             class="example_row"

package.json

@@ -6,9 +6,9 @@
   "type": "module",
   "scripts": {
     "build": "pnpm -r build",
-    "build:all": "pnpm -r build && pnpm install && pnpm copy-files && cd example && pnpm build:fbtee",
-    "clean": "rm -rf packages/*/lib; cd example pnpm clean",
-    "copy-files": "find packages/* -type d -maxdepth 0 -exec cp README.md LICENSE {} \\;",
+    "build:all": "pnpm -r build && pnpm install && pnpm --filter=fbtee build:fbtee-strings && pnpm copy-files && cd example && pnpm build:fbtee",
+    "clean": "rm -rf packages/*/lib packages/fbtee/lib-tmp; cd example pnpm clean",
+    "copy-files": "find packages/* -type d -maxdepth 0 -exec cp README.md LICENSE Strings.json {} \\;",
     "dev": "cd example && pnpm build:fbtee && pnpm dev",
     "format": "prettier --write .",
     "jest": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules --no-warnings\" node_modules/.bin/jest",
@@ -19,10 +19,12 @@
     "tsc:check": "tsc"
   },
   "devDependencies": {
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/generator": "^7.26.3",
     "@babel/parser": "^7.26.3",
     "@babel/plugin-syntax-import-attributes": "^7.26.0",
+    "@babel/plugin-syntax-typescript": "^7.25.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/types": "^7.26.3",

packages/babel-plugin-fbtee/src/FbtConstants.tsx

@@ -96,10 +96,7 @@ export const FbtBooleanOptions = {
 } as const;
 
 export const CommonOption = 'common';
-export const FbtCallMustHaveAtLeastOneOfTheseAttributes = new Set([
-  'desc',
-  CommonOption,
-]);
+export const RequiredFbtAttributes = new Set(['desc', CommonOption]);
 
 export const FbtRequiredAttributes = {
   desc: true,

packages/babel-plugin-fbtee/src/FbtNodeChecker.tsx

@@ -178,10 +178,6 @@ export default class FbtNodeChecker {
         : null;
   }
 
-  /**
-   * This is same as the non-static getFbtConstructNameFromFunctionCall except
-   * it accepts any of the three fbt modules (`FBT`, `FBS`).
-   */
   static getFbtNodeTypeFromFunctionCall(node: Node): FbtNodeType | null {
     return (
       (isCallExpression(node) &&

packages/babel-plugin-fbtee/src/FbtUtil.tsx

@@ -33,7 +33,6 @@ import {
   JSXElement,
   JSXExpressionContainer,
   JSXFragment,
-  JSXOpeningElement,
   JSXSpreadAttribute,
   JSXText,
   memberExpression,
@@ -62,8 +61,6 @@ import nullthrows from './nullthrows.tsx';
 
 const { hasOwnProperty } = Object.prototype;
 
-type JSXAttributes = ReadonlyArray<JSXOpeningElement['attributes'][number]>;
-
 export type CallExpressionArg =
   | Expression
   | SpreadElement
@@ -130,6 +127,10 @@ export function checkOption<K extends string>(
 ): K {
   const optionName = option as K;
 
+  if (optionName === 'key') {
+    return optionName;
+  }
+
   const validValues = validOptions[optionName];
   if (!hasOwnProperty.call(validOptions, optionName) || validValues == null) {
     throw errorAt(
@@ -506,27 +507,29 @@ const isJSXAttributeWithValue = (
 ): node is JSXAttributeWithValue => node.value != null;
 
 export function getAttributeByNameOrThrow(
-  attributes: JSXAttributes,
+  node: JSXElement,
   name: string,
-  node: Node | null = null,
 ): JSXAttributeWithValue {
-  const attribute = getAttributeByName(attributes, name);
+  const attribute = getAttributeByName(node, name);
   if (attribute == null) {
-    throw errorAt(node, `Unable to find attribute "${name}".`);
+    throw errorAt(node, `This node requires a '${name}' attribute.`);
   }
 
   if (!isJSXAttributeWithValue(attribute)) {
-    throw errorAt(node, `Attribute "${name}" has no value.`);
+    throw errorAt(
+      node,
+      `This '${name}' attribute of this node requires a value.`,
+    );
   }
 
   return attribute;
 }
 
 export function getAttributeByName(
-  attributes: JSXAttributes,
+  node: JSXElement,
   name: string,
 ): JSXAttribute | null {
-  for (const attribute of attributes) {
+  for (const attribute of node.openingElement.attributes) {
     if (isJSXAttribute(attribute) && attribute.name.name === name) {
       return attribute;
     }

packages/babel-plugin-fbtee/src/__tests__/__snapshots__/fbt-list-test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<fbt:list> 1`] = `
+import { fbt } from "fbtee";
+const x = fbt._(
+  /* __FBT__ start */ {
+    jsfbt: {
+      m: [],
+      t: { desc: "Lists", text: "Available Locations: {locations}." },
+    },
+    project: "",
+  } /* __FBT__ end */,
+  [fbt._list("locations", ["Tokyo", "London", "Vienna"])]
+);
+
+`;
+
+exports[`<fbt:list> 2`] = `
+import { fbt } from "fbtee";
+const x = fbt._(
+  /* __FBT__ start */ {
+    jsfbt: {
+      m: [],
+      t: { desc: "Lists", text: "Available Locations: {locations}." },
+    },
+    project: "",
+  } /* __FBT__ end */,
+  [fbt._list("locations", ["Tokyo", "London", "Vienna"], "and")]
+);
+
+`;
+
+exports[`<fbt:list> 3`] = `
+import { fbt } from "fbtee";
+const x = fbt._(
+  /* __FBT__ start */ {
+    jsfbt: {
+      m: [],
+      t: { desc: "Lists", text: "Available Locations: {locations}." },
+    },
+    project: "",
+  } /* __FBT__ end */,
+  [fbt._list("locations", ["Tokyo", "London", "Vienna"], null, "bullet")]
+);
+
+`;
+
+exports[`<fbt:list> 4`] = `
+import { fbt } from "fbtee";
+const x = fbt._(
+  /* __FBT__ start */ {
+    jsfbt: {
+      m: [],
+      t: { desc: "Lists", text: "Available Locations: {locations}." },
+    },
+    project: "",
+  } /* __FBT__ end */,
+  [fbt._list("locations", ["Tokyo", "London", "Vienna"], "or", "bullet")]
+);
+
+`;
+
+exports[`fbt.list() 1`] = `
+import { fbt } from "fbtee";
+fbt._(
+  /* __FBT__ start */ {
+    jsfbt: {
+      m: [],
+      t: { desc: "Lists", text: "Available Locations: {locations}" },
+    },
+    project: "",
+  } /* __FBT__ end */,
+  [fbt._list("locations", ["Tokyo", "London", "Vienna"], null, "or")]
+);
+
+`;

packages/babel-plugin-fbtee/src/__tests__/__snapshots__/fbtEnum-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Test Fbt Enum should handle functional enums (with references) (import default) 1`] = `
-import { fbt } from "fbt";
+import { fbt } from "fbtee";
 import aEnum from "Test$FbtEnum";
 var x = fbt._(
   /* __FBT__ start */ {
@@ -21,7 +21,7 @@ var x = fbt._(
 `;
 
 exports[`Test Fbt Enum should handle functional enums (with references) (import star) 1`] = `
-import { fbt } from "fbt";
+import { fbt } from "fbtee";
 import * as aEnum from "Test$FbtEnum";
 var x = fbt._(
   /* __FBT__ start */ {