fix(transformer/react): don't transform if the variable does not have a value reference (#5528)

close: #4746

Solved the last two tests, but it's a coincidence. I've added a test to cover it.
This commit is contained in:
Dunqing 2024-09-11 07:10:54 +00:00
parent 304ce25446
commit 36d864a0c3
6 changed files with 96 additions and 30 deletions

View file

@ -114,6 +114,11 @@ impl Reference {
self.flags.is_write()
}
/// Returns `true` if this reference is used in a value context.
pub fn is_value(&self) -> bool {
self.flags.is_value()
}
/// Returns `true` if this reference is used in a type context.
#[inline]
pub fn is_type(&self) -> bool {

View file

@ -2,7 +2,7 @@ use std::{cell::Cell, iter::once};
use oxc_allocator::CloneIn;
use oxc_ast::{ast::*, match_expression, match_member_expression};
use oxc_semantic::{ReferenceFlags, ScopeId, SymbolFlags, SymbolId};
use oxc_semantic::{Reference, ReferenceFlags, ScopeId, SymbolFlags, SymbolId};
use oxc_span::{Atom, GetSpan, SPAN};
use oxc_syntax::operator::AssignmentOperator;
use oxc_traverse::{Ancestor, Traverse, TraverseCtx};
@ -491,12 +491,14 @@ impl<'a> ReactRefresh<'a> {
}
}
*expr = ctx.ast.expression_assignment(
SPAN,
AssignmentOperator::Assign,
self.create_registration(ctx.ast.atom(inferred_name), ctx),
ctx.ast.move_expression(expr),
);
if !is_variable_declarator {
*expr = ctx.ast.expression_assignment(
SPAN,
AssignmentOperator::Assign,
self.create_registration(ctx.ast.atom(inferred_name), ctx),
ctx.ast.move_expression(expr),
);
}
true
}
@ -756,6 +758,7 @@ impl<'a> ReactRefresh<'a> {
let declarator = decl.declarations.first_mut().unwrap_or_else(|| unreachable!());
let init = declarator.init.as_mut()?;
let id = declarator.id.get_binding_identifier()?;
let symbol_id = id.symbol_id.get()?;
if !is_componentish_name(&id.name) {
return None;
@ -782,33 +785,39 @@ impl<'a> ReactRefresh<'a> {
// babel-plugin-styled-components)
}
Expression::CallExpression(call_expr) => {
if matches!(call_expr.callee, Expression::ImportExpression(_))
|| call_expr.is_require_call()
{
let is_import_expression = match call_expr.callee.get_inner_expression() {
Expression::ImportExpression(_) => {
true
}
Expression::Identifier(ident) => {
ident.name.starts_with("require")
},
_ => false
};
if is_import_expression {
return None;
}
// Maybe a HOC.
// Try to determine if this is some form of import.
let found_inside = self.replace_inner_components(
&id.name,
init,
/* is_variable_declarator */ true,
ctx,
);
if !found_inside {
return None;
}
// See if this identifier is used in JSX. Then it's a component.
// TODO:
// https://github.com/facebook/react/blob/ba6a9e94edf0db3ad96432804f9931ce9dc89fec/packages/react-refresh/src/ReactFreshBabelPlugin.js#L161-L199
}
_ => {
return None;
}
}
// Maybe a HOC.
// Try to determine if this is some form of import.
let found_inside = self
.replace_inner_components(&id.name, init, /* is_variable_declarator */ true, ctx);
if !found_inside {
// See if this identifier is used in JSX. Then it's a component.
// TODO: Here we should check if the variable is used in JSX. But now we only check if it has value references.
// https://github.com/facebook/react/blob/ba6a9e94edf0db3ad96432804f9931ce9dc89fec/packages/react-refresh/src/ReactFreshBabelPlugin.js#L161-L199
if !ctx.symbols().get_resolved_references(symbol_id).any(Reference::is_value) {
return None;
}
}
Some(self.create_assignment_expression(id, ctx))
}

View file

@ -1,6 +1,6 @@
commit: 3bcfee23
Passed: 17/49
Passed: 17/50
# All Passed:
* babel-plugin-transform-nullish-coalescing-operator
@ -167,7 +167,7 @@ rebuilt : SymbolId(2): []
x Output mismatch
# babel-plugin-transform-react-jsx (3/27)
# babel-plugin-transform-react-jsx (3/28)
* refresh/can-handle-implicit-arrow-returns/input.jsx
Symbol reference IDs mismatch:
after transform: SymbolId(9): [ReferenceId(23), ReferenceId(24), ReferenceId(25)]
@ -265,6 +265,9 @@ Unresolved references mismatch:
after transform: ["item", "useFoo"]
rebuilt : ["$RefreshSig$", "item", "useFoo"]
* refresh/does-not-transform-it-because-it-is-not-used-in-the-AST/input.jsx
x Output mismatch
* refresh/generates-signatures-for-function-declarations-calling-hooks/input.jsx
x Output mismatch
@ -290,7 +293,51 @@ x Output mismatch
x Output mismatch
* refresh/registers-identifiers-used-in-react-create-element-at-definition-site/input.jsx
x Output mismatch
Symbol reference IDs mismatch:
after transform: SymbolId(13): [ReferenceId(33), ReferenceId(47), ReferenceId(48)]
rebuilt : SymbolId(13): [ReferenceId(2), ReferenceId(48)]
Symbol reference IDs mismatch:
after transform: SymbolId(14): [ReferenceId(35), ReferenceId(49), ReferenceId(50)]
rebuilt : SymbolId(14): [ReferenceId(5), ReferenceId(50)]
Symbol reference IDs mismatch:
after transform: SymbolId(15): [ReferenceId(37), ReferenceId(51), ReferenceId(52)]
rebuilt : SymbolId(15): [ReferenceId(8), ReferenceId(52)]
Symbol reference IDs mismatch:
after transform: SymbolId(16): [ReferenceId(39), ReferenceId(53), ReferenceId(54)]
rebuilt : SymbolId(16): [ReferenceId(12), ReferenceId(54)]
Symbol reference IDs mismatch:
after transform: SymbolId(17): [ReferenceId(41), ReferenceId(55), ReferenceId(56)]
rebuilt : SymbolId(17): [ReferenceId(35), ReferenceId(56)]
Symbol reference IDs mismatch:
after transform: SymbolId(18): [ReferenceId(43), ReferenceId(57), ReferenceId(58)]
rebuilt : SymbolId(18): [ReferenceId(41), ReferenceId(58)]
Symbol reference IDs mismatch:
after transform: SymbolId(19): [ReferenceId(45), ReferenceId(59), ReferenceId(60)]
rebuilt : SymbolId(19): [ReferenceId(45), ReferenceId(60)]
Reference symbol mismatch:
after transform: ReferenceId(47): Some("_c")
rebuilt : ReferenceId(47): None
Reference symbol mismatch:
after transform: ReferenceId(49): Some("_c2")
rebuilt : ReferenceId(49): None
Reference symbol mismatch:
after transform: ReferenceId(51): Some("_c3")
rebuilt : ReferenceId(51): None
Reference symbol mismatch:
after transform: ReferenceId(53): Some("_c4")
rebuilt : ReferenceId(53): None
Reference symbol mismatch:
after transform: ReferenceId(55): Some("_c5")
rebuilt : ReferenceId(55): None
Reference symbol mismatch:
after transform: ReferenceId(57): Some("_c6")
rebuilt : ReferenceId(57): None
Reference symbol mismatch:
after transform: ReferenceId(59): Some("_c7")
rebuilt : ReferenceId(59): None
Unresolved references mismatch:
after transform: ["React", "funny", "hoc", "jsx", "styled", "wow"]
rebuilt : ["$RefreshReg$", "React", "funny", "hoc", "jsx", "styled", "wow"]
* refresh/registers-likely-hocs-with-inline-functions-1/input.jsx
x Output mismatch

View file

@ -0,0 +1,3 @@
const StyledFactory1 = styled('div')`color: hotpink`
console.log(StyledFactory1);

View file

@ -0,0 +1,2 @@
const StyledFactory1 = styled('div')`color: hotpink`
console.log(StyledFactory1);

View file

@ -28,7 +28,7 @@ function Foo() {
React.createElement(Alias1),
React.createElement(Alias2),
jsx(Header),
React.createElement(Dict.X),
React.createElement(Dict.X)
];
}