Add decompress part to web Next.js stream example

Author: myl7

example/web-next-transformstream/app/page.tsx

@@ -2,26 +2,32 @@
 
 import streamSaver from 'streamsaver'
 
-import { BrotliCompressTransformStream } from './utils'
+import { BrotliCompressTransformStream, BrotliDecompressTransformStream } from './utils'
 
 export default function Home() {
   const brotli = (op: string) => async () => {
     const brotliWasm = await (await import('brotli-wasm')).default
+    const fileInput = document.querySelector('#file-input') as HTMLInputElement
+    const file = fileInput.files![0]
+    if (!file) throw new Error('No file selected')
+    const inputStream = file.stream()
+    let transformStream = null
+    let outputFilename = null
     switch (op) {
       case 'enc':
-        const fileInput = document.querySelector('#file-input') as HTMLInputElement
-        const file = fileInput.files![0]
-        if (!file) throw new Error('No file selected')
-        const inputStream = file.stream()
-        const outputStream = streamSaver.createWriteStream(file.name + '.br')
         // 1KB chunks
-        const transformStream = new BrotliCompressTransformStream(brotliWasm, 1024)
-        inputStream.pipeThrough(transformStream).pipeTo(outputStream)
+        transformStream = new BrotliCompressTransformStream(brotliWasm, 1024)
+        outputFilename = file.name + '.br'
         break
       case 'dec':
-        console.error('Not implemented')
+        transformStream = new BrotliDecompressTransformStream(brotliWasm, 1024)
+        outputFilename = file.name.match(/\.br$/) ? file.name.slice(0, -3) : file.name + '.debr'
         break
+      default:
+        throw new Error('Invalid operation')
     }
+    const outputStream = streamSaver.createWriteStream(outputFilename)
+    inputStream.pipeThrough(transformStream).pipeTo(outputStream)
   }
 
   return (
@@ -33,9 +39,7 @@ export default function Home() {
           <button onClick={brotli('enc')}>Compress</button>
         </div>
         <div>
-          <button disabled onClick={brotli('dec')}>
-            Decompress
-          </button>
+          <button onClick={brotli('dec')}>Decompress</button>
         </div>
       </div>
     </main>

example/web-next-transformstream/app/utils.ts

@@ -1,6 +1,6 @@
 // The structure is from the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/TransformStream
 
-import type { CompressStream, BrotliWasmType } from 'brotli-wasm'
+import type { CompressStream, BrotliWasmType, DecompressStream } from 'brotli-wasm'
 
 interface BrotliCompressTransformer extends Transformer<Uint8Array, Uint8Array> {
   brotliWasm: BrotliWasmType
@@ -49,3 +49,41 @@ export class BrotliCompressTransformStream extends TransformStream<Uint8Array, U
     super(brotliCompressTransformerBuilder(brotliWasm, outputSize, quality))
   }
 }
+
+interface BrotliDecompressTransformer extends Transformer<Uint8Array, Uint8Array> {
+  brotliWasm: BrotliWasmType
+  outputSize: number
+  stream: DecompressStream
+}
+
+const brotliDecompressTransformerBuilder: (
+  brotliWasm: BrotliWasmType,
+  outputSize: number
+) => BrotliDecompressTransformer = (brotliWasm, outputSize) => ({
+  brotliWasm,
+  outputSize,
+  stream: new brotliWasm.DecompressStream(),
+  start() {},
+  transform(chunk, controller) {
+    do {
+      const inputOffset = this.stream.last_input_offset()
+      const input = chunk.slice(inputOffset)
+      const output = this.stream.decompress(input, this.outputSize)
+      controller.enqueue(output)
+    } while (this.stream.result() === brotliWasm.BrotliStreamResult.NeedsMoreOutput)
+    if (
+      this.stream.result() !== brotliWasm.BrotliStreamResult.NeedsMoreInput &&
+      this.stream.result() !== brotliWasm.BrotliStreamResult.ResultSuccess
+    ) {
+      controller.error(`Brotli decompression failed when transforming with error code ${this.stream.result()}`)
+    }
+  },
+  // Brotli decompression does not need flushing
+  flush() {},
+})
+
+export class BrotliDecompressTransformStream extends TransformStream<Uint8Array, Uint8Array> {
+  constructor(brotliWasm: BrotliWasmType, outputSize: number) {
+    super(brotliDecompressTransformerBuilder(brotliWasm, outputSize))
+  }
+}