fix: handle TsTypeAssertion that conflicts with JSX handling for tarball bundling (#7049)

Author: pieh

.github/workflows/workflow.yml

@@ -53,12 +53,14 @@ jobs:
       matrix:
         os: [ubuntu-24.04, macos-14, windows-2025]
         node-version: ['22']
-        # Must include the minimum deno version from the `DENO_VERSION_RANGE` constant in `node/bridge.ts`.
-        deno-version: ['v2.4.2']
+        # Maximum supported deno version from the `DENO_VERSION_RANGE` constant in `node/bridge.ts`.
+        # If there is no upper band - this should be set to whatever is the latest deno version at the time of updating this workflow.
+        deno-version: ['v2.8.0']
         include:
           - os: ubuntu-24.04
             # Earliest supported version
             node-version: '18.14.0'
+            # Minimum supported deno version from the `DENO_VERSION_RANGE` constant in `node/bridge.ts`.
             deno-version: 'v2.4.2'
       fail-fast: false
     steps:

packages/edge-bundler/node/bundler.test.ts

@@ -108,9 +108,12 @@ test('Adds a custom error property to user errors during bundling', async () =>
     const messageBeforeStack = (error as BundleError).message
     expect(
       messageBeforeStack
-        .replace(/file:\/\/\/(.*?\/)(build\/packages\/edge-bundler\/deno\/vendor\/deno\.land\/x\/eszip.*)/, 'file://$2')
         // eslint-disable-next-line no-control-regex
-        .replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''),
+        .replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')
+        .replace(
+          /file:\/\/\/(.*?\/)(build\/packages\/edge-bundler\/deno\/vendor\/deno\.land\/x\/eszip.*)/,
+          'file://$2',
+        ),
     ).toMatchSnapshot()
     expect((error as BundleError).customErrorInfo).toEqual({
       location: {
@@ -1309,6 +1312,63 @@ describe.skipIf(lt(denoVersion, '2.4.2'))(
 
       await cleanup()
     })
+
+    test('Importing a remote module that imports a WebAssembly binary (deno_dom)', async () => {
+      // Deno <2.6 vendors `.wasm` imports under a `.d.mts` extension even though
+      // the content is the raw WASM binary. The rewriter must detect this by
+      // magic bytes and copy the file through untouched instead of attempting
+      // to parse it as UTF-8 source.
+      const { basePath, cleanup, distPath } = await useFixture('imports_deno_dom_wasm', { copyDirectory: true })
+      const declarations: Declaration[] = [
+        {
+          function: 'func1',
+          path: '/func1',
+        },
+      ]
+      await bundle([join(basePath, 'netlify/edge-functions')], distPath, declarations, {
+        basePath,
+        featureFlags: {
+          edge_bundler_generate_tarball: true,
+        },
+      })
+      const expectedOutput = {
+        func1: 'hello from deno_dom',
+      }
+
+      const manifestFile = await readFile(resolve(distPath, 'manifest.json'), 'utf8')
+      const manifest = JSON.parse(manifestFile)
+
+      const tarballPath = join(distPath, manifest.bundles[0].asset)
+      const tarballResult = await runTarball(tarballPath)
+      expect(tarballResult).toStrictEqual(expectedOutput)
+
+      const entries: string[] = []
+      await tar.list({
+        file: tarballPath,
+        onReadEntry: (entry) => {
+          entries.push(entry.path)
+        },
+      })
+
+      expect(entries).toContain('./___netlify-edge-functions.json')
+      expect(entries).toContain('./deno.json')
+      expect(entries).toContain('./func1.ts')
+
+      // The vendored deno_dom WASM payload must be present in the tarball.
+      // Deno <2.6 vendors `.wasm` imports under a `.d.mts` extension (with a
+      // content-hash suffix); 2.6+ keeps the original `.wasm` extension.
+      const denoDomVendorPrefix = './vendor/deno.land/x/deno_dom@v0.1.56/build/deno-wasm/'
+      const expectedWasmEntry = lt(denoVersion, '2.6.0')
+        ? `${denoDomVendorPrefix}#deno-wasm_bg.wasm_d2792.d.mts`
+        : `${denoDomVendorPrefix}deno-wasm_bg.wasm`
+      expect(entries).toContain(expectedWasmEntry)
+
+      const eszipPath = join(distPath, manifest.bundles[1].asset)
+      const eszipResult = await runESZIP(eszipPath)
+      expect(eszipResult).toStrictEqual(expectedOutput)
+
+      await cleanup()
+    })
   },
-  10_000,
+  50_000,
 )

packages/edge-bundler/node/formats/tarball.ts

@@ -269,19 +269,61 @@ async function getRequiredSourceFiles(
   return localFiles
 }
 
+// WebAssembly binary magic bytes: `\0asm` (0x00 0x61 0x73 0x6d).
+const WASM_MAGIC = Buffer.from([0x00, 0x61, 0x73, 0x6d])
+
+/**
+ * Detects whether a file is a raw WebAssembly module by its magic bytes.
+ * Deno <2.6 vendors imported `.wasm` modules under a `.d.mts` extension even
+ * though the content is the raw WASM binary, so we cannot rely on extension
+ * alone to decide whether a file is safe to read as UTF-8 and rewrite.
+ */
+async function isWasm(sourceFile: string): Promise<boolean> {
+  const fd = await fs.open(sourceFile, 'r')
+  try {
+    const buf = Buffer.alloc(WASM_MAGIC.length)
+    const { bytesRead } = await fd.read(buf, 0, buf.length, 0)
+    return bytesRead === WASM_MAGIC.length && buf.equals(WASM_MAGIC)
+  } finally {
+    await fd.close()
+  }
+}
+
+/**
+ * Decides whether a source file should be parsed and rewritten. Cheap extension
+ * check first; only if it passes do we open the file to rule out raw WebAssembly
+ * binaries (Deno <2.6 vendors `.wasm` imports under `.d.mts`) — reading those
+ * as UTF-8 would corrupt the binary on round-trip.
+ */
+async function shouldRewrite(sourceFile: string): Promise<boolean> {
+  if (!REWRITABLE_EXTENSIONS.has(path.extname(sourceFile))) {
+    return false
+  }
+
+  if (await isWasm(sourceFile)) {
+    return false
+  }
+
+  return true
+}
+
 /**
  * Rewrites import assert into import with in the bundle directory
  * Defaults to copying the file in its current form
  */
 export async function rewriteImportAssertions(sourceFile: string, destPath: string): Promise<void> {
-  if (!REWRITABLE_EXTENSIONS.has(path.extname(sourceFile))) {
+  if (!(await shouldRewrite(sourceFile))) {
     if (sourceFile !== destPath) {
       await fs.copyFile(sourceFile, destPath)
     }
     return
   }
 
-  const source = await fs.readFile(sourceFile, 'utf-8')
-  const modified = rewriteSourceImportAssertions(source)
-  await fs.writeFile(destPath, modified)
+  try {
+    const source = await fs.readFile(sourceFile, 'utf-8')
+    const modified = rewriteSourceImportAssertions(source)
+    await fs.writeFile(destPath, modified)
+  } catch (error) {
+    throw new Error(`Failed to rewrite import assertions in ${sourceFile}`, { cause: error })
+  }
 }

packages/edge-bundler/node/utils/import_attributes.test.ts

@@ -153,6 +153,30 @@ import data2 from './data.json' with { type: 'json' };
     expect(result).toEqual(expectedResult)
   })
 
