Import module types to plugins

[ashu8912]

Current situation

Right now all the modules we attach to pluginLib are passed as type any because of which there is no way we can use all the typescript benefits from those modules such as strict types, hinting on objects, etc

We should have concrete types on modules that are present on the pluginLib

[illume]

Module federation https://webpack.js.org/concepts/module-federation/ might be worth looking into soon. Just looked into this, and webpack 5 is already merged into create react app, but module federation support is stalled in a PR ready to go. However, it's apparently approved to land in create-react-app 5.1 (not 5.0). Maybe we can use webpack 5 directly and have headlamp-plugin serve the required modules somehow (but I didn't look into this at all).

Copying type definitions might be another high-ish maintenance but lofi method to get type definitions.

Another option for the short term is to develop the plugin inside headlamp to start with, and then change the import statements to require when you're ready to publish.

Perhaps looking into if using peer dependencies somehow again might be worthwhile as well.

[illume]

@ashu8912 Some related thingos

ESM

ESM modules are coming to TS 4.5 and node 12.

• https://nodejs.org/api/esm.html
• https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#esm-nodejs
• https://2ality.com/2021/06/typescript-esm-nodejs.html
• https://www.rockyourcode.com/nodejs-setup-with-typescript-nodemon-and-esm/
• https://gils-blog.tayar.org/posts/using-jsm-esm-in-nodejs-a-practical-guide-part-1/
• https://gils-blog.tayar.org/posts/using-jsm-esm-in-nodejs-a-practical-guide-part-2/
• https://gils-blog.tayar.org/posts/using-jsm-esm-in-nodejs-a-practical-guide-part-3/

Module federation for plugins

Here's an example of using module federation for plugins:

• https://www.youtube.com/watch?v=1jlEEmiBSvI
• https://github.com/jherr/wp5-plugin-experiment/tree/master/mf-plugins
• https://github.com/jherr/mf-plugin-template

A bunch of module federation examples:

• https://github.com/module-federation/module-federation-examples

Peer dependencies

Peer dependencies are made for plugin systems, where if the host provides the dependency it uses that.

• https://nodejs.org/en/blog/npm/peer-dependencies/
• https://indepth.dev/posts/1187/npm-peer-dependencies

[illume]

Ashu and I discussed this a little.

It's worth experimenting with some different pathways(ESM, module federation, peer dependencies, copying type definitions), and we should write notes about paths we try and write down in this issue why they will not work.

Some pathways that were rejected previously

• headlamp as a npm package which the plugin can import to get types
• putting plugins within the headlamp repo, contribute plugins there and the dev experience is easier