fix: exports on safari

Author: gregnr

apps/postgres-new/app/import/page.tsx

@@ -12,7 +12,6 @@ import {
 import { Button } from '~/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
 import { Progress } from '~/components/ui/progress'
-import '~/polyfills/readable-stream'
 
 import { useQueryClient } from '@tanstack/react-query'
 import { Semaphore } from 'async-mutex'

apps/postgres-new/next.config.mjs

@@ -1,6 +1,7 @@
 import { createRequire } from 'module'
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
+import webpack from 'webpack'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -17,6 +18,13 @@ const nextConfig = {
       },
     }
 
+    // Polyfill `ReadableStream`
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        ReadableStream: [join(import.meta.dirname, 'polyfills/readable-stream.ts'), 'default'],
+      })
+    )
+
     // See https://webpack.js.org/configuration/resolve/#resolvealias
     config.resolve.alias = {
       ...config.resolve.alias,

apps/postgres-new/package.json

@@ -87,6 +87,7 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.6",
     "tailwindcss-radix": "^3.0.3",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.2",
+    "webpack": "^5.95.0"
   }
 }

apps/postgres-new/polyfills/readable-stream.ts

@@ -1,6 +1,8 @@
 // `.from()` is expected by `@std/tar`
-;(ReadableStream as any).from ??= function <T>(iterator: Iterator<T> | AsyncIterator<T>) {
-  return new ReadableStream<T>({
+;(globalThis as any).ReadableStream.from ??= function <T>(
+  iterator: Iterator<T> | AsyncIterator<T>
+) {
+  return new globalThis.ReadableStream<T>({
     async pull(controller) {
       try {
         const { value, done } = await iterator.next()
@@ -16,8 +18,8 @@
   })
 }
 
-// Some browsers don't yet make `ReadableStream` async iterable (eg. Safari), so polyfill
-ReadableStream.prototype.values ??= function <T>({
+// Some browsers don't make `ReadableStream` async iterable (eg. Safari), so polyfill
+globalThis.ReadableStream.prototype.values ??= function <T>({
   preventCancel = false,
 } = {}): AsyncIterableIterator<T> {
   const reader = this.getReader()
@@ -50,4 +52,17 @@ ReadableStream.prototype.values ??= function <T>({
   }
 }
 
-ReadableStream.prototype[Symbol.asyncIterator] ??= ReadableStream.prototype.values
+globalThis.ReadableStream.prototype[Symbol.asyncIterator] ??=
+  globalThis.ReadableStream.prototype.values
+
+// @std/tar conditionally uses `ReadableStreamBYOBReader` which isn't supported in Safari,
+// so patch `ReadableStream`'s constructor to prevent using BYOB.
+// Webpack's `ProvidePlugin` replaces `ReadableStream` references with this patch
+export default class PatchedReadableStream<T> extends globalThis.ReadableStream<T> {
+  constructor(underlyingSource?: UnderlyingSource<T>, strategy?: QueuingStrategy<T>) {
+    if (underlyingSource?.type === 'bytes' && !('ReadableStreamBYOBReader' in globalThis)) {
+      underlyingSource.type = undefined
+    }
+    super(underlyingSource, strategy)
+  }
+}