NPDev React Loadable

React Loadable has been triggering some warnings about the use of componentWillMount so I took the opportunity to port it to Meteor properly. It’s not on Atmosphere yet, as I still have to figure out how to expose the babel plugin, and rewrite parts of the readme (and do a ton of testing) but it’s pretty close. Have a look!

7 Likes

Nice, you might want to consider using the continuation of react-loadable from Jaybe, which takes care of the warnings.

I will migrate my current project to use this one. Will tell you guys the results later. Thanks.

1 Like
meteor add npdev:react-loadable
 => Errors while parsing arguments:           
                                              
While adding package npdev:react-loadable:
error: no such package

it’s not working at this moment.

Gah! I didn’t know that was a thing! I already rewrote the class based Component into a stateless component with hooks to take care of the warnings.

1 Like

I didn’t launch it to atmosphere yet, because I want to finish a few things (It doesn’t have a Loadable.Map alternative yet, and I’d like to port the tests). If you want to try it out, grab a copy of the repo, and put it in your meteor projects /packages folder, then install with meteor add npdev:react-loadable.

UPDATE: I launched it to atmoshpere with an alpha version number.

2 Likes

How does your approach here differ from nemms:meteor-react-loadable? That package is essentially a pretty thin wrapper around the stock react-loadable that keeps track of what modules have have been rendered and provides some utilities to preload them. Curious what benefits your package offers!

react-loadable won’t run when you upgrade your react to the next version in the future.

So all kind of wrapper packages won’t work. Captainn is trying to rewrite the react-loadable core package to make it fully works with Meteor. He is a hero.

1 Like

Why wouldn’t it run? The renamed methods?

I didn’t know about that! I may not have even bothered if I had, heh. Still, if it’s a competition. :wink: My solution does a couple of nice things:

  • It’s a port, so there’s no overhead or intervening layer.
  • Since it’s a port to Atmosphere, it also separates the client and server capabilities, so you get some nice modern bundle benefits.
  • I also updated it to use hooks, to take care of the use of those deprecated methods.
  • The most valuable change is, I ported the babel plugin to meteor. If you use that, it’ll automatically add the path resolve stuff that nemms:meteor-react-loadable requires you to set up. Much easier!

Above the regular react-loadable I think my SSR solution is much easier - and it looks like nemms:meteor-react-loadable does something very similar, which is pretty neat.

l think we need some kind of much better repository search index somewhere. I keep hearing about all these great Meteor packages (in atmosphere and npm) to replace old packages, and I keep missing them.

2 Likes

Awe shucks. There are other more updated versions of react-loadable in npm, but I really wanted something that was properly set up from the ground up for Meteor, including SSR examples in the readme, unit tests, and all that. I actually got some of the unit tests ported (I was having an error in my app which I thought might have been caused by the change to this component - but it was not! Everything works.) All that’s left is to restore the Loadable.Map feature and port the remaining unit tests, and that should be all set.

2 Likes

Nice! Do you plan to get in some of the other improvements from the Jaybe fork that I mentioned above?

Sure! I could use some help cherry picking them though. Most of the improvements are to the webpack surface of that package - but we don’t need any of that. I do see one error swallowing fix that I can apply (I’ll verify it’s an issue, and then port the fix over).

If you see any others let me know through an issue or PR, and I’ll incorporate it.

1 Like