NPDev React Loadable

captainn · 2019-08-14T21:58:17.182Z

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!

storyteller · 2019-08-18T00:47:13.424Z

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

minhna · 2019-08-18T02:53:01.422Z

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

minhna · 2019-08-18T03:46:34.587Z

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.

captainn · 2019-08-19T01:48:40.698Z

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.

captainn · 2019-08-19T01:50:33.192Z

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.

moberegger · 2019-08-21T21:26:46.336Z

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!

minhna · 2019-08-22T05:01:52.900Z

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

reactjs.org

React v16.9.0 and the Roadmap Update – React Blog

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release. New Deprecations Renaming Unsafe Lifecycle Methods Over a year ago , we announced that unsafe...

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.

moberegger · 2019-08-22T12:42:39.777Z

Why wouldn’t it run? The renamed methods?

captainn · 2019-08-22T15:53:35.281Z

I didn’t know about that! I may not have even bothered if I had, heh. Still, if it’s a competition. 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.

captainn · 2019-08-22T15:58:04.483Z

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.

storyteller · 2019-08-25T13:19:01.837Z

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

captainn · 2019-08-25T16:38:47.570Z

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.

captainn · 2019-08-27T14:59:38.343Z

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).

captainn · 2019-08-28T16:41:23.370Z

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

minhna · 2019-09-13T07:39:53.816Z

@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.

captainn · 2019-09-13T15:35:39.832Z

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).

storyteller · 2019-10-01T14:15:52.614Z

Trying it out now, no issues so far,