Merge pull request #26 from myl7/web-next-example

Add web Next.js stream compress example
httptoolkit · Jul 3, 2023 · d2f7278 · d2f7278
2 parents 4779827 + 1439a56
commit d2f7278
Show file tree

Hide file tree

Showing 9 changed files with 1,087 additions and 0 deletions.
diff --git a/example/web-next-transformstream/.gitignore b/example/web-next-transformstream/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/example/web-next-transformstream/README.md b/example/web-next-transformstream/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/example/web-next-transformstream/app/layout.tsx b/example/web-next-transformstream/app/layout.tsx
@@ -0,0 +1,19 @@
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'TransformStream example',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="stylesheet" href="https://unpkg.com/mvp.css" />
+        <script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.min.js"></script>
+      </head>
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
diff --git a/example/web-next-transformstream/app/page.tsx b/example/web-next-transformstream/app/page.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import streamSaver from 'streamsaver'
+
+import { BrotliCompressTransformStream } from './utils'
+
+export default function Home() {
+  const brotli = (op: string) => async () => {
+    const brotliWasm = await (await import('brotli-wasm')).default
+    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)
+        break
+      case 'dec':
+        console.error('Not implemented')
+        break
+    }
+  }
+
+  return (
+    <main>
+      <h1>TransformStream example</h1>
+      <div>
+        <input type="file" id="file-input" />
+        <div>
+          <button onClick={brotli('enc')}>Compress</button>
+        </div>
+        <div>
+          <button disabled onClick={brotli('dec')}>
+            Decompress
+          </button>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/example/web-next-transformstream/app/utils.ts b/example/web-next-transformstream/app/utils.ts
@@ -0,0 +1,46 @@
+// The structure is from the MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/TransformStream
+
+import type { CompressStream, BrotliWasmType } from 'brotli-wasm'
+
+interface BrotliCompressTransformer extends Transformer<Uint8Array, Uint8Array> {
+  brotliWasm: BrotliWasmType
+  outputSize: number
+  stream: CompressStream
+}
+
+const brotliCompressTransformerBuilder: (
+  brotliWasm: BrotliWasmType,
+  outputSize: number,
+  quality?: number
+) => BrotliCompressTransformer = (brotliWasm, outputSize, quality) => ({
+  brotliWasm,
+  outputSize,
+  stream: new brotliWasm.CompressStream(quality),
+  start() {},
+  transform(chunk, controller) {
+    do {
+      const inputOffset = this.stream.last_input_offset()
+      const input = chunk.slice(inputOffset)
+      const output = this.stream.compress(input, this.outputSize)
+      controller.enqueue(output)
+    } while (this.stream.result() === brotliWasm.BrotliStreamResult.NeedsMoreOutput)
+    if (this.stream.result() !== brotliWasm.BrotliStreamResult.NeedsMoreInput) {
+      controller.error(`Brotli compression failed when transforming with error code ${this.stream.result()}`)
+    }
+  },
+  flush(controller) {
+    do {
+      const output = this.stream.compress(undefined, this.outputSize)
+      controller.enqueue(output)
+    } while (this.stream.result() === brotliWasm.BrotliStreamResult.NeedsMoreOutput)
+    if (this.stream.result() !== brotliWasm.BrotliStreamResult.ResultSuccess) {
+      controller.error(`Brotli compression failed when flushing with error code ${this.stream.result()}`)
+    }
+  },
+})
+
+export class BrotliCompressTransformStream extends TransformStream<Uint8Array, Uint8Array> {
+  constructor(brotliWasm: BrotliWasmType, outputSize: number, quality?: number) {
+    super(brotliCompressTransformerBuilder(brotliWasm, outputSize, quality))
+  }
+}
diff --git a/example/web-next-transformstream/next.config.js b/example/web-next-transformstream/next.config.js
@@ -0,0 +1,23 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+function withWebpack(nextConfig) {
+  return Object.assign({}, nextConfig, {
+    webpack(config) {
+      // For WASM
+      config.experiments = {
+        ...config.experiments,
+        asyncWebAssembly: true,
+      }
+
+      if (typeof nextConfig.webpack == 'function') {
+        return nextConfig.webpack(config, options)
+      }
+      return config
+    },
+  })
+}
+
+module.exports = withWebpack(nextConfig)