Implement dynamic imports?

[garrettjstevens]

Since we want basically everything to be configurable, we're going to need a way to load things like plugins from user-defined sources. With dynamic imports, we can at least load custom React components, which is a good start.

Need to experiment and see if this will work well for us.

[garrettjstevens]

@rbuels I've tested this out a bit and it seems to work pretty well. Basically you import the module in a component's componentDidMount() method and then update the state with the imported module. It was originally implemented so you could split up code in your bundle and have it only loaded when it's needed, but it works great for updating code from a variable path as well. This would work well for plugins, etc. that are available at build time. Also I think it's the way to go for dynamically updating our content-aware SideDrawer (or Credenza...). We'd have to figure something else out for non-bundled plugins like we talked about in the last backlog grooming.

If there are no objections I'm going to start working on implementing this in some of the UI components I've created and see how it goes.

[rbuels]

Yes feel free to use that and see how it goes!

On Mon, Oct 29, 2018 at 2:03 PM Garrett Stevens notifications@github.com wrote:

@rbuels https://github.com/rbuels I've tested this out a bit and it seems to work pretty well. Basically you import the module in a component's componentDidMount() method and then update the state with the imported module. It was originally implemented so you could split up code in your bundle and have it only loaded when it's needed, but it works great for updating code from a variable path as well. This would work well for plugins, etc. that are available at build time. Also I think it's the way to go for dynamically updating our content-aware SideDrawer (or Credenza...). We'd have to figure something else out for non-bundled plugins like we talked about in the last backlog grooming.

If there are no objections I'm going to start working on implementing this in some of the UI components I've created and see how it goes.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GMOD/jbrowse-components/issues/13#issuecomment-434079150, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEgFafsYwOZHHHrbXwA_qNebHm1N9uWks5up20rgaJpZM4YAFXh .

[garrettjstevens]

This seems to be working well. I've got a demo working that imports a new component and places it in the side drawer when a button is clicked:

Before click:

After click:

[cmdcolin]

I was curious still if this could apply to plugins added after compilation...I was thinking maybe of looking at the Electron atom ecosystem how they have add-on packages.

[garrettjstevens]

With the recent addition of Lazy and Suspense to React, it probably make more sense to use that for lazy loading. Currently the drawer widgets are required to lazy react components (example), but we need to make sure this will work with run-time plugins (see GMOD/jbrowse-plugin-template#32).

[rbuels]

Interestingly, it's starting to look like a lot of our code is actually going to be MST models, and MST's need to know the types of things in advance means that MST models can't really be lazy-loaded.

But could we lazy-load a lot of our react components by wrapping them with lazy and suspense though?

[garrettjstevens]

Yeah, so far both drawer widget and menu bar pluggable types are required to have their React components be Lazy components that are loaded with Suspense. I'm planning on seeing if this model holds up with run-time plugins.

[rbuels]

a number of things are using this, closing.