feat(transformer): Support nested member expressions in React Fast Refresh

crates/oxc_transformer/src/jsx/refresh.rs

@@ -335,17 +335,26 @@ impl<'a> Traverse<'a, TransformState<'a>> for ReactRefresh<'a, '_> {
 
         if !is_builtin_hook(&hook_name) {
             // Check if a corresponding binding exists where we emit the signature.
-            let (binding_name, is_member_expression) = match &call_expr.callee {
-                Expression::Identifier(ident) => (Some(ident.name), false),
-                Expression::StaticMemberExpression(member) => {
-                    if let Expression::Identifier(object) = &member.object {
-                        (Some(object.name), true)
-                    } else {
-                        (None, false)
+            // Extract the root binding name and member path for custom hooks
+            // Helper function to extract root identifier and collect member path
+            fn extract_binding_and_path<'a>(
+                expr: &Expression<'a>,
+            ) -> (Option<Atom<'a>>, Vec<Atom<'a>>) {
+                match expr {
+                    Expression::Identifier(ident) => (Some(ident.name), vec![]),
+                    Expression::StaticMemberExpression(member) => {
+                        let (root, mut path) = extract_binding_and_path(&member.object);
+                        if root.is_some() {
+                            path.push(member.property.name);
+                        }
+                        (root, path)
                     }
+                    _ => (None, vec![]),
                 }
-                _ => unreachable!(),
-            };
+            }
+
+            let (binding_name, member_path) = extract_binding_and_path(&call_expr.callee);
+            let member_path = if member_path.is_empty() { None } else { Some(member_path) };
 
             if let Some(binding_name) = binding_name {
                 self.non_builtin_hooks_callee.entry(current_scope_id).or_default().push(
@@ -362,14 +371,16 @@ impl<'a> Traverse<'a, TransformState<'a>> for ReactRefresh<'a, '_> {
                                 ReferenceFlags::Read,
                             );
 
-                            if is_member_expression {
-                                // binding_name.hook_name
-                                expr = Expression::from(ctx.ast.member_expression_static(
-                                    SPAN,
-                                    expr,
-                                    ctx.ast.identifier_name(SPAN, hook_name),
-                                    false,
-                                ));
+                            if let Some(path) = member_path {
+                                // Build the full member expression chain
+                                for property_name in path {
+                                    expr = Expression::from(ctx.ast.member_expression_static(
+                                        SPAN,
+                                        expr,
+                                        ctx.ast.identifier_name(SPAN, property_name),
+                                        false,
+                                    ));
+                                }
                             }
                             expr
                         }),

tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/refresh/nested-member-expression-with-hooks/output.js

@@ -3,7 +3,7 @@ export function Bar() {
   _s();
   A.B.C.useHook();
 }
-_s(Bar, "useHook{}");
+_s(Bar, "useHook{}", true);
 _c = Bar;
 var _c;
 $RefreshReg$(_c, "Bar");

tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/refresh/react-refresh/generates-valid-signature-for-nested-ways-to-call-hooks/input.jsx

@@ -0,0 +1,6 @@
+import FancyHook from 'fancy';
+
+export default function App() {
+  const foo = FancyHook.property.useNestedThing();
+  return <h1>{foo}</h1>;
+}

tasks/transform_conformance/tests/babel-plugin-transform-react-jsx/test/fixtures/refresh/react-refresh/generates-valid-signature-for-nested-ways-to-call-hooks/output.js

@@ -0,0 +1,14 @@
+import FancyHook from "fancy";
+import { jsx as _jsx } from "react/jsx-runtime";
+var _s = $RefreshSig$();
+export default function App() {
+  _s();
+  const foo = FancyHook.property.useNestedThing();
+  return /* @__PURE__ */ _jsx("h1", { children: foo });
+}
+_s(App, "useNestedThing{foo}", false, function () {
+  return [FancyHook.property.useNestedThing];
+});
+_c = App;
+var _c;
+$RefreshReg$(_c, "App");