Merge pull request #36 from heidemn/fix-import-for-importmap

pimterry · web-flow · commit 63ffc7273b4e · 2024-06-03T17:27:04.000+01:00
Add .js file extension to import, to make importmap work out of the box
diff --git a/README.md b/README.md
@@ -63,11 +63,45 @@ console.log(textDecoder.decode(decompressedData)); // Prints 'some input'
 
 You can also load it from a CDN like so:
 ```javascript
-let brotli = await import("https://unpkg.com/brotli-wasm@1.3.1/index.web.js?module").then(m => m.default);
+const brotli = await import("https://unpkg.com/brotli-wasm@3.0.0/index.web.js?module").then(m => m.default);
 ```
 
 The package itself has no runtime dependencies, although if you prefer using `Buffer` over using `TextEncoder/TextDecoder` you may want a [browser Buffer polyfill](https://www.npmjs.com/package/browserify-zlib).
 
+##### Using an importmap
+
+If you've installed `brotli-wasm` as an NPM package, you can load it from your `node_modules` subfolder:
+
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+    <head></head>
+    <body>
+        <script type="importmap">
+            {
+                "imports": {
+                    "brotli-wasm": "/node_modules/brotli-wasm/index.web.js"
+                }
+            }
+        </script>
+        <script type="module" src="/main.js"></script>
+    </body>
+</html>
+```
+
+```javascript
+// main.js
+import brotliPromise from 'brotli-wasm';
+const brotli = await brotliPromise;
+
+const input = 'some input';
+const uncompressedData = new TextEncoder().encode(input);
+const compressedData = brotli.compress(uncompressedData);
+const decompressedData = brotli.decompress(compressedData);
+console.log(new TextDecoder().decode(decompressedData)); // Prints 'some input'
+```
+
 #### In browser with streams:
 
 ```javascript
diff --git a/index.web.js b/index.web.js
@@ -1,5 +1,8 @@
 // In pure ESM web bundles, you must call init() and wait for the promised result before you can
 // call any module methods. To make that as easy as possible, this module directly exposes the
 // init() promise result, and returns the methods at the end of the promise.
-import init, * as brotliWasm from "./pkg.web/brotli_wasm";
+// https://github.com/WICG/import-maps?tab=readme-ov-file#extension-less-imports
+// For usage with an importmap, it's convenient to add the ".js" extension here, because browsers
+// don't try to guess the file extension.
+import init, * as brotliWasm from "./pkg.web/brotli_wasm.js";
 export default init().then(() => brotliWasm);
