babel-plugin-transform-decorators-legacy icon indicating copy to clipboard operation
babel-plugin-transform-decorators-legacy copied to clipboard

Extract decorated functions as top level variables

Open danbovey opened this issue 6 years ago • 7 comments

Could we get an option in .babelrc to extract each decorated function individually as it's own variable. Reason being is that react-hot-loader requires the OG decorated function (react component) to be its own top level variable. See their docs for the full explanation.

Currently this plugin transforms decorators to something like this:

const SuperComponent = 
     connect()(         <-- last HoC
       withSomeStuff(   <-- first HoC
         Component      <-- a real component
       )
     );

But with a "topLevel": true plugin option in .babelrc (just in development env section in my case), this plugin could transform decorators like this:

 const WithSomeStuffComponent = withSomeStuff(Component);
 const SuperComponent = connect()(WithSomeStuffComponent);

Would this be possible?

danbovey avatar Nov 28 '17 20:11 danbovey

I'm not sure I fully follow the details, but this seems like the type of thing that could be implemented as a separate plugin that would run before this one, if you wanted that behavior. I'm not sure it is something that this plugin would do on its own?

loganfsmyth avatar Dec 01 '17 03:12 loganfsmyth

I believe this is exactly what I'm attempting here :),

https://www.npmjs.com/package/babel-plugin-undecorate

I'm assuming the reason you'd want this is for testability of the underlying class/method (that's why I wanted it).

sirrodgepodge avatar Jul 01 '18 21:07 sirrodgepodge

Closing as this is probably solved by babel-plugin-undecorate!

danbovey avatar Jul 02 '18 09:07 danbovey

@danbovey Woah woah hey, it's not actually solved yet, it was only raised as a hypothetical solution

vdh avatar Jul 03 '18 06:07 vdh

@vdh As @loganfsmyth said, this issue doesn't have to be solved in this plugin, it's a little bit out of scope. I no longer need this so I haven't tested @sirrodgepodge's plugin but I assume that's the repo we can open an issue on if that doesn't solve this feature request.

danbovey avatar Jul 03 '18 09:07 danbovey

@danbovey The problematic code is directly created by this babel plugin. Relying on yet another plugin to make further changes over the top of how it already behaves is an unstable attempt at solving the code generation issue.

vdh avatar Jul 04 '18 23:07 vdh

OK, reopening to be looked at by @loganfsmyth

danbovey avatar Jul 05 '18 09:07 danbovey