Deep dependencies (auto resolve?)

Hey there,

Firstly - this package is a godsend. Thanks for building it!

We’ve got fairly complex components that require deep dependencies, i.e. @material-ui/core/Paper where @material-ui/core is the package.

One solution is to manually type of each of those - though when you bring @material-ui/icons/${iconName} into the mix that can get quickly out of control with 1000+ components.

I noticed that createRequires takes a function - is there a way that I can automatically check which packages my remote component needs and pass in the corresponding package? i.e.

const mui = require('@material-ui/core');

const requires = createRequires({
   '@material-ui/core/Paper': mui.Paper
})

...

[joelnet]

Is there a way within the component that you can map top level packages (i.e. @material-ui/core) to their sub module (i.e. @material-ui/core/Paper).

Could this be achieved by stripping the top level and using either dot notation or [] to go deeper into the package?

i.e. @material-ui/core/Paper/something/else -> requires[‘@material-ui/core’].Paper.something.else?

This is something I would have to play with. But the Manual Configuration section has some details on using a custom requires. The docs on this are light, but it should just be a function that takes a string and returns a module. You can do some custom processing inside that.

I’ll be improving the docs on that section shortly. But since it’s December, things are slow.

But I can say improvements in this area are on the near horizon 👍

[joelnet]

The requires should be created in the web application. I haven’t tested, but something like this:

const deps = {
  "@material-ui/core": require("@material-ui/core")
};

const requires = name => {
  const match = name.match(/@material-ui\/core\/(?<sub>.+)/, name);

  if (match) {
    return deps["@material-ui/core"][match.groups.sub];
  }

  return deps[name];
}

This should match an import of @material-ui/core/Paper to require("@material-ui/core").Paper