How to import components from main app dynamically with module federation

[yf-yang]

I am seeking an approach to implement a React component plugin system. The general idea is, fetching a list of component ids from remote, after the user chooses the component, import the component by accessing the cdn with the chosen id, then mount the component.

Is it achievable with module federation? If so, which example would be a good starter to learn from?

[yf-yang]

https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host seems to be the case. However, could init be called again to refresh the list of remotes? If so, then there is no problem.

[yf-yang]

Seems init could be called multiple times. I'll come back later to show if it works.

[yf-yang]

OK it works.

init({
  name: 'app1',
  remotes: [],
});

// ...

function App() {
  // ...
  const setApp2 = () => {
    init({
      name: 'app1',
      remotes: [
        {
          name: 'app2',
          entry: 'http://localhost:3002/remoteEntry.js',
        },
      ],
    });
    setSystem({
      scope: 'app2',
      module: 'Widget',
    });
  };

  const setApp3 = () => {
    init({
      name: 'app1',
      remotes: [
        {
          name: 'app3',
          entry: 'http://localhost:3003/remoteEntry.js',
        },
      ],
    });
    setSystem({
      scope: 'app3',
      module: 'Widget',
    });
  };

  // ...
}