feat: Add ESM Import Maps support

.changeset/two-ducks-shave.md

@@ -0,0 +1,5 @@
+---
+'microbundle': minor
+---
+
+Support ESM Import Maps

package.json

@@ -104,6 +104,7 @@
 		"pretty-bytes": "^5.4.1",
 		"rollup": "^2.35.1",
 		"rollup-plugin-bundle-size": "^1.0.3",
+		"rollup-plugin-import-map": "^2.2.2",
 		"rollup-plugin-postcss": "^4.0.0",
 		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.29.0",

src/index.js

@@ -8,6 +8,7 @@ import glob from 'tiny-glob/sync';
 import autoprefixer from 'autoprefixer';
 import { rollup, watch } from 'rollup';
 import builtinModules from 'builtin-modules';
+import { rollupImportMapPlugin as importMap } from 'rollup-plugin-import-map';
 import resolveFrom from 'resolve-from';
 import commonjs from '@rollup/plugin-commonjs';
 import babel from '@rollup/plugin-babel';
@@ -439,6 +440,9 @@ function createConfig(options, entry, format, writeMeta) {
 
 			plugins: []
 				.concat(
+					(modern || format === 'es') &&
+						options['import-map'] &&
+						importMap(options['import-map']),
 					postcss({
 						plugins: [autoprefixer()],
 						autoModules: shouldCssModules(options),

src/prog.js

@@ -51,6 +51,11 @@ export default handler => {
 		.example('microbundle --define API_KEY=1234')
 		.option('--alias', `Map imports to different modules`)
 		.example('microbundle --alias react=preact')
+		.option(
+			'--import-map',
+			'Import ESM packages from a CDN, instead of including them in the ESM bundle',
+		)
+		.example('microbundle --import-map import-map.json')
 		.option('--compress', 'Compress output using Terser', null)
 		.option('--strict', 'Enforce undefined global context and add "use strict"')
 		.option('--name', 'Specify name exposed in UMD builds')

test/__snapshots__/index.test.js.snap

@@ -1679,6 +1679,33 @@ exports[`fixtures build esnext-ts with microbundle 6`] = `
 "
 `;
 
+exports[`fixtures build import-map with microbundle 1`] = `
+"Used script: microbundle -f modern --import-map import-map.json
+
+Directory tree:
+
+import-map
+  dist
+    import-map.modern.js
+    import-map.modern.js.map
+  import-map.json
+  index.js
+  package.json
+
+
+Build \\"importMap\\" to dist:
+119 B: import-map.modern.js.gz
+100 B: import-map.modern.js.br"
+`;
+
+exports[`fixtures build import-map with microbundle 2`] = `2`;
+
+exports[`fixtures build import-map with microbundle 3`] = `
+"import{getCLS as o,getFID as l,getLCP as e}from\\"https://unpkg.com/web-vitals?module\\";o(console.log),l(console.log),e(console.log);
+//# sourceMappingURL=import-map.modern.js.map
+"
+`;
+
 exports[`fixtures build inline-source-map with microbundle 1`] = `
 "Used script: microbundle --sourcemap inline
 

test/fixtures/import-map/import-map.json

@@ -0,0 +1,5 @@
+{
+	"imports": {
+		"web-vitals": "https://unpkg.com/web-vitals?module"
+	}
+}

test/fixtures/import-map/index.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-console */
+import { getLCP, getFID, getCLS } from 'web-vitals';
+
+getCLS(console.log);
+getFID(console.log);
+getLCP(console.log);

test/fixtures/import-map/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "import-map",
+  "scripts": {
+    "build": "microbundle -f modern --import-map import-map.json"
+  }
+}