@mf-types as @types alternative (just like DefinitelyTyped)

[crutch12]

Hi @ScriptedAlchemy @2heal1 @zhoushaw

If we have @types/** packages for npm packages, so why don't we have @mf-types/** packages for module federation modules?

I think it would be great, if any developer could publish declaration files for his microfrontend

(see how @types works)

Why

For example: what if google could share google-maps-services-js as module federation module instead of npm library

Let's call it Components as a Service

So developers could plug it this way:

1. $ npm i -D @mf-types/googlemaps__google-maps-services-js
2. Init host

import { init } from '@module-federation/runtime'

init({
  name: 'host',
  remotes: [{
    name: '@googlemaps/google-maps-services-js',
    entry: 'https://maps.google.com/v1/remoteEntry.js'
  }]
})

3. import

import { loadRemote } from '@module-federation/runtime'

// type hints work (!)
const { Client } = await loadRemote('@googlemaps/google-maps-services-js')

const client = new Client({});

client
  .elevation({
    params: {
      locations: [{ lat: 45, lng: -110 }],
      key: process.env.GOOGLE_MAPS_API_KEY,
    },
    timeout: 1000, // milliseconds
  })
  .then((r) => {
    console.log(r.data.results[0].elevation);
  })
  .catch((e) => {
    console.log(e.response.data.error_message);
  });

How

• create npm organisation (https://npmjs.com/org/@mf-types)
• create https://github.com/module-federation/DefinitelyTyped repo
• implement publication workflow to @mf-types/**

loadRemote(...) should detect types automatically for every new @mf-types/** installed package

Future

In future browsers could implement support for such syntax (just like type="importmap")

<script type="microfrontendsmap">
  {
    "microfrontends": {
      "@googlemaps/google-maps-services-js": {
        entry: 'https://maps.google.com/v1/remoteEntry.js',
        modules: ['./Client']
      }
    }
  }
</script>

So we could use import without loadRemote

// using "mf protocol"
const Client = await import('mf:@googlemaps/google-maps-services-js/Client')

So developer just has to install @mf-types/** package to have type hints.

[ilteoood]

What's the benefit of using module federation if you need to install something through npm?
MF works great because you don't have to manually update packages if you want to update your software, because everything is resolved runtime.

[ilteoood]

Maintainer of native-federation-typescript module here 👋
No one ever expressed any particular need about this kind of flexibility. If you could provide some details or create some tickets about this I'll be more than happy to implement them.

[crutch12]

@ilteoood yeah, with my pleasure

Here: #2606

[ScriptedAlchemy]

#2570 heres the PR

Im pretty sure the DTS manager is agnostic under the hood. Which is how we are able to make the browser report consumption back to the broker.

[crutch12]

But, as I can see, @module-federation/dts-plugin (DTSManagers.ts) is webpack only for now

[crutch12]

Have you thought about extract all plugins core functionality to agnostic realization?

Using unplugin, as you did with @module-federation/native-federation-typescript

Nowadays more and more developers migrate to vite/esbuil/rollup...

I don't see any reasons to use webpack/rspack in my projects (since they have no legacy)