Baldur Bjarnason

Did you know that import maps can be rendered client-side? (And links)

– Baldur Bjarnason

Import maps have been billed as a way to get npm-style import labels (import {thing} from "dependency";) in the browser without bundling or transpiling your code.

They do that, but they also do much more than what you’re used to with npm and a package.json file.

When you’re using Node and bundling your code, usually the “labels” are defined in the package.json file that’s modified by the npm command line tool. You don’t mess with it unless you’re asking for trouble. The map between the package name and the import name is set in stone and then committed into version control.

You can make this more dynamic with experimental loaders and various other shenanigans, but those aren’t easy or accessible to most developers.

But did you know that the only limitation on import maps in the browser is that they have to be “baked” and in the DOM before the first JavaScript module?

This might not sound too useful until you remember that, y’know, browsers still support non-module JavaScript.

This means it’s possible to modify the import map in the browser using client-side JavaScript, in response to the features you detect, settings you retrieve (using localStorage, for example), as long as you do it before any module-based JavaScript is loaded.

You can remap your entire module tree based on what you discover, dynamically, on load.

If this script element is the first one in your HTML…

<script>
  const importMap = {
    imports: {
      // If the browser supports native compression streams we
      // map the `compress` label to `compress-native.js`
      // otherwise we map to a larger script that uses fflate
      compress:
        "CompressionStream" in window
          ? "./compress-native.js"
          : "./compress-fflate.js",
    },
  };

  const importmap = document.createElement("script");
  importmap.type = "importmap";
  importmap.textContent = JSON.stringify(importMap);
  document.currentScript.after(importmap);
</script>

… then every module in your project that imports the module label compress will either import compress-native.js or compress-fflate.js based on what the browser supports.

(I first saw this done in a blog post by Ayooluwa Isaiah.)

Import maps have the potential to change everything about how we structure our web development projects, which is why I’ve been very excited to put together a course that should help introduce you to Import Maps and test-driven development, because that’s an area where I think they can add value – right now – before you wait for the technology to be more broadly supported.

The course will be launched on Black Friday and will be available until the end oc Cyber Monday as a part of a massively discounted bundle that includes the course, both of my existing ebooks, and some bonuses.

You can sign up to be notified when the bundle is available.