test(napi/parser): test wasi browser

Author: hi-ogawa

.github/workflows/ci.yml

@@ -115,6 +115,13 @@ jobs:
       - run: node napi/parser/scripts/fix-wasm-dts.mjs
       - run: cargo test --target wasm32-wasip1-threads ${TEST_FLAGS}
       - run: git diff --exit-code # Must commit everything
+      - name: Test wasi in browser
+        working-directory: napi/parser
+        run: |
+          pnpm run exec playwright install chromium
+          pnpm run build-wasi
+          pnpm run build-npm-dir
+          pnpm run test-browser
 
   typos:
     name: Spell Check

.gitignore

@@ -14,6 +14,7 @@ target/
 /tasks/compat_data/node_modules/
 /tasks/e2e/node_modules/
 /npm/*/node_modules
+/napi/*/npm-dir
 
 # vscode
 /editors/vscode/.vscode-test/

napi/parser/package.json

@@ -6,7 +6,10 @@
   "scripts": {
     "build-dev": "napi build --no-dts-cache --platform --js bindings.js",
     "build": "pnpm run build-dev --release",
-    "test": "vitest --typecheck run ./test && tsc",
+    "build-wasi": "pnpm run build-dev --release --target wasm32-wasip1-threads",
+    "build-npm-dir": "rm -rf npm-dir && napi create-npm-dirs --npm-dir npm-dir && pnpm napi artifacts --npm-dir npm-dir --output-dir .",
+    "test": "vitest --typecheck run ./test/ && tsc",
+    "test-browser": "vitest -c vitest.config.browser.mts",
     "bench": "vitest bench --run ./bench.bench.mjs"
   },
   "engines": {
@@ -48,6 +51,9 @@
   },
   "devDependencies": {
     "@codspeed/vitest-plugin": "^4.0.0",
+    "@napi-rs/wasm-runtime": "^0.2.7",
+    "@vitest/browser": "3.0.7",
+    "playwright": "^1.51.0",
     "vitest": "catalog:"
   },
   "napi": {

napi/parser/test-browser/parse.test.ts

@@ -0,0 +1,54 @@
+import { expect, test } from 'vitest';
+import { parseAsync, parseSync } from '../wasm.mjs';
+
+test('parseSync', () => {
+  const result = parseSync('test.js', 'ok');
+  expect(result.program).toMatchInlineSnapshot(`
+    {
+      "body": [
+        {
+          "end": 2,
+          "expression": {
+            "end": 2,
+            "name": "ok",
+            "start": 0,
+            "type": "Identifier",
+          },
+          "start": 0,
+          "type": "ExpressionStatement",
+        },
+      ],
+      "end": 2,
+      "hashbang": null,
+      "sourceType": "module",
+      "start": 0,
+      "type": "Program",
+    }
+  `);
+});
+
+test('parseAsync', async () => {
+  const result = await parseAsync('test.js', 'ok');
+  expect(result.program).toMatchInlineSnapshot(`
+    {
+      "body": [
+        {
+          "end": 2,
+          "expression": {
+            "end": 2,
+            "name": "ok",
+            "start": 0,
+            "type": "Identifier",
+          },
+          "start": 0,
+          "type": "ExpressionStatement",
+        },
+      ],
+      "end": 2,
+      "hashbang": null,
+      "sourceType": "module",
+      "start": 0,
+      "type": "Program",
+    }
+  `);
+});

napi/parser/vitest.config.browser.mts

@@ -0,0 +1,28 @@
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    dir: 'test-browser',
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@oxc-parser/binding-wasm32-wasi': path.resolve('npm-dir/wasm32-wasi'),
+    },
+  },
+  server: {
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
+  },
+});