From 7d6681990ab3d8918af9b20e53e0b763006f6dc4 Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Sun, 23 Oct 2022 18:05:29 -0500 Subject: [PATCH 1/2] fix usage of wasm in an appDir page file using the edge runtime --- packages/next/build/utils.ts | 9 ++- .../app-dir-edge-runtime-with-wasm/add.wasm | Bin 0 -> 126 bytes .../index.test.ts | 62 ++++++++++++++++++ 3 files changed, 70 insertions(+), 1 deletion(-) create mode 100755 test/production/app-dir-edge-runtime-with-wasm/add.wasm create mode 100644 test/production/app-dir-edge-runtime-with-wasm/index.test.ts diff --git a/packages/next/build/utils.ts b/packages/next/build/utils.ts index f30bd6143dc4659..3519628d9ee727d 100644 --- a/packages/next/build/utils.ts +++ b/packages/next/build/utils.ts @@ -52,6 +52,7 @@ import { loadRequireHook, overrideBuiltInReactPackages, } from './webpack/require-hook' +import { AssetBinding } from './webpack/loaders/get-module-build-info' loadRequireHook() if (process.env.NEXT_PREBUNDLED_REACT) { @@ -1259,7 +1260,13 @@ export async function isPageStatic({ const runtime = await getRuntimeContext({ paths: edgeInfo.files.map((file: string) => path.join(distDir, file)), env: edgeInfo.env, - edgeFunctionEntry: edgeInfo, + edgeFunctionEntry: { + ...edgeInfo, + wasm: (edgeInfo.wasm ?? []).map((binding: AssetBinding) => ({ + ...binding, + filePath: path.join(distDir, binding.filePath), + })), + }, name: edgeInfo.name, useCache: true, distDir, diff --git a/test/production/app-dir-edge-runtime-with-wasm/add.wasm b/test/production/app-dir-edge-runtime-with-wasm/add.wasm new file mode 100755 index 0000000000000000000000000000000000000000..f22496d0b6c87704a3844134af2a9fad47fa344c GIT binary patch literal 126 zcmY+)F%E)25CzcxcYuwog{_@8@C=+}7_*ZYlLaC+R?E>mnzU4}d9bw*08e2AMpjml z05&ZblC2Pz?kbhTw*8PQj>db_6)*Gq8<13=Zi_x_bz!fX?PKawmJlsxohJwTbJ%CZ I4Fg~44-%gmga7~l literal 0 HcmV?d00001 diff --git a/test/production/app-dir-edge-runtime-with-wasm/index.test.ts b/test/production/app-dir-edge-runtime-with-wasm/index.test.ts new file mode 100644 index 000000000000000..421adce61a0f148 --- /dev/null +++ b/test/production/app-dir-edge-runtime-with-wasm/index.test.ts @@ -0,0 +1,62 @@ +import path from 'path' +import { createNext, FileRef } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' +import { renderViaHTTP } from 'next-test-utils' + +const files = { + 'app/layout.tsx': ` + export default function AppLayout({ children }) { + return ( + + + WASM Import + + + {children} + + + ) + } + `, + 'app/page.tsx': ` + // @ts-expect-error + import wasm from '../wasm/add.wasm?module' + + console.log(wasm) + + export default function Page() { + return "index page" + } + + export const runtime = "experimental-edge" + `, + 'wasm/add.wasm': new FileRef(path.join(__dirname, 'add.wasm')), +} + +describe('app-dir edge runtime with wasm', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files, + dependencies: { + react: 'experimental', + 'react-dom': 'experimental', + typescript: 'latest', + '@types/react': 'latest', + '@types/node': 'latest', + }, + nextConfig: { + experimental: { + appDir: true, + }, + }, + }) + }) + afterAll(() => next.destroy()) + + it('should have built', async () => { + const html = await renderViaHTTP(next.url, '/') + expect(html).toContain('index page') + }) +}) From 62216732764f17cd5985f048cd893b4bc99d226b Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Wed, 26 Oct 2022 13:36:32 -0500 Subject: [PATCH 2/2] updates test per review --- .../index.test.ts | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/test/production/app-dir-edge-runtime-with-wasm/index.test.ts b/test/production/app-dir-edge-runtime-with-wasm/index.test.ts index 421adce61a0f148..c1f950aaf6e4968 100644 --- a/test/production/app-dir-edge-runtime-with-wasm/index.test.ts +++ b/test/production/app-dir-edge-runtime-with-wasm/index.test.ts @@ -4,7 +4,7 @@ import { NextInstance } from 'test/lib/next-modes/base' import { renderViaHTTP } from 'next-test-utils' const files = { - 'app/layout.tsx': ` + 'app/layout.jsx': ` export default function AppLayout({ children }) { return ( @@ -18,14 +18,18 @@ const files = { ) } `, - 'app/page.tsx': ` - // @ts-expect-error + 'app/page.jsx': ` import wasm from '../wasm/add.wasm?module' + const instance$ = WebAssembly.instantiate(wasm); - console.log(wasm) + async function addOne(a) { + const { exports } = await instance$; + return exports.add_one(a); + } - export default function Page() { - return "index page" + export default async function Page() { + const two = await addOne(1) + return \`1 + 1 is: $\{two}\` } export const runtime = "experimental-edge" @@ -42,9 +46,6 @@ describe('app-dir edge runtime with wasm', () => { dependencies: { react: 'experimental', 'react-dom': 'experimental', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', }, nextConfig: { experimental: { @@ -57,6 +58,6 @@ describe('app-dir edge runtime with wasm', () => { it('should have built', async () => { const html = await renderViaHTTP(next.url, '/') - expect(html).toContain('index page') + expect(html).toContain('1 + 1 is: 2') }) })