jimmywarting · erjonify · Nov 7, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/README.md b/README.md
@@ -36,14 +36,18 @@ Getting started
 ===============
 StreamSaver in it's simplest form
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/StreamSaver.min.js"></script>
-<script>
-  import streamSaver from 'streamsaver'
-  const streamSaver = require('streamsaver')
-  const streamSaver = window.streamSaver
+<script type="importmap">
+  {
+    "imports": {
+      "streamsaver/StreamSaver.js": "https://cdn.jsdelivr.net/npm/streamsaver@3/StreamSaver.min.js"
+    }
+  }
 </script>
-<script>
+<script type="module">
+  // either one works fine, the later one requires importmaps or a web bundler. 
+  import streamSaver from 'https://cdn.jsdelivr.net/npm/streamsaver@3/StreamSaver.min.js'
+  import streamSaver from 'streamsaver/StreamSaver.min.js'
+
   const uInt8 = new TextEncoder().encode('StreamSaver is awesome')
 
   // streamSaver.createWriteStream() returns a writable byte stream

diff --git a/StreamSaver.js b/StreamSaver.js
@@ -2,15 +2,6 @@
 
 /* global chrome location ReadableStream define MessageChannel TransformStream */
 
-;((name, definition) => {
-  typeof module !== 'undefined'
-    ? module.exports = definition()
-    : typeof define === 'function' && typeof define.amd === 'object'
-      ? define(definition)
-      : this[name] = definition()
-})('streamSaver', () => {
-  'use strict'
-
   const global = typeof window === 'object' ? window : this
   if (!global.HTMLElement) console.warn('streamsaver is meant to run on browsers main thread')
 
@@ -313,5 +304,5 @@
     }, opts.writableStrategy)
   }
 
-  return streamSaver
-})
+ export default streamSaver
+
diff --git a/examples/fetch.html b/examples/fetch.html
@@ -7,9 +7,9 @@
   </head>
   <body>
     <button id="$start">Start</button>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-    <script src="../StreamSaver.js"></script>
-    <script>
+
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
       $start.onclick = () => {
         const url = 'https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4'
         const fileStream = streamSaver.createWriteStream('cat.mp4')

diff --git a/examples/media-stream.html b/examples/media-stream.html
@@ -21,10 +21,9 @@
     <button id="$close">Close</button>
 
     <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/jimmywarting/browser-su@master/build/permissions.js"></script>
-    <script src="../StreamSaver.js"></script>
-    <script>
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
       $vid.disabled = $aud.disabled = $start.disabled = !window.isSecureContext
       $start.onclick = async () => {
         const permission = { name: 'userMedia', video: $vid.checked, audio: $aud.checked }

diff --git a/examples/plain-text.html b/examples/plain-text.html
@@ -7,8 +7,6 @@
   </head>
   <body>
     <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-    <script src="../StreamSaver.js"></script>
 
     <p>1) Set a filename</p>
     <input type="text" id="$filename" value="sample.txt">
@@ -30,7 +28,9 @@
     <button disabled id="$abort">Abort</button>
     <button disabled id="$close">Close</button>
 
-    <script>
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
+
       var Lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Pellentesque gravida condimentum metus et porttitor. Curabitur
       pharetra vestibulum egestas. Pellentesque quis tortor id ligula

diff --git a/examples/saving-a-blob.html b/examples/saving-a-blob.html
@@ -8,11 +8,8 @@
   <body>
     <button id="$start">Start</button>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-    <!-- includes blob.stream() polyfill -->
-    <script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
-    <script src="../StreamSaver.js"></script>
-    <script>
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
       // Saving a blob is as simple as the fetch example, you just get the
       // readableStream from the blob by calling blob.stream() to get a
       // readableStream and then pipe it

diff --git a/examples/saving-multiple-files.html b/examples/saving-multiple-files.html
@@ -8,16 +8,11 @@
   <body>
     <button id="$start">Start</button>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-
-    <!--
-    includes blob.stream() polyfill
-    while Also making File constructor work in some browser that don't support it
-    -->
-    <script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
-    <script src="../StreamSaver.js"></script>
     <script src="zip-stream.js"></script>
-    <script>
+
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
+
       $start.onclick = () => {
         const fileStream = streamSaver.createWriteStream('archive.zip')
 

diff --git a/examples/torrent.html b/examples/torrent.html
@@ -14,9 +14,8 @@
     <button id="$start">Start</button>
 
     <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-    <script src="../StreamSaver.js"></script>
-    <script>
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
 
       function size (bytes, precision) {
         if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';

diff --git a/examples/video-stream.html b/examples/video-stream.html
diff --git a/examples/write-slowly.html b/examples/write-slowly.html
@@ -43,9 +43,9 @@
     </label>
 
     <script src='https://code.responsivevoice.org/responsivevoice.js'></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ponyfill.min.js"></script>
-    <script src="../StreamSaver.js"></script>
-    <script>
+    <script type="module">
+      import streamSaver from "../StreamSaver.js"
+      
       if ('isSecureContext' in window) {
         $ifr.checked = $sec.checked = isSecureContext
         $pop.checked = !isSecureContext

diff --git a/package.json b/package.json
@@ -29,5 +29,9 @@
         "type": "github",
         "url": "https://github.com/sponsors/jimmywarting"
       }
-    ]
+    ],
+    "type": "module",
+    "exports": {
+        "./*.js": "./*.js"
+    }
 }