Add support for TypeScript fbt enum files

nkzw-tech · Dec 13, 2024 · 2f9fbb6 · 2f9fbb6
1 parent 8d9ef5e
commit 2f9fbb6
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 20 deletions.
diff --git a/example/src/example/Example$FbtEnum.js → example/src/example/Example$FbtEnum.ts b/example/src/example/Example$FbtEnum.js → example/src/example/Example$FbtEnum.ts
@@ -4,4 +4,4 @@ export default {
   PHOTO: 'photo',
   POST: 'post',
   VIDEO: 'video',
-};
+} as const;
diff --git a/example/src/example/Example.react.tsx b/example/src/example/Example.react.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { fbs, fbt, GenderConst, IntlVariations, setupFbtee } from 'fbtee';
 import { ChangeEvent, useCallback, useState } from 'react';
 import translations from '../translatedFbts.json' with { type: 'json' };
-import ExampleEnum from './Example$FbtEnum.js';
+import ExampleEnum from './Example$FbtEnum.ts';
 
 let viewerContext = {
   GENDER: IntlVariations.GENDER_UNKNOWN,

diff --git a/jest.config.js b/jest.config.js
@@ -5,9 +5,9 @@ import CommonStrings from './example/common_strings.json' with { type: 'json' };
 process.env.NODE_ENV = 'development';
 
 const globalConfig = {
-  extensionsToTreatAsEsm: ['.tsx'],
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
   testEnvironment: 'node',
-  testMatch: ['**/__tests__/**/*-test.(js|jsx|tsx)'],
+  testMatch: ['**/__tests__/**/*-test.(js|jsx|ts|tsx)'],
   transform: {
     '\\.(j|t)sx?$': '<rootDir>/jest-preprocessor.js',
   },

diff --git a/packages/babel-plugin-fbtee/package.json b/packages/babel-plugin-fbtee/package.json
@@ -44,5 +44,8 @@
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.6",
     "@types/glob": "^8.1.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.7.0"
   }
 }
diff --git a/packages/babel-plugin-fbtee/src/bin/manifestUtils.tsx b/packages/babel-plugin-fbtee/src/bin/manifestUtils.tsx
@@ -2,6 +2,7 @@ import fs from 'node:fs';
 import { parse, relative, resolve } from 'node:path';
 import { globSync } from 'glob';
 import invariant from 'invariant';
+import ts from 'typescript';
 import {
   FBT_ENUM_MODULE_SUFFIX as ENUM_FILE,
   ModuleNameRegExp,
@@ -23,18 +24,28 @@ export async function generateManifest(
   const enumManifest: {
     [enumModuleName: string]: EnumModule;
   } = {};
+
   for (const src of srcPaths) {
     const enumFiles: Array<string> = globSync(
       resolve(cwd, src) + '/**/*' + ENUM_FILE + FILE_EXT,
       {
         nodir: true,
       },
     );
+
     for (const filepath of enumFiles) {
-      const name = parse(filepath).name;
-      const obj = (await import(resolve(filepath))).default;
-      const enumValue: EnumModule = obj.__esModule ? obj.default : obj;
+      const tsContent = fs.readFileSync(filepath, 'utf8');
+      const jsContent = ts.transpile(tsContent, {
+        module: ts.ModuleKind.ESNext,
+        target: ts.ScriptTarget.ESNext,
+      });
 
+      const jsDataUrl = `data:text/javascript;base64,${Buffer.from(jsContent).toString('base64')}`;
+
+      const module = await import(jsDataUrl);
+      const enumValue: EnumModule = module.default;
+
+      const name = parse(filepath).name;
       invariant(
         enumValue != null,
         'No valid enum found for `%s`, ensure you are exporting your enum ' +
@@ -53,8 +64,7 @@ export async function generateManifest(
     .flatMap(getFiles)
     .filter((filepath) =>
       fs
-        .readFileSync(filepath)
-        .toString('utf8')
+        .readFileSync(filepath, 'utf8')
         .split('\n')
         .some((line) => ModuleNameRegExp.test(line)),
     )