web
web copied to clipboard
modernweb-dev
[@web/dev-server-import-maps] Support for external import maps
I've used https://github.com/jsenv/importmap-node-module to generate import map for my project.
After that I've tried to use the generated project.importmap file:
<html>
<head>
+ <script type="importmap" src="./project.importmap"></script>
</head>
<body>
<script type="module">
import lodash from "lodash"
</script>
</body>
</html>
I've used http-server npm package to serve my project "as is" without any transformations. But I get the External import maps are not yet supported. error in the latest version of Chrome.
So I've tried to use the @web/dev-server with @web/dev-server-import-maps plugin, but get the Import maps with a "src" attribute are not yet supported. error. See https://github.com/modernweb-dev/web/blob/master/packages/dev-server-import-maps/src/importMapsPlugin.ts#L122.
Since import maps are now supported natively cross-browser, the need for the @web/dev-server-import-maps plugin is reduced. But if it supported external import maps, its value would immediately increase.
As far as I understand, all that's needed is to inline the content of the external import map file into <script type="importmap"></script> tag inside HTML.
I've quickly patched the https://github.com/modernweb-dev/web/blob/master/packages/dev-server-import-maps/src/importMapsPlugin.ts#L121-L123 file, and it works!
if (getAttribute(importMapScript, 'src')) {
- throw new Error('Import maps with a "src" attribute are not yet supported.');
+ const importMapPath = getAttribute(importMapScript, 'src');
+ const content = fs.readFileSync(importMapPath, 'utf8');
+ setTextContent(importMapScript, content);
+ removeAttribute(importMapScript, 'src');
}
There might be a good reasons not to support src.
From MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
The src, async, nomodule, defer, crossorigin, integrity, and referrerpolicy attributes must not be specified.
Pay attention that src is specifically mention as not allowed.
At the same time, in the proposal I see the src being described in https://github.com/wicg/import-maps#import-map-processing
You can install an import map for your application using a
Is there actually a consensus about this feature?
In general we try not to add non-standard features, at least without a good confidence that they will become a standard and got enough support from browser vendors and other stakeholders. In this case I can imagine the src involves an extra HTTP call which must be a blocking request due to how essential this information is for the module resolution, so maybe that's why it's not implemented natively.
See https://github.com/WICG/import-maps/issues/235. @domenic wrote that external import maps will be implemented in Chromium, but can't give an ETA.
Import maps can be very large and generated by third-party tools. Inline them manually into HTML is a poor DX.
Thanks for sharing this link, it does shed some light on this. I quickly scrolled through and didn't find a confirmation about other browsers vendors, except Chrome. There is a link to a Mozilla/gecko repo where it's also raising an exception for external import maps.
I have a bad feeling about the future of this feature given it's taking already more than 3 years for Chrome and others to implement it, so I'd rather not run ahead of the locomotive.
Not sure if we had a practice before in Modern Web with experimental feature plugins, maybe that can be a sort of in the middle solution. Curious if @thepassle @Westbrook @koddsson have an idea?
You can also make your own plugin meanwhile and publish it yourself.