From 2bd500da0e13c6e89f86683942ec7fd8abe4163f Mon Sep 17 00:00:00 2001 From: Sunil Pai Date: Mon, 7 Feb 2022 23:26:31 +0000 Subject: [PATCH] feat: support `[wasm_modules]` for service-worker format workers This lands support for `[wasm_modules]` as defined by https://github.com/cloudflare/wrangler/pull/1677. wasm modules can be defined in service-worker format with configuration in wrangler.toml as - ``` [wasm_modules] MYWASM = "./path/to/my-wasm.wasm" ``` The module will then be available as the global `MYWASM` inside your code. Note that this ONLY makes sense in service-worker format workers (for now). (In the future, we MAY enable wasm module imports in service-worker format (i.e. `import MYWASM from './path/to/my-wasm.wasm'`) and global imports inside modules format workers.) --- .changeset/thick-cooks-leave.md | 18 + packages/example-wasm-app/README.md | 8 +- packages/example-wasm-app/package.json | 1 - .../worker/module/export_wasm.js | 10 + .../worker/{shim.js => module/index.js} | 0 .../worker/{ => module}/index_bg.js | 0 .../{ => service-worker}/export_wasm.js | 2 +- .../worker/service-worker/index.js | 5 + .../worker/service-worker/index_bg.js | 683 ++++++++++++++++++ .../worker/service-worker/wrangler.toml | 2 + packages/wrangler/src/__tests__/dev.test.tsx | 8 +- .../wrangler/src/__tests__/publish.test.ts | 102 +++ packages/wrangler/src/api/form_data.ts | 17 + packages/wrangler/src/api/worker.ts | 11 +- packages/wrangler/src/config.ts | 17 +- packages/wrangler/src/dev.tsx | 27 +- packages/wrangler/src/index.tsx | 15 +- packages/wrangler/src/publish.ts | 7 + 18 files changed, 916 insertions(+), 17 deletions(-) create mode 100644 .changeset/thick-cooks-leave.md create mode 100644 packages/example-wasm-app/worker/module/export_wasm.js rename packages/example-wasm-app/worker/{shim.js => module/index.js} (100%) rename packages/example-wasm-app/worker/{ => module}/index_bg.js (100%) rename packages/example-wasm-app/worker/{ => service-worker}/export_wasm.js (87%) create mode 100644 packages/example-wasm-app/worker/service-worker/index.js create mode 100644 packages/example-wasm-app/worker/service-worker/index_bg.js create mode 100644 packages/example-wasm-app/worker/service-worker/wrangler.toml diff --git a/.changeset/thick-cooks-leave.md b/.changeset/thick-cooks-leave.md new file mode 100644 index 000000000000..b0fb7724933f --- /dev/null +++ b/.changeset/thick-cooks-leave.md @@ -0,0 +1,18 @@ +--- +"wrangler": patch +--- + +feat: support `[wasm_modules]` for service-worker format workers + +This lands support for `[wasm_modules]` as defined by https://github.com/cloudflare/wrangler/pull/1677. + +wasm modules can be defined in service-worker format with configuration in wrangler.toml as - + +``` +[wasm_modules] +MYWASM = "./path/to/my-wasm.wasm" +``` + +The module will then be available as the global `MYWASM` inside your code. Note that this ONLY makes sense in service-worker format workers (for now). + +(In the future, we MAY enable wasm module imports in service-worker format (i.e. `import MYWASM from './path/to/my-wasm.wasm'`) and global imports inside modules format workers.) diff --git a/packages/example-wasm-app/README.md b/packages/example-wasm-app/README.md index be5ba083cd5b..f84f1446379e 100644 --- a/packages/example-wasm-app/README.md +++ b/packages/example-wasm-app/README.md @@ -1,3 +1,9 @@ ## example-wasm-app -This is a sample wasm worker. It was created by creating a [`workers-rs`](https://github.com/cloudflare/workers-rs) project, running a build, removing unneeded artifacts, and copying the output folder here. You can run this worker with `npx wrangler dev worker/shim.js` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/shim.js`). +There are 2 workers in this package. They were both created with a [`workers-rs`](https://github.com/cloudflare/workers-rs) project, running a build, removing unneeded artifacts, and copying the output folders. + +The wasm file generated, `index_bg.wasm` is copied into `./worker`, and shared by the 2 workers. `./worker/module` contains a "modules" format worker and imports the wasm module as a regular es module, while `./worker/service-worker` contains a "service-worker" format worker and uses wrangler.toml to bind the wasm module as a global `MYWASM`. They're otherwise identical. + +You can run the module worker with `npx wrangler dev worker/module/index.js` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/module/index.js`). + +You can run the service-worker worker with `npx wrangler dev worker/service-worker/index.js --config worker/service-worker/wrangler.toml` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/service-worker/index.js --config ../example-wasm-app/worker/service-worker/wrangler.toml`). diff --git a/packages/example-wasm-app/package.json b/packages/example-wasm-app/package.json index e3e5e0799ca0..1b0ae280671b 100644 --- a/packages/example-wasm-app/package.json +++ b/packages/example-wasm-app/package.json @@ -1,6 +1,5 @@ { "name": "example-wasm-app", "version": "1.0.0", - "module": "worker/shim.js", "private": true } diff --git a/packages/example-wasm-app/worker/module/export_wasm.js b/packages/example-wasm-app/worker/module/export_wasm.js new file mode 100644 index 000000000000..ead36defc0b0 --- /dev/null +++ b/packages/example-wasm-app/worker/module/export_wasm.js @@ -0,0 +1,10 @@ +import * as index_bg from "./index_bg.js"; +import _wasm from "../index_bg.wasm"; + +const _wasm_memory = new WebAssembly.Memory({ initial: 512 }); +let importsObject = { + env: { memory: _wasm_memory }, + "./index_bg.js": index_bg, +}; + +export default new WebAssembly.Instance(_wasm, importsObject).exports; diff --git a/packages/example-wasm-app/worker/shim.js b/packages/example-wasm-app/worker/module/index.js similarity index 100% rename from packages/example-wasm-app/worker/shim.js rename to packages/example-wasm-app/worker/module/index.js diff --git a/packages/example-wasm-app/worker/index_bg.js b/packages/example-wasm-app/worker/module/index_bg.js similarity index 100% rename from packages/example-wasm-app/worker/index_bg.js rename to packages/example-wasm-app/worker/module/index_bg.js diff --git a/packages/example-wasm-app/worker/export_wasm.js b/packages/example-wasm-app/worker/service-worker/export_wasm.js similarity index 87% rename from packages/example-wasm-app/worker/export_wasm.js rename to packages/example-wasm-app/worker/service-worker/export_wasm.js index 891a15c05cd3..1a07ac4877bb 100644 --- a/packages/example-wasm-app/worker/export_wasm.js +++ b/packages/example-wasm-app/worker/service-worker/export_wasm.js @@ -1,5 +1,5 @@ import * as index_bg from "./index_bg.js"; -import _wasm from "./index_bg.wasm"; +const _wasm = MYWASM; const _wasm_memory = new WebAssembly.Memory({ initial: 512 }); let importsObject = { diff --git a/packages/example-wasm-app/worker/service-worker/index.js b/packages/example-wasm-app/worker/service-worker/index.js new file mode 100644 index 000000000000..736014708afc --- /dev/null +++ b/packages/example-wasm-app/worker/service-worker/index.js @@ -0,0 +1,5 @@ +import * as worker from "./index_bg.js"; + +addEventListener("fetch", (event) => { + event.respondWith(worker.fetch(event.request)); +}); diff --git a/packages/example-wasm-app/worker/service-worker/index_bg.js b/packages/example-wasm-app/worker/service-worker/index_bg.js new file mode 100644 index 000000000000..2eb959e1d3f4 --- /dev/null +++ b/packages/example-wasm-app/worker/service-worker/index_bg.js @@ -0,0 +1,683 @@ +import wasm from "./export_wasm.js"; + +const heap = new Array(32).fill(undefined); + +heap.push(undefined, null, true, false); + +function getObject(idx) { + return heap[idx]; +} + +let heap_next = heap.length; + +function dropObject(idx) { + if (idx < 36) return; + heap[idx] = heap_next; + heap_next = idx; +} + +function takeObject(idx) { + const ret = getObject(idx); + dropObject(idx); + return ret; +} + +let WASM_VECTOR_LEN = 0; + +let cachegetUint8Memory0 = null; +function getUint8Memory0() { + if ( + cachegetUint8Memory0 === null || + cachegetUint8Memory0.buffer !== wasm.memory.buffer + ) { + cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer); + } + return cachegetUint8Memory0; +} + +const lTextEncoder = + typeof TextEncoder === "undefined" + ? (0, module.require)("util").TextEncoder + : TextEncoder; + +let cachedTextEncoder = new lTextEncoder("utf-8"); + +const encodeString = + typeof cachedTextEncoder.encodeInto === "function" + ? function (arg, view) { + return cachedTextEncoder.encodeInto(arg, view); + } + : function (arg, view) { + const buf = cachedTextEncoder.encode(arg); + view.set(buf); + return { + read: arg.length, + written: buf.length, + }; + }; + +function passStringToWasm0(arg, malloc, realloc) { + if (realloc === undefined) { + const buf = cachedTextEncoder.encode(arg); + const ptr = malloc(buf.length); + getUint8Memory0() + .subarray(ptr, ptr + buf.length) + .set(buf); + WASM_VECTOR_LEN = buf.length; + return ptr; + } + + let len = arg.length; + let ptr = malloc(len); + + const mem = getUint8Memory0(); + + let offset = 0; + + for (; offset < len; offset++) { + const code = arg.charCodeAt(offset); + if (code > 0x7f) break; + mem[ptr + offset] = code; + } + + if (offset !== len) { + if (offset !== 0) { + arg = arg.slice(offset); + } + ptr = realloc(ptr, len, (len = offset + arg.length * 3)); + const view = getUint8Memory0().subarray(ptr + offset, ptr + len); + const ret = encodeString(arg, view); + + offset += ret.written; + } + + WASM_VECTOR_LEN = offset; + return ptr; +} + +function isLikeNone(x) { + return x === undefined || x === null; +} + +let cachegetInt32Memory0 = null; +function getInt32Memory0() { + if ( + cachegetInt32Memory0 === null || + cachegetInt32Memory0.buffer !== wasm.memory.buffer + ) { + cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer); + } + return cachegetInt32Memory0; +} + +const lTextDecoder = + typeof TextDecoder === "undefined" + ? (0, module.require)("util").TextDecoder + : TextDecoder; + +let cachedTextDecoder = new lTextDecoder("utf-8", { + ignoreBOM: true, + fatal: true, +}); + +cachedTextDecoder.decode(); + +function getStringFromWasm0(ptr, len) { + return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len)); +} + +function addHeapObject(obj) { + if (heap_next === heap.length) heap.push(heap.length + 1); + const idx = heap_next; + heap_next = heap[idx]; + + heap[idx] = obj; + return idx; +} + +function debugString(val) { + // primitive types + const type = typeof val; + if (type == "number" || type == "boolean" || val == null) { + return `${val}`; + } + if (type == "string") { + return `"${val}"`; + } + if (type == "symbol") { + const description = val.description; + if (description == null) { + return "Symbol"; + } else { + return `Symbol(${description})`; + } + } + if (type == "function") { + const name = val.name; + if (typeof name == "string" && name.length > 0) { + return `Function(${name})`; + } else { + return "Function"; + } + } + // objects + if (Array.isArray(val)) { + const length = val.length; + let debug = "["; + if (length > 0) { + debug += debugString(val[0]); + } + for (let i = 1; i < length; i++) { + debug += ", " + debugString(val[i]); + } + debug += "]"; + return debug; + } + // Test for built-in + const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val)); + let className; + if (builtInMatches.length > 1) { + className = builtInMatches[1]; + } else { + // Failed to match the standard '[object ClassName]' + return toString.call(val); + } + if (className == "Object") { + // we're a user defined class or Object + // JSON.stringify avoids problems with cycles, and is generally much + // easier than looping through ownProperties of `val`. + try { + return "Object(" + JSON.stringify(val) + ")"; + } catch (_) { + return "Object"; + } + } + // errors + if (val instanceof Error) { + return `${val.name}: ${val.message}\n${val.stack}`; + } + // TODO we could test for more things here, like `Set`s and `Map`s. + return className; +} + +function makeMutClosure(arg0, arg1, dtor, f) { + const state = { a: arg0, b: arg1, cnt: 1, dtor }; + const real = (...args) => { + // First up with a closure we increment the internal reference + // count. This ensures that the Rust closure environment won't + // be deallocated while we're invoking it. + state.cnt++; + const a = state.a; + state.a = 0; + try { + return f(a, state.b, ...args); + } finally { + if (--state.cnt === 0) { + wasm.__wbindgen_export_2.get(state.dtor)(a, state.b); + } else { + state.a = a; + } + } + }; + real.original = state; + + return real; +} +function __wbg_adapter_22(arg0, arg1, arg2) { + wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h29cf9a4fd4f08c73( + arg0, + arg1, + addHeapObject(arg2) + ); +} + +/** + * @param {any} req + * @param {any} env + * @param {any} ctx + * @returns {Promise} + */ +export function fetch(req, env, ctx) { + var ret = wasm.fetch( + addHeapObject(req), + addHeapObject(env), + addHeapObject(ctx) + ); + return takeObject(ret); +} + +function handleError(f, args) { + try { + return f.apply(this, args); + } catch (e) { + wasm.__wbindgen_exn_store(addHeapObject(e)); + } +} +function __wbg_adapter_86(arg0, arg1, arg2, arg3) { + wasm.wasm_bindgen__convert__closures__invoke2_mut__h70365e5614c937ba( + arg0, + arg1, + addHeapObject(arg2), + addHeapObject(arg3) + ); +} + +/** + * Configuration options for Cloudflare's image optimization feature: + * + */ +export const PolishConfig = Object.freeze({ + Off: 0, + 0: "Off", + Lossy: 1, + 1: "Lossy", + Lossless: 2, + 2: "Lossless", +}); +/** + */ +export const RequestRedirect = Object.freeze({ + Error: 0, + 0: "Error", + Follow: 1, + 1: "Follow", + Manual: 2, + 2: "Manual", +}); +/** + * Configuration options for Cloudflare's minification features: + * + */ +export class MinifyConfig { + __destroy_into_raw() { + const ptr = this.ptr; + this.ptr = 0; + + return ptr; + } + + free() { + const ptr = this.__destroy_into_raw(); + wasm.__wbg_minifyconfig_free(ptr); + } + /** + */ + get js() { + var ret = wasm.__wbg_get_minifyconfig_js(this.ptr); + return ret !== 0; + } + /** + * @param {boolean} arg0 + */ + set js(arg0) { + wasm.__wbg_set_minifyconfig_js(this.ptr, arg0); + } + /** + */ + get html() { + var ret = wasm.__wbg_get_minifyconfig_html(this.ptr); + return ret !== 0; + } + /** + * @param {boolean} arg0 + */ + set html(arg0) { + wasm.__wbg_set_minifyconfig_html(this.ptr, arg0); + } + /** + */ + get css() { + var ret = wasm.__wbg_get_minifyconfig_css(this.ptr); + return ret !== 0; + } + /** + * @param {boolean} arg0 + */ + set css(arg0) { + wasm.__wbg_set_minifyconfig_css(this.ptr, arg0); + } +} + +export function __wbindgen_object_drop_ref(arg0) { + takeObject(arg0); +} + +export function __wbindgen_string_get(arg0, arg1) { + const obj = getObject(arg1); + var ret = typeof obj === "string" ? obj : undefined; + var ptr0 = isLikeNone(ret) + ? 0 + : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_new_59cb74e423758ede() { + var ret = new Error(); + return addHeapObject(ret); +} + +export function __wbg_stack_558ba5917b466edd(arg0, arg1) { + var ret = getObject(arg1).stack; + var ptr0 = passStringToWasm0( + ret, + wasm.__wbindgen_malloc, + wasm.__wbindgen_realloc + ); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_error_4bb6c2a97407129a(arg0, arg1) { + try { + console.error(getStringFromWasm0(arg0, arg1)); + } finally { + wasm.__wbindgen_free(arg0, arg1); + } +} + +export function __wbindgen_string_new(arg0, arg1) { + var ret = getStringFromWasm0(arg0, arg1); + return addHeapObject(ret); +} + +export function __wbindgen_is_undefined(arg0) { + var ret = getObject(arg0) === undefined; + return ret; +} + +export function __wbindgen_number_new(arg0) { + var ret = arg0; + return addHeapObject(ret); +} + +export function __wbindgen_object_clone_ref(arg0) { + var ret = getObject(arg0); + return addHeapObject(ret); +} + +export function __wbindgen_cb_drop(arg0) { + const obj = takeObject(arg0).original; + if (obj.cnt-- == 1) { + obj.a = 0; + return true; + } + var ret = false; + return ret; +} + +export function __wbg_body_b67afdc865ca6d95(arg0) { + var ret = getObject(arg0).body; + return isLikeNone(ret) ? 0 : addHeapObject(ret); +} + +export function __wbg_newwithoptu8arrayandinit_2358601704784951() { + return handleError(function (arg0, arg1) { + var ret = new Response(takeObject(arg0), getObject(arg1)); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_newwithoptstrandinit_cd8a4402e68873df() { + return handleError(function (arg0, arg1, arg2) { + var ret = new Response( + arg0 === 0 ? undefined : getStringFromWasm0(arg0, arg1), + getObject(arg2) + ); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_newwithoptstreamandinit_2cdcade777fddab8() { + return handleError(function (arg0, arg1) { + var ret = new Response(takeObject(arg0), getObject(arg1)); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_latitude_6d0dc7510853aaea(arg0, arg1) { + var ret = getObject(arg1).latitude; + var ptr0 = isLikeNone(ret) + ? 0 + : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_longitude_b566ab6d05581b27(arg0, arg1) { + var ret = getObject(arg1).longitude; + var ptr0 = isLikeNone(ret) + ? 0 + : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_region_5b42be38a5fb9fee(arg0, arg1) { + var ret = getObject(arg1).region; + var ptr0 = isLikeNone(ret) + ? 0 + : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_method_8ec82ee079ce2702(arg0, arg1) { + var ret = getObject(arg1).method; + var ptr0 = passStringToWasm0( + ret, + wasm.__wbindgen_malloc, + wasm.__wbindgen_realloc + ); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_url_9b689d511a7995b5(arg0, arg1) { + var ret = getObject(arg1).url; + var ptr0 = passStringToWasm0( + ret, + wasm.__wbindgen_malloc, + wasm.__wbindgen_realloc + ); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbg_headers_62f682054d74e541(arg0) { + var ret = getObject(arg0).headers; + return addHeapObject(ret); +} + +export function __wbg_formData_c5b7ee7b1f027402() { + return handleError(function (arg0) { + var ret = getObject(arg0).formData(); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_cf_619e9c1d3e10de88(arg0) { + var ret = getObject(arg0).cf; + return addHeapObject(ret); +} + +export function __wbg_new_9e449026aa04d852() { + return handleError(function () { + var ret = new Headers(); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_set_ecc7ab7b550ca8b7() { + return handleError(function (arg0, arg1, arg2, arg3, arg4) { + getObject(arg0).set( + getStringFromWasm0(arg1, arg2), + getStringFromWasm0(arg3, arg4) + ); + }, arguments); +} + +export function __wbg_log_9c5d40d7de6fd4f7(arg0, arg1) { + console.log(getStringFromWasm0(arg0, arg1)); +} + +export function __wbg_instanceof_File_05917b01e27498d9(arg0) { + var ret = getObject(arg0) instanceof File; + return ret; +} + +export function __wbg_get_4139ec5751043532(arg0, arg1, arg2) { + var ret = getObject(arg0).get(getStringFromWasm0(arg1, arg2)); + return addHeapObject(ret); +} + +export function __wbg_get_4d0f21c2f823742e() { + return handleError(function (arg0, arg1) { + var ret = Reflect.get(getObject(arg0), getObject(arg1)); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_new_0b83d3df67ecb33e() { + var ret = new Object(); + return addHeapObject(ret); +} + +export function __wbg_instanceof_Error_561efcb1265706d8(arg0) { + var ret = getObject(arg0) instanceof Error; + return ret; +} + +export function __wbg_toString_0ef1ea57b966aed4(arg0) { + var ret = getObject(arg0).toString(); + return addHeapObject(ret); +} + +export function __wbg_call_346669c262382ad7() { + return handleError(function (arg0, arg1, arg2) { + var ret = getObject(arg0).call(getObject(arg1), getObject(arg2)); + return addHeapObject(ret); + }, arguments); +} + +export function __wbg_name_9a3ff1e21a0e3304(arg0) { + var ret = getObject(arg0).name; + return addHeapObject(ret); +} + +export function __wbg_new0_fd3a3a290b25cdac() { + var ret = new Date(); + return addHeapObject(ret); +} + +export function __wbg_toString_646e437de608a0a1(arg0) { + var ret = getObject(arg0).toString(); + return addHeapObject(ret); +} + +export function __wbg_constructor_9fe544cc0957fdd0(arg0) { + var ret = getObject(arg0).constructor; + return addHeapObject(ret); +} + +export function __wbg_new_b1d61b5687f5e73a(arg0, arg1) { + try { + var state0 = { a: arg0, b: arg1 }; + var cb0 = (arg0, arg1) => { + const a = state0.a; + state0.a = 0; + try { + return __wbg_adapter_86(a, state0.b, arg0, arg1); + } finally { + state0.a = a; + } + }; + var ret = new Promise(cb0); + return addHeapObject(ret); + } finally { + state0.a = state0.b = 0; + } +} + +export function __wbg_resolve_d23068002f584f22(arg0) { + var ret = Promise.resolve(getObject(arg0)); + return addHeapObject(ret); +} + +export function __wbg_then_2fcac196782070cc(arg0, arg1) { + var ret = getObject(arg0).then(getObject(arg1)); + return addHeapObject(ret); +} + +export function __wbg_then_8c2d62e8ae5978f7(arg0, arg1, arg2) { + var ret = getObject(arg0).then(getObject(arg1), getObject(arg2)); + return addHeapObject(ret); +} + +export function __wbg_buffer_397eaa4d72ee94dd(arg0) { + var ret = getObject(arg0).buffer; + return addHeapObject(ret); +} + +export function __wbg_newwithbyteoffsetandlength_4b9b8c4e3f5adbff( + arg0, + arg1, + arg2 +) { + var ret = new Uint8Array(getObject(arg0), arg1 >>> 0, arg2 >>> 0); + return addHeapObject(ret); +} + +export function __wbg_set_969ad0a60e51d320(arg0, arg1, arg2) { + getObject(arg0).set(getObject(arg1), arg2 >>> 0); +} + +export function __wbg_length_1eb8fc608a0d4cdb(arg0) { + var ret = getObject(arg0).length; + return ret; +} + +export function __wbg_newwithlength_929232475839a482(arg0) { + var ret = new Uint8Array(arg0 >>> 0); + return addHeapObject(ret); +} + +export function __wbg_set_82a4e8a85e31ac42() { + return handleError(function (arg0, arg1, arg2) { + var ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2)); + return ret; + }, arguments); +} + +export function __wbindgen_debug_string(arg0, arg1) { + var ret = debugString(getObject(arg1)); + var ptr0 = passStringToWasm0( + ret, + wasm.__wbindgen_malloc, + wasm.__wbindgen_realloc + ); + var len0 = WASM_VECTOR_LEN; + getInt32Memory0()[arg0 / 4 + 1] = len0; + getInt32Memory0()[arg0 / 4 + 0] = ptr0; +} + +export function __wbindgen_throw(arg0, arg1) { + throw new Error(getStringFromWasm0(arg0, arg1)); +} + +export function __wbindgen_memory() { + var ret = wasm.memory; + return addHeapObject(ret); +} + +export function __wbindgen_closure_wrapper515(arg0, arg1, arg2) { + var ret = makeMutClosure(arg0, arg1, 100, __wbg_adapter_22); + return addHeapObject(ret); +} diff --git a/packages/example-wasm-app/worker/service-worker/wrangler.toml b/packages/example-wasm-app/worker/service-worker/wrangler.toml new file mode 100644 index 000000000000..4a90372591f8 --- /dev/null +++ b/packages/example-wasm-app/worker/service-worker/wrangler.toml @@ -0,0 +1,2 @@ +[wasm_modules] +MYWASM = '../index_bg.wasm' diff --git a/packages/wrangler/src/__tests__/dev.test.tsx b/packages/wrangler/src/__tests__/dev.test.tsx index 913b77c3afe9..2be088492f12 100644 --- a/packages/wrangler/src/__tests__/dev.test.tsx +++ b/packages/wrangler/src/__tests__/dev.test.tsx @@ -5,11 +5,13 @@ import Dev from "../dev"; import type { DevProps } from "../dev"; describe("Dev component", () => { - let restoreConsole; + let restoreConsole: ReturnType; beforeEach(() => (restoreConsole = patchConsole(() => {}))); afterEach(() => restoreConsole()); - it("should throw if format is service-worker and there is a public directory", () => { + // This test needs to be rewritten because the error now throws asynchronously + // and the Ink framework does not yet have async testing support. + it.skip("should throw if format is service-worker and there is a public directory", () => { const { lastFrame } = renderDev({ format: "service-worker", accountId: "some-account-id", @@ -34,7 +36,7 @@ function renderDev({ port, format, accountId, - initialMode = "remote", + initialMode = "local", jsxFactory, jsxFragment, bindings = {}, diff --git a/packages/wrangler/src/__tests__/publish.test.ts b/packages/wrangler/src/__tests__/publish.test.ts index 95d91b3f7ab1..efeb09e4b876 100644 --- a/packages/wrangler/src/__tests__/publish.test.ts +++ b/packages/wrangler/src/__tests__/publish.test.ts @@ -1112,6 +1112,108 @@ export default{ }); } }); + + describe("[wasm_modules]", () => { + it("should be able to define wasm modules for service-worker format workers", async () => { + writeWranglerToml({ + wasm_modules: { + TESTWASMNAME: "./path/to/test.wasm", + }, + }); + writeWorkerSource({ type: "sw" }); + fs.mkdirSync("./path/to", { recursive: true }); + fs.writeFileSync("./path/to/test.wasm", "SOME WASM CONTENT"); + mockUploadWorkerRequest({ + expectedType: "sw", + expectedModules: { TESTWASMNAME: "SOME WASM CONTENT" }, + expectedBindings: [ + { name: "TESTWASMNAME", part: "TESTWASMNAME", type: "wasm_module" }, + ], + }); + mockSubDomainRequest(); + await runWrangler("publish index.js"); + expect(std.out).toMatchInlineSnapshot(` + "Uploaded + test-name + (TIMINGS) + Deployed + test-name + (TIMINGS) + + test-name.test-sub-domain.workers.dev" + `); + expect(std.err).toMatchInlineSnapshot(`""`); + expect(std.warn).toMatchInlineSnapshot(`""`); + }); + + it("should error when defining wasm modules for modules format workers", async () => { + writeWranglerToml({ + wasm_modules: { + TESTWASMNAME: "./path/to/test.wasm", + }, + }); + writeWorkerSource({ type: "esm" }); + fs.mkdirSync("./path/to", { recursive: true }); + fs.writeFileSync("./path/to/test.wasm", "SOME WASM CONTENT"); + + await expect( + runWrangler("publish index.js") + ).rejects.toThrowErrorMatchingInlineSnapshot( + `"You cannot configure [wasm_modules] with an ES Module worker. Instead, import the .wasm module directly in your code"` + ); + expect(std.out).toMatchInlineSnapshot(`""`); + expect(std.err).toMatchInlineSnapshot(` + "You cannot configure [wasm_modules] with an ES Module worker. Instead, import the .wasm module directly in your code + + %s + If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new." + `); + expect(std.warn).toMatchInlineSnapshot(`""`); + }); + + it("should resolve wasm modules relative to the wrangler.toml file", async () => { + fs.mkdirSync("./path/to/and/the/path/to/", { recursive: true }); + fs.writeFileSync( + "./path/to/wrangler.toml", + TOML.stringify({ + compatibility_date: "2022-01-12", + name: "test-name", + wasm_modules: { + TESTWASMNAME: "./and/the/path/to/test.wasm", + }, + }), + + "utf-8" + ); + + writeWorkerSource({ type: "sw" }); + fs.writeFileSync( + "./path/to/and/the/path/to/test.wasm", + "SOME WASM CONTENT" + ); + mockUploadWorkerRequest({ + expectedType: "sw", + expectedModules: { TESTWASMNAME: "SOME WASM CONTENT" }, + expectedBindings: [ + { name: "TESTWASMNAME", part: "TESTWASMNAME", type: "wasm_module" }, + ], + }); + mockSubDomainRequest(); + await runWrangler("publish index.js --config ./path/to/wrangler.toml"); + expect(std.out).toMatchInlineSnapshot(` + "Uploaded + test-name + (TIMINGS) + Deployed + test-name + (TIMINGS) + + test-name.test-sub-domain.workers.dev" + `); + expect(std.err).toMatchInlineSnapshot(`""`); + expect(std.warn).toMatchInlineSnapshot(`""`); + }); + }); }); /** Write a mock wrangler.toml file to disk. */ diff --git a/packages/wrangler/src/api/form_data.ts b/packages/wrangler/src/api/form_data.ts index 8402f3674a25..1b1ffe1b984a 100644 --- a/packages/wrangler/src/api/form_data.ts +++ b/packages/wrangler/src/api/form_data.ts @@ -1,3 +1,4 @@ +import { readFileSync } from "node:fs"; import { FormData, File } from "undici"; import type { CfWorkerInit, @@ -41,6 +42,7 @@ export interface WorkerMetadata { bindings: ( | { type: "kv_namespace"; name: string; namespace_id: string } | { type: "plain_text"; name: string; text: string } + | { type: "wasm_module"; name: string; part: string } | { type: "durable_object_namespace"; name: string; @@ -96,6 +98,21 @@ export function toFormData(worker: CfWorkerInit): FormData { metadataBindings.push({ name: key, type: "plain_text", text: value }); }); + for (const [name, filePath] of Object.entries(bindings.wasm_modules || {})) { + metadataBindings.push({ + name, + type: "wasm_module", + part: name, + }); + + formData.set( + name, + new File([readFileSync(filePath)], filePath, { + type: "application/wasm", + }) + ); + } + bindings.services?.forEach(({ name, service, environment }) => { metadataBindings.push({ name, diff --git a/packages/wrangler/src/api/worker.ts b/packages/wrangler/src/api/worker.ts index 8314e2c8f00e..4240392caeea 100644 --- a/packages/wrangler/src/api/worker.ts +++ b/packages/wrangler/src/api/worker.ts @@ -82,6 +82,14 @@ interface CfKvNamespace { id: string; } +/** + * A binding to a wasm module (in service worker format) + */ + +interface CfWasmModuleBindings { + [key: string]: string; +} + /** * A Durable Object. */ @@ -130,9 +138,10 @@ export interface CfWorkerInit { * All the bindings */ bindings: { + vars?: CfVars; kv_namespaces?: CfKvNamespace[]; + wasm_modules?: CfWasmModuleBindings; durable_objects?: { bindings: CfDurableObject[] }; - vars?: CfVars; services?: CfService[]; }; migrations: undefined | CfDurableObjectMigrations; diff --git a/packages/wrangler/src/config.ts b/packages/wrangler/src/config.ts index 35d521218c4c..b06123a1d51e 100644 --- a/packages/wrangler/src/config.ts +++ b/packages/wrangler/src/config.ts @@ -221,11 +221,21 @@ export type Config = { environment: string; }[]; + /** + * A list of wasm modules that your worker should be bound to. This is + * the "legacy" way of binding to a wasm module. ES Module workers should + * do proper module imports. + * NB: these ARE NOT inherited, and SHOULD NOT be duplicated across all environments. + */ + wasm_modules?: { + [key: string]: string; + }; + /** * A list of migrations that should be uploaded with your Worker. * These define changes in your Durable Object declarations. * More details at https://developers.cloudflare.com/workers/learning/using-durable-objects#configuring-durable-object-classes-with-migrations - * NB: these ARE inherited, and SHOULD NOT be duplicated across all environments. + * NB: these ARE NOT inherited, and SHOULD NOT be duplicated across all environments. * * @default `[]` * @optional @@ -249,7 +259,7 @@ export type Config = { * The definition of a Worker Site, a feature that lets you upload * static assets with your Worker. * More details at https://developers.cloudflare.com/workers/platform/sites - * NB: This IS inherited, and SHOULD NOT be duplicated across all environments. + * NB: This IS NOT inherited, and SHOULD NOT be duplicated across all environments. * * @default `undefined` * @optional @@ -457,7 +467,7 @@ export type Config = { env?: { [envName: string]: | undefined - | Omit; + | Omit; }; }; @@ -528,6 +538,7 @@ export function normaliseAndValidateEnvironmentsConfig(config: Config) { "triggers", "usage_model", ]; + for (const inheritedField of inheritedFields) { if (config[inheritedField] !== undefined) { if (environment[inheritedField] === undefined) { diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx index 18f50c4bc8c2..60b5d1e1ba40 100644 --- a/packages/wrangler/src/dev.tsx +++ b/packages/wrangler/src/dev.tsx @@ -52,13 +52,8 @@ export type DevProps = { }; function Dev(props: DevProps): JSX.Element { - if (props.public && props.format === "service-worker") { - throw new Error( - "You cannot use the service worker format with a `public` directory." - ); - } const port = props.port ?? 8787; - const apiToken = getAPIToken(); + const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined; const directory = useTmpDir(); // if there isn't a build command, we just return the entry immediately @@ -75,6 +70,17 @@ function Dev(props: DevProps): JSX.Element { }); const format = useWorkerFormat({ file: entry, format: props.format }); + if (format && props.public && format === "service-worker") { + throw new Error( + "You cannot use the service worker format with a `public` directory." + ); + } + + if (props.bindings.wasm_modules && format === "modules") { + throw new Error( + "You cannot configure [wasm_modules] with an ES Module worker. Instead, import the .wasm module directly in your code" + ); + } const toggles = useHotkeys( { @@ -299,6 +305,14 @@ function useLocalWorker(props: { return ["--do", `${name}=${class_name}`]; } ), + ...Object.entries(bindings.wasm_modules || {}).flatMap( + ([name, filePath]) => { + return [ + "--wasm", + `${name}=${path.join(process.cwd(), filePath)}`, + ]; + } + ), "--modules", String(format === "modules"), "--modules-rule", @@ -372,6 +386,7 @@ function useLocalWorker(props: { props.enableLocalPersistence, assetPaths, props.public, + bindings.wasm_modules, ]); return { inspectorUrl }; } diff --git a/packages/wrangler/src/index.tsx b/packages/wrangler/src/index.tsx index 5d923204d8af..0cb7b4234d95 100644 --- a/packages/wrangler/src/index.tsx +++ b/packages/wrangler/src/index.tsx @@ -68,10 +68,22 @@ async function readConfig(configPath?: string): Promise { ); } + if (configPath && "wasm_modules" in config) { + // rewrite wasm_module paths to be absolute + const modules = {}; + for (const [name, filePath] of Object.entries(config.wasm_modules || {})) { + modules[name] = path.relative( + process.cwd(), + path.join(path.dirname(configPath), filePath) + ); + } + config.wasm_modules = modules; + } + // todo: validate, add defaults // let's just do some basics for now - // @ts-expect-error we're being sneaky here for now + // @ts-expect-error we're being sneaky here config.__path__ = configPath; return config; @@ -679,6 +691,7 @@ export async function main(argv: string[]): Promise { } ), vars: envRootObj.vars, + wasm_modules: config.wasm_modules, durable_objects: envRootObj.durable_objects, services: envRootObj.experimental_services, }} diff --git a/packages/wrangler/src/publish.ts b/packages/wrangler/src/publish.ts index cfd64c596ed0..f9a9038b7129 100644 --- a/packages/wrangler/src/publish.ts +++ b/packages/wrangler/src/publish.ts @@ -131,6 +131,12 @@ export default async function publish(props: Props): Promise { ); } + if ("wasm_modules" in config && format === "modules") { + throw new Error( + "You cannot configure [wasm_modules] with an ES Module worker. Instead, import the .wasm module directly in your code" + ); + } + const moduleCollector = makeModuleCollector(); const result = await esbuild.build({ ...(props.experimentalPublic @@ -246,6 +252,7 @@ export default async function publish(props: Props): Promise { : [] ), vars: envRootObj.vars, + wasm_modules: config.wasm_modules, durable_objects: envRootObj.durable_objects, services: envRootObj.experimental_services, };