[sprout] Add support for fbt
Fbt + typescript [seems](https://github.com/facebook/fbt/issues/49) [to be](https://github.com/facebook/sfbt/issues/72) a non-blessed workflow. We do want to allow for both flow and typescript tests, so I followed some instructions [from a guide](https://dev.to/retyui/how-to-add-support-typescript-for-fbt-an-internationalization-framework-3lo0) to add support. - fbt tags desugar to.. "fbt" strings. By default, typescript removes unused imports at parse step (and on autoformat steps). We pass special babel-typescript configs and change vscode settings to mitigate this. - I tried adding `fbt` to the global scope, but the fbt transform asserts that `fbt` is actually imported in the source program. - Other hacks are available, like saying we'll only allow for fbt in flow files, or always patching the source code to have an "fbt" import. This seemed the most reasonable and easiest to debug / follow when writing tests
Mofei Zhang committed
Nov 9, 2023 at 18:55 UTC
372696c541015163c77a131f02f77a4591e023a4
6 files changed
+59
-12
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/tsconfig.json
+4
-1
@@ -16,7 +16,10 @@
16
"paths": {
17
// Editor integration for sprout shared runtime files
18
"shared-runtime": ["../../../../sprout/src/shared-runtime.ts"]
19
- }
19
+ },
20
+ "verbatimModuleSyntax": true,
21
+ "module": "ESNext",
22
+ "allowSyntheticDefaultImports": true
23
},
24
"include": [
25
"./compiler/**/*.js",
compiler/packages/sprout/package.json
+2
-6
@@ -26,6 +26,7 @@
26
"@testing-library/react": "^13.4.0",
27
"babel-plugin-react-forget": "*",
28
"chalk": "4",
29
+ "fbt": "^1.0.0",
30
"fixture-test-utils": "*",
31
"jsdom": "^22.1.0",
32
"react": "^0.0.0-experimental-493f72b0a-20230727",
@@ -41,16 +42,11 @@
42
"@babel/plugin-transform-modules-commonjs": "^7.18.6",
43
"@babel/preset-react": "^7.18.6",
44
"@babel/traverse": "^7.19.1",
45
+ "@types/fbt": "^1.0.4",
46
"@types/node": "^18.7.18",
47
"@typescript-eslint/eslint-plugin": "^5.51.0",
48
"@typescript-eslint/parser": "^5.51.0",
49
"prettier": "2.8.8",
50
"rimraf": "^3.0.2"
49
- },
50
- "resolutions": {
51
- "./**/@babel/parser": "7.7.4",
52
- "./**/@babel/types": "7.7.4",
53
- "@babel/core": "7.2.0",
54
- "@babel/traverse": "7.1.6"
51
}
52
}
compiler/packages/sprout/src/runner-evaluator.ts
+2
-1
@@ -7,7 +7,7 @@
7
8
import { JSDOM } from "jsdom";
9
import util from "util";
10
-import { toJSON } from "./shared-runtime";
10
+import { initFbt, toJSON } from "./shared-runtime";
11
const React = require("react");
12
const render = require("@testing-library/react").render;
13
@@ -18,6 +18,7 @@ const { window: testWindow } = new JSDOM(undefined);
18
(globalThis as any).navigator = testWindow.navigator;
19
(globalThis as any).React = React;
20
(globalThis as any).render = render;
21
+initFbt();
22
23
export type EvaluatorResult = {
24
kind: "ok" | "exception" | "UnexpectedError";
compiler/packages/sprout/src/runner-worker.ts
+22
-4
@@ -52,6 +52,8 @@ type TransformResult =
52
value: string;
53
};
54
55
+// Transforms that should run on both forget and non-forget
56
+// source code.
57
function transformAST(
58
ast: t.File,
59
sourceCode: string,
@@ -59,12 +61,28 @@ function transformAST(
61
language: "typescript" | "flow",
62
transformJSX: boolean
63
): string {
62
- // missing more transforms
64
const presets: Array<PluginItem> = [
64
- language === "typescript"
65
- ? "@babel/preset-typescript"
66
- : "@babel/preset-flow",
65
+ {
66
+ plugins: ["babel-plugin-fbt", "babel-plugin-fbt-runtime"],
67
+ },
68
];
69
+ presets.push(
70
+ language === "typescript"
71
+ ? [
72
+ "@babel/preset-typescript",
73
+ {
74
+ /**
75
+ * onlyRemoveTypeImports needs to be set as fbt imports
76
+ * would otherwise be removed by this pass.
77
+ * https://github.com/facebook/fbt/issues/49
78
+ * https://github.com/facebook/sfbt/issues/72
79
+ * https://dev.to/retyui/how-to-add-support-typescript-for-fbt-an-internationalization-framework-3lo0
80
+ */
81
+ onlyRemoveTypeImports: true,
82
+ },
83
+ ]
84
+ : "@babel/preset-flow"
85
+ );
86
87
if (transformJSX) {
88
presets.push({
compiler/packages/sprout/src/shared-runtime.ts
+15
@@ -6,6 +6,7 @@
6
*/
7
8
import React from "react";
9
+import { IntlVariations, IntlViewerContext, init } from "fbt";
10
11
/**
12
* This file is meant for use by `runner-evaluator` and fixture tests.
@@ -35,6 +36,20 @@ export const CONST_NUMBER2 = 2;
36
export const CONST_TRUE = true;
37
export const CONST_FALSE = false;
38
39
+export function initFbt() {
40
+ const viewerContext: IntlViewerContext = {
41
+ GENDER: IntlVariations.GENDER_UNKNOWN,
42
+ locale: "en_US",
43
+ };
44
+
45
+ init({
46
+ translations: {},
47
+ hooks: {
48
+ getViewerContext: () => viewerContext,
49
+ },
50
+ });
51
+}
52
+
53
export function mutate(arg: any): void {
54
// don't mutate primitive
55
if (typeof arg === null || typeof arg !== "object") {
compiler/yarn.lock
+14
@@ -2844,6 +2844,13 @@
2844
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
2845
integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
2846
2847
+"@types/fbt@^1.0.4":
2848
+ version "1.0.4"
2849
+ resolved "https://registry.yarnpkg.com/@types/fbt/-/fbt-1.0.4.tgz#0d9e427f91fcff46bdcf2ca42a63343096565451"
2850
+ integrity sha512-KBaaLu4hEIBaCyQ3L2KP6JujD+tmMuPZ10YpgmGgqMaM8TESYR2TOJNvG+GYiWUhGkp38Y+62VZ1wJ97MPvt+A==
2851
+ dependencies:
2852
+ "@types/react" "*"
2853
+
2854
"@types/glob@^8.1.0":
2855
version "8.1.0"
2856
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.1.0.tgz#b63e70155391b0584dce44e7ea25190bbc38f2fc"
@@ -6074,6 +6081,13 @@ fb-watchman@^2.0.0:
6081
dependencies:
6082
bser "2.1.1"
6083
6084
+fbt@^1.0.0:
6085
+ version "1.0.0"
6086
+ resolved "https://registry.yarnpkg.com/fbt/-/fbt-1.0.0.tgz#1a7c077ee06675e554061160443ed454933a1b4a"
6087
+ integrity sha512-0LORP21IrBntxDEJOf5Kq4Napf/nsH18EwdMl1AO0clilKjiXBoQUVVY8V2IEgQVT92wBxPtpQfhfC3/EM8QdQ==
6088
+ dependencies:
6089
+ invariant "^2.2.4"
6090
+
6091
figures@^3.0.0:
6092
version "3.2.0"
6093
resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"