feat: add support for WebAssembly in edge runtime (#1676)

* feat: add wasm support

* chore: snapidoo

* chore: log

* chore: log fetch wrapper

* fix: allow acess to edge-chunks

* chore: make example more dynamic

* chore: add image debug, remove logs

* chore: remove debug

* fix: inlline assets

* chore: nicer example

* chore: error handling

* chore: remove log and format

* chore: add e2e test

* chore: fix test

* chore: re-enable dev check in edge function

* chore: change from review

* chore: update snapshots

* fix: correct content-length in middleware

Co-authored-by: Nick Taylor <[email protected]>

Author: ascorbic

cypress/integration/default/wasm.spec.ts

@@ -0,0 +1,8 @@
+describe('WebAssembly support', () => {
+  it('generates an API route with wasm chunks', () => {
+    cy.request('/api/og?username=netlify').then((response) => {
+      // Failure state is zero-length body
+      expect(response.body).to.have.length.above(10000)
+    })
+  })
+})

demos/default/next.config.js

@@ -75,14 +75,14 @@ module.exports = {
     remotePatterns: [
       {
         hostname: '*.imgur.com',
-      }
-    ]
+      },
+    ],
   },
   // https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles-sass-test')],
   },
   experimental: {
     optimizeCss: false,
-  }
+  },
 }

demos/default/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@reach/dialog": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
+    "@vercel/og": "^0.0.15",
     "next": "^12.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

demos/default/pages/api/og.tsx

@@ -0,0 +1,48 @@
+import { ImageResponse } from '@vercel/og'
+import { NextRequest } from 'next/server'
+
+export const config = {
+  runtime: 'experimental-edge',
+}
+
+export default async function handler(req: NextRequest) {
+  const { searchParams } = req.nextUrl
+  const username = searchParams.get('username')
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: 'flex',
+          fontSize: 60,
+          color: 'black',
+          background: '#f6f6f6',
+          width: '100%',
+          height: '100%',
+          paddingTop: 50,
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          width="256"
+          height="256"
+          src={`https://github.com/${username || 'netlify'}.png`}
+          style={{
+            borderRadius: 128,
+          }}
+        />
+        {username ? <p>github.com/{username}</p> : <p>Visit with &quot;?username=netlify&quot;</p>}
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      headers: {
+        // By default this has an immutable cache, but this is for testing
+        'Cache-Control': 'public, max-age=0, must-revalidate',
+      },
+    },
+  )
+}