Add support for TypeScript fbt enum files

Use babel for transpilation
nkzw-tech · Dec 17, 2024 · a4f67b6 · a4f67b6
1 parent 17f6c4d
commit a4f67b6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 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/src/bin/manifestUtils.tsx b/packages/babel-plugin-fbtee/src/bin/manifestUtils.tsx
@@ -1,5 +1,8 @@
 import fs from 'node:fs';
 import { parse, relative, resolve } from 'node:path';
+import { transformSync } from '@babel/core';
+import presetReact from '@babel/preset-react';
+import presetTypeScript from '@babel/preset-typescript';
 import { globSync } from 'glob';
 import invariant from 'invariant';
 import {
@@ -23,17 +26,31 @@ 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 result = transformSync(tsContent, {
+        ast: false,
+        filename: filepath,
+        presets: [presetTypeScript, presetReact],
+        sourceType: 'module',
+      });
+
+      invariant(result?.code, 'Unable to transform `%s`', filepath);
+
+      const jsDataUrl = `data:text/javascript;base64,${Buffer.from(result.code).toString('base64')}`;
+
+      const module = await import(jsDataUrl);
+      const enumValue: EnumModule = module.default;
 
       invariant(
         enumValue != null,
@@ -53,8 +70,7 @@ export async function generateManifest(
     .flatMap(getFiles)
     .filter((filepath) =>
       fs
-        .readFileSync(filepath)
-        .toString('utf8')
+        .readFileSync(filepath, 'utf8')
         .split('\n')
         .some((line) => ModuleNameRegExp.test(line)),
     )

diff --git a/tsconfig.json b/tsconfig.json
@@ -27,5 +27,5 @@
     "target": "es2022"
   },
   "exclude": ["packages/*/lib/", "node_modules"],
-  "include": ["**/*.ts", "**/*.tsx", "example/src/example/Example$FbtEnum.js"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }