test: add fixture using wasm in middleware in src directory mode

Author: pieh

tests/fixtures/wasm-src/next.config.js

@@ -0,0 +1,30 @@
+const { platform } = require('process')
+const fsPromises = require('fs/promises')
+
+// Next.js uses `fs.promises.copyFile` to copy files from `.next`to the `.next/standalone` directory
+// It tries copying the same file twice in parallel. Unix is fine with that, but Windows fails
+// with "Resource busy or locked", failing the build.
+// We work around this by memoizing the copy operation, so that the second copy is a no-op.
+// Tracked in TODO: report to Next.js folks
+if (platform === 'win32') {
+  const copies = new Map()
+
+  const originalCopy = fsPromises.copyFile
+  fsPromises.copyFile = (src, dest, mode) => {
+    const key = `${dest}:${src}`
+    const existingCopy = copies.get(key)
+    if (existingCopy) return existingCopy
+
+    const copy = originalCopy(src, dest, mode)
+    copies.set(key, copy)
+    return copy
+  }
+}
+
+/** @type {import('next').NextConfig} */
+module.exports = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}

tests/fixtures/wasm-src/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "og-api",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "next build",
+    "dev": "next dev",
+    "build": "next build"
+  },
+  "dependencies": {
+    "@vercel/og": "latest",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

tests/fixtures/wasm-src/src/add.wasm

@@ -0,0 +1,8 @@
+import { ImageResponse } from '@vercel/og'
+
+export async function GET() {
+  return new ImageResponse(<div>hi</div>, {
+    width: 1200,
+    height: 630,
+  })
+}

tests/fixtures/wasm-src/src/app/og-node/route.js

@@ -0,0 +1,10 @@
+import { ImageResponse } from '@vercel/og'
+
+export async function GET() {
+  return new ImageResponse(<div>hi</div>, {
+    width: 1200,
+    height: 630,
+  })
+}
+
+export const runtime = 'edge'

tests/fixtures/wasm-src/src/app/og/route.js

@@ -0,0 +1,16 @@
+import wasm from './add.wasm?module'
+const instance$ = WebAssembly.instantiate(wasm)
+
+async function increment(a) {
+  const { instance } = await instance$
+  return instance.exports.add_one(a)
+}
+export default async function middleware(request) {
+  const input = Number(request.nextUrl.searchParams.get('input')) || 1
+  const value = await increment(input)
+  return new Response(null, { headers: { data: JSON.stringify({ input, value }) } })
+}
+
+export const config = {
+  matcher: '/wasm',
+}

tests/fixtures/wasm-src/src/middleware.js

@@ -0,0 +1,22 @@
+// /pages/api/og.jsx
+import { ImageResponse } from '@vercel/og'
+
+export default function () {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
+        }}
+      >
+        Hello!
+      </div>
+    ),
+  )
+}

tests/fixtures/wasm-src/src/pages/api/og-wrong-runtime.js

@@ -0,0 +1,26 @@
+// /pages/api/og.jsx
+import { ImageResponse } from '@vercel/og'
+
+export const config = {
+  runtime: 'edge',
+}
+
+export default function () {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
+        }}
+      >
+        Hello!
+      </div>
+    ),
+  )
+}

tests/fixtures/wasm-src/src/pages/api/og.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}

tests/fixtures/wasm-src/src/pages/index.js

@@ -21,7 +21,10 @@ beforeEach<FixtureTestContext>(async (ctx) => {
   await startMockBlobStore(ctx)
 })
 
-describe('WASM', () => {
+describe.each([
+  { fixture: 'wasm', edgeHandlerFunction: '___netlify-edge-handler-middleware' },
+  { fixture: 'wasm-src', edgeHandlerFunction: '___netlify-edge-handler-src-middleware' },
+])('$fixture', ({ fixture, edgeHandlerFunction }) => {
   beforeEach<FixtureTestContext>(async (ctx) => {
     // set for each test a new deployID and siteID
     ctx.deployID = generateRandomObjectID()
@@ -33,7 +36,7 @@ describe('WASM', () => {
 
     await startMockBlobStore(ctx)
 
-    await createFixture('wasm', ctx)
+    await createFixture(fixture, ctx)
     await runPlugin(ctx)
   })
 
@@ -55,10 +58,10 @@ describe('WASM', () => {
     expect(ogNode.headers['content-type']).toBe('image/png')
   })
 
-  test<FixtureTestContext>('should work in middleware', async (ctx) => {
+  test.only<FixtureTestContext>('should work in middleware', async (ctx) => {
     const origin = new LocalServer()
     const response = await invokeEdgeFunction(ctx, {
-      functions: ['___netlify-edge-handler-middleware'],
+      functions: [edgeHandlerFunction],
       origin,
       url: '/wasm?input=3',
     })