NPDev React Loadable

announce
1

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!

9 Likes
2

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

3

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

1 Like
4 
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.

5

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
6

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
7

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!

8

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
9

Why wouldn’t it run? The renamed methods?

10

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.

3 Likes
11

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.

3 Likes
12

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

13

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.

3 Likes
14

Actually I think that error swallowing fix is superfluous - the error is already captured in the load method, making this unnecessary (at least in my version).

16

You can configure the babel plugin to get those meteor settings included automatically (Note: Not yet tested with LoadableMap).

1 Like
17

@captainn, what is this? https://github.com/facebook/react/edit/master/packages/react-dom/src/tests/ReactDOMServerPartialHydration-test.internal.js
Looks like a new feature supports server rendering.

18

That’s neat. I wonder if they are building up to supporting React.lazy in SSR (they don’t currently, which is why we still need React Loadable).

2 Likes
19

Trying it out now, no issues so far,

2 Likes
20

Hi, I tried multiple levels of loadable call then the client crashed.
meteor://:computer:app/packages/npdev:react-loadable/react-loadable-both.js

  while (initializers.length) {
    const init = initializers.pop()
    promises.push(init()) // error here.
  }
21

I wonder if there’s some null values working their way in to that list. Can you add a reproduction, perhaps as a PR to this starter?

1 Like