feat: new varFilename option - allow generate additional "var" remoteEntry.js file (#247)

[crutch12]

Problem

@module-federation/vite generates esm only remoteEntry.js file, thus you are not able to load it in "old fashion way"

Problem example:

// host
plugins: [
  federation({
    remotes: {
      remote: 'remote@http://localhost:3000/remoteEntry.js' // doesn't work with esm files
    },
  }),
]

Solution

We can generate additional varRemoteEntry.js file,

This file will just import() our esm remoteEntry.js file and call init/get methods. Example:

// varRemoteEntry.js
var remote; // name of remote app
remote = (function () {
  function getScriptUrl() {
    return document.currentScript.src
  }

  const entry = `${getScriptUrl()}/../remoteEntry.js` // path to esm remoteEntry.js

  return {
    get: (...args) => import(entry).then(m => m.get(...args)),
    init: (...args) => import(entry).then(m => m.init(...args)),
  };
})();

Thus host application may use it:

// host
plugins: [
  federation({
    remotes: {
-      remote: 'remote@http://localhost:3000/remoteEntry.js'
+      remote: 'remote@http://localhost:3000/varRemoteEntry.js'
    },
  }),
]

Moreover: I've added new property into manifest.json - varRemoteEntry, I hope it's okay...

Current problems

• Handle publicPath/getPublicPath options
• Write tests

Related issues:

• library type var #247
• docs: var host + esm remote (vite) workaround core#4199
• Cannot generate remoteEntry.js file with a global var name and chunks originjs/vite-plugin-federation#368

[crutch12]

@gioboa @ScriptedAlchemy could you check it out? wdyt?

[crutch12]

@ScriptedAlchemy wdyt about additional varRemoteEntry field in manifest.json?

Or maybe we should generate the second item in manifest.json array. Sry, I couldn't find the manifest specification...

[crutch12]

I don't handle publicPath/getPublicPath here. Should I? I rely on generated remoteEntry.js relative path

[crutch12]

I'm not sure about this logic. Maybe there is another way to indicate path of original remoteEntry.js file?
I've stolen it from __webpack_public_path__ ('auto') implementation...

[crutch12]

Should we fail if provided name is not valid js name?
In this case it's not possible to load this remote entry in old fashion way, it won't work:

remotes: {
  '@app/remote': '@app/remote@http://localhost:3000/varRemoteEntry.js',
}

But, as my example shows, this still works with dynamic loadRemote, therefore I've decided to handle it with globalThis and showing the warn message