fix: use file-saver instead of streamsaver

package.json

@@ -19,13 +19,13 @@
     "@tabler/icons-preact": "2.44.0",
     "@tanstack/table-core": "8.11.2",
     "dayjs": "1.11.10",
-    "preact": "10.19.3",
-    "streamsaver": "2.0.6"
+    "file-saver": "2.0.5",
+    "preact": "10.19.3"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.7.0",
+    "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
-    "@types/streamsaver": "^2.0.4",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.4.24",
     "postcss-prefix-selector": "^1.16.0",

src/utils/download.ts

@@ -1,4 +1,4 @@
-import streamSaver from 'streamsaver';
+import { saveAs } from 'file-saver';
 import createWriter from './zip-stream';
 import logger from './logger';
 
@@ -21,8 +21,12 @@ export async function zipStreamDownload(
   onProgress?: ProgressCallback<FileLike>,
   rateLimit = 1000,
 ) {
+  // NOTE: StreamSaver.js fails on sites with strict Content-Security-Policy (CSP) such as Twitter,
+  // since it uses iframe and service worker to download files. Use file-saver instead here.
+  // See: https://github.com/jimmywarting/StreamSaver.js/issues/203
+
   // The data written to this stream will be streamed to the user's browser as a file download.
-  const writableOutputStream = streamSaver.createWriteStream(zipFilename);
+  // const writableOutputStream = streamSaver.createWriteStream(zipFilename);
 
   let current = 0;
   const total = files.length;
@@ -60,7 +64,21 @@ export async function zipStreamDownload(
     },
   });
 
+  const chunks: any[] = [];
+  const writableOutputStream = new WritableStream({
+    write(chunk) {
+      chunks.push(chunk);
+    },
+    close() {
+      logger.info('Zip stream closed.');
+    },
+  });
+
   // Download the zip archive.
   logger.info(`Exporting to ZIP file: ${zipFilename}`);
-  return readableZipStream.pipeTo(writableOutputStream);
+  await readableZipStream.pipeTo(writableOutputStream);
+
+  const arrayBuffer = await new Blob(chunks).arrayBuffer();
+  const blob = new Blob([arrayBuffer]);
+  saveAs(blob, zipFilename);
 }

vite.config.ts

@@ -61,7 +61,9 @@ export default defineConfig({
           'https://cdn.jsdelivr.net/npm/@preact/signals-core@1.5.1/dist/signals-core.min.js',
           'https://cdn.jsdelivr.net/npm/@preact/signals@1.2.2/dist/signals.min.js',
           'https://cdn.jsdelivr.net/npm/@tanstack/table-core@8.11.2/build/umd/index.production.js',
-          'https://cdn.jsdelivr.net/npm/streamsaver@2.0.6/StreamSaver.min.js',
+          // We bundle FileSaver.js in the script since the UMD build is broken.
+          // See: https://github.com/eligrey/FileSaver.js/issues/500
+          // 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js',
         ],
       },
       build: {
@@ -71,7 +73,6 @@ export default defineConfig({
           'preact/hooks': 'preactHooks',
           '@preact/signals': 'preactSignals',
           '@tanstack/table-core': 'TableCore',
-          streamsaver: 'streamSaver',
         },
       },
     }),