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.
This commit is contained in:
Joe Savona
2024-03-19 14:51:35 -07:00
parent 93e0815b26
commit 7257c9b4f8
3 changed files with 45 additions and 0 deletions
@@ -2044,6 +2044,21 @@ function lowerExpression(
}
props.push({ kind: "JsxAttribute", name: propName, place: value });
}
if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
const openingIdentifier = opening.get("name");
const tagIdentifier = openingIdentifier.isJSXIdentifier()
? builder.resolveIdentifier(openingIdentifier)
: null;
if (tagIdentifier != null) {
CompilerError.throwTodo({
reason: `Support <fbt> tags where 'fbt' is a local variable instead of a global`,
loc: openingIdentifier.node.loc ?? GeneratedSource,
description: null,
suggestions: null,
});
}
}
let children: Array<Place>;
if (tag.kind === "BuiltinTag" && tag.name === "fbt") {
children = expr
@@ -0,0 +1,25 @@
## Input
```javascript
function Component(props) {
const fbt = require("fbt");
return <fbt desc="Description">{"Text"}</fbt>;
}
```
## Error
```
2 | const fbt = require("fbt");
3 |
> 4 | return <fbt desc="Description">{"Text"}</fbt>;
| ^^^ [ReactForget] Todo: Support <fbt> tags where 'fbt' is a local variable instead of a global (4:4)
5 | }
6 |
```
@@ -0,0 +1,5 @@
function Component(props) {
const fbt = require("fbt");
return <fbt desc="Description">{"Text"}</fbt>;
}