Fix for <fbt> with local import
Fbt violates the JSX spec by using a lowercase function as a tagname, even though lowercase names are reserved for builtins. Here we detect cases where there is an `<fbt>` tag where `fbt` is a local identifier and throw a todo.
Joe Savona committed
Mar 19, 2024 at 14:51 UTC
7257c9b4f80889eaadf884dade07be8783c90fdc
3 files changed
+45
compiler/packages/babel-plugin-react-forget/src/HIR/BuildHIR.ts
+15
@@ -2044,6 +2044,21 @@ function lowerExpression(
2044
}
2045
props.push({ kind: "JsxAttribute", name: propName, place: value });
2046
}
2047
+ if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
2048
+ const openingIdentifier = opening.get("name");
2049
+ const tagIdentifier = openingIdentifier.isJSXIdentifier()
2050
+ ? builder.resolveIdentifier(openingIdentifier)
2051
+ : null;
2052
+ if (tagIdentifier != null) {
2053
+ CompilerError.throwTodo({
2054
+ reason: `Support <fbt> tags where 'fbt' is a local variable instead of a global`,
2055
+ loc: openingIdentifier.node.loc ?? GeneratedSource,
2056
+ description: null,
2057
+ suggestions: null,
2058
+ });
2059
+ }
2060
+ }
2061
+
2062
let children: Array<Place>;
2063
if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
2064
children = expr
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md
new
+25
@@ -0,0 +1,25 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component(props) {
6
+ const fbt = require("fbt");
7
+
8
+ return <fbt desc="Description">{"Text"}</fbt>;
9
+}
10
+
11
+```
12
+
13
+
14
+## Error
15
+
16
+```
17
+ 2 | const fbt = require("fbt");
18
+ 3 |
19
+> 4 | return <fbt desc="Description">{"Text"}</fbt>;
20
+ | ^^^ [ReactForget] Todo: Support <fbt> tags where 'fbt' is a local variable instead of a global (4:4)
21
+ 5 | }
22
+ 6 |
23
+```
24
+
25
+
\ No newline at end of file
compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.js
new
+5
@@ -0,0 +1,5 @@
1
+function Component(props) {
2
+ const fbt = require("fbt");
3
+
4
+ return <fbt desc="Description">{"Text"}</fbt>;
5
+}