[Fresh] Clone a custom hook node before use

[theKashey]

This is a small patch to react-refresh babel plugin to fix a problem we found in react-hot-loader.

In short - refresh babel plugin is using the "original" babel node to put a custom hook into signature, and common-js babel plugin has a logical condition not to transform any node twice. As a result - custom hook reference would not be transformed. @dgreensp did an amazing job finding the root cause.

Solution - just clone node before the use. Look like there is no need for deep clone in this case.

Keep in mind - no tests were added. Unfortunately, this bug is not reproducible with babel 6, and only babel 7 is affected. To be more concrete - I've added tests, but as long as they are not testing anything - they are passing initially - I've removed them.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS

[dgreensp]

I think deep clone is necessary for related cases. I can repro today or tomorrow if you want. I haven’t tried it yet, but I would try 1) “import *” and 2) importing a name foo and doing foo.useHook.

[gaearon]

It would be nice to get a confirmed repro case that fails with Babel 7, even in a fork. Then we can keep the test, and it will become useful once we update to Babel 7. Which we should do anyway.

[theKashey]

Ok - test would be green today, and would be green in the future, as long as the problem is "fixed". But, at least, it would prevent regression.

@dgreensp - It does not matter how you've imported "hook", only node.callee is use, and that's a flat node.

[gaearon]

What if callee is something like Foo.Bar.Baz.useSomething()?

[theKashey]

What if callee is something like Foo.Bar.Baz.useSomething()?

Does not matter - only "top level" transformation matters here(and for this case), le transformation from Foo to _utils.Foo is equal to Foo.Bar.Baz => _utils.Foo.Bar.Baz.
Deep clone might be useful to prevent problem with yet unknown plugins, but they might not exists.

Anyway - if the goal is to provide more safe out of the box solution - let's use deep clone.

[gaearon]

Yeah, feels a bit safer. Let's use the deep one.

[dgreensp]

My intuition was that foo.bar.baz() is actually (((foo).bar).baz)(), so the callee is foo.bar.baz and the imported identifier is foo, a descendent node. I tried to repro it real quick and couldn’t, but it sounds like you’re going to go with deep, so sounds good to me.

[gaearon]

Thanks!

[theKashey]

😅 someone got that theoretical problem, which might require cloneDeep - gaearon/react-hot-loader#1280