Add vite-plugin-single-spa to Vite Ecosystem

[webJose]

I have created a new Vite plug-in to broaden the possibilities of single-spa in the Vite ecosystem. I have quickly described it here. Thank you.

[joeldenning]

I don't have enough time to properly review this, so I'm just going to go ahead and merge it. Thanks for your help with it. I may come back and review it later.

[joeldenning]

Here was my main hesitation and problem with Vite back when I was trying to get it to work with SystemJS modules. Is that still the case with Vite? I'm hoping to go all native ES modules in production in upcoming single-spa work.

https://single-spa.slack.com/archives/C9JV40F7V/p1692667453176669?thread_ts=1692129494.902899&cid=C9JV40F7V

[joeldenning]

Also see #592 for an update regarding single-spa maintenance

[webJose]

Hi. I don't seem to have access to that Slack URL. Anyway, I will be more than glad to chat with you about the plug-in and the problems I have experienced so far as well as the victories on the road so far.

In a nutshell: Vite + XXX projects work. While in serve mode, you can't see assets, though. I tracked the problem in Vite's source code and opened this issue. I don't have much information about how Vite's base property affects other things, so I am unaware if my proposal is enough.

Furthermore, I raised this other issue for Vite's React plug-in. It pertains to an HMR error when the HTML page wasn't produced by this plug-in (because your page is not a Vite project, or because is a Vite project using some other framework than React).

[webJose]

Regarding ES modules: They work. The caniuse website says most browsers fully support them. The Chromium browsers (at least) present a bug when the IMO package tries to override maps of type importmap. However, this is overcome by setting the type overridable-importmap. This the plug-in's default map type when used to create root config projects.

I can verify to you that so far, overridable-importmap works perfectly well. All mife's are loaded with ES' dynamic import() and all looks good in the single-spa world.

Ah, yes, one more detail: Vite, while in serve mode (npm run dev) injects a script (@vite/client) that messes up the overriding function of IMO. I overcame this with the plug-in by running a post HTML transformation that injects the import maps and the IMO script at the top.