Support for Import Maps

[FlorianRappl]

Description

Import maps are a great feature that eventually will be standardized, see W3C spec.

They represent a potential solution to our "sharing dependencies w/o app shell governance" problem. Right now this problem can be solved with URLs, but this requires some work and has some problems.

Background

I've written a post about sharing dependencies in microfrontends. Obviously, using import maps would be easily possible in case of a standard.

After all, a pilet is still connected to the DOM and may introduce a new import map. Nevertheless, we need an (optional) polyfill and we may also want to come up with a very convenient way of declaring the dependency to URL mappings.

Discussion

How should we tackle this? One possible way is with a special importmaps.json file, e.g., in the root folder. As such it could follow the browser spec 1-1. What we could then do is a transformation within Parcel, similar to the externals, but instead of reaching to the app shell / shared dependencies, we reach for a centralized (but localized) import map. Not sure about the applicability though.

Questions:

• Support via the package.json ? (should be dedicated JSON file, right? - but maybe reference / override it)
• Support via the setup / Pilet API ? (I guess not, needed upfront)
• Support via new global ? (only the "manager" / polyfill)
• Support via Parcel ? (is definitely required / but we would need to build something I guess)

Remarks:

• Look at SystemJS implementation (understand how they do it)
• Proper fallback mechanism required if dependency not found / URL not available
• Async pilet evaluation may be required, which is already part of v0.10

[FlorianRappl]

This is connected to #19.

[FlorianRappl]

Landed in devel using parcel-plugin-import-maps.

[carvinlo]

Any examples with piral and pilet ?

[FlorianRappl]

Any examples with piral and pilet ?

Incoming on the docs with the 0.11 release!

I'll update the issue when docs are updated.

[carvinlo]

Oh, great ! Should I use webpack-external-import to support it in pilet ?

[FlorianRappl]

Should I use webpack-external-import to support it in pilet ?

Piral uses Parcel under the hood. If you want to use Piral's Webpack plugin then you can do it without our support (e.g., by using the module federation, but other ways are possible, too).

Our way goes via the parcel-plugin-import-maps package, which defines import maps and lets you share these. You don't need to install anything for this - its all prepared with 0.11.

See: https://github.com/FlorianRappl/parcel-plugin-import-maps (More infos on use in Piral will follow in our tutorials, specifically https://docs.piral.io/tutorials/15-share-dependencies#sharing-from-pilets).

[carvinlo]

Got it.