Backport code from @vitejs/plugin-legacy to vite_plugin_legacy

[Antti]

Description 📖

Backport most of the logic from @vitejs/plugin-legacy to vite_plugin_legacy

This is currently used in production for over a year to support a wide variety of legacy browsers.

Background 📜

@vitejs/plugin-legacy does a lot of magic to support legacy browsers by rewriting index.html,
we're mostly interested in:

• Safari 10 nomodule fix
• A workaround for browsers that support modules, but do not support dynamic import:
  • script has type module, so only browsers which support modules would load it
  • if the dynamic import works - nothing happens
  • if the dynamic import fails - loads polyfills legacy
  • when polyfills legacy is loaded - it will then execute the entrypoint

[alexookah]

@ElMassimo Can we review and merge this?

[azz]

Hey @ElMassimo — I just encountered this issue, and unfortunately it prevents our team from adopting Vite Ruby.

The issue is that for browsers which support ES modules, but not the "baseline widely available" features that Vite depends on, @vite/pluin-legacy will load the "legacy" bundle, and prevent the modern bundle from being loaded.

With vite_plugin_legacy, on older browsers (I tested with Chrome 95), the guard inserted in the chunk will prevent the modern bundle from loading:

https://github.com/vitejs/vite/blob/af21ab68adac3380dc9a854d2fe3f776654301cd/packages/plugin-legacy/src/snippets.ts#L29

... however the fallback behaviour of importing the legacy bundle via SystemJS is not present, resulting in a blank screen on these browsers.

Is there any chance you'd be able to take a look at what would be required to get this working in vite_ruby?