transformer: Port React #35318?

[ArnaudBarre]

facebook/react#35318

I don't know if the React team will accept it, but I fell that OXC should support it anyways because it's technically more correct and the complexity is low

I'm pretty sure copilot can one shot the port (hopping it can read diff from other repos)

[Dunqing]

I am happy to assign the issue to Copilot if you could write an example with input/output and add a brief description about the problem

[ArnaudBarre]

The goal is to support nested hooks like module.property.useHook(). Currently, using something like this in a component will make the component reset on every HMR update. To support this, I suggested a change in the Babel plugin, in the createArgumentsForSignature function:

        case 'MemberExpression':
          if (callee.object.type === 'Identifier') {
            bindingName = callee.object.name;
          }
+         if (
+           callee.object.type === 'MemberExpression' &&
+           callee.object.object.type === 'Identifier'
+         ) {
+           bindingName = callee.object.object.name;
+         }

Here is the new added test:

Input:

import FancyHook from 'fancy';

export default function App() {
  const foo = FancyHook.property.useNestedThing();
  return <h1>{foo}</h1>;
 }

Output:

var _s = $RefreshSig$();
import FancyHook from 'fancy';
export default function App() {
  _s();
  const foo = FancyHook.property.useNestedThing();
  return <h1>{foo}</h1>;
}
_s(App, "useNestedThing{foo}", false, function () {
  return [FancyHook.property.useNestedThing];
});
_c = App;
var _c;
$RefreshReg$(_c, "App");

[connorshea]

I'm familiar with react as an end user but not as much it's internals, so this question might be silly: Is this safe to do, in case another library were defining a nested, non-hook useX function?

EDIT: after thinking about this more this definitely shouldn't be a problem (or not a new problem at least, vs how hooks and refresh already work)