Add async loading to reduce package size

[xhluca]

closes #28

More information in PR #40

Screenshot of network when dash_vtk is imported but not used:

Pasting some explanation of the asyncComponentBuilder function that I shared with @Marc-Andre-Rivet

const AsyncComponentBuilder = name => async () => {
    const AsyncReactVTK = import(/*webpackChunkName: "ReactVTK" */ './ReactVTK');
    const ReactVTK = await AsyncReactVTK;
    // console.log("ReactVTK", ReactVTK);
    // window.ReactVTK = ReactVTK;
    const reactComponent = ReactVTK.default[name];
    // We need to trick React.lazy into thinking we are giving
    // the output of an import("my-module.js") Promise.
    const fakeModule = {default: reactComponent};
    return fakeModule;
}

Let's look at individual lines:

const AsyncReactVTK = import(/*webpackChunkName: "ReactVTK" */ './ReactVTK');

above i'm using the asynchronously importing the "react-vtk-js" library (you can ignore ./ReactVTK, it just imports * then exports the react-vtk-js library).

 const ReactVTK = await AsyncReactVTK;

above, Just resolving the promise here, so ReactVTK is an actual module instead of a promise.

const reactComponent = ReactVTK.default[name];

above i'm accessing the react component by the name, so if name="Algorithm" then it'd be equivalent to ReactVTK.default.Algorithm. Usually it would simply be ReactVTK.Algorithm but we need the default due to how i export react-vtk-js in ./ReactVTK.js .

const fakeModule = {default: reactComponent};

Just as the comment says: React.lazy expects a module, we give it an object that behaves like a module.

const AsyncComponentBuilder = name => async () => {...}

above, AsyncComponentBuilder is just a HOF that given a name (e.g. "View" or "Algorithm") will return an async function that we can give to React.lazy and use inside React.Suspense.

[xhluca]

@alexcjohnson @Marc-Andre-Rivet I pushed some commits here using Suspense and lazy. Let me know if that's what I'm supposed to do; if there's no problem I'll do the same thing for the other components.

[xhluca]

@Marc-Andre-Rivet Thanks for the advice. I had a pair-coding session with Joe and I was succefully in wrapping one of the components (dash_vtk.View) using the chunked async approach; unfortunately I started running into problems when I try to add async to the other 19 components; more about that in the slack channel #dash-vtk.

[xhluca]

I'm rerolling back to before adding async so I can explore the single-chunk async apporach (load all of vtk or none).

I'm saving the state of this branch here: https://github.com/plotly/dash-vtk/tree/lazy-loading-archive-1

[xhluca]

@alexcjohnson @Marc-Andre-Rivet @jdamiba This PR is ready to be reviewed! I think the async should work now, and all the problem on the vtk side have been resolved by @jourdain . Feel free to take a look at the percy snapshot to validate the result.

[jdamiba]

This looks good to me as well. 💃🏿

I tested this locally by running the usage.py example both with and without dash-vtk components in the app layout, and can confirm that the async ReactVTK.js bundle is only served when dash-vtk components are in the layout. When the library is simply imported into an app, only the thin shell is loaded.

The same holds true at https://dash-docs-pr-1091.herokuapp.com/ and https://dash-docs-pr-1091.herokuapp.com/vtk, which are a version of the dash-docs which point to this branch of the dash-vtk library.

[Marc-Andre-Rivet]

💃 - @xhlulu, @jdamiba good job digging through all the details to make this (yet to be documented feature) work for this package 👍

[xhluca]

Thank you @Marc-Andre-Rivet @jdamiba @jourdain! Merging this now.