feat: support wasm in mv3

cspell.json

@@ -129,6 +129,7 @@
         "linkedin",
         "linkswap",
         "locationchange",
+        "lockdown",
         "maarten",
         "macbinary",
         "majeure",

packages/mask/.webpack/config.ts

@@ -20,7 +20,7 @@ import './clean-hmr'
 
 export function createConfiguration(rawFlags: BuildFlags): Configuration {
     const normalizedFlags = normalizeBuildFlags(rawFlags)
-    const { sourceMapKind } = computedBuildFlags(normalizedFlags)
+    const { sourceMapKind, supportWebAssembly } = computedBuildFlags(normalizedFlags)
     const { hmr, mode, profiling, reactRefresh, readonlyCache, reproducibleBuild, runtime, outputPath } =
         normalizedFlags
 
@@ -39,7 +39,7 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
         devtool: sourceMapKind,
         target: ['web', 'es2019'],
         entry: {},
-        experiments: { backCompat: false, asyncWebAssembly: true },
+        experiments: { backCompat: false, asyncWebAssembly: supportWebAssembly },
         cache: {
             type: 'filesystem',
             buildDependencies: { config: [__filename] },
@@ -124,6 +124,14 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
             rules: [
                 // Opt in source map
                 { test: /(async-call|webextension).+\.js$/, enforce: 'pre', use: ['source-map-loader'] },
+                // Manifest v3 does not support
+                !supportWebAssembly
+                    ? {
+                          test: /\.wasm?$/,
+                          loader: require.resolve('./wasm-to-asm.ts'),
+                          type: 'javascript/auto',
+                      }
+                    : undefined!,
                 // TypeScript
                 {
                     test: /\.tsx?$/,
@@ -265,6 +273,7 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
         } as DevServerConfiguration,
         stats: process.env.CI ? 'errors-warnings' : undefined,
     }
+    baseConfig.module!.rules = baseConfig.module!.rules!.filter(Boolean)
 
     const plugins = baseConfig.plugins!
     const entries: Record<string, EntryDescription> = (baseConfig.entry = {

packages/mask/.webpack/flags.ts

@@ -38,16 +38,18 @@ export function normalizeBuildFlags(flags: BuildFlags) {
 export function computedBuildFlags(flags: ReturnType<typeof normalizeBuildFlags>) {
     const { runtime, mode } = flags
     let sourceMapKind: Configuration['devtool'] = false
+    let supportWebAssembly = true
     if (runtime.engine === 'safari' && runtime.architecture === 'app') {
         // Due to webextension-polyfill, eval on iOS is async.
         sourceMapKind = false
     } else if (runtime.manifest === 3 && mode === 'development') {
         // MV3 does not allow eval even in production
         sourceMapKind = 'inline-cheap-source-map'
+        supportWebAssembly = false
     } else if (mode === 'development') {
         sourceMapKind = 'eval-cheap-source-map'
     } else {
         sourceMapKind = false
     }
-    return { sourceMapKind, lockdown: mode === 'development' } as const
+    return { sourceMapKind, lockdown: mode === 'development', supportWebAssembly } as const
 }

packages/mask/.webpack/wasm-to-asm.ts

@@ -0,0 +1,22 @@
+import { spawn } from 'child_process'
+import { join, relative } from 'path'
+import { LoaderContext } from 'webpack'
+
+export default function loader(this: LoaderContext<any>, source: Buffer) {
+    return new Promise((resolve, reject) => {
+        // cspell:ignore binaryen
+        const cli = join(__dirname, '../node_modules/binaryen/bin/wasm2js')
+        const child = spawn(process.execPath, [cli, relative(process.cwd(), this.resourcePath)], { cwd: process.cwd() })
+        const out: string[] = []
+        const err: string[] = []
+        child.stdout.setEncoding('utf-8')
+        child.stderr.setEncoding('utf-8')
+        child.stdout.on('data', (data) => out.push(data.toString()))
+        child.stderr.on('data', (data) => err.push(data.toString()))
+        child.on('close', (code) => {
+            if (code !== 0) reject(new Error(err.join('\n')))
+            else resolve(out.join(''))
+        })
+    })
+}
+loader.raw = true

packages/mask/package.json

@@ -133,6 +133,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
+    "binaryen": "^106.0.0",
     "copy-webpack-plugin": "^10.2.4",
     "html-webpack-plugin": "^5.5.0",
     "react-devtools-core": "^4.23.0",

packages/mask/web-workers/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@masknet/global-types/webpack" />
+/// <reference types="@masknet/global-types/flag" />

packages/mask/web-workers/wallet.ts

@@ -4,10 +4,19 @@ import type { api } from '@dimensiondev/mask-wallet-core/proto'
 export type Input = { id: number; data: api.IMWRequest }
 export type Output = { id: number; response: api.MWResponse }
 
+async function load() {
+    if (process.env.manifest === '3') {
+        return import('@dimensiondev/mask-wallet-core/bundle')
+    } else {
+        const { default: init, ...rest } = await import('@dimensiondev/mask-wallet-core/web')
+        // @ts-expect-error
+        await init()
+        return rest
+    }
+}
 const promise = (async () => {
-    const { request, default: init } = await import('@dimensiondev/mask-wallet-core/web')
+    const { request } = await load()
     const { api } = await import('@dimensiondev/mask-wallet-core/proto')
-    await init()
     return { request, api }
 })()