+  test('handles TsTypeAssertion (handling of syntax not supported in JSX mode)', () => {
+    // edge case, because "<Params> inputs" is valid JSX syntax (a component with name "Params" and children "inputs"),
+    // but also valid TypeScript syntax (type assertion). In this case, the acorn-jsx parser will parse it as JSX,
+    // but then throw an error when it encounters the "assert" keyword in the import assertion.
+    // We want to make sure we can handle this case and still rewrite the import assertions correctly.
+    const source = `
+import data3 from './data.json' assert { type: 'json' };
+const params = <Params> inputs;
+const [,foo]=[1,2]
+import data2 from './data.json' assert { type: 'json' };
+`
+    const expectedResult = `
+import data3 from './data.json' with { type: 'json' };
+const params = <Params> inputs;
+const [,foo]=[1,2]
+import data2 from './data.json' with { type: 'json' };
+`
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const result = rewriteSourceImportAssertions(source)
+
+    expect(result).toEqual(expectedResult)
+  })
+
   test('complex JSX import assertion case', () => {
     const source = `<><Component prop={() => import('./foo.json', { assert: { type: 'json' } })} /></>`
     const expectedResult = `<><Component prop={() => import('./foo.json', { with: { type: 'json' } })} /></>`

packages/edge-bundler/node/utils/import_attributes.ts

@@ -1,8 +1,35 @@
 import { Parser, Node } from 'acorn'
-import type { ExportAllDeclaration, ExportNamedDeclaration, ImportDeclaration, ImportExpression } from 'acorn'
+import type {
+  ExportAllDeclaration,
+  ExportNamedDeclaration,
+  ImportDeclaration,
+  ImportExpression,
+  Options as AcornOptions,
+  Program,
+} from 'acorn'
 import { tsPlugin } from '@sveltejs/acorn-typescript'
 
-const acorn = Parser.extend(tsPlugin({ jsx: true }))
+const acornNoJSX = Parser.extend(tsPlugin({ jsx: false }))
+const acornJSX = Parser.extend(tsPlugin({ jsx: true }))
+
+const parseOptions: AcornOptions = {
+  ecmaVersion: 'latest',
+  sourceType: 'module',
+  locations: true,
+}
+
+const parseAST = (source: string): Program => {
+  try {
+    return acornJSX.parse(source, parseOptions)
+  } catch (error) {
+    // for non-jsx typescript casting to type via "<type> value" (normally done with "value as type") will throw an "Unexpected token" error in acorn-jsx,
+    // but is valid syntax in TypeScript. In this case, we can retry parsing with the non-jsx parser.
+    if (error instanceof SyntaxError) {
+      return acornNoJSX.parse(source, parseOptions)
+    }
+    throw error
+  }
+}
 
 /**
  * Given source code rewrites import assert into import with
@@ -15,11 +42,7 @@ export function rewriteSourceImportAssertions(source: string): string {
   let modified = source
 
   try {
-    const parsedAST = acorn.parse(source, {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      locations: true,
-    })
+    const parsedAST = parseAST(source)
 
     const statements = collectImportAssertions(source, parsedAST.body)
 

packages/edge-bundler/test/fixtures/imports_deno_dom_wasm/netlify/edge-functions/func1.ts

@@ -0,0 +1,11 @@
+import { DOMParser } from 'https://deno.land/x/deno_dom@v0.1.56/deno-dom-wasm.ts'
+
+export default async () => {
+  const doc = new DOMParser().parseFromString('<h1>hello from deno_dom</h1>', 'text/html')
+  const text = doc?.querySelector('h1')?.textContent ?? 'no heading'
+  return new Response(text)
+}
+
+export const config = {
+  path: '/func1',
+}

packages/edge-bundler/test/util.ts

@@ -65,16 +65,18 @@ const inspectESZIPFunction = (path: string) => `
 `
 
 const inspectTarballFunction = () => `
-import path from "node:path";
-import { pathToFileURL } from "node:url";
 import manifest from "./___netlify-edge-functions.json" with { type: "json" };
 
 const responses = {};
 
 for (const functionName in manifest.functions) {
   const req = new Request("https://test.netlify");
-  const entrypoint = path.resolve(manifest.functions[functionName]);
-  const func = await import(pathToFileURL(entrypoint))
+  // Import via a relative specifier so Deno resolves the module URL itself,
+  // keeping its encoding consistent with the import map base (both derived from
+  // cwd). Pre-building an absolute file:// URL on the Node side encodes paths
+  // differently from Deno (e.g. '~' in Windows 8.3 short names), which breaks
+  // import map prefix matching on Deno 2.8+.
+  const func = await import("./" + manifest.functions[functionName]);
   const res = await func.default(req);
 
   responses[functionName] = await res.text